|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import { __ } from '../../locale';
|
|
|
|
import LoadingButton from '~/vue_shared/components/loading_button.vue';
|
|
|
|
import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
|
|
|
|
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
|
|
|
|
import { GlAlert, GlSprintf, GlLink, GlToggle, GlButton } from '@gitlab/ui';
|
|
|
|
import eventHub from '~/clusters/event_hub';
|
|
|
|
import modSecurityLogo from 'images/cluster_app_logos/modsecurity.png';
|
|
|
|
|
|
|
|
const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
|
|
|
|
const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: 'ModSecurity Web Application Firewall',
|
|
|
|
modsecurityUrl: 'https://modsecurity.org/about.html',
|
|
|
|
components: {
|
|
|
|
LoadingButton,
|
|
|
|
GlAlert,
|
|
|
|
GlSprintf,
|
|
|
|
GlLink,
|
|
|
|
GlToggle,
|
|
|
|
GlButton,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
ingress: {
|
| ... | ... | @@ -26,6 +29,10 @@ export default { |
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: () => ({
|
|
|
|
modSecurityLogo,
|
|
|
|
hasValueChanged: false,
|
|
|
|
}),
|
|
|
|
computed: {
|
|
|
|
modSecurityEnabled: {
|
|
|
|
get() {
|
| ... | ... | @@ -36,6 +43,11 @@ export default { |
|
|
|
id: INGRESS,
|
|
|
|
modSecurityEnabled: isEnabled,
|
|
|
|
});
|
|
|
|
if (this.hasValueChanged) {
|
|
|
|
this.resetStatus();
|
|
|
|
} else {
|
|
|
|
this.hasValueChanged = true;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
ingressModSecurityDescription() {
|
| ... | ... | @@ -45,13 +57,21 @@ export default { |
|
|
|
return [UPDATING].includes(this.ingress.status);
|
|
|
|
},
|
|
|
|
saveButtonDisabled() {
|
|
|
|
return [UNINSTALLING, UPDATING].includes(this.ingress.status);
|
|
|
|
return [UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status);
|
|
|
|
},
|
|
|
|
saveButtonLabel() {
|
|
|
|
return this.saving ? __('Saving') : __('Save changes');
|
|
|
|
},
|
|
|
|
ingressInstalled() {
|
|
|
|
return this.ingress.installed;
|
|
|
|
/**
|
|
|
|
* 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() {
|
|
|
|
return (
|
|
|
|
this.saving || (this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status))
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
| ... | ... | @@ -60,6 +80,11 @@ export default { |
|
|
|
id: INGRESS,
|
|
|
|
params: { modsecurity_enabled: this.ingress.modsecurity_enabled },
|
|
|
|
});
|
|
|
|
this.resetStatus();
|
|
|
|
},
|
|
|
|
resetStatus() {
|
|
|
|
eventHub.$emit('resetIngressModSecurityEnabled', INGRESS);
|
|
|
|
this.hasValueChanged = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
| ... | ... | @@ -75,25 +100,32 @@ export default { |
|
|
|
@dismiss="alert = null"
|
|
|
|
>
|
|
|
|
{{
|
|
|
|
s__('ClusterIntegration|Something went wrong while updating the Web Application Firewall.')
|
|
|
|
s__(
|
|
|
|
'ClusterIntegration|Something went wrong while trying to save your settings. Please try again.',
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</gl-alert>
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="form-check form-check-inline">
|
|
|
|
<input
|
|
|
|
v-model="modSecurityEnabled"
|
|
|
|
type="checkbox"
|
|
|
|
autocomplete="off"
|
|
|
|
class="form-check-input"
|
|
|
|
<div class="gl-responsive-table-row-layout" role="row">
|
|
|
|
<div class="table-section append-right-8 section-align-top" role="gridcell">
|
|
|
|
<img
|
|
|
|
:src="modSecurityLogo"
|
|
|
|
:alt="`${$options.title} logo`"
|
|
|
|
class="cluster-application-logo avatar s40"
|
|
|
|
/>
|
|
|
|
<label class="form-check-label label-bold" for="ingress-enable-modsecurity">
|
|
|
|
{{ s__('ClusterIntegration|Enable Web Application Firewall') }}
|
|
|
|
</label>
|
|
|
|
</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|Learn more about %{linkStart}ModSecurity%{linkEnd}')"
|
|
|
|
: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"
|
| ... | ... | @@ -103,14 +135,30 @@ export default { |
|
|
|
</gl-sprintf>
|
|
|
|
</strong>
|
|
|
|
</p>
|
|
|
|
<loading-button
|
|
|
|
v-if="ingressInstalled"
|
|
|
|
class="btn-success mt-1"
|
|
|
|
<div class="form-check form-check-inline mt-3">
|
|
|
|
<gl-toggle
|
|
|
|
v-model="modSecurityEnabled"
|
|
|
|
:label-on="__('Enabled')"
|
|
|
|
:label-off="__('Disabled')"
|
|
|
|
:disabled="saveButtonDisabled"
|
|
|
|
label-position="right"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div v-if="showButtons">
|
|
|
|
<gl-button
|
|
|
|
class="btn-success inline mr-1"
|
|
|
|
:loading="saving"
|
|
|
|
:disabled="saveButtonDisabled"
|
|
|
|
:label="saveButtonLabel"
|
|
|
|
@click="updateApplication"
|
|
|
|
/>
|
|
|
|
>
|
|
|
|
{{ saveButtonLabel }}
|
|
|
|
</gl-button>
|
|
|
|
<gl-button :disabled="saveButtonDisabled" @click="resetStatus">
|
|
|
|
{{ __('Cancel') }}
|
|
|
|
</gl-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template> |