Prettify registry and reports modules

app/assets/javascripts/registry/components/app.vue

 <script>
-  import { mapGetters, mapActions } from 'vuex';
-  import Flash from '../../flash';
-  import store from '../stores';
-  import collapsibleContainer from './collapsible_container.vue';
-  import { errorMessages, errorMessagesTypes } from '../constants';
-  export default {
-    name: 'RegistryListApp',
-    components: {
-      collapsibleContainer,
+import { mapGetters, mapActions } from 'vuex';
+import Flash from '../../flash';
+import store from '../stores';
+import collapsibleContainer from './collapsible_container.vue';
+import { errorMessages, errorMessagesTypes } from '../constants';
+export default {
+  name: 'RegistryListApp',
+  components: {
+    collapsibleContainer,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-    },
-    store,
-    computed: {
-      ...mapGetters([
-        'isLoading',
-        'repos',
-      ]),
-    },
-    created() {
-      this.setMainEndpoint(this.endpoint);
-    },
-    mounted() {
-      this.fetchRepos()
-        .catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
-    },
-    methods: {
-      ...mapActions([
-        'setMainEndpoint',
-        'fetchRepos',
-      ]),
-    },
-  };
+  },
+  store,
+  computed: {
+    ...mapGetters(['isLoading', 'repos']),
+  },
+  created() {
+    this.setMainEndpoint(this.endpoint);
+  },
+  mounted() {
+    this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
+  },
+  methods: {
+    ...mapActions(['setMainEndpoint', 'fetchRepos']),
+  },
+};
 </script>
 <template>
   <div>

app/assets/javascripts/registry/components/collapsible_container.vue

 <script>
-  import { mapActions } from 'vuex';
-  import Flash from '../../flash';
-  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import tableRegistry from './table_registry.vue';
-  import { errorMessages, errorMessagesTypes } from '../constants';
-  import { __ } from '../../locale';
-  export default {
-    name: 'CollapsibeContainerRegisty',
-    components: {
-      clipboardButton,
-      tableRegistry,
+import { mapActions } from 'vuex';
+import Flash from '../../flash';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import tableRegistry from './table_registry.vue';
+import { errorMessages, errorMessagesTypes } from '../constants';
+import { __ } from '../../locale';
+export default {
+  name: 'CollapsibeContainerRegisty',
+  components: {
+    clipboardButton,
+    tableRegistry,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    repo: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
-    },
-    props: {
-      repo: {
-        type: Object,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isOpen: false,
-      };
-    },
-    methods: {
-      ...mapActions([
-        'fetchRepos',
-        'fetchList',
-        'deleteRepo',
-      ]),
-      toggleRepo() {
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-          this.fetchList({ repo: this.repo })
-          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
-        }
-      },
-      handleDeleteRepository() {
-        this.deleteRepo(this.repo)
-          .then(() => {
-            Flash(__('This container registry has been scheduled for deletion.'), 'notice');
-            this.fetchRepos();
-          })
-          .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
-      },
-      showError(message) {
-        Flash(errorMessages[message]);
-      },
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    ...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']),
+    toggleRepo() {
+      this.isOpen = !this.isOpen;
+      if (this.isOpen) {
+        this.fetchList({ repo: this.repo }).catch(() =>
+          this.showError(errorMessagesTypes.FETCH_REGISTRY),
+        );
+      }
+    },
+    handleDeleteRepository() {
+      this.deleteRepo(this.repo)
+        .then(() => {
+          Flash(__('This container registry has been scheduled for deletion.'), 'notice');
+          this.fetchRepos();
+        })
+        .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
+    },
+    showError(message) {
+      Flash(errorMessages[message]);
     },
-  };
+  },
+};
 </script>
 <template>

app/assets/javascripts/registry/components/table_registry.vue

 <script>
