Commit 4695b311 authored by Mike Greiling's avatar Mike Greiling

Prettify registry and reports modules

parent c0d26698
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import Flash from '../../flash'; import Flash from '../../flash';
import store from '../stores'; import store from '../stores';
import collapsibleContainer from './collapsible_container.vue'; import collapsibleContainer from './collapsible_container.vue';
import { errorMessages, errorMessagesTypes } from '../constants'; import { errorMessages, errorMessagesTypes } from '../constants';
export default { export default {
name: 'RegistryListApp', name: 'RegistryListApp',
components: { components: {
collapsibleContainer, collapsibleContainer,
...@@ -18,25 +18,18 @@ ...@@ -18,25 +18,18 @@
}, },
store, store,
computed: { computed: {
...mapGetters([ ...mapGetters(['isLoading', 'repos']),
'isLoading',
'repos',
]),
}, },
created() { created() {
this.setMainEndpoint(this.endpoint); this.setMainEndpoint(this.endpoint);
}, },
mounted() { mounted() {
this.fetchRepos() this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
.catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
}, },
methods: { methods: {
...mapActions([ ...mapActions(['setMainEndpoint', 'fetchRepos']),
'setMainEndpoint',
'fetchRepos',
]),
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import Flash from '../../flash'; import Flash from '../../flash';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import tableRegistry from './table_registry.vue'; import tableRegistry from './table_registry.vue';
import { errorMessages, errorMessagesTypes } from '../constants'; import { errorMessages, errorMessagesTypes } from '../constants';
import { __ } from '../../locale'; import { __ } from '../../locale';
export default { export default {
name: 'CollapsibeContainerRegisty', name: 'CollapsibeContainerRegisty',
components: { components: {
clipboardButton, clipboardButton,
...@@ -28,18 +28,15 @@ ...@@ -28,18 +28,15 @@
}; };
}, },
methods: { methods: {
...mapActions([ ...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']),
'fetchRepos',
'fetchList',
'deleteRepo',
]),
toggleRepo() { toggleRepo() {
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;
if (this.isOpen) { if (this.isOpen) {
this.fetchList({ repo: this.repo }) this.fetchList({ repo: this.repo }).catch(() =>
.catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); this.showError(errorMessagesTypes.FETCH_REGISTRY),
);
} }
}, },
...@@ -56,7 +53,7 @@ ...@@ -56,7 +53,7 @@
Flash(errorMessages[message]); Flash(errorMessages[message]);
}, },
}, },
}; };
</script> </script>
<template> <template>
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { n__ } from '../../locale'; import { n__ } from '../../locale';
import Flash from '../../flash'; import Flash from '../../flash';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import timeagoMixin from '../../vue_shared/mixins/timeago'; import timeagoMixin from '../../vue_shared/mixins/timeago';
import { errorMessages, errorMessagesTypes } from '../constants'; import { errorMessages, errorMessagesTypes } from '../constants';
import { numberToHumanSize } from '../../lib/utils/number_utils'; import { numberToHumanSize } from '../../lib/utils/number_utils';
export default { export default {
components: { components: {
clipboardButton, clipboardButton,
tablePagination, tablePagination,
...@@ -17,9 +17,7 @@ ...@@ -17,9 +17,7 @@
directives: { directives: {
tooltip, tooltip,
}, },
mixins: [ mixins: [timeagoMixin],
timeagoMixin,
],
props: { props: {
repo: { repo: {
type: Object, type: Object,
...@@ -32,10 +30,7 @@ ...@@ -32,10 +30,7 @@
}, },
}, },
methods: { methods: {
...mapActions([ ...mapActions(['fetchList', 'deleteRegistry']),
'fetchList',
'deleteRegistry',
]),
layers(item) { layers(item) {
return item.layers ? n__('%d layer', '%d layers', item.layers) : ''; return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
...@@ -52,15 +47,16 @@ ...@@ -52,15 +47,16 @@
}, },
onPageChange(pageNumber) { onPageChange(pageNumber) {
this.fetchList({ repo: this.repo, page: pageNumber }) this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
.catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); this.showError(errorMessagesTypes.FETCH_REGISTRY),
);
}, },
showError(message) { showError(message) {
Flash(errorMessages[message]); Flash(errorMessages[message]);
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
...@@ -4,7 +4,8 @@ import Translate from '../vue_shared/translate'; ...@@ -4,7 +4,8 @@ import Translate from '../vue_shared/translate';
Vue.use(Translate); Vue.use(Translate);
export default () => new Vue({ export default () =>
new Vue({
el: '#js-vue-registry-images', el: '#js-vue-registry-images',
components: { components: {
registryApp, registryApp,
...@@ -22,4 +23,4 @@ export default () => new Vue({ ...@@ -22,4 +23,4 @@ export default () => new Vue({
}, },
}); });
}, },
}); });
...@@ -2,7 +2,6 @@ import * as types from './mutation_types'; ...@@ -2,7 +2,6 @@ import * as types from './mutation_types';
import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils'; import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils';
export default { export default {
[types.SET_MAIN_ENDPOINT](state, endpoint) { [types.SET_MAIN_ENDPOINT](state, endpoint) {
Object.assign(state, { endpoint }); Object.assign(state, { endpoint });
}, },
......
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { componentNames } from './issue_body'; import { componentNames } from './issue_body';
import ReportSection from './report_section.vue'; import ReportSection from './report_section.vue';
import SummaryRow from './summary_row.vue'; import SummaryRow from './summary_row.vue';
import IssuesList from './issues_list.vue'; import IssuesList from './issues_list.vue';
import Modal from './modal.vue'; import Modal from './modal.vue';
import createStore from '../store'; import createStore from '../store';
import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils'; import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
export default { export default {
name: 'GroupedTestReportsApp', name: 'GroupedTestReportsApp',
store: createStore(), store: createStore(),
components: { components: {
...@@ -26,19 +26,12 @@ ...@@ -26,19 +26,12 @@
}, },
componentNames, componentNames,
computed: { computed: {
...mapState([ ...mapState(['reports', 'isLoading', 'hasError', 'summary']),
'reports',
'isLoading',
'hasError',
'summary',
]),
...mapState({ ...mapState({
modalTitle: state => state.modal.title || '', modalTitle: state => state.modal.title || '',
modalData: state => state.modal.data || {}, modalData: state => state.modal.data || {},
}), }),
...mapGetters([ ...mapGetters(['summaryStatus']),
'summaryStatus',
]),
groupedSummaryText() { groupedSummaryText() {
if (this.isLoading) { if (this.isLoading) {
return s__('Reports|Test summary results are being parsed'); return s__('Reports|Test summary results are being parsed');
...@@ -73,7 +66,7 @@ ...@@ -73,7 +66,7 @@
); );
}, },
}, },
}; };
</script> </script>
<template> <template>
<report-section <report-section
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '../constants';
STATUS_FAILED,
STATUS_NEUTRAL,
STATUS_SUCCESS,
} from '../constants';
export default { export default {
name: 'IssueStatusIcon', name: 'IssueStatusIcon',
......
<script> <script>
import IssuesBlock from '~/reports/components/report_issues.vue'; import IssuesBlock from '~/reports/components/report_issues.vue';
import { import { STATUS_SUCCESS, STATUS_FAILED, STATUS_NEUTRAL } from '~/reports/constants';
STATUS_SUCCESS,
STATUS_FAILED,
STATUS_NEUTRAL,
} from '~/reports/constants';
/** /**
* Renders block of issues * Renders block of issues
......
<script> <script>
import Modal from '~/vue_shared/components/gl_modal.vue'; import Modal from '~/vue_shared/components/gl_modal.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import CodeBlock from '~/vue_shared/components/code_block.vue'; import CodeBlock from '~/vue_shared/components/code_block.vue';
import { fieldTypes } from '../constants'; import { fieldTypes } from '../constants';
export default { export default {
components: { components: {
Modal, Modal,
LoadingButton, LoadingButton,
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
}, },
}, },
fieldTypes, fieldTypes,
}; };
</script> </script>
<template> <template>
<modal <modal
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
export default { export default {
name: 'TestIssueBody', name: 'TestIssueBody',
props: { props: {
issue: { issue: {
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
methods: { methods: {
...mapActions(['openModal']), ...mapActions(['openModal']),
}, },
}; };
</script> </script>
<template> <template>
<div class="report-block-list-issue-description prepend-top-5 append-bottom-5"> <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
......
...@@ -43,8 +43,10 @@ export const fetchReports = ({ state, dispatch }) => { ...@@ -43,8 +43,10 @@ export const fetchReports = ({ state, dispatch }) => {
}, },
data: state.endpoint, data: state.endpoint,
method: 'getReports', method: 'getReports',
successCallback: ({ data, status }) => dispatch('receiveReportsSuccess', { successCallback: ({ data, status }) =>
data, status, dispatch('receiveReportsSuccess', {
data,
status,
}), }),
errorCallback: () => dispatch('receiveReportsError'), errorCallback: () => dispatch('receiveReportsError'),
}); });
......
...@@ -7,9 +7,10 @@ import state from './state'; ...@@ -7,9 +7,10 @@ import state from './state';
Vue.use(Vuex); Vue.use(Vuex);
export default () => new Vuex.Store({ export default () =>
new Vuex.Store({
actions, actions,
mutations, mutations,
getters, getters,
state: state(), state: state(),
}); });
...@@ -4,4 +4,3 @@ export const REQUEST_REPORTS = 'REQUEST_REPORTS'; ...@@ -4,4 +4,3 @@ export const REQUEST_REPORTS = 'REQUEST_REPORTS';
export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS'; export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR'; export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR';
export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA'; export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA';
...@@ -19,7 +19,6 @@ export default { ...@@ -19,7 +19,6 @@ export default {
state.status = response.status; state.status = response.status;
state.reports = response.suites; state.reports = response.suites;
}, },
[types.RECEIVE_REPORTS_ERROR](state) { [types.RECEIVE_REPORTS_ERROR](state) {
state.isLoading = false; state.isLoading = false;
...@@ -36,7 +35,7 @@ export default { ...@@ -36,7 +35,7 @@ export default {
[types.SET_ISSUE_MODAL_DATA](state, payload) { [types.SET_ISSUE_MODAL_DATA](state, payload) {
state.modal.title = payload.issue.name; state.modal.title = payload.issue.name;
Object.keys(payload.issue).forEach((key) => { Object.keys(payload.issue).forEach(key => {
if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) { if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
state.modal.data[key] = { state.modal.data[key] = {
...state.modal.data[key], ...state.modal.data[key],
......
...@@ -57,5 +57,4 @@ export default () => ({ ...@@ -57,5 +57,4 @@ export default () => ({
}, },
}, },
}, },
}); });
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