Add latest changes from gitlab-org/gitlab@master

1 files changed, 59 insertions, 33 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index eb575b9ed6c..af3f1437c64 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,22 +1,32 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlTable, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    GlTable,
+    GlBadge,
     GlLink,
     GlLoadingIcon,
-    GlBadge,
+    GlPagination,
+    GlTable,
   },
   directives: {
     tooltip,
   },
   computed: {
-    ...mapState(['clusters', 'loading']),
+    ...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'totalCulsters']),
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(newVal) {
+        this.setPage(newVal);
+        this.fetchClusters();
+      },
+    },
     fields() {
       return [
         {
@@ -47,12 +57,15 @@ export default {
         },
       ];
     },
+    hasClusters() {
+      return this.clustersPerPage > 0;
+    },
   },
   mounted() {
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters']),
+    ...mapActions(['fetchClusters', 'setPage']),
     statusClass(status) {
       const iconClass = STATUSES[status] || STATUSES.default;
       return iconClass.className;
@@ -67,33 +80,46 @@ export default {
 
 <template>
   <gl-loading-icon v-if="loading" size="md" class="mt-3" />
-  <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">
-        <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
-          :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-4 gl-h-4 mr-2 ml-md-2"
-          :class="statusClass(item.status)"
-          :title="statusTitle(item.status)"
-        ></div>
-      </div>
-    </template>
-    <template #cell(cluster_type)="{value}">
-      <gl-badge variant="light">
-        {{ value }}
-      </gl-badge>
-    </template>
-  </gl-table>
+  <section v-else>
+    <gl-table :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">
+          <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
+            :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-4 gl-h-4 mr-2 ml-md-2"
+            :class="statusClass(item.status)"
+            :title="statusTitle(item.status)"
+          ></div>
+        </div>
+      </template>
+      <template #cell(cluster_type)="{value}">
+        <gl-badge variant="light">
+          {{ value }}
+        </gl-badge>
+      </template>
+    </gl-table>
+
+    <gl-pagination
+      v-if="hasClusters"
+      v-model="currentPage"
+      :per-page="clustersPerPage"
+      :total-items="totalCulsters"
+      :prev-text="__('Prev')"
+      :next-text="__('Next')"
+      align="center"
+    />
+  </section>
 </template>