Add ability to display cluster status

Added the ability to display the cluster status

app/assets/javascripts/clusters_list/components/clusters.vue

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

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') },
 };

app/assets/javascripts/clusters_list/store/state.js

 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: [],
 });

app/assets/stylesheets/pages/clusters.scss

@@ -163,3 +163,9 @@
   color: $black;
   font-weight: $gl-font-weight-bold;
 }
+
+.cluster-status-indicator {
+  &.disabled {
+    background-color: $gray-600;
+  }
+}

app/assets/stylesheets/utilities.scss

@@ -54,8 +54,10 @@
 .mh-50vh { max-height: 50vh; }
 
 .font-size-inherit { font-size: inherit; }
+.gl-w-8 { width: px-to-rem($grid-size); }
 .gl-w-16 { width: px-to-rem($grid-size * 2); }
 .gl-w-64 { width: px-to-rem($grid-size * 8); }
+.gl-h-8 { height: px-to-rem($grid-size); }
 .gl-h-32 { height: px-to-rem($grid-size * 4); }
 .gl-h-64 { height: px-to-rem($grid-size * 8); }
 

changelogs/unreleased/show-cluster-status-fe.yml

+---
+title: Show cluster status (FE)
+merge_request: 26368
+author:
+type: added

locale/gitlab.pot

@@ -2506,6 +2506,9 @@ msgstr ""
 msgid "Authenticating"
 msgstr ""
 
+msgid "Authentication Failure"
+msgstr ""
+
 msgid "Authentication Log"
 msgstr ""
 
@@ -5166,6 +5169,9 @@ msgstr ""
 msgid "Connect your external repositories, and CI/CD pipelines will run for new commits. A GitLab project will be created with only CI/CD features enabled."
 msgstr ""
 
+msgid "Connected"
+msgstr ""
+
 msgid "Connecting"
 msgstr ""
 
@@ -6334,6 +6340,9 @@ msgstr ""
 msgid "Deleted in this version"
 msgstr ""
 
+msgid "Deleting"
+msgstr ""
+
 msgid "Deleting the license failed."
 msgstr ""
 
@@ -18699,6 +18708,9 @@ msgstr ""
 msgid "Status:"
 msgstr ""
 
+msgid "Status: %{title}"
+msgstr ""
+
 msgid "Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
 msgstr ""
 
@@ -21089,6 +21101,9 @@ msgstr ""
 msgid "Unmarks this %{noun} as Work In Progress."
 msgstr ""
 
+msgid "Unreachable"
+msgstr ""
+
 msgid "Unresolve"
 msgstr ""
 

spec/frontend/clusters_list/components/clusters_spec.js

+import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlTable, GlLoadingIcon } from '@gitlab/ui';
 import Clusters from '~/clusters_list/components/clusters.vue';
-import Vuex from 'vuex';
+import mockData from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,9 +12,10 @@ describe('Clusters', () => {
 
   const findTable = () => wrapper.find(GlTable);
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findStatuses = () => findTable().findAll('.js-status');
 
   const mountComponent = _state => {
-    const state = { clusters: [], endpoint: 'some/endpoint', ..._state };
+    const state = { clusters: mockData, endpoint: 'some/endpoint', ..._state };
     const store = new Vuex.Store({
       state,
     });
@@ -52,4 +54,25 @@ describe('Clusters', () => {
       expect(findTable().classes()).toContain('b-table-stacked-md');
     });
   });
+
+  describe('cluster status', () => {
+    it.each`
+      statusName                  | className       | lineNumber
+      ${'disabled'}               | ${'disabled'}   | ${0}
+      ${'unreachable'}            | ${'bg-danger'}  | ${1}
+      ${'authentication_failure'} | ${'bg-warning'} | ${2}
+      ${'deleting'}               | ${null}         | ${3}
+      ${'connected'}              | ${'bg-success'} | ${4}
+    `('renders a status for each cluster', ({ statusName, className, lineNumber }) => {
+      const statuses = findStatuses();
+      const status = statuses.at(lineNumber);
+      if (statusName !== 'deleting') {
+        const statusIndicator = status.find('.cluster-status-indicator');
+        expect(statusIndicator.exists()).toBe(true);
+        expect(statusIndicator.classes()).toContain(className);
+      } else {
+        expect(status.find(GlLoadingIcon).exists()).toBe(true);
+      }
+    });
+  });
 });

spec/frontend/clusters_list/mock_data.js

+export default [
+  {
+    name: 'My Cluster 1',
+    environmentScope: '*',
+    size: '3',
+    clusterType: 'group_type',
+    status: 'disabled',
+  },
+  {
+    name: 'My Cluster 2',
+    environmentScope: 'development',
+    size: '12',
+    clusterType: 'project_type',
+    status: 'unreachable',
+  },
+  {
+    name: 'My Cluster 3',
+    environmentScope: 'development',
+    size: '12',
+    clusterType: 'project_type',
+    status: 'authentication_failure',
+  },
+  {
+    name: 'My Cluster 4',
+    environmentScope: 'production',
+    size: '12',
+    clusterType: 'project_type',
+    status: 'deleting',
+  },
+  {
+    name: 'My Cluster 5',
+    environmentScope: 'development',
+    size: '12',
+    clusterType: 'project_type',
+    status: 'connected',
+  },
+];