debian-mirror-gitlab/app/assets/javascripts/security_configuration/components/app.vue

274 lines
8.7 KiB
Vue
Raw Normal View History

2021-03-11 19:13:27 +05:30
<script>
2021-12-11 22:18:48 +05:30
import { GlTab, GlTabs, GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
2021-10-27 15:23:28 +05:30
import { __, s__ } from '~/locale';
2022-01-26 12:08:38 +05:30
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2021-10-27 15:23:28 +05:30
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from './constants';
import FeatureCard from './feature_card.vue';
2022-01-26 12:08:38 +05:30
import TrainingProviderList from './training_provider_list.vue';
2021-10-27 15:23:28 +05:30
import SectionLayout from './section_layout.vue';
import UpgradeBanner from './upgrade_banner.vue';
export const i18n = {
compliance: s__('SecurityConfiguration|Compliance'),
configurationHistory: s__('SecurityConfiguration|Configuration history'),
securityTesting: s__('SecurityConfiguration|Security testing'),
latestPipelineDescription: s__(
`SecurityConfiguration|The status of the tools only applies to the
default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
),
description: s__(
`SecurityConfiguration|Once you've enabled a scan for the default branch,
any subsequent feature branch you create will include the scan.`,
),
securityConfiguration: __('Security Configuration'),
2022-01-26 12:08:38 +05:30
vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'),
securityTraining: s__('SecurityConfiguration|Security training'),
2022-03-02 08:16:31 +05:30
securityTrainingDescription: s__(
'SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability.',
),
2021-10-27 15:23:28 +05:30
};
2021-03-11 19:13:27 +05:30
export default {
2021-10-27 15:23:28 +05:30
i18n,
2021-03-11 19:13:27 +05:30
components: {
2021-10-27 15:23:28 +05:30
AutoDevOpsAlert,
AutoDevOpsEnabledAlert,
FeatureCard,
2021-12-11 22:18:48 +05:30
GlAlert,
2021-10-27 15:23:28 +05:30
GlLink,
GlSprintf,
GlTab,
GlTabs,
LocalStorageSync,
SectionLayout,
UpgradeBanner,
UserCalloutDismisser,
2022-01-26 12:08:38 +05:30
TrainingProviderList,
2021-10-27 15:23:28 +05:30
},
2022-01-26 12:08:38 +05:30
mixins: [glFeatureFlagsMixin()],
2021-10-27 15:23:28 +05:30
inject: ['projectPath'],
props: {
augmentedSecurityFeatures: {
type: Array,
required: true,
},
augmentedComplianceFeatures: {
type: Array,
required: true,
},
gitlabCiPresent: {
type: Boolean,
required: false,
default: false,
},
autoDevopsEnabled: {
type: Boolean,
required: false,
default: false,
},
canEnableAutoDevops: {
type: Boolean,
required: false,
default: false,
},
gitlabCiHistoryPath: {
type: String,
required: false,
default: '',
},
latestPipelinePath: {
type: String,
required: false,
default: '',
},
},
data() {
return {
autoDevopsEnabledAlertDismissedProjects: [],
2021-12-11 22:18:48 +05:30
errorMessage: '',
2021-10-27 15:23:28 +05:30
};
},
computed: {
canUpgrade() {
return [...this.augmentedSecurityFeatures, ...this.augmentedComplianceFeatures].some(
({ available }) => !available,
);
},
canViewCiHistory() {
return Boolean(this.gitlabCiPresent && this.gitlabCiHistoryPath);
},
shouldShowDevopsAlert() {
return !this.autoDevopsEnabled && !this.gitlabCiPresent && this.canEnableAutoDevops;
},
shouldShowAutoDevopsEnabledAlert() {
return (
this.autoDevopsEnabled &&
!this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectPath)
);
},
},
methods: {
dismissAutoDevopsEnabledAlert() {
const dismissedProjects = new Set(this.autoDevopsEnabledAlertDismissedProjects);
dismissedProjects.add(this.projectPath);
this.autoDevopsEnabledAlertDismissedProjects = Array.from(dismissedProjects);
},
2021-12-11 22:18:48 +05:30
onError(message) {
this.errorMessage = message;
},
dismissAlert() {
this.errorMessage = '';
},
2021-03-11 19:13:27 +05:30
},
2021-10-27 15:23:28 +05:30
autoDevopsEnabledAlertStorageKey: AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
2021-03-11 19:13:27 +05:30
};
</script>
<template>
<article>
2021-12-11 22:18:48 +05:30
<gl-alert
v-if="errorMessage"
sticky
class="gl-top-8 gl-z-index-1"
data-testid="manage-via-mr-error-alert"
variant="danger"
@dismiss="dismissAlert"
>
{{ errorMessage }}
</gl-alert>
2021-10-27 15:23:28 +05:30
<local-storage-sync
v-model="autoDevopsEnabledAlertDismissedProjects"
:storage-key="$options.autoDevopsEnabledAlertStorageKey"
as-json
/>
<user-callout-dismisser
v-if="shouldShowDevopsAlert"
feature-name="security_configuration_devops_alert"
>
<template #default="{ dismiss, shouldShowCallout }">
<auto-dev-ops-alert v-if="shouldShowCallout" class="gl-mt-3" @dismiss="dismiss" />
</template>
</user-callout-dismisser>
2021-03-11 19:13:27 +05:30
<header>
2021-10-27 15:23:28 +05:30
<h1 class="gl-font-size-h1">{{ $options.i18n.securityConfiguration }}</h1>
2021-03-11 19:13:27 +05:30
</header>
2021-10-27 15:23:28 +05:30
<user-callout-dismisser v-if="canUpgrade" feature-name="security_configuration_upgrade_banner">
<template #default="{ dismiss, shouldShowCallout }">
<upgrade-banner v-if="shouldShowCallout" @close="dismiss" />
</template>
</user-callout-dismisser>
2022-03-02 08:16:31 +05:30
<gl-tabs content-class="gl-pt-0" sync-active-tab-with-query-params lazy>
<gl-tab
data-testid="security-testing-tab"
:title="$options.i18n.securityTesting"
query-param-value="security-testing"
>
2021-10-27 15:23:28 +05:30
<auto-dev-ops-enabled-alert
v-if="shouldShowAutoDevopsEnabledAlert"
class="gl-mt-3"
@dismiss="dismissAutoDevopsEnabledAlert"
/>
<section-layout :heading="$options.i18n.securityTesting">
<template #description>
<p>
<span data-testid="latest-pipeline-info-security">
<gl-sprintf
v-if="latestPipelinePath"
:message="$options.i18n.latestPipelineDescription"
>
<template #link="{ content }">
<gl-link :href="latestPipelinePath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</span>
{{ $options.i18n.description }}
</p>
<p v-if="canViewCiHistory">
2022-03-02 08:16:31 +05:30
<gl-link
data-testid="security-view-history-link"
data-qa-selector="security_configuration_history_link"
:href="gitlabCiHistoryPath"
>{{ $options.i18n.configurationHistory }}</gl-link
>
2021-10-27 15:23:28 +05:30
</p>
</template>
<template #features>
<feature-card
v-for="feature in augmentedSecurityFeatures"
:key="feature.type"
data-testid="security-testing-card"
:feature="feature"
class="gl-mb-6"
2021-12-11 22:18:48 +05:30
@error="onError"
2021-10-27 15:23:28 +05:30
/>
</template>
</section-layout>
</gl-tab>
2022-03-02 08:16:31 +05:30
<gl-tab
data-testid="compliance-testing-tab"
:title="$options.i18n.compliance"
query-param-value="compliance-testing"
>
2021-10-27 15:23:28 +05:30
<section-layout :heading="$options.i18n.compliance">
<template #description>
<p>
<span data-testid="latest-pipeline-info-compliance">
<gl-sprintf
v-if="latestPipelinePath"
:message="$options.i18n.latestPipelineDescription"
>
<template #link="{ content }">
<gl-link :href="latestPipelinePath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</span>
{{ $options.i18n.description }}
</p>
<p v-if="canViewCiHistory">
<gl-link data-testid="compliance-view-history-link" :href="gitlabCiHistoryPath">{{
$options.i18n.configurationHistory
}}</gl-link>
</p>
</template>
<template #features>
<feature-card
v-for="feature in augmentedComplianceFeatures"
:key="feature.type"
:feature="feature"
class="gl-mb-6"
2021-12-11 22:18:48 +05:30
@error="onError"
2021-10-27 15:23:28 +05:30
/>
</template>
</section-layout>
</gl-tab>
2022-01-26 12:08:38 +05:30
<gl-tab
v-if="glFeatures.secureVulnerabilityTraining"
data-testid="vulnerability-management-tab"
:title="$options.i18n.vulnerabilityManagement"
2022-03-02 08:16:31 +05:30
query-param-value="vulnerability-management"
2022-01-26 12:08:38 +05:30
>
<section-layout :heading="$options.i18n.securityTraining">
2022-03-02 08:16:31 +05:30
<template #description>
<p>
{{ $options.i18n.securityTrainingDescription }}
</p>
</template>
2022-01-26 12:08:38 +05:30
<template #features>
<training-provider-list />
</template>
</section-layout>
</gl-tab>
2021-10-27 15:23:28 +05:30
</gl-tabs>
2021-03-11 19:13:27 +05:30
</article>
</template>