1 files changed, 43 insertions, 11 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 0d1534d20e0..9c330045596 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -14,6 +14,7 @@ import { __, sprintf } from '~/locale';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import AncestorNotice from './ancestor_notice.vue';
 import NodeErrorHelpText from './node_error_help_text.vue';
+import ClustersEmptyState from './clusters_empty_state.vue';
 
 export default {
   nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
@@ -28,10 +29,23 @@ export default {
     GlSprintf,
     GlTable,
     NodeErrorHelpText,
+    ClustersEmptyState,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  props: {
+    isChildComponent: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    limit: {
+      default: null,
+      required: false,
+      type: Number,
+    },
+  },
   computed: {
     ...mapState([
       'clusters',
@@ -40,7 +54,7 @@ export default {
       'loadingNodes',
       'page',
       'providers',
-      'totalCulsters',
+      'totalClusters',
     ]),
     contentAlignClasses() {
       return 'gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start';
@@ -55,43 +69,57 @@ export default {
       },
     },
     fields() {
+      const tdClass = 'gl-py-5!';
       return [
         {
           key: 'name',
           label: __('Kubernetes cluster'),
+          tdClass,
         },
         {
           key: 'environment_scope',
           label: __('Environment scope'),
+          tdClass,
         },
         {
           key: 'node_size',
           label: __('Nodes'),
+          tdClass,
         },
         {
           key: 'total_cpu',
           label: __('Total cores (CPUs)'),
+          tdClass,
         },
         {
           key: 'total_memory',
           label: __('Total memory (GB)'),
+          tdClass,
         },
         {
           key: 'cluster_type',
           label: __('Cluster level'),
+          tdClass,
           formatter: (value) => CLUSTER_TYPES[value],
         },
       ];
     },
-    hasClusters() {
+    hasClustersPerPage() {
       return this.clustersPerPage > 0;
     },
+    hasClusters() {
+      return this.totalClusters > 0;
+    },
   },
   mounted() {
+    if (this.limit) {
+      this.setClustersPerPage(this.limit);
+    }
+
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage']),
+    ...mapActions(['fetchClusters', 'reportSentryError', 'setPage', 'setClustersPerPage']),
     k8sQuantityToGb(quantity) {
       if (!quantity) {
         return 0;
@@ -196,18 +224,20 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
+  <gl-loading-icon v-if="loadingClusters" size="md" />
 
   <section v-else>
     <ancestor-notice />
 
     <gl-table
+      v-if="hasClusters"
       :items="clusters"
       :fields="fields"
+      fixed
       stacked="md"
       head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
-      class="qa-clusters-table"
+      thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+      class="qa-clusters-table gl-mb-4!"
       data-testid="cluster_list_table"
     >
       <template #cell(name)="{ item }">
@@ -241,7 +271,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.connection_error"
@@ -262,7 +292,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.node_connection_error"
@@ -283,7 +313,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.metrics_connection_error"
@@ -298,11 +328,13 @@ export default {
       </template>
     </gl-table>
 
+    <clusters-empty-state v-else :is-child-component="isChildComponent" />
+
     <gl-pagination
-      v-if="hasClusters"
+      v-if="hasClustersPerPage && !limit"
       v-model="currentPage"
       :per-page="clustersPerPage"
-      :total-items="totalCulsters"
+      :total-items="totalClusters"
       :prev-text="__('Prev')"
       :next-text="__('Next')"
       align="center"