Add latest changes from gitlab-org/gitlab@master

5 files changed, 57 insertions, 63 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 46dacf30f39..eb575b9ed6c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { GlTable, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
@@ -8,54 +8,58 @@ import { __, sprintf } from '~/locale';
 export default {
   components: {
     GlTable,
+    GlLink,
     GlLoadingIcon,
     GlBadge,
   },
   directives: {
     tooltip,
   },
-  fields: [
-    {
-      key: 'name',
-      label: __('Kubernetes cluster'),
-    },
-    {
-      key: 'environmentScope',
-      label: __('Environment scope'),
-    },
-    {
-      key: 'size',
-      label: __('Size'),
-    },
-    {
-      key: 'cpu',
-      label: __('Total cores (vCPUs)'),
-    },
-    {
-      key: 'memory',
-      label: __('Total memory (GB)'),
-    },
-    {
-      key: 'clusterType',
-      label: __('Cluster level'),
-      formatter: value => CLUSTER_TYPES[value],
-    },
-  ],
   computed: {
     ...mapState(['clusters', 'loading']),
+    fields() {
+      return [
+        {
+          key: 'name',
+          label: __('Kubernetes cluster'),
+        },
+        {
+          key: 'environment_scope',
+          label: __('Environment scope'),
+        },
+        // Wait for backend to send these fields
+        // {
+        //  key: 'size',
+        //  label: __('Size'),
+        // },
+        // {
+        //  key: 'cpu',
+        //  label: __('Total cores (vCPUs)'),
+        // },
+        // {
+        //  key: 'memory',
+        //  label: __('Total memory (GB)'),
+        // },
+        {
+          key: 'cluster_type',
+          label: __('Cluster level'),
+          formatter: value => CLUSTER_TYPES[value],
+        },
+      ];
+    },
   },
   mounted() {
-    // TODO - uncomment this once integrated with BE
-    // this.fetchClusters();
+    this.fetchClusters();
   },
   methods: {
     ...mapActions(['fetchClusters']),
     statusClass(status) {
-      return STATUSES[status].className;
+      const iconClass = STATUSES[status] || STATUSES.default;
+      return iconClass.className;
     },
     statusTitle(status) {
-      const { title } = STATUSES[status];
-      return sprintf(__('Status: %{title}'), { title }, false);
+      const iconTitle = STATUSES[status] || STATUSES.default;
+      return sprintf(__('Status: %{title}'), { title: iconTitle.title }, false);
     },
   },
 };
@@ -63,17 +67,13 @@ export default {
 
 <template>
   <gl-loading-icon v-if="loading" size="md" class="mt-3" />
-  <gl-table
-    v-else
-    :items="clusters"
-    :fields="$options.fields"
-    stacked="md"
-    variant="light"
-    class="qa-clusters-table"
-  >
+  <gl-table v-else :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
     <template #cell(name)="{ item }">
       <div class="d-flex flex-row-reverse flex-md-row js-status">
-        {{ item.name }}
+        <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
+          {{ item.name }}
+        </gl-link>
+
         <gl-loading-icon
           v-if="item.status === 'deleting'"
           v-tooltip
@@ -84,13 +84,13 @@ export default {
         <div
           v-else
           v-tooltip
-          class="cluster-status-indicator rounded-circle align-self-center gl-w-8 gl-h-8 mr-2 ml-md-2"
+          class="cluster-status-indicator rounded-circle align-self-center gl-w-4 gl-h-4 mr-2 ml-md-2"
           :class="statusClass(item.status)"
           :title="statusTitle(item.status)"
         ></div>
       </div>
     </template>
-    <template #cell(clusterType)="{value}">
+    <template #cell(cluster_type)="{value}">
       <gl-badge variant="light">
         {{ value }}
       </gl-badge>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 9428f08176c..eebcaa086f9 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -7,8 +7,9 @@ export const CLUSTER_TYPES = {
 };
 
 export const STATUSES = {
+  default: { className: 'bg-white', title: __('Unknown') },
   disabled: { className: 'disabled', title: __('Disabled') },
-  connected: { className: 'bg-success', title: __('Connected') },
+  created: { className: 'bg-success', title: __('Connected') },
   unreachable: { className: 'bg-danger', title: __('Unreachable') },
   authentication_failure: { className: 'bg-warning', title: __('Authentication Failure') },
   deleting: { title: __('Deleting') },
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 79bc9932438..d0ad92f5536 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -1,7 +1,5 @@
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import axios from '~/lib/utils/axios_utils';
-import Visibility from 'visibilityjs';
 import flash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -14,23 +12,16 @@ export const fetchClusters = ({ state, commit }) => {
     data: state.endpoint,
     method: 'fetchClusters',
     successCallback: ({ data }) => {
-      commit(types.SET_CLUSTERS_DATA, convertObjectPropsToCamelCase(data, { deep: true }));
-      commit(types.SET_LOADING_STATE, false);
+      if (data.clusters) {
+        commit(types.SET_CLUSTERS_DATA, data);
+        commit(types.SET_LOADING_STATE, false);
+        poll.stop();
+      }
     },
     errorCallback: () => flash(__('An error occurred while loading clusters')),
   });
 
-  if (!Visibility.hidden()) {
-    poll.makeRequest();
-  }
-
-  Visibility.change(() => {
-    if (!Visibility.hidden()) {
-      poll.restart();
-    } else {
-      poll.stop();
-    }
-  });
+  poll.makeRequest();
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index ffd3c4601bf..ce53a033628 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -4,9 +4,10 @@ export default {
   [types.SET_LOADING_STATE](state, value) {
     state.loading = value;
   },
-  [types.SET_CLUSTERS_DATA](state, clusters) {
+  [types.SET_CLUSTERS_DATA](state, data) {
     Object.assign(state, {
-      clusters,
+      clusters: data.clusters,
+      hasAncestorClusters: data.has_ancestor_clusters,
     });
   },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index ed032ed8435..31e73558c2e 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,5 +1,6 @@
 export default (initialState = {}) => ({
   endpoint: initialState.endpoint,
-  loading: false, // TODO - set this to true once integrated with BE
+  hasAncestorClusters: false,
+  loading: true,
   clusters: [],
 });