Commit 8db24c42 authored by mfluharty's avatar mfluharty

Paginate codequality issues

Keep frozen list of all issues in store
Display only one page of 25 issues at a time
parent 5809db55
<script>
import { mapActions, mapState } from 'vuex';
import { mapActions, mapState, mapGetters } from 'vuex';
import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
import { componentNames } from 'ee/reports/components/issue_body';
import ReportSection from '~/reports/components/report_section.vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import { n__, s__, sprintf } from '~/locale';
import createStore from './store';
......@@ -11,6 +12,7 @@ export default {
store: createStore(),
components: {
ReportSection,
PaginationLinks,
},
mixins: [reportsMixin],
componentNames,
......@@ -25,27 +27,23 @@ export default {
},
},
computed: {
...mapState([
'isLoadingCodequality',
'loadingCodequalityFailed',
'codeQualityIssues',
'endpoint',
]),
...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'endpoint', 'pageInfo']),
...mapGetters(['codequalityIssues', 'codequalityIssueTotal']),
hasCodequalityIssues() {
return this.codeQualityIssues.length > 0;
return this.codequalityIssueTotal > 0;
},
codequalityText() {
const text = [];
const { codeQualityIssues } = this;
const { codequalityIssueTotal } = this;
if (!codeQualityIssues.length) {
if (codequalityIssueTotal === 0) {
return s__('ciReport|No code quality issues found');
} else if (codeQualityIssues.length) {
} else if (codequalityIssueTotal > 0) {
return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
issuesWithCount: n__(
'%d code quality issue',
'%d code quality issues',
codeQualityIssues.length,
codequalityIssueTotal,
),
});
}
......@@ -62,7 +60,7 @@ export default {
this.fetchReport();
},
methods: {
...mapActions(['setEndpoint', 'setBlobPath', 'fetchReport']),
...mapActions(['setEndpoint', 'setBlobPath', 'setPage', 'fetchReport']),
translateText(type) {
return {
error: sprintf(s__('ciReport|Failed to load %{reportName} report'), {
......@@ -85,11 +83,16 @@ export default {
:loading-text="translateText('codeclimate').loading"
:error-text="translateText('codeclimate').error"
:success-text="codequalityText"
:unresolved-issues="codeQualityIssues"
:unresolved-issues="codequalityIssues"
:resolved-issues="[]"
:has-issues="hasCodequalityIssues"
:component="$options.componentNames.CodequalityIssueBody"
class="codequality-report"
/>
<pagination-links
:change="setPage"
:page-info="pageInfo"
class="d-flex justify-content-center prepend-top-default"
/>
</div>
</template>
......@@ -8,6 +8,8 @@ import MergeRequestStore from 'ee/vue_merge_request_widget/stores/mr_widget_stor
export const setEndpoint = ({ commit }, data) => commit(types.SET_ENDPOINT, data);
export const setBlobPath = ({ commit }, data) => commit(types.SET_BLOB_PATH, data);
export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
export const requestReport = ({ commit }) => commit(types.REQUEST_REPORT);
export const receiveReportSuccess = ({ state, commit }, data) => {
const parsedIssues = MergeRequestStore.parseCodeclimateMetrics(data, state.blobPath);
......
export const codequalityIssues = state => {
const { page, perPage } = state.pageInfo;
const start = (page - 1) * perPage;
return state.allCodequalityIssues.slice(start, start + perPage);
};
export const codequalityIssueTotal = state => state.allCodequalityIssues.length;
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};
......@@ -2,6 +2,7 @@ import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import * as actions from './actions';
import * as getters from './getters';
import mutations from './mutations';
Vue.use(Vuex);
......@@ -9,6 +10,7 @@ Vue.use(Vuex);
export default () =>
new Vuex.Store({
actions,
getters,
mutations,
state,
});
export const SET_ENDPOINT = 'SET_ENDPOINT';
export const SET_BLOB_PATH = 'SET_BLOB_PATH';
export const SET_PAGE = 'SET_PAGE';
export const REQUEST_REPORT = 'REQUEST_REPORT';
export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';
......@@ -7,20 +7,34 @@ export default {
[types.SET_BLOB_PATH](state, blobPath) {
Object.assign(state, { blobPath });
},
[types.SET_PAGE](state, page) {
Object.assign(state, {
pageInfo: Object.assign(state.pageInfo, {
page,
}),
});
},
[types.REQUEST_REPORT](state) {
Object.assign(state, { isLoadingCodequality: true });
},
[types.RECEIVE_REPORT_SUCCESS](state, issues) {
[types.RECEIVE_REPORT_SUCCESS](state, allCodequalityIssues) {
Object.assign(state, {
isLoadingCodequality: false,
codeQualityIssues: issues,
allCodequalityIssues: Object.freeze(allCodequalityIssues),
pageInfo: Object.assign(state.pageInfo, {
total: allCodequalityIssues.length,
}),
});
},
[types.RECEIVE_REPORT_ERROR](state, error) {
[types.RECEIVE_REPORT_ERROR](state, codeQualityError) {
Object.assign(state, {
isLoadingCodequality: false,
allCodequalityIssues: [],
loadingCodequalityFailed: true,
codeQualityError: error,
codeQualityError,
pageInfo: Object.assign(state.pageInfo, {
total: 0,
}),
});
},
};
export default () => ({
endpoint: '',
codeQualityIssues: [],
allCodequalityIssues: [],
isLoadingCodequality: false,
loadingCodequalityFailed: false,
codeQualityError: null,
pageInfo: {
page: 1,
perPage: 25,
total: 0,
},
});
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