Commit bb991ce0 authored by Emily Ring's avatar Emily Ring

Add pagination to cluster list

Update javascripts/clusters_list to include pagination
Updated associated tests
parent 4ed0a75a
<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,7 +80,9 @@ 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">
<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">
......@@ -96,4 +111,15 @@ export default {
</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>
......@@ -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 () => {};
export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
export const SET_LOADING_STATE = 'SET_LOADING_STATE';
export const SET_PAGE = 'SET_PAGE';
......@@ -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;
},
};
......@@ -3,4 +3,7 @@ export default (initialState = {}) => ({
hasAncestorClusters: false,
loading: true,
clusters: [],
clustersPerPage: 0,
page: 1,
totalCulsters: 0,
});
---
title: 'Cluster index refactor: Add missing pagination'
merge_request: 32338
author:
type: changed
......@@ -4,7 +4,7 @@ import ClusterStore from '~/clusters_list/store';
import MockAdapter from 'axios-mock-adapter';
import { apiData } from '../mock_data';
import { mount } from '@vue/test-utils';
import { GlTable, GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlTable, GlPagination } from '@gitlab/ui';
describe('Clusters', () => {
let mock;
......@@ -14,11 +14,12 @@ describe('Clusters', () => {
const endpoint = 'some/endpoint';
const findLoader = () => wrapper.find(GlLoadingIcon);
const findPaginatedButtons = () => wrapper.find(GlPagination);
const findTable = () => wrapper.find(GlTable);
const findStatuses = () => findTable().findAll('.js-status');
const mockPollingApi = (response, body, header) => {
mock.onGet(endpoint).reply(response, body, header);
mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
};
const mountWrapper = () => {
......@@ -29,7 +30,11 @@ describe('Clusters', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
mockPollingApi(200, apiData, {});
mockPollingApi(200, apiData, {
'x-total': apiData.clusters.length,
'x-per-page': 20,
'x-page': 1,
});
return mountWrapper();
});
......@@ -93,4 +98,47 @@ describe('Clusters', () => {
}
});
});
describe('pagination', () => {
const perPage = apiData.clusters.length;
const totalFirstPage = 100;
const totalSecondPage = 500;
beforeEach(() => {
mockPollingApi(200, apiData, {
'x-total': totalFirstPage,
'x-per-page': perPage,
'x-page': 1,
});
return mountWrapper();
});
it('should load to page 1 with header values', () => {
const buttons = findPaginatedButtons();
expect(buttons.props('perPage')).toBe(perPage);
expect(buttons.props('totalItems')).toBe(totalFirstPage);
expect(buttons.props('value')).toBe(1);
});
describe('when updating currentPage', () => {
beforeEach(() => {
mockPollingApi(200, apiData, {
'x-total': totalSecondPage,
'x-per-page': perPage,
'x-page': 2,
});
wrapper.setData({ currentPage: 2 });
return axios.waitForAll();
});
it('should change pagination when currentPage changes', () => {
const buttons = findPaginatedButtons();
expect(buttons.props('perPage')).toBe(perPage);
expect(buttons.props('totalItems')).toBe(totalSecondPage);
expect(buttons.props('value')).toBe(2);
});
});
});
});
......@@ -19,14 +19,29 @@ describe('Clusters store actions', () => {
afterEach(() => mock.restore());
it('should commit SET_CLUSTERS_DATA with received response', done => {
mock.onGet().reply(200, apiData);
const headers = {
'x-total': apiData.clusters.length,
'x-per-page': 20,
'x-page': 1,
};
const paginationInformation = {
nextPage: NaN,
page: 1,
perPage: 20,
previousPage: NaN,
total: apiData.clusters.length,
totalPages: NaN,
};
mock.onGet().reply(200, apiData, headers);
testAction(
actions.fetchClusters,
{ endpoint: apiData.endpoint },
{},
[
{ type: types.SET_CLUSTERS_DATA, payload: apiData },
{ type: types.SET_CLUSTERS_DATA, payload: { data: apiData, paginationInformation } },
{ type: types.SET_LOADING_STATE, payload: false },
],
[],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment