summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
blob: b373d83a44b3cfbc3ae635780a6d68957040b8f7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<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,
    },
    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);
      },
    },
    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);
      },
      shouldRenderIssuesList(report) {
        return (
          report.existing_failures.length > 0 ||
          report.new_failures.length > 0 ||
          report.resolved_failures.length > 0
        );
      },
    },
  };
</script>
<template>
  <report-section
    :status="summaryStatus"
    :success-text="groupedSummaryText"
    :loading-text="groupedSummaryText"
    :error-text="groupedSummaryText"
    :has-issues="reports.length > 0"
    class="mr-widget-section grouped-security-reports mr-report"
  >
    <div
      slot="body"
      class="mr-widget-grouped-section report-block"
    >
      <template
        v-for="(report, i) in reports"
      >
        <summary-row
          :key="`summary-row-${i}`"
          :summary="reportText(report)"
          :status-icon="getReportIcon(report)"
        />
        <issues-list
          v-if="shouldRenderIssuesList(report)"
          :key="`issues-list-${i}`"
          :unresolved-issues="report.existing_failures"
          :new-issues="report.new_failures"
          :resolved-issues="report.resolved_failures"
          :component="$options.componentNames.TestIssueBody"
          class="report-block-group-list"
        />
      </template>

      <modal
        :title="modalTitle"
        :modal-data="modalData"
      />
    </div>
  </report-section>
</template>