1 files changed, 48 insertions, 3 deletions
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 99844a356c8..af50ca7361d 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -56,6 +56,11 @@ export default {
       required: false,
       default: '',
     },
+    ingressModSecurityHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     cloudRunHelpPath: {
       type: String,
       required: false,
@@ -112,6 +117,9 @@ export default {
     ingressInstalled() {
       return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
+    ingressEnableModsecurity() {
+      return this.applications.ingress.modsecurity_enabled;
+    },
     ingressExternalEndpoint() {
       return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
     },
@@ -127,6 +135,18 @@ export default {
     enableClusterApplicationElasticStack() {
       return gon.features && gon.features.enableClusterApplicationElasticStack;
     },
+    ingressModSecurityDescription() {
+      const escapedUrl = _.escape(this.ingressModSecurityHelpPath);
+
+      return sprintf(
+        s__('ClusterIntegration|Learn more about %{startLink}ModSecurity%{endLink}'),
+        {
+          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
     ingressDescription() {
       return sprintf(
         _.escape(
@@ -135,9 +155,9 @@ export default {
           ),
         ),
         {
-          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb"
               target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a>`,
         },
         false,
       );
@@ -311,6 +331,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :request-reason="applications.ingress.requestReason"
         :installed="applications.ingress.installed"
         :install-failed="applications.ingress.installFailed"
+        :install-application-request-params="{
+          modsecurity_enabled: applications.ingress.modsecurity_enabled,
+        }"
         :uninstallable="applications.ingress.uninstallable"
         :uninstall-successful="applications.ingress.uninstallSuccessful"
         :uninstall-failed="applications.ingress.uninstallFailed"
@@ -326,6 +349,26 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
             }}
           </p>
 
+          <template>
+            <div class="form-group">
+              <div class="form-check form-check-inline">
+                <input
+                  v-model="applications.ingress.modsecurity_enabled"
+                  :disabled="ingressInstalled"
+                  type="checkbox"
+                  autocomplete="off"
+                  class="form-check-input"
+                />
+                <label class="form-check-label label-bold" for="ingress-enable-modsecurity">
+                  {{ s__('ClusterIntegration|Enable Web Application Firewall') }}
+                </label>
+              </div>
+              <p class="form-text text-muted">
+                <strong v-html="ingressModSecurityDescription"></strong>
+              </p>
+            </div>
+          </template>
+
           <template v-if="ingressInstalled">
             <div class="form-group">
               <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
@@ -375,7 +418,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
             </p>
           </template>
           <template v-if="!ingressInstalled">
-            <div class="bs-callout bs-callout-info" v-html="ingressDescription"></div>
+            <div class="bs-callout bs-callout-info">
+              <strong v-html="ingressDescription"></strong>
+            </div>
           </template>
         </div>
       </application-row>