Add latest changes from gitlab-org/gitlab@master

3 files changed, 39 insertions, 19 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 9322423370b..a1b581dc627 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,8 +1,9 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui';
-import { CLUSTER_TYPES } from '../constants';
-import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { CLUSTER_TYPES, STATUSES } from '../constants';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -10,6 +11,9 @@ export default {
     GlLoadingIcon,
     GlBadge,
   },
+  directives: {
+    tooltip,
+  },
   fields: [
     {
       key: 'name',
@@ -38,6 +42,13 @@ export default {
   },
   methods: {
     ...mapActions(['fetchClusters']),
+    statusClass(status) {
+      return STATUSES[status].className;
+    },
+    statusTitle(status) {
+      const { title } = STATUSES[status];
+      return sprintf(__('Status: %{title}'), { title }, false);
+    },
   },
 };
 </script>
@@ -52,6 +63,25 @@ export default {
     variant="light"
     class="qa-clusters-table"
   >
+    <template #cell(name)="{ item }">
+      <div class="d-flex flex-row-reverse flex-md-row js-status">
+        {{ item.name }}
+        <gl-loading-icon
+          v-if="item.status === 'deleting'"
+          v-tooltip
+          :title="statusTitle(item.status)"
+          size="sm"
+          class="mr-2 ml-md-2"
+        />
+        <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="statusClass(item.status)"
+          :title="statusTitle(item.status)"
+        ></div>
+      </div>
+    </template>
     <template #cell(clusterType)="{value}">
       <gl-badge variant="light">
         {{ value }}
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 4125288b5a5..9428f08176c 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -6,6 +6,10 @@ export const CLUSTER_TYPES = {
   instance_type: __('Instance'),
 };
 
-export default {
-  CLUSTER_TYPES,
+export const STATUSES = {
+  disabled: { className: 'disabled', title: __('Disabled') },
+  connected: { 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/state.js b/app/assets/javascripts/clusters_list/store/state.js
index e6cdf9d67db..ed032ed8435 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,19 +1,5 @@
 export default (initialState = {}) => ({
   endpoint: initialState.endpoint,
   loading: false, // TODO - set this to true once integrated with BE
-  clusters: [
-    // TODO - remove mock data once integrated with BE
-    // {
-    //   name: 'My Cluster',
-    //   environmentScope: '*',
-    //   size: '3',
-    //   clusterType: 'group_type',
-    // },
-    // {
-    //   name: 'My other cluster',
-    //   environmentScope: 'production',
-    //   size: '12',
-    //   clusterType: 'project_type',
-    // },
-  ],
+  clusters: [],
 });