Add latest changes from gitlab-org/gitlab@master

2 files changed, 142 insertions, 50 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index f6fb05ff0ec..de019593a76 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -689,6 +689,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
           host: applications.fluentd.host,
           port: applications.fluentd.port,
           protocol: applications.fluentd.protocol,
+          waf_log_enabled: applications.fluentd.wafLogEnabled,
+          cilium_log_enabled: applications.fluentd.ciliumLogEnabled,
         }"
         :uninstallable="applications.fluentd.uninstallable"
         :uninstall-successful="applications.fluentd.uninstallSuccessful"
@@ -701,12 +703,20 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
           <p>
             {{
               s__(
-                `ClusterIntegration|Fluentd is an open source data collector, which lets you unify the data collection and consumption for a better use and understanding of data. Export Web Application Firewall logs to your favorite SIEM.`,
+                `ClusterIntegration|Fluentd is an open source data collector, which lets you unify the data collection and consumption for a better use and understanding of data. It requires at least one of the following logs to be successfully installed.`,
               )
             }}
           </p>
 
-          <fluentd-output-settings :fluentd="applications.fluentd" />
+          <fluentd-output-settings
+            :port="applications.fluentd.port"
+            :protocol="applications.fluentd.protocol"
+            :host="applications.fluentd.host"
+            :waf-log-enabled="applications.fluentd.wafLogEnabled"
+            :cilium-log-enabled="applications.fluentd.ciliumLogEnabled"
+            :status="applications.fluentd.status"
+            :update-failed="applications.fluentd.updateFailed"
+          />
         </div>
       </application-row>
     </div>
diff --git a/app/assets/javascripts/clusters/components/fluentd_output_settings.vue b/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
index 97b030927df..1884b501a20 100644
--- a/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
+++ b/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
@@ -1,8 +1,15 @@
 <script>
 import { __ } from '~/locale';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
-import { GlAlert, GlDeprecatedButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlDeprecatedButton,
+  GlDropdown,
+  GlDropdownItem,
+  GlFormCheckbox,
+} from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
+import { mapValues } from 'lodash';
 
 const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
 
@@ -12,24 +19,62 @@ export default {
     GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
+    GlFormCheckbox,
   },
   props: {
-    fluentd: {
-      type: Object,
-      required: true,
-    },
     protocols: {
       type: Array,
       required: false,
       default: () => ['TCP', 'UDP'],
     },
+    status: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updateFailed: {
+      type: Boolean,
+      required: false,
+    },
+    protocol: {
+      type: String,
+      required: false,
+      default: () => __('Protocol'),
+    },
+    port: {
+      type: Number,
+      required: false,
+      default: 514,
+    },
+    host: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    wafLogEnabled: {
+      type: Boolean,
+      required: false,
+    },
+    ciliumLogEnabled: {
+      type: Boolean,
+      required: false,
+    },
   },
