Modified Knative list view to provide more details

6 files changed, 169 insertions, 84 deletions

diff --git a/app/assets/javascripts/serverless/components/environment_row.vue b/app/assets/javascripts/serverless/components/environment_row.vue
new file mode 100644
index 00000000000..4d18c5c4bdd
--- /dev/null
+++ b/app/assets/javascripts/serverless/components/environment_row.vue
@@ -0,0 +1,65 @@
+<script>
+import FunctionRow from './function_row.vue';
+import ItemCaret from '~/groups/components/item_caret.vue';
+
+export default {
+  components: {
+    ItemCaret,
+    FunctionRow,
+  },
+  props: {
+    env: {
+      type: Array,
+      required: true,
+    },
+    envName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: true,
+    };
+  },
+  computed: {
+    envId() {
+      if (this.envName === '*') {
+        return 'env-global';
+      }
+
+      return `env-${this.envName}`;
+    },
+    isOpenClass() {
+      return {
+        'is-open': this.isOpen,
+      };
+    },
+  },
+  methods: {
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+};
+</script>
+
+<template>
+  <li :id="envId" :class="isOpenClass" class="group-row has-children">
+    <div
+      class="group-row-contents d-flex justify-content-end align-items-center"
+      role="button"
+      @click.stop="toggleOpen"
+    >
+      <div class="folder-toggle-wrap d-flex align-items-center">
+        <item-caret :is-group-open="isOpen" />
+      </div>
+      <div class="group-text flex-grow title namespace-title prepend-left-default">
+        {{ envName }}
+      </div>
+    </div>
+    <ul v-if="isOpen" class="content-list group-list-tree">
+      <function-row v-for="(f, index) in env" :key="f.name" :index="index" :func="f" />
+    </ul>
+  </li>
+</template>
diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue
index 2b1c21f041b..4f89ad69129 100644
--- a/app/assets/javascripts/serverless/components/function_details.vue
+++ b/app/assets/javascripts/serverless/components/function_details.vue
@@ -1,13 +1,11 @@
 <script>
 import PodBox from './pod_box.vue';
