Add latest changes from gitlab-org/gitlab@master

5 files changed, 81 insertions, 38 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>
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index d0ad92f5536..919625f69b4 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -2,18 +2,22 @@ import Poll from '~/lib/utils/poll';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import * as types from './mutation_types';
 
 export const fetchClusters = ({ state, commit }) => {
   const poll = new Poll({
     resource: {
-      fetchClusters: endpoint => axios.get(endpoint),
+      fetchClusters: paginatedEndPoint => axios.get(paginatedEndPoint),
     },
-    data: state.endpoint,
+    data: `${state.endpoint}?page=${state.page}`,
     method: 'fetchClusters',
-    successCallback: ({ data }) => {
+    successCallback: ({ data, headers }) => {
       if (data.clusters) {
-        commit(types.SET_CLUSTERS_DATA, data);
+        const normalizedHeaders = normalizeHeaders(headers);
+        const paginationInformation = parseIntPagination(normalizedHeaders);
+
+        commit(types.SET_CLUSTERS_DATA, { data, paginationInformation });
         commit(types.SET_LOADING_STATE, false);
         poll.stop();
       }
@@ -24,5 +28,9 @@ export const fetchClusters = ({ state, commit }) => {
   poll.makeRequest();
 };
 
+export const setPage = ({ commit }, page) => {
+  commit(types.SET_PAGE, page);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
index f056f3ab7d9..a5275f28c13 100644
--- a/app/assets/javascripts/clusters_list/store/mutation_types.js
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -1,2 +1,3 @@
 export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_STATE = 'SET_LOADING_STATE';
+export const SET_PAGE = 'SET_PAGE';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index ce53a033628..2a9df9f38f0 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -4,10 +4,15 @@ export default {
   [types.SET_LOADING_STATE](state, value) {
     state.loading = value;
   },
-  [types.SET_CLUSTERS_DATA](state, data) {
+  [types.SET_CLUSTERS_DATA](state, { data, paginationInformation }) {
     Object.assign(state, {
       clusters: data.clusters,
+      clustersPerPage: paginationInformation.perPage,
       hasAncestorClusters: data.has_ancestor_clusters,
+      totalCulsters: paginationInformation.total,
     });
   },
+  [types.SET_PAGE](state, value) {
+    state.page = Number(value) || 1;
+  },
 };
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 31e73558c2e..d590ea09e66 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -3,4 +3,7 @@ export default (initialState = {}) => ({
   hasAncestorClusters: false,
   loading: true,
   clusters: [],
+  clustersPerPage: 0,
+  page: 1,
+  totalCulsters: 0,
 });