Added Audit Kafka configuration panel (#2724)

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 import { useLocation } from "react-router-dom";
-import Grid from "@mui/material/Grid";
+import { Grid } from "mds";
 import { configurationElements } from "../utils";
 import EditConfiguration from "../../EventDestinations/CustomForms/EditConfiguration";
 

portal-ui/src/screens/Console/Configurations/types.ts

@@ -18,6 +18,7 @@ import { SelectorTypes } from "../Common/FormComponents/RadioGroupSelector/Radio
 
 export type KVFieldType =
   | "string"
+  | "password"
   | "number"
   | "on|off"
   | "enum"
@@ -41,6 +42,7 @@ export interface KVField {
   multiline?: boolean;
   placeholder?: string;
   withBorder?: boolean;
+  customValueProcess?: (value: string) => string;
 }
 
 export interface IConfigurationElement {

portal-ui/src/screens/Console/Configurations/utils.tsx

@@ -23,6 +23,7 @@ import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import PendingActionsIcon from "@mui/icons-material/PendingActions";
 import CallToActionIcon from "@mui/icons-material/CallToAction";
 import { IElement, IElementValue, IOverrideEnv, OverrideValue } from "./types";
+import { LogsIcon } from "mds";
 
 export const configurationElements: IElement[] = [
   {
@@ -65,6 +66,17 @@ export const configurationElements: IElement[] = [
     configuration_id: "audit_webhook",
     configuration_label: "Audit Webhook",
   },
+  {
+    icon: (
+      <LogsIcon
+        className={
+          "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
+        }
+      />
+    ),
+    configuration_id: "audit_kafka",
+    configuration_label: "Audit Kafka",
+  },
 ];
 
 export const fieldsConfigurations: any = {
@@ -281,6 +293,109 @@ export const fieldsConfigurations: any = {
       placeholder: "Enter Auth Token",
     },
   ],
+  audit_kafka: [
+    {
+      name: "enable",
+      required: false,
+      label: "Enable",
+      tooltip: "Enable audit_kafka target",
+      type: "on|off",
+      customValueProcess: (origValue: string) => {
+        return origValue === "" || origValue === "on" ? "on" : "off";
+      },
+    },
+    {
+      name: "brokers",
+      required: true,
+      label: "Brokers",
+      type: "csv",
+      placeholder: "Enter Kafka broker",
+    },
+    {
+      name: "topic",
+      required: false,
+      label: "Topic",
+      type: "string",
+      placeholder: "Enter Kafka Topic",
+      tooltip: "Kafka topic used for bucket notifications",
+    },
+    {
+      name: "sasl",
+      required: false,
+      label: "Use SASL",
+      tooltip: "Enable SASL authentication",
+      type: "on|off",
+    },
+    {
+      name: "sasl_username",
+      required: false,
+      label: "SASL Username",
+      type: "string",
+      placeholder: "Enter SASL Username",
+      tooltip: "Username for SASL/PLAIN or SASL/SCRAM authentication",
+    },
+    {
+      name: "sasl_password",
+      required: false,
+      label: "SASL Password",
+      type: "password",
+      placeholder: "Enter SASL Password",
+      tooltip: "Password for SASL/PLAIN or SASL/SCRAM authentication",
+    },
+    {
+      name: "sasl_mechanism",
+      required: false,
+      label: "SASL Mechanism",
+      type: "string",
+      placeholder: "Enter SASL Mechanism",
+      tooltip: "SASL authentication mechanism",
+    },
+    {
+      name: "tls",
+      required: false,
+      label: "Use TLS",
+      tooltip: "Enable TLS",
+      type: "on|off",
+    },
+    {
+      name: "tls_skip_verify",
+      required: false,
+      label: "Skip TLS Verification",
+      tooltip: "Trust server TLS without verification",
+      type: "on|off",
+    },
+    {
+      name: "client_tls_cert",
+      required: false,
+      label: "Client Cert",
+      tooltip: "Client cert for mTLS authentication",
+      type: "string",
+      placeholder: "Enter Client Cert",
+    },
+    {
+      name: "client_tls_key",
+      required: false,
+      label: "Client Cert Key",
+      tooltip: "Client cert key for mTLS authentication",
+      type: "string",
+      placeholder: "Enter Client Cert Key",
+    },
+    {
+      name: "tls_client_auth",
+      required: false,
+      label: "TLS Client Auth",
+      tooltip:
+        "ClientAuth determines the Kafka server's policy for TLS client auth",
+      type: "string",
+    },
+    {
+      name: "version",
+      required: false,
+      label: "Version",
+      tooltip: "Specify the version of the Kafka cluster",
+      type: "string",
+    },
+  ],
 };
 
 export const removeEmptyFields = (formFields: IElementValue[]) => {

portal-ui/src/screens/Console/EventDestinations/CustomForms/EditConfiguration.tsx

@@ -40,6 +40,7 @@ import {
   IConfigurationSys,
   IElementValue,
   IOverrideEnv,
+  KVField,
 } from "../../Configurations/types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import ResetConfigurationModal from "./ResetConfigurationModal";
@@ -110,7 +111,24 @@ const EditConfiguration = ({
           .invoke("GET", `/api/v1/configs/${configId}`)
           .then((res) => {
             setConfigSubsysList(res);
-            const keyVals = get(res[0], "key_values", []);
+            let values: IElementValue[] = get(res[0], "key_values", []);
+
+            const fieldsConfig: KVField[] = fieldsConfigurations[configId];
+
+            const keyVals = fieldsConfig.map((field) => {
+              const includedValue = values.find(
+                (element: IElementValue) => element.key === field.name
+              );
+              const customValue = includedValue?.value || "";
+
+              return {
+                key: field.name,
+                value: field.customValueProcess
+                  ? field.customValueProcess(customValue)
+                  : customValue,
+              };
+            });
+
             setConfigValues(keyVals);
             setOverrideEnvs(overrideFields(keyVals));
             dispatch(configurationIsLoading(false));

portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx

@@ -115,7 +115,6 @@ const OBHeader = ({ bucketName }: IOBHeader) => {
             <BackLink
               label={"Object Browser"}
               onClick={() => {
-                console.log("clicke");
                 navigate(IAM_PAGES.OBJECT_BROWSER_VIEW);
               }}
             />