4 files changed, 30 insertions, 20 deletions
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
index 79bc9932438..919625f69b4 100644
--- a/app/assets/javascripts/clusters_list/store/actions.js
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -1,36 +1,35 @@
-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 { 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 }) => {
-      commit(types.SET_CLUSTERS_DATA, convertObjectPropsToCamelCase(data, { deep: true }));
-      commit(types.SET_LOADING_STATE, false);
+    successCallback: ({ data, headers }) => {
+      if (data.clusters) {
+        const normalizedHeaders = normalizeHeaders(headers);
+        const paginationInformation = parseIntPagination(normalizedHeaders);
+
+        commit(types.SET_CLUSTERS_DATA, { data, paginationInformation });
+        commit(types.SET_LOADING_STATE, false);
+        poll.stop();
+      }
     },
     errorCallback: () => flash(__('An error occurred while loading clusters')),
   });
 
-  if (!Visibility.hidden()) {
-    poll.makeRequest();
-  }
+  poll.makeRequest();
+};
 
-  Visibility.change(() => {
-    if (!Visibility.hidden()) {
-      poll.restart();
-    } else {
-      poll.stop();
-    }
-  });
+export const setPage = ({ commit }, page) => {
+  commit(types.SET_PAGE, page);
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
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 ffd3c4601bf..2a9df9f38f0 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -4,9 +4,15 @@ export default {
   [types.SET_LOADING_STATE](state, value) {
     state.loading = value;
   },
-  [types.SET_CLUSTERS_DATA](state, clusters) {
+  [types.SET_CLUSTERS_DATA](state, { data, paginationInformation }) {
     Object.assign(state, {
-      clusters,
+      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 ed032ed8435..d590ea09e66 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,5 +1,9 @@
 export default (initialState = {}) => ({
   endpoint: initialState.endpoint,
-  loading: false, // TODO - set this to true once integrated with BE
+  hasAncestorClusters: false,
+  loading: true,
   clusters: [],
+  clustersPerPage: 0,
+  page: 1,
+  totalCulsters: 0,
 });