Connected cluster list to backend

Added backend endpoint to clusters/index.html.haml
Updated clusters_list/components/clusters.vue for updated endpoint
Updated clusterable_presenter.rb to allow json paths for index

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

 <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,6 +8,7 @@ import { __, sprintf } from '~/locale';
 export default {
   components: {
     GlTable,
+    GlLink,
     GlLoadingIcon,
     GlBadge,
   },
@@ -23,18 +24,19 @@ export default {
       key: 'environmentScope',
       label: __('Environment scope'),
     },
-    {
-      key: 'size',
-      label: __('Size'),
-    },
-    {
-      key: 'cpu',
-      label: __('Total cores (vCPUs)'),
-    },
-    {
-      key: 'memory',
-      label: __('Total memory (GB)'),
-    },
+    // Wait for backend to send these fields
+    // {
+    //  key: 'size',
+    //  label: __('Size'),
+    // },
+    // {
+    //  key: 'cpu',
+    //  label: __('Total cores (vCPUs)'),
+    // },
+    // {
+    //  key: 'memory',
+    //  label: __('Total memory (GB)'),
+    // },
     {
       key: 'clusterType',
       label: __('Cluster level'),
@@ -45,13 +47,13 @@ export default {
     ...mapState(['clusters', 'loading']),
   },
   mounted() {
-    // TODO - uncomment this once integrated with BE
-    // this.fetchClusters();
+    this.fetchClusters();
   },
   methods: {
     ...mapActions(['fetchClusters']),
     statusClass(status) {
-      return STATUSES[status].className;
+      const { className } = STATUSES[status];
+      return className || 'disabled';
     },
     statusTitle(status) {
       const { title } = STATUSES[status];
@@ -73,7 +75,10 @@ export default {
   >
     <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,7 +89,7 @@ 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>

app/assets/javascripts/clusters_list/constants.js

@@ -8,7 +8,7 @@ export const CLUSTER_TYPES = {
 
 export const STATUSES = {
   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') },

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

 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 +13,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, convertObjectPropsToCamelCase(data, { deep: true }));
+        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

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

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
+  hasAncestorClusters: false,
+  loading: true,
   clusters: [],
 });

app/presenters/clusterable_presenter.rb

@@ -21,8 +21,8 @@ class ClusterablePresenter < Gitlab::View::Presenter::Delegated
     can?(current_user, :create_cluster, clusterable)
   end
 
-  def index_path
-    polymorphic_path([clusterable, :clusters])
+  def index_path(options = {})
+    polymorphic_path([clusterable, :clusters], options)
   end
 
   def new_path(options = {})

app/presenters/instance_clusterable_presenter.rb

@@ -13,8 +13,8 @@ class InstanceClusterablePresenter < ClusterablePresenter
   end
 
   override :index_path
-  def index_path
-    admin_clusters_path
+  def index_path(options = {})
+    admin_clusters_path(options)
   end
 
   override :new_path

app/views/clusters/clusters/index.html.haml

@@ -19,7 +19,7 @@
           = link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
 
     - if Feature.enabled?(:clusters_list_redesign)
-      #js-clusters-list-app{ data: { endpoint: 'todo/add/endpoint' } }
+      #js-clusters-list-app{ data: { endpoint: clusterable.index_path(format: :json) } }
     - else
       .clusters-table.js-clusters-list
         .gl-responsive-table-row.table-row-header{ role: "row" }