-  import { mapActions } from 'vuex';
-  import { n__ } from '../../locale';
-  import Flash from '../../flash';
-  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import tablePagination from '../../vue_shared/components/table_pagination.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import timeagoMixin from '../../vue_shared/mixins/timeago';
-  import { errorMessages, errorMessagesTypes } from '../constants';
-  import { numberToHumanSize } from '../../lib/utils/number_utils';
-  export default {
-    components: {
-      clipboardButton,
-      tablePagination,
+import { mapActions } from 'vuex';
+import { n__ } from '../../locale';
+import Flash from '../../flash';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import timeagoMixin from '../../vue_shared/mixins/timeago';
+import { errorMessages, errorMessagesTypes } from '../constants';
+import { numberToHumanSize } from '../../lib/utils/number_utils';
+export default {
+  components: {
+    clipboardButton,
+    tablePagination,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    repo: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    shouldRenderPagination() {
+      return this.repo.pagination.total > this.repo.pagination.perPage;
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      repo: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      shouldRenderPagination() {
-        return this.repo.pagination.total > this.repo.pagination.perPage;
-      },
-    },
-    methods: {
-      ...mapActions([
-        'fetchList',
-        'deleteRegistry',
-      ]),
-      layers(item) {
-        return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
-      },
-      formatSize(size) {
-        return numberToHumanSize(size);
-      },
-      handleDeleteRegistry(registry) {
-        this.deleteRegistry(registry)
-          .then(() => this.fetchList({ repo: this.repo }))
-          .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
-      },
-      onPageChange(pageNumber) {
-        this.fetchList({ repo: this.repo, page: pageNumber })
-          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
-      },
-      showError(message) {
-        Flash(errorMessages[message]);
-      },
+  },
+  methods: {
+    ...mapActions(['fetchList', 'deleteRegistry']),
+    layers(item) {
+      return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
+    },
+    formatSize(size) {
+      return numberToHumanSize(size);
+    },
+    handleDeleteRegistry(registry) {
+      this.deleteRegistry(registry)
+        .then(() => this.fetchList({ repo: this.repo }))
+        .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
+    },
+    onPageChange(pageNumber) {
+      this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
+        this.showError(errorMessagesTypes.FETCH_REGISTRY),
+      );
+    },
+    showError(message) {
+      Flash(errorMessages[message]);
     },
-  };
+  },
+};
 </script>
 <template>
   <div>

app/assets/javascripts/registry/index.js

@@ -4,22 +4,23 @@ import Translate from '../vue_shared/translate';
 Vue.use(Translate);
-export default () => new Vue({
-  el: '#js-vue-registry-images',
-  components: {
-    registryApp,
-  },
-  data() {
-    const { dataset } = document.querySelector(this.$options.el);
-    return {
-      endpoint: dataset.endpoint,
-    };
-  },
-  render(createElement) {
-    return createElement('registry-app', {
-      props: {
-        endpoint: this.endpoint,
-      },
-    });
-  },
-});
+export default () =>
+  new Vue({
+    el: '#js-vue-registry-images',
+    components: {
+      registryApp,
+    },
+    data() {
+      const { dataset } = document.querySelector(this.$options.el);
+      return {
+        endpoint: dataset.endpoint,
+      };
+    },
+    render(createElement) {
+      return createElement('registry-app', {
+        props: {
+          endpoint: this.endpoint,
+        },
+      });
+    },
+  });

app/assets/javascripts/registry/stores/mutations.js

@@ -2,7 +2,6 @@ import * as types from './mutation_types';
 import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils';
 export default {
-
   [types.SET_MAIN_ENDPOINT](state, endpoint) {
     Object.assign(state, { endpoint });
   },

app/assets/javascripts/reports/components/grouped_test_reports_app.vue

 <script>
-  import { mapActions, mapGetters, mapState } from 'vuex';
-  import { s__ } from '~/locale';
-  import { componentNames } from './issue_body';
-  import ReportSection from './report_section.vue';
-  import SummaryRow from './summary_row.vue';
-  import IssuesList from './issues_list.vue';
-  import Modal from './modal.vue';
-  import createStore from '../store';
-  import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
-  export default {
-    name: 'GroupedTestReportsApp',
-    store: createStore(),
-    components: {
-      ReportSection,
-      SummaryRow,
-      IssuesList,
-      Modal,
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { s__ } from '~/locale';
+import { componentNames } from './issue_body';
+import ReportSection from './report_section.vue';
+import SummaryRow from './summary_row.vue';
+import IssuesList from './issues_list.vue';
+import Modal from './modal.vue';
+import createStore from '../store';
+import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
+export default {
+  name: 'GroupedTestReportsApp',
+  store: createStore(),
+  components: {
+    ReportSection,
+    SummaryRow,
+    IssuesList,
+    Modal,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-    },
-    componentNames,
-    computed: {
-      ...mapState([
-        'reports',
-        'isLoading',
-        'hasError',
-        'summary',
-      ]),
-      ...mapState({
-        modalTitle: state => state.modal.title || '',
-        modalData: state => state.modal.data || {},
-      }),
-      ...mapGetters([
-        'summaryStatus',
-      ]),
-      groupedSummaryText() {
-        if (this.isLoading) {
-          return s__('Reports|Test summary results are being parsed');
-        }
-        if (this.hasError) {
-          return s__('Reports|Test summary failed loading results');
-        }
-        return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
-      },
+  },
+  componentNames,
+  computed: {
+    ...mapState(['reports', 'isLoading', 'hasError', 'summary']),
+    ...mapState({
+      modalTitle: state => state.modal.title || '',
+      modalData: state => state.modal.data || {},
+    }),
+    ...mapGetters(['summaryStatus']),
+    groupedSummaryText() {
+      if (this.isLoading) {
+        return s__('Reports|Test summary results are being parsed');
+      }
+      if (this.hasError) {
+        return s__('Reports|Test summary failed loading results');
+      }
+      return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
     },
-    created() {
-      this.setEndpoint(this.endpoint);
-      this.fetchReports();
+  },
+  created() {
+    this.setEndpoint(this.endpoint);
+    this.fetchReports();
+  },
+  methods: {
+    ...mapActions(['setEndpoint', 'fetchReports']),
+    reportText(report) {
+      const summary = report.summary || {};
+      return reportTextBuilder(report.name, summary);
+    },
+    getReportIcon(report) {
+      return statusIcon(report.status);
     },
-    methods: {
-      ...mapActions(['setEndpoint', 'fetchReports']),
-      reportText(report) {
-        const summary = report.summary || {};
-        return reportTextBuilder(report.name, summary);
-      },
-      getReportIcon(report) {
-        return statusIcon(report.status);
-      },
-      shouldRenderIssuesList(report) {
-        return (
-          report.existing_failures.length > 0 ||
-          report.new_failures.length > 0 ||
-          report.resolved_failures.length > 0
-        );
-      },
+    shouldRenderIssuesList(report) {
+      return (
+        report.existing_failures.length > 0 ||
+        report.new_failures.length > 0 ||
+        report.resolved_failures.length > 0
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <report-section

app/assets/javascripts/reports/components/issue_status_icon.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
-import {
-  STATUS_FAILED,
-  STATUS_NEUTRAL,
-  STATUS_SUCCESS,
-} from '../constants';
+import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '../constants';
 export default {
   name: 'IssueStatusIcon',

app/assets/javascripts/reports/components/issues_list.vue

 <script>
 import IssuesBlock from '~/reports/components/report_issues.vue';
-import {
-  STATUS_SUCCESS,
-  STATUS_FAILED,
-  STATUS_NEUTRAL,
-} from '~/reports/constants';
+import { STATUS_SUCCESS, STATUS_FAILED, STATUS_NEUTRAL } from '~/reports/constants';
 /**
  * Renders block of issues

app/assets/javascripts/reports/components/modal.vue

 <script>
-  import Modal from '~/vue_shared/components/gl_modal.vue';
-  import LoadingButton from '~/vue_shared/components/loading_button.vue';
-  import CodeBlock from '~/vue_shared/components/code_block.vue';
-  import { fieldTypes } from '../constants';
-  export default {
-    components: {
-      Modal,
-      LoadingButton,
-      CodeBlock,
+import Modal from '~/vue_shared/components/gl_modal.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+import { fieldTypes } from '../constants';
+export default {
+  components: {
+    Modal,
+    LoadingButton,
+    CodeBlock,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      modalData: {
-        type: Object,
-        required: true,
-      },
+    modalData: {
+      type: Object,
+      required: true,
     },
-    fieldTypes,
-  };
+  },
+  fieldTypes,
+};
 </script>
 <template>
   <modal

app/assets/javascripts/reports/components/test_issue_body.vue

 <script>
-  import { mapActions } from 'vuex';
-  export default {
-    name: 'TestIssueBody',
-    props: {
-      issue: {
-        type: Object,
-        required: true,
-      },
-      // failed || success
-      status: {
-        type: String,
-        required: true,
-      },
-      isNew: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+import { mapActions } from 'vuex';
+export default {
+  name: 'TestIssueBody',
+  props: {
+    issue: {
+      type: Object,
+      required: true,
     },
-    methods: {
-      ...mapActions(['openModal']),
+    // failed || success
+    status: {
+      type: String,
+      required: true,
     },
-  };
+    isNew: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    ...mapActions(['openModal']),
+  },
+};
 </script>
 <template>
   <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">

app/assets/javascripts/reports/store/actions.js

@@ -43,9 +43,11 @@ export const fetchReports = ({ state, dispatch }) => {
     },
     data: state.endpoint,
     method: 'getReports',
-    successCallback: ({ data, status }) => dispatch('receiveReportsSuccess', {
-      data, status,
-    }),
+    successCallback: ({ data, status }) =>
+      dispatch('receiveReportsSuccess', {
+        data,
+        status,
+      }),
     errorCallback: () => dispatch('receiveReportsError'),
   });

app/assets/javascripts/reports/store/index.js

@@ -7,9 +7,10 @@ import state from './state';
 Vue.use(Vuex);
-export default () => new Vuex.Store({
-  actions,
-  mutations,
-  getters,
-  state: state(),
-});
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    getters,
+    state: state(),
+  });

app/assets/javascripts/reports/store/mutation_types.js

@@ -4,4 +4,3 @@ export const REQUEST_REPORTS = 'REQUEST_REPORTS';
 export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
 export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR';
 export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA';
-

app/assets/javascripts/reports/store/mutations.js

@@ -19,7 +19,6 @@ export default {
     state.status = response.status;
     state.reports = response.suites;
-
   },
   [types.RECEIVE_REPORTS_ERROR](state) {
     state.isLoading = false;
@@ -36,7 +35,7 @@ export default {
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     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)) {
         state.modal.data[key] = {
           ...state.modal.data[key],

app/assets/javascripts/reports/store/state.js

@@ -57,5 +57,4 @@ export default () => ({
       },
     },
   },
-
 });