Introduce Knative Serverless Tab

17 files changed, 529 insertions, 2 deletions

diff --git a/app/assets/javascripts/pages/projects/serverless/index.js b/app/assets/javascripts/pages/projects/serverless/index.js
new file mode 100644
index 00000000000..7b08620773c
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/serverless/index.js
@@ -0,0 +1,5 @@
+import ServerlessBundle from '~/serverless/serverless_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new ServerlessBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/serverless/components/empty_state.vue b/app/assets/javascripts/serverless/components/empty_state.vue
new file mode 100644
index 00000000000..2683805f2f7
--- /dev/null
+++ b/app/assets/javascripts/serverless/components/empty_state.vue
@@ -0,0 +1,40 @@
+<script>
+export default {
+  props: {
+    clustersPath: {
+      type: String,
+      required: true,
+    },
+    helpPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row empty-state js-empty-state">
+    <div class="col-12">
+      <div class="text-content">
+        <h4 class="state-title text-center">
+          {{ s__('Serverless|Getting started with serverless') }}
+        </h4>
+        <p class="state-description">
+          {{
+            s__(`Serverless| In order to start using functions as a service,
+                 you must first install Knative on your Kubernetes cluster.`)
+          }}
+
+          <a :href="helpPath"> {{ __('More information') }} </a>
+        </p>
+
+        <div class="text-center">
+          <a :href="clustersPath" class="btn btn-success">
+            {{ s__('Serverless|Install Knative') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/serverless/components/function_row.vue b/app/assets/javascripts/serverless/components/function_row.vue
new file mode 100644
index 00000000000..31f5427c771
--- /dev/null
+++ b/app/assets/javascripts/serverless/components/function_row.vue
@@ -0,0 +1,40 @@
+<script>
+import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Timeago,
+  },
+  props: {
+    func: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    name() {
+      return this.func.name;
+    },
+    url() {
+      return this.func.url;
+    },
+    image() {
+      return this.func.image;
+    },
+    timestamp() {
+      return this.func.created_at;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-responsive-table-row">
+    <div class="table-section section-20">{{ name }}</div>
+    <div class="table-section section-50">
+      <a :href="url">{{ url }}</a>
+    </div>
+    <div class="table-section section-20">{{ image }}</div>
+    <div class="table-section section-10"><timeago :time="timestamp" /></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
new file mode 100644
index 00000000000..7874a7b6b6a
--- /dev/null
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -0,0 +1,123 @@
+<script>
+import { GlSkeletonLoading } from '@gitlab/ui';
+import FunctionRow from './function_row.vue';
+import EmptyState from './empty_state.vue';
+
+export default {
+  components: {
+    FunctionRow,
+    EmptyState,
+    GlSkeletonLoading,
+  },
+  props: {
+    functions: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    installed: {
+      type: Boolean,
+      required: true,
+    },
+    clustersPath: {
+      type: String,
+      required: true,
+    },
+    helpPath: {
+      type: String,
+      required: true,
+    },
+    loadingData: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hasFunctionData: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <section id="serverless-functions">
+    <div v-if="installed">
+      <div v-if="hasFunctionData">
+        <div class="ci-table js-services-list function-element">
+          <div class="gl-responsive-table-row table-row-header" role="row">
+            <div class="table-section section-20" role="rowheader">
+              {{ s__('Serverless|Function') }}
+            </div>
+            <div class="table-section section-50" role="rowheader">
+              {{ s__('Serverless|Domain') }}
+            </div>
+            <div class="table-section section-20" role="rowheader">
+              {{ s__('Serverless|Runtime') }}
+            </div>
+            <div class="table-section section-10" role="rowheader">
+              {{ s__('Serverless|Last Update') }}
+            </div>
+          </div>
+          <template v-if="loadingData">
+            <div v-for="j in 3" :key="j" class="gl-responsive-table-row">
+              <gl-skeleton-loading />
+            </div>
+          </template>
+          <template v-else>
+            <function-row v-for="f in functions" :key="f.name" :func="f" />
+          </template>
+        </div>
+      </div>
+      <div v-else class="empty-state js-empty-state">
+        <div class="text-content">
+          <h4 class="state-title text-center">{{ s__('Serverless|No functions available') }}</h4>
+          <p class="state-description">
+            {{
+              s__(`Serverless|There is currently no function data available from Knative.
+                   This could be for a variety of reasons including:`)
+            }}
+          </p>
+          <ul>
+            <li>Your repository does not have a corresponding <code>serverless.yml</code> file.</li>
+            <li>Your <code>gitlab-ci.yml</code> file is not properly configured.</li>
+            <li>
+              The functions listed in the <code>serverless.yml</code> file don't match the namespace
+              of your cluster.
+            </li>
+            <li>The deploy job has not finished.</li>
+          </ul>
+
+          <p>
+            {{
+              s__(`Serverless|If you believe none of these apply, please check
+                   back later as the function data may be in the process of becoming
+                   available.`)
+            }}
+          </p>
+          <div class="text-center">
+            <a :href="helpPath" class="btn btn-success">
+              {{ s__('Serverless|Learn more about Serverless') }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <empty-state v-else :clusters-path="clustersPath" :help-path="helpPath" />
+  </section>
+</template>
+
+<style>
+.top-area {
+  border-bottom: 0;
+}
+
+.function-element {
+  border-bottom: 1px solid #e5e5e5;
+  border-bottom-color: rgb(229, 229, 229);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+</style>
diff --git a/app/assets/javascripts/serverless/event_hub.js b/app/assets/javascripts/serverless/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/serverless/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/serverless/serverless_bundle.js b/app/assets/javascripts/serverless/serverless_bundle.js
new file mode 100644
index 00000000000..3e3b81ba247
--- /dev/null
+++ b/app/assets/javascripts/serverless/serverless_bundle.js
@@ -0,0 +1,106 @@
+import Visibility from 'visibilityjs';
+import Vue from 'vue';
+import { s__ } from '../locale';
+import Flash from '../flash';
+import Poll from '../lib/utils/poll';
+import ServerlessStore from './stores/serverless_store';
+import GetFunctionsService from './services/get_functions_service';
+import Functions from './components/functions.vue';
+
+export default class Serverless {
+  constructor() {
+    const { statusPath, clustersPath, helpPath, installed } = document.querySelector(
+      '.js-serverless-functions-page',
+    ).dataset;
+
+    this.service = new GetFunctionsService(statusPath);
+    this.knativeInstalled = installed !== undefined;
+    this.store = new ServerlessStore(this.knativeInstalled, clustersPath, helpPath);
+    this.initServerless();
+    this.functionLoadCount = 0;
+
+    if (statusPath && this.knativeInstalled) {
+      this.initPolling();
+    }
+  }
+
+  initServerless() {
+    const { store } = this;
+    const el = document.querySelector('#js-serverless-functions');
+
+    this.functions = new Vue({
+      el,
+      data() {
+        return {
+          state: store.state,
+        };
+      },
+      render(createElement) {
+        return createElement(Functions, {
+          props: {
+            functions: this.state.functions,
+            installed: this.state.installed,
+            clustersPath: this.state.clustersPath,
+            helpPath: this.state.helpPath,
+            loadingData: this.state.loadingData,
+            hasFunctionData: this.state.hasFunctionData,
+          },
+        });
+      },
+    });
+  }
+
+  initPolling() {
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'fetchData',
+      successCallback: data => this.handleSuccess(data),
+      errorCallback: () => this.handleError(),
+    });
+
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    } else {
+      this.service
+        .fetchData()
+        .then(data => this.handleSuccess(data))
+        .catch(() => this.handleError());
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden() && !this.destroyed) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+  }
+
+  handleSuccess(data) {
+    if (data.status === 200) {
+      this.store.updateFunctionsFromServer(data.data);
+      this.store.updateLoadingState(false);
+    } else if (data.status === 204) {
+      /* Time out after 3 attempts to retrieve data */
+      this.functionLoadCount += 1;
+      if (this.functionLoadCount === 3) {
+        this.poll.stop();
+        this.store.toggleNoFunctionData();
+      }
+    }
+  }
+
+  static handleError() {
+    Flash(s__('Serverless|An error occurred while retrieving serverless components'));
+  }
+
+  destroy() {
+    this.destroyed = true;
+
+    if (this.poll) {
+      this.poll.stop();
+    }
+
+    this.functions.$destroy();
+  }
+}
diff --git a/app/assets/javascripts/serverless/services/get_functions_service.js b/app/assets/javascripts/serverless/services/get_functions_service.js
new file mode 100644
index 00000000000..303b42dc66c
--- /dev/null
+++ b/app/assets/javascripts/serverless/services/get_functions_service.js
@@ -0,0 +1,11 @@
+import axios from '~/lib/utils/axios_utils';
+
+export default class GetFunctionsService {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+  }
+
+  fetchData() {
+    return axios.get(this.endpoint);
+  }
+}
diff --git a/app/assets/javascripts/serverless/stores/serverless_store.js b/app/assets/javascripts/serverless/stores/serverless_store.js
new file mode 100644
index 00000000000..774c15b5b12
--- /dev/null
+++ b/app/assets/javascripts/serverless/stores/serverless_store.js
@@ -0,0 +1,24 @@
+export default class ServerlessStore {
+  constructor(knativeInstalled = false, clustersPath, helpPath) {
+    this.state = {
+      functions: [],
+      hasFunctionData: true,
+      loadingData: true,
+      installed: knativeInstalled,
+      clustersPath,
+      helpPath,
+    };
+  }
+
+  updateFunctionsFromServer(functions = []) {
+    this.state.functions = functions;
+  }
+
+  updateLoadingState(loadingData) {
+    this.state.loadingData = loadingData;
+  }
+
+  toggleNoFunctionData() {
+    this.state.hasFunctionData = false;
+  }
+}
diff --git a/app/controllers/projects/serverless/functions_controller.rb b/app/controllers/projects/serverless/functions_controller.rb
new file mode 100644
index 00000000000..0af2b7ef343
--- /dev/null
+++ b/app/controllers/projects/serverless/functions_controller.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Projects
+  module Serverless
+    class FunctionsController < Projects::ApplicationController
+      include ProjectUnauthorized
+
+      before_action :authorize_read_cluster!
+
+      INDEX_PRIMING_INTERVAL = 10_000
+      INDEX_POLLING_INTERVAL = 30_000
+
+      def index
+        finder = Projects::Serverless::FunctionsFinder.new(project.clusters)
+
+        respond_to do |format|
+          format.json do
+            functions = finder.execute
+
+            if functions.any?
+              Gitlab::PollingInterval.set_header(response, interval: INDEX_POLLING_INTERVAL)
+              render json: Projects::Serverless::ServiceSerializer.new(current_user: @current_user).represent(functions)
+            else
+              Gitlab::PollingInterval.set_header(response, interval: INDEX_PRIMING_INTERVAL)
+              head :no_content
+            end
+          end
+
+          format.html do
+            @installed = finder.installed?
+            render
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/app/finders/projects/serverless/functions_finder.rb b/app/finders/projects/serverless/functions_finder.rb
new file mode 100644
index 00000000000..2b5d67e79d7
--- /dev/null
+++ b/app/finders/projects/serverless/functions_finder.rb
@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Projects
+  module Serverless
+    class FunctionsFinder
+      def initialize(clusters)
+        @clusters = clusters
+      end
+
+      def execute
+        knative_services.flatten.compact
+      end
+
+      def installed?
+        clusters_with_knative_installed.exists?
+      end
+
+      private
+
+      def knative_services
+        clusters_with_knative_installed.preload_knative.map do |cluster|
+          cluster.application_knative.services_for(ns: cluster.platform_kubernetes&.actual_namespace)
+        end
+      end
+
+      def clusters_with_knative_installed
+        @clusters.with_knative_installed
+      end
+    end
+  end
+end
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 0a7f930110a..f6a45ef34e3 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -307,6 +307,7 @@ module ProjectsHelper
       settings:         :admin_project,
       builds:           :read_build,
       clusters:         :read_cluster,
+      serverless:       :read_cluster,
       labels:           :read_label,
       issues:           :read_issue,
       project_members:  :read_project_member,
@@ -545,6 +546,7 @@ module ProjectsHelper
     %w[
       environments
       clusters
+      functions
       user
       gcp
     ]
diff --git a/app/models/clusters/applications/knative.rb b/app/models/clusters/applications/knative.rb
index c0aaa8dce20..168a24da738 100644
--- a/app/models/clusters/applications/knative.rb
+++ b/app/models/clusters/applications/knative.rb
@@ -15,6 +15,9 @@ module Clusters
       include ::Clusters::Concerns::ApplicationVersion
       include ::Clusters::Concerns::ApplicationData
       include AfterCommitQueue
+      include ReactiveCaching
+
+      self.reactive_cache_key = ->(knative) { [knative.class.model_name.singular, knative.id] }
 
       state_machine :status do
         before_transition any => [:installed] do |application|
@@ -29,6 +32,8 @@ module Clusters
 
       validates :hostname, presence: true, hostname: true
 
+      scope :for_cluster, -> (cluster) { where(cluster: cluster) }
+
       def chart
         'knative/knative'
       end
@@ -55,12 +60,39 @@ module Clusters
         ClusterWaitForIngressIpAddressWorker.perform_async(name, id)
       end
 
+      def client
+        cluster.kubeclient.knative_client
+      end
+
+      def services
+        with_reactive_cache do |data|
+          data[:services]
+        end
+      end
+
+      def calculate_reactive_cache
+        { services: read_services }
+      end
+
       def ingress_service
         cluster.kubeclient.get_service('knative-ingressgateway', 'istio-system')
       end
 
-      def client
-        cluster.platform_kubernetes.kubeclient.knative_client
+      def services_for(ns: namespace)
+        return unless services
+        return [] unless ns
+
+        services.select do |service|
+          service.dig('metadata', 'namespace') == ns
+        end
+      end
+
+      private
+
+      def read_services
+        client.get_services.as_json
+      rescue Kubeclient::ResourceNotFoundError
+        []
       end
     end
   end
diff --git a/app/models/clusters/cluster.rb b/app/models/clusters/cluster.rb
index c9bd1728dbd..7fe43cd2de0 100644
--- a/app/models/clusters/cluster.rb
+++ b/app/models/clusters/cluster.rb
@@ -93,6 +93,16 @@ module Clusters
       where('NOT EXISTS (?)', subquery)
     end
 
+    scope :with_knative_installed, -> { joins(:application_knative).merge(Clusters::Applications::Knative.installed) }
+
+    scope :preload_knative, -> {
+      preload(
+        :kubernetes_namespace,
+        :platform_kubernetes,
+        :application_knative
+      )
+    }
+
     def self.ancestor_clusters_for_clusterable(clusterable, hierarchy_order: :asc)
       hierarchy_groups = clusterable.ancestors_upto(hierarchy_order: hierarchy_order).eager_load(:clusters)
       hierarchy_groups = hierarchy_groups.merge(current_scope) if current_scope
diff --git a/app/serializers/projects/serverless/service_entity.rb b/app/serializers/projects/serverless/service_entity.rb
new file mode 100644
index 00000000000..4f1f62d145b
--- /dev/null
+++ b/app/serializers/projects/serverless/service_entity.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Projects
+  module Serverless
+    class ServiceEntity < Grape::Entity
+      include RequestAwareEntity
+
+      expose :name do |service|
+        service.dig('metadata', 'name')
+      end
+
+      expose :namespace do |service|
+        service.dig('metadata', 'namespace')
+      end
+
+      expose :created_at do |service|
+        service.dig('metadata', 'creationTimestamp')
+      end
+
+      expose :url do |service|
+        "http://#{service.dig('status', 'domain')}"
+      end
+
+      expose :description do |service|
+        service.dig('spec', 'runLatest', 'configuration', 'revisionTemplate', 'metadata', 'annotations', 'Description')
+      end
+
+      expose :image do |service|
+        service.dig('spec', 'runLatest', 'configuration', 'build', 'template', 'name')
+      end
+    end
+  end
+end
diff --git a/app/serializers/projects/serverless/service_serializer.rb b/app/serializers/projects/serverless/service_serializer.rb
new file mode 100644
index 00000000000..adfd48a8c7d
--- /dev/null
+++ b/app/serializers/projects/serverless/service_serializer.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Projects
+  module Serverless
+    class ServiceSerializer < BaseSerializer
+      entity Projects::Serverless::ServiceEntity
+    end
+  end
+end
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index ab15889a465..b89541a3c9f 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -222,6 +222,12 @@
                   %span
                     = _('Environments')
 
+            - if project_nav_tab? :serverless
+              = nav_link(controller: :functions) do
+                = link_to project_serverless_functions_path(@project), title: _('Serverless') do
+                  %span
+                    = _('Serverless')
+
             - if project_nav_tab? :clusters
               - show_cluster_hint = show_gke_cluster_integration_callout?(@project)
               = nav_link(controller: [:clusters, :user, :gcp]) do
diff --git a/app/views/projects/serverless/functions/index.html.haml b/app/views/projects/serverless/functions/index.html.haml
new file mode 100644
index 00000000000..f650fa0f38f
--- /dev/null
+++ b/app/views/projects/serverless/functions/index.html.haml
@@ -0,0 +1,15 @@
+- @no_container = true
+- @content_class = "limit-container-width" unless fluid_layout
+- breadcrumb_title 'Serverless'
+- page_title 'Serverless'
+- status_path = project_serverless_functions_path(@project, format: :json)
+- clusters_path = project_clusters_path(@project)
+
+.serverless-functions-page.js-serverless-functions-page{ data: { status_path: status_path, installed: @installed,  clusters_path: clusters_path, help_path: help_page_path('user/project/clusters/serverless/index') } }
+
+%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
+  .js-serverless-functions-notice
+    .flash-container
+
+  .top-area.adjust
+    .serverless-functions-table#js-serverless-functions