+  data: () => ({
+    currentServerSideSettings: {
+      host: null,
+      port: null,
+      protocol: null,
+      wafLogEnabled: null,
+      ciliumLogEnabled: null,
+    },
+  }),
   computed: {
     isSaving() {
-      return [UPDATING].includes(this.fluentd.status);
+      return [UPDATING].includes(this.status);
     },
     saveButtonDisabled() {
-      return [UNINSTALLING, UPDATING, INSTALLING].includes(this.fluentd.status);
+      return [UNINSTALLING, UPDATING, INSTALLING].includes(this.status);
     },
     saveButtonLabel() {
       return this.isSaving ? __('Saving') : __('Save changes');
@@ -41,32 +86,23 @@ export default {
      *     neither getting installed nor updated.
      */
     showButtons() {
-      return (
-        this.isSaving ||
-        (this.fluentd.isEditingSettings && [INSTALLED, UPDATED].includes(this.fluentd.status))
-      );
+      return this.isSaving || (this.changedByUser && [INSTALLED, UPDATED].includes(this.status));
     },
     protocolName() {
-      if (this.fluentd.protocol !== null && this.fluentd.protocol !== undefined) {
-        return this.fluentd.protocol.toUpperCase();
+      if (this.protocol) {
+        return this.protocol.toUpperCase();
       }
       return __('Protocol');
     },
-    fluentdPort: {
-      get() {
-        return this.fluentd.port;
-      },
-      set(port) {
-        this.setFluentSettings({ port });
-      },
-    },
-    fluentdHost: {
-      get() {
-        return this.fluentd.host;
-      },
-      set(host) {
-        this.setFluentSettings({ host });
-      },
+    changedByUser() {
+      return Object.entries(this.currentServerSideSettings).some(([key, value]) => {
+        return value !== null && value !== this[key];
+      });
+    },
+  },
+  watch: {
+    status() {
+      this.resetCurrentServerSideSettings();
     },
   },
   methods: {
@@ -74,38 +110,64 @@ export default {
       eventHub.$emit('updateApplication', {
         id: FLUENTD,
         params: {
-          port: this.fluentd.port,
-          protocol: this.fluentd.protocol,
-          host: this.fluentd.host,
+          port: this.port,
+          protocol: this.protocol,
+          host: this.host,
+          waf_log_enabled: this.wafLogEnabled,
+          cilium_log_enabled: this.ciliumLogEnabled,
         },
       });
-      this.resetStatus();
+    },
+    resetCurrentServerSideSettings() {
+      this.currentServerSideSettings = mapValues(this.currentServerSideSettings, () => {
+        return null;
+      });
     },
     resetStatus() {
-      this.fluentd.isEditingSettings = false;
+      const newSettings = mapValues(this.currentServerSideSettings, (value, key) => {
+        return value === null ? this[key] : value;
+      });
+      eventHub.$emit('setFluentdSettings', {
+        ...newSettings,
+        isEditingSettings: false,
+      });
     },
-    selectProtocol(protocol) {
-      this.setFluentSettings({ protocol });
+    updateCurrentServerSideSettings(settings) {
+      Object.keys(settings).forEach(key => {
+        if (this.currentServerSideSettings[key] === null) {
+          this.currentServerSideSettings[key] = this[key];
+        }
+      });
     },
-    setFluentSettings({ port, protocol, host }) {
-      this.fluentd.isEditingSettings = true;
-      const newPort = port !== undefined ? port : this.fluentd.port;
-      const newProtocol = protocol !== undefined ? protocol : this.fluentd.protocol;
-      const newHost = host !== undefined ? host : this.fluentd.host;
+    setFluentdSettings(settings) {
+      this.updateCurrentServerSideSettings(settings);
       eventHub.$emit('setFluentdSettings', {
-        id: FLUENTD,
-        port: newPort,
-        protocol: newProtocol,
-        host: newHost,
+        ...settings,
+        isEditingSettings: true,
       });
     },
+    selectProtocol(protocol) {
+      this.setFluentdSettings({ protocol });
+    },
+    hostChanged(host) {
+      this.setFluentdSettings({ host });
+    },
+    portChanged(port) {
+      this.setFluentdSettings({ port: Number(port) });
+    },
+    wafLogChanged(wafLogEnabled) {
+      this.setFluentdSettings({ wafLogEnabled });
+    },
+    ciliumLogChanged(ciliumLogEnabled) {
+      this.setFluentdSettings({ ciliumLogEnabled });
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-alert v-if="fluentd.updateFailed" class="mb-3" variant="danger" :dismissible="false">
+    <gl-alert v-if="updateFailed" class="mb-3" variant="danger" :dismissible="false">
       {{
         s__(
           'ClusterIntegration|Something went wrong while trying to save your settings. Please try again.',
@@ -117,13 +179,25 @@ export default {
         <label for="fluentd-host">
           <strong>{{ s__('ClusterIntegration|SIEM Hostname') }}</strong>
         </label>
-        <input id="fluentd-host" v-model="fluentdHost" type="text" class="form-control" />
+        <input
+          id="fluentd-host"
+          :value="host"
+          type="text"
+          class="form-control"
+          @input="hostChanged($event.target.value)"
+        />
       </div>
       <div class="form-group">
         <label for="fluentd-port">
           <strong>{{ s__('ClusterIntegration|SIEM Port') }}</strong>
         </label>
-        <input id="fluentd-port" v-model="fluentdPort" type="text" class="form-control" />
+        <input
+          id="fluentd-port"
+          :value="port"
+          type="number"
+          class="form-control"
+          @input="portChanged($event.target.value)"
+        />
       </div>
       <div class="form-group">
         <label for="fluentd-protocol">
@@ -133,12 +207,20 @@ export default {
           <gl-dropdown-item
             v-for="(value, index) in protocols"
             :key="index"
-            @click="selectProtocol(value)"
+            @click="selectProtocol(value.toLowerCase())"
           >
             {{ value }}
           </gl-dropdown-item>
         </gl-dropdown>
       </div>
+      <div class="form-group flex flex-wrap">
+        <gl-form-checkbox :checked="wafLogEnabled" @input="wafLogChanged">
+          <strong>{{ s__('ClusterIntegration|Send ModSecurity Logs') }}</strong>
+        </gl-form-checkbox>
+        <gl-form-checkbox :checked="ciliumLogEnabled" @input="ciliumLogChanged">
+          <strong>{{ s__('ClusterIntegration|Send Cilium Logs') }}</strong>
+        </gl-form-checkbox>
+      </div>
       <div v-if="showButtons" class="mt-3">
         <gl-deprecated-button
           ref="saveBtn"