Add latest changes from gitlab-org/gitlab@master

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;