debian-mirror-gitlab/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

267 lines
7.8 KiB
Vue
Raw Normal View History

2020-04-08 14:13:33 +05:30
<script>
2020-04-22 19:07:51 +05:30
import {
GlAlert,
GlSprintf,
GlLink,
GlToggle,
2021-01-03 14:25:43 +05:30
GlButton,
GlDropdown,
GlDropdownItem,
2020-04-22 19:07:51 +05:30
GlIcon,
} from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { escape } from 'lodash';
2020-06-23 00:09:42 +05:30
import modSecurityLogo from 'images/cluster_app_logos/gitlab.png';
2020-10-24 23:57:45 +05:30
import { APPLICATION_STATUS, INGRESS, LOGGING_MODE, BLOCKING_MODE } from '~/clusters/constants';
import eventHub from '~/clusters/event_hub';
2021-03-11 19:13:27 +05:30
import { s__, __ } from '../../locale';
2020-04-08 14:13:33 +05:30
const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
export default {
2021-04-17 20:07:23 +05:30
i18n: {
modSecurityEnabled: s__('ClusterIntegration|ModSecurity enabled'),
},
2020-06-23 00:09:42 +05:30
title: __('Web Application Firewall'),
2020-04-08 14:13:33 +05:30
modsecurityUrl: 'https://modsecurity.org/about.html',
components: {
GlAlert,
GlSprintf,
GlLink,
GlToggle,
2021-01-03 14:25:43 +05:30
GlButton,
GlDropdown,
GlDropdownItem,
2020-04-22 19:07:51 +05:30
GlIcon,
2020-04-08 14:13:33 +05:30
},
props: {
ingress: {
type: Object,
required: true,
},
ingressModSecurityHelpPath: {
type: String,
required: false,
default: '',
},
2020-04-22 19:07:51 +05:30
modes: {
type: Object,
required: false,
default: () => ({
[LOGGING_MODE]: {
name: s__('ClusterIntegration|Logging mode'),
},
[BLOCKING_MODE]: {
name: s__('ClusterIntegration|Blocking mode'),
},
}),
},
2020-04-08 14:13:33 +05:30
},
2021-04-17 20:07:23 +05:30
data() {
return {
modSecurityLogo,
initialValue: null,
initialMode: null,
};
},
2020-04-08 14:13:33 +05:30
computed: {
modSecurityEnabled: {
get() {
return this.ingress.modsecurity_enabled;
},
set(isEnabled) {
2020-04-22 19:07:51 +05:30
if (this.initialValue === null) {
this.initialValue = this.ingress.modsecurity_enabled;
}
2020-04-08 14:13:33 +05:30
eventHub.$emit('setIngressModSecurityEnabled', {
id: INGRESS,
modSecurityEnabled: isEnabled,
});
},
},
2020-04-22 19:07:51 +05:30
hasValueChanged() {
return this.modSecurityEnabledChanged || this.modSecurityModeChanged;
},
modSecurityEnabledChanged() {
return this.initialValue !== null && this.initialValue !== this.ingress.modsecurity_enabled;
},
modSecurityModeChanged() {
return (
this.ingress.modsecurity_enabled &&
this.initialMode !== null &&
this.initialMode !== this.ingress.modsecurity_mode
);
},
2020-04-08 14:13:33 +05:30
ingressModSecurityDescription() {
2020-05-24 23:13:21 +05:30
return escape(this.ingressModSecurityHelpPath);
2020-04-08 14:13:33 +05:30
},
saving() {
return [UPDATING].includes(this.ingress.status);
},
saveButtonDisabled() {
2020-04-22 19:07:51 +05:30
return (
[UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status) ||
this.ingress.updateAvailable
);
2020-04-08 14:13:33 +05:30
},
saveButtonLabel() {
return this.saving ? __('Saving') : __('Save changes');
},
/**
* Returns true either when:
* - The application is getting updated.
* - The user has changed some of the settings for an application which is
* neither getting installed nor updated.
*/
showButtons() {
2020-04-22 19:07:51 +05:30
return this.saving || this.valuesChangedByUser;
},
modSecurityModeName() {
return this.modes[this.ingress.modsecurity_mode].name;
},
valuesChangedByUser() {
return this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status);
2020-04-08 14:13:33 +05:30
},
},
methods: {
updateApplication() {
eventHub.$emit('updateApplication', {
id: INGRESS,
2020-04-22 19:07:51 +05:30
params: {
modsecurity_enabled: this.ingress.modsecurity_enabled,
modsecurity_mode: this.ingress.modsecurity_mode,
},
2020-04-08 14:13:33 +05:30
});
this.resetStatus();
},
resetStatus() {
2020-04-22 19:07:51 +05:30
if (this.initialMode !== null) {
2021-03-11 19:13:27 +05:30
// eslint-disable-next-line vue/no-mutating-props
2020-04-22 19:07:51 +05:30
this.ingress.modsecurity_mode = this.initialMode;
}
if (this.initialValue !== null) {
2021-03-11 19:13:27 +05:30
// eslint-disable-next-line vue/no-mutating-props
2020-04-22 19:07:51 +05:30
this.ingress.modsecurity_enabled = this.initialValue;
}
this.initialValue = null;
this.initialMode = null;
eventHub.$emit('resetIngressModSecurityChanges', INGRESS);
},
selectMode(modeKey) {
if (this.initialMode === null) {
this.initialMode = this.ingress.modsecurity_mode;
}
eventHub.$emit('setIngressModSecurityMode', {
id: INGRESS,
modSecurityMode: modeKey,
});
2020-04-08 14:13:33 +05:30
},
},
};
</script>
<template>
<div>
<gl-alert
v-if="ingress.updateFailed"
class="mb-3"
variant="danger"
:dismissible="false"
@dismiss="alert = null"
>
{{
s__(
'ClusterIntegration|Something went wrong while trying to save your settings. Please try again.',
)
}}
</gl-alert>
<div class="gl-responsive-table-row-layout" role="row">
2020-06-23 00:09:42 +05:30
<div class="table-section gl-mr-3 section-align-top" role="gridcell">
2020-04-08 14:13:33 +05:30
<img
:src="modSecurityLogo"
:alt="`${$options.title} logo`"
class="cluster-application-logo avatar s40"
/>
</div>
<div class="table-section section-wrap" role="gridcell">
<strong>
<gl-link :href="$options.modsecurityUrl" target="_blank">{{ $options.title }} </gl-link>
</strong>
<div class="form-group">
<p class="form-text text-muted">
<strong>
<gl-sprintf
:message="
s__(
'ClusterIntegration|Real-time web application monitoring, logging and access control. %{linkStart}More information%{linkEnd}',
)
"
>
<template #link="{ content }">
<gl-link :href="ingressModSecurityDescription" target="_blank"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
</strong>
</p>
<div class="form-check form-check-inline mt-3">
2021-04-17 20:07:23 +05:30
<gl-toggle
v-model="modSecurityEnabled"
:disabled="saveButtonDisabled"
:label="$options.i18n.modSecurityEnabled"
label-position="hidden"
/>
2020-04-08 14:13:33 +05:30
</div>
2020-04-22 19:07:51 +05:30
<div
v-if="ingress.modsecurity_enabled"
class="gl-responsive-table-row-layout mt-3"
role="row"
>
<div class="table-section section-wrap" role="gridcell">
<strong>
{{ s__('ClusterIntegration|Global default') }}
<gl-icon name="earth" class="align-text-bottom" />
</strong>
<div class="form-group">
<p class="form-text text-muted">
<strong>
{{
s__(
'ClusterIntegration|Set the global mode for the WAF in this cluster. This can be overridden at the environmental level.',
)
}}
</strong>
</p>
</div>
2021-01-03 14:25:43 +05:30
<gl-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
<gl-dropdown-item v-for="(mode, key) in modes" :key="key" @click="selectMode(key)">
2020-04-22 19:07:51 +05:30
{{ mode.name }}
2021-01-03 14:25:43 +05:30
</gl-dropdown-item>
</gl-dropdown>
2020-04-22 19:07:51 +05:30
</div>
</div>
2021-01-03 14:25:43 +05:30
<div v-if="showButtons" class="gl-mt-5 gl-display-flex">
<gl-button
variant="success"
category="primary"
data-qa-selector="save_ingress_modsecurity_settings"
2020-04-08 14:13:33 +05:30
:loading="saving"
:disabled="saveButtonDisabled"
@click="updateApplication"
>
{{ saveButtonLabel }}
2021-01-03 14:25:43 +05:30
</gl-button>
<gl-button
data-qa-selector="cancel_ingress_modsecurity_settings"
:disabled="saveButtonDisabled"
@click="resetStatus"
>
2020-04-08 14:13:33 +05:30
{{ __('Cancel') }}
2021-01-03 14:25:43 +05:30
</gl-button>
2020-04-08 14:13:33 +05:30
</div>
</div>
</div>
</div>
</div>
</template>