-import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import Url from './url.vue';
 
 export default {
   components: {
-    Icon,
     PodBox,
-    ClipboardButton,
+    Url,
   },
   props: {
     func: {
@@ -36,24 +34,9 @@ export default {
   <section id="serverless-function-details">
     <h3>{{ name }}</h3>
     <div class="append-bottom-default">
-      <div v-for="line in description.split('\n')" :key="line">{{ line }}<br /></div>
-    </div>
-    <div class="clipboard-group append-bottom-default">
-      <div class="label label-monospace">{{ funcUrl }}</div>
-      <clipboard-button
-        :text="String(funcUrl)"
-        :title="s__('ServerlessDetails|Copy URL to clipboard')"
-        class="input-group-text js-clipboard-btn"
-      />
-      <a
-        :href="funcUrl"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        class="input-group-text btn btn-default"
-      >
-        <icon name="external-link" />
-      </a>
+      <div v-for="(line, index) in description.split('\n')" :key="index">{{ line }}</div>
     </div>
+    <url :uri="funcUrl" />
 
     <h4>{{ s__('ServerlessDetails|Kubernetes Pods') }}</h4>
     <div v-if="podCount > 0">
diff --git a/app/assets/javascripts/serverless/components/function_row.vue b/app/assets/javascripts/serverless/components/function_row.vue
index 44bfae388cb..773d18781fd 100644
--- a/app/assets/javascripts/serverless/components/function_row.vue
+++ b/app/assets/javascripts/serverless/components/function_row.vue
@@ -1,9 +1,12 @@
 <script>
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
+import Url from './url.vue';
+import { visitUrl } from '~/lib/utils/url_utility';
 
 export default {
   components: {
     Timeago,
+    Url,
   },
   props: {
     func: {
@@ -16,13 +19,18 @@ export default {
       return this.func.name;
     },
     description() {
-      return this.func.description;
+      const desc = this.func.description.split('\n');
+      if (desc.length > 1) {
+        return desc[1];
+      }
+
+      return desc[0];
     },
     detailUrl() {
       return this.func.detail_url;
     },
-    environment() {
-      return this.func.environment_scope;
+    targetUrl() {
+      return this.func.url;
     },
     image() {
       return this.func.image;
@@ -31,25 +39,34 @@ export default {
       return this.func.created_at;
     },
   },
+  methods: {
+    checkClass(element) {
+      if (element.closest('.no-expand') === null) {
+        return true;
+      }
+
+      return false;
+    },
+    openDetails(e) {
+      if (this.checkClass(e.target)) {
+        visitUrl(this.detailUrl);
+      }
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="gl-responsive-table-row">
-    <div class="table-section section-20 section-wrap">
-      <a :href="detailUrl">{{ name }}</a>
-    </div>
-    <div class="table-section section-10">{{ environment }}</div>
-    <div class="table-section section-40 section-wrap">
-      <span class="line-break">{{ description }}</span>
+  <li :id="name" class="group-row">
+    <div class="group-row-contents" role="button" @click="openDetails">
+      <p class="float-right text-right">
+        <span>{{ image }}</span
+        ><br />
+        <timeago :time="timestamp" />
+      </p>
+      <b>{{ name }}</b>
+      <div v-for="line in description.split('\n')" :key="line">{{ line }}</div>
+      <url :uri="targetUrl" class="prepend-top-8 no-expand" />
     </div>
-    <div class="table-section section-20">{{ image }}</div>
-    <div class="table-section section-10"><timeago :time="timestamp" /></div>
-  </div>
+  </li>
 </template>
-
-<style>
-.line-break {
-  white-space: pre;
-}
-</style>
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
index 9606a78410e..4bde409f906 100644
--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -1,19 +1,21 @@
 <script>
 import { GlSkeletonLoading } from '@gitlab/ui';
 import FunctionRow from './function_row.vue';
+import EnvironmentRow from './environment_row.vue';
 import EmptyState from './empty_state.vue';
 
 export default {
   components: {
+    EnvironmentRow,
     FunctionRow,
     EmptyState,
     GlSkeletonLoading,
   },
   props: {
     functions: {
-      type: Array,
+      type: Object,
       required: true,
-      default: () => [],
+      default: () => ({}),
     },
     installed: {
       type: Boolean,
@@ -45,33 +47,21 @@ export default {
   <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-10" role="rowheader">
-              {{ s__('Serverless|Cluster Env') }}
-            </div>
-            <div class="table-section section-40" role="rowheader">
-              {{ s__('Serverless|Description') }}
-            </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>
+        <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>
+          <div class="groups-list-tree-container">
+            <ul class="content-list group-list-tree">
+              <environment-row
+                v-for="(env, index) in functions"
+                :key="index"
+                :env="env"
+                :env-name="index"
+              />
+            </ul>
           </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>
+        </template>
       </div>
       <div v-else class="empty-state js-empty-state">
         <div class="text-content">
@@ -111,16 +101,3 @@ export default {
     <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/components/url.vue b/app/assets/javascripts/serverless/components/url.vue
new file mode 100644
index 00000000000..ca53bf6c52a
--- /dev/null
+++ b/app/assets/javascripts/serverless/components/url.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+    GlButton,
+    ClipboardButton,
+  },
+  props: {
+    uri: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="clipboard-group">
+    <div class="url-text-field label label-monospace">{{ uri }}</div>
+    <clipboard-button
+      :text="uri"
+      :title="s__('ServerlessURL|Copy URL to clipboard')"
+      class="input-group-text js-clipboard-btn"
+    />
+    <gl-button
+      :href="uri"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      class="input-group-text btn btn-default"
+    >
+      <icon name="external-link" />
+    </gl-button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/serverless/stores/serverless_store.js b/app/assets/javascripts/serverless/stores/serverless_store.js
index 774c15b5b12..816d55a03f9 100644
--- a/app/assets/javascripts/serverless/stores/serverless_store.js
+++ b/app/assets/javascripts/serverless/stores/serverless_store.js
@@ -1,7 +1,7 @@
 export default class ServerlessStore {
   constructor(knativeInstalled = false, clustersPath, helpPath) {
     this.state = {
-      functions: [],
+      functions: {},
       hasFunctionData: true,
       loadingData: true,
       installed: knativeInstalled,
@@ -10,8 +10,13 @@ export default class ServerlessStore {
     };
   }
 
-  updateFunctionsFromServer(functions = []) {
-    this.state.functions = functions;
+  updateFunctionsFromServer(upstreamFunctions = []) {
+    this.state.functions = upstreamFunctions.reduce((rv, func) => {
+      const envs = rv;
+      envs[func.environment_scope] = (rv[func.environment_scope] || []).concat([func]);
+
+      return envs;
+    }, {});
   }
 
   updateLoadingState(loadingData) {