Introduce Knative Serverless Tab

7 files changed, 347 insertions, 0 deletions

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;
+  }
+}