diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-19 12:09:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-19 12:09:27 +0300 |
commit | 2af90cef2e2e9c776eae4394a43dba3be7f33d1e (patch) | |
tree | bb4bc691caa6cc74b45720ecd779517f9c8c2cd3 /app/assets/javascripts/clusters | |
parent | cf58004721ee715dd3884476f6fa0c62a7e7f247 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters')
5 files changed, 121 insertions, 18 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index e20c87ed8a0..cb9c44bc36d 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -256,7 +256,8 @@ export default class Clusters { eventHub.$on('uninstallApplication', data => this.uninstallApplication(data)); eventHub.$on('setCrossplaneProviderStack', data => this.setCrossplaneProviderStack(data)); eventHub.$on('setIngressModSecurityEnabled', data => this.setIngressModSecurityEnabled(data)); - eventHub.$on('resetIngressModSecurityEnabled', id => this.resetIngressModSecurityEnabled(id)); + eventHub.$on('setIngressModSecurityMode', data => this.setIngressModSecurityMode(data)); + eventHub.$on('resetIngressModSecurityChanges', id => this.resetIngressModSecurityChanges(id)); // Add event listener to all the banner close buttons this.addBannerCloseHandler(this.unreachableContainer, 'unreachable'); this.addBannerCloseHandler(this.authenticationFailureContainer, 'authentication_failure'); @@ -271,7 +272,8 @@ export default class Clusters { eventHub.$off('setCrossplaneProviderStack'); eventHub.$off('uninstallApplication'); eventHub.$off('setIngressModSecurityEnabled'); - eventHub.$off('resetIngressModSecurityEnabled'); + eventHub.$off('setIngressModSecurityMode'); + eventHub.$off('resetIngressModSecurityChanges'); } initPolling(method, successCallback, errorCallback) { @@ -525,8 +527,14 @@ export default class Clusters { this.store.updateAppProperty(id, 'modsecurity_enabled', modSecurityEnabled); } - resetIngressModSecurityEnabled(id) { + setIngressModSecurityMode({ id, modSecurityMode }) { + this.store.updateAppProperty(id, 'isEditingModSecurityMode', true); + this.store.updateAppProperty(id, 'modsecurity_mode', modSecurityMode); + } + + resetIngressModSecurityChanges(id) { this.store.updateAppProperty(id, 'isEditingModSecurityEnabled', false); + this.store.updateAppProperty(id, 'isEditingModSecurityMode', false); } destroy() { diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 87d190e51c4..576a9bc7743 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -313,6 +313,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity :install-failed="applications.ingress.installFailed" :install-application-request-params="{ modsecurity_enabled: applications.ingress.modsecurity_enabled, + modsecurity_mode: applications.ingress.modsecurity_mode, }" :uninstallable="applications.ingress.uninstallable" :uninstall-successful="applications.ingress.uninstallSuccessful" diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue index 98a783aab6e..6b9a926143d 100644 --- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue +++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue @@ -1,8 +1,17 @@ <script> -import _ from 'lodash'; -import { __ } from '../../locale'; -import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants'; -import { GlAlert, GlSprintf, GlLink, GlToggle, GlButton } from '@gitlab/ui'; +import { escape as esc } from 'lodash'; +import { s__, __ } from '../../locale'; +import { APPLICATION_STATUS, INGRESS, LOGGING_MODE, BLOCKING_MODE } from '~/clusters/constants'; +import { + GlAlert, + GlSprintf, + GlLink, + GlToggle, + GlButton, + GlDropdown, + GlDropdownItem, + GlIcon, +} from '@gitlab/ui'; import eventHub from '~/clusters/event_hub'; import modSecurityLogo from 'images/cluster_app_logos/modsecurity.png'; @@ -17,6 +26,9 @@ export default { GlLink, GlToggle, GlButton, + GlDropdown, + GlDropdownItem, + GlIcon, }, props: { ingress: { @@ -28,10 +40,23 @@ export default { required: false, default: '', }, + modes: { + type: Object, + required: false, + default: () => ({ + [LOGGING_MODE]: { + name: s__('ClusterIntegration|Logging mode'), + }, + [BLOCKING_MODE]: { + name: s__('ClusterIntegration|Blocking mode'), + }, + }), + }, }, data: () => ({ modSecurityLogo, - hasValueChanged: false, + initialValue: null, + initialMode: null, }), computed: { modSecurityEnabled: { @@ -39,19 +64,30 @@ export default { return this.ingress.modsecurity_enabled; }, set(isEnabled) { + if (this.initialValue === null) { + this.initialValue = this.ingress.modsecurity_enabled; + } eventHub.$emit('setIngressModSecurityEnabled', { id: INGRESS, modSecurityEnabled: isEnabled, }); - if (this.hasValueChanged) { - this.resetStatus(); - } else { - this.hasValueChanged = true; - } }, }, + 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 + ); + }, ingressModSecurityDescription() { - return _.escape(this.ingressModSecurityHelpPath); + return esc(this.ingressModSecurityHelpPath); }, saving() { return [UPDATING].includes(this.ingress.status); @@ -73,18 +109,40 @@ export default { this.saving || (this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status)) ); }, + modSecurityModeName() { + return this.modes[this.ingress.modsecurity_mode].name; + }, }, methods: { updateApplication() { eventHub.$emit('updateApplication', { id: INGRESS, - params: { modsecurity_enabled: this.ingress.modsecurity_enabled }, + params: { + modsecurity_enabled: this.ingress.modsecurity_enabled, + modsecurity_mode: this.ingress.modsecurity_mode, + }, }); this.resetStatus(); }, resetStatus() { - eventHub.$emit('resetIngressModSecurityEnabled', INGRESS); - this.hasValueChanged = false; + if (this.initialMode !== null) { + this.ingress.modsecurity_mode = this.initialMode; + } + if (this.initialValue !== null) { + 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, + }); }, }, }; @@ -144,7 +202,35 @@ export default { label-position="right" /> </div> - <div v-if="showButtons"> + <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> + <gl-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled"> + <gl-dropdown-item v-for="(mode, key) in modes" :key="key" @click="selectMode(key)"> + {{ mode.name }} + </gl-dropdown-item> + </gl-dropdown> + </div> + </div> + <div v-if="showButtons" class="mt-3"> <gl-button class="btn-success inline mr-1" :loading="saving" diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js index 9f98f170fb0..6c3046fc56b 100644 --- a/app/assets/javascripts/clusters/constants.js +++ b/app/assets/javascripts/clusters/constants.js @@ -66,3 +66,6 @@ export const APPLICATIONS = [ ]; export const INGRESS_DOMAIN_SUFFIX = '.nip.io'; + +export const LOGGING_MODE = 'logging'; +export const BLOCKING_MODE = 'blocking'; diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index 00ed939e3b4..d3382fcf9fe 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -53,9 +53,11 @@ export default class ClusterStore { ...applicationInitialState, title: s__('ClusterIntegration|Ingress'), modsecurity_enabled: false, + modsecurity_mode: null, externalIp: null, externalHostname: null, isEditingModSecurityEnabled: false, + isEditingModSecurityMode: false, updateFailed: false, }, cert_manager: { @@ -214,6 +216,9 @@ export default class ClusterStore { if (!this.state.applications.ingress.isEditingModSecurityEnabled) { this.state.applications.ingress.modsecurity_enabled = serverAppEntry.modsecurity_enabled; } + if (!this.state.applications.ingress.isEditingModSecurityMode) { + this.state.applications.ingress.modsecurity_mode = serverAppEntry.modsecurity_mode; + } } else if (appId === CERT_MANAGER) { this.state.applications.cert_manager.email = this.state.applications.cert_manager.email || serverAppEntry.email; |