diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/security_reports')
-rw-r--r-- | app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue new file mode 100644 index 00000000000..d5696e3c8cf --- /dev/null +++ b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue @@ -0,0 +1,107 @@ +<script> +import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; +import ReportSection from '~/reports/components/report_section.vue'; +import { status } from '~/reports/constants'; +import { s__ } from '~/locale'; +import Flash from '~/flash'; +import Api from '~/api'; + +export default { + components: { + GlIcon, + GlLink, + GlSprintf, + ReportSection, + }, + props: { + pipelineId: { + type: Number, + required: true, + }, + projectId: { + type: Number, + required: true, + }, + securityReportsDocsPath: { + type: String, + required: true, + }, + }, + data() { + return { + hasSecurityReports: false, + + // Error state is shown even when successfully loaded, since success + // state suggests that the security scans detected no security problems, + // which is not necessarily the case. A future iteration will actually + // check whether problems were found and display the appropriate status. + status: status.ERROR, + }; + }, + created() { + this.checkHasSecurityReports(this.$options.reportTypes) + .then(hasSecurityReports => { + this.hasSecurityReports = hasSecurityReports; + }) + .catch(error => { + Flash({ + message: this.$options.i18n.apiError, + captureError: true, + error, + }); + }); + }, + methods: { + checkHasSecurityReports(reportTypes) { + return Api.pipelineJobs(this.projectId, this.pipelineId).then(({ data: jobs }) => + jobs.some(({ artifacts = [] }) => + artifacts.some(({ file_type }) => reportTypes.includes(file_type)), + ), + ); + }, + activatePipelinesTab() { + if (window.mrTabs) { + window.mrTabs.tabShown('pipelines'); + } + }, + }, + reportTypes: ['sast', 'secret_detection'], + i18n: { + apiError: s__( + 'SecurityReports|Failed to get security report information. Please reload the page or try again later.', + ), + scansHaveRun: s__( + 'SecurityReports|Security scans have run. Go to the %{linkStart}pipelines tab%{linkEnd} to download the security reports', + ), + securityReportsHelp: s__('SecurityReports|Security reports help page link'), + }, +}; +</script> +<template> + <report-section + v-if="hasSecurityReports" + :status="status" + :has-issues="false" + class="mr-widget-border-top mr-report" + data-testid="security-mr-widget" + > + <template #error> + <gl-sprintf :message="$options.i18n.scansHaveRun"> + <template #link="{ content }"> + <gl-link data-testid="show-pipelines" @click="activatePipelinesTab">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + + <gl-link + target="_blank" + data-testid="help" + :href="securityReportsDocsPath" + :aria-label="$options.i18n.securityReportsHelp" + > + <gl-icon name="question" /> + </gl-link> + </template> + </report-section> +</template> |