Merge pull request #4620 from Infisical/ENG-3873

add qradar as a preview option for log streams

frontend/src/helpers/auditLogStreams.ts

@@ -12,7 +12,8 @@ export const AUDIT_LOG_STREAM_PROVIDER_MAP: Record<
   [LogProvider.Cribl]: { name: "Cribl", image: "Cribl.png", size: 60 },
   [LogProvider.Custom]: { name: "Custom", icon: faCode },
   [LogProvider.Datadog]: { name: "Datadog", image: "Datadog.png" },
-  [LogProvider.Splunk]: { name: "Splunk", image: "Splunk.png", size: 65 }
+  [LogProvider.Splunk]: { name: "Splunk", image: "Splunk.png", size: 65 },
+  [LogProvider.QRadar]: { name: "IBM QRadar", image: "IBM.png" }
 };
 
 // Strictly for showing to the client in the front-end

frontend/src/hooks/api/auditLogStreams/enums.ts

@@ -3,5 +3,6 @@ export enum LogProvider {
   Cribl = "cribl",
   Custom = "custom",
   Datadog = "datadog",
-  Splunk = "splunk"
+  Splunk = "splunk",
+  QRadar = "qradar"
 }

frontend/src/hooks/api/auditLogStreams/types/index.ts

@@ -3,6 +3,7 @@ import { TAzureProviderLogStream } from "./providers/azure-provider";
 import { TCriblProviderLogStream } from "./providers/cribl-provider";
 import { TCustomProviderLogStream } from "./providers/custom-provider";
 import { TDatadogProviderLogStream } from "./providers/datadog-provider";
+import { TQRadarProviderLogStream } from "./providers/qradar-provider";
 import { TSplunkProviderLogStream } from "./providers/splunk-provider";
 
 export type TAuditLogStream =
@@ -18,6 +19,7 @@ export type TAuditLogStreamProviderMap = {
   [LogProvider.Custom]: TCustomProviderLogStream;
   [LogProvider.Datadog]: TDatadogProviderLogStream;
   [LogProvider.Splunk]: TSplunkProviderLogStream;
+  [LogProvider.QRadar]: TQRadarProviderLogStream;
 };
 
 export type TCreateAuditLogStreamDTO = Pick<TAuditLogStream, "provider" | "credentials">;

frontend/src/hooks/api/auditLogStreams/types/providers/qradar-provider.ts

@@ -0,0 +1,7 @@
+import { LogProvider } from "../../enums";
+import { TRootProviderLogStream } from "./root-provider";
+
+export type TQRadarProviderLogStream = TRootProviderLogStream & {
+  provider: LogProvider.QRadar;
+  // credentials: {};
+};

frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx

@@ -2,9 +2,10 @@ import { useMemo } from "react";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { EmptyState, Spinner } from "@app/components/v2";
 import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
-import { usePagination, useResetPageHelper } from "@app/hooks";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useGetAuditLogStreamOptions } from "@app/hooks/api";
 import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
 
@@ -15,6 +16,8 @@ type Props = {
 // TODO: When we have more than 1 page of providers, uncomment the search components
 
 export const LogStreamProviderSelect = ({ onSelect }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"]);
+
   const { isPending, data: logStreamOptions } = useGetAuditLogStreamOptions();
 
   const { search, setPage, page, perPage, offset } = usePagination("", {
@@ -23,7 +26,11 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
 
   const filteredOptions = useMemo(
     () =>
-      (logStreamOptions || [])
+      [
+        ...(logStreamOptions || []),
+        // QRadar is a planned provider
+        { name: "IBM QRadar", provider: LogProvider.QRadar }
+      ]
         .filter(
           ({ name, provider }) =>
             name.toLowerCase().includes(search.trim().toLowerCase()) ||
@@ -54,13 +61,6 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
 
   return (
     <div className="flex flex-col gap-4">
-      {/* <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search options..."
-        className="bg-mineshaft-800 placeholder:text-mineshaft-400"
-      /> */}
       <div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
         {filteredOptions.slice(offset, perPage * page)?.map((option) => {
           const { image, icon, name, size = 50 } = AUDIT_LOG_STREAM_PROVIDER_MAP[option.provider];
@@ -68,7 +68,13 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
           return (
             <button
               type="button"
-              onClick={() => onSelect(option.provider)}
+              onClick={() => {
+                if (option.provider === LogProvider.QRadar) {
+                  handlePopUpOpen("upgradePlan");
+                } else {
+                  onSelect(option.provider);
+                }
+              }}
               className={`group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 ${option.provider === LogProvider.Custom ? "bg-mineshaft-700/30 hover:bg-mineshaft-600/30" : "bg-mineshaft-700 hover:bg-mineshaft-600"} p-4 duration-200`}
             >
               {image && (
@@ -100,56 +106,11 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
           />
         )}
       </div>
-      {/* {Boolean(filteredOptions.length) && (
-        <Pagination
-          startAdornment={
-            <Tooltip
-              side="bottom"
-              className="max-w-sm py-4"
-              content={
-                <>
-                  <p className="mb-2">Infisical is constantly adding support for more providers.</p>
-                  <p>
-                    {`If you don't see the third-party
-            provider you're looking for,`}{" "}
-                    <a
-                      target="_blank"
-                      className="underline hover:text-mineshaft-300"
-                      href="https://infisical.com/slack"
-                      rel="noopener noreferrer"
-                    >
-                      let us know on Slack
-                    </a>{" "}
-                    or{" "}
-                    <a
-                      target="_blank"
-                      className="underline hover:text-mineshaft-300"
-                      href="https://github.com/Infisical/infisical/discussions"
-                      rel="noopener noreferrer"
-                    >
-                      make a request on GitHub
-                    </a>
-                    .
-                  </p>
-                </>
-              }
-            >
-              <div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
-                <span className="text-xs">
-                  Don&#39;t see the third-party provider you&#39;re looking for?
-                </span>
-                <FontAwesomeIcon size="xs" icon={faInfoCircle} />
-              </div>
-            </Tooltip>
-          }
-          count={filteredOptions.length}
-          page={page}
-          perPage={perPage}
-          onChangePage={setPage}
-          onChangePerPage={setPerPage}
-          perPageList={[16]}
-        />
-      )} */}
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="This audit log stream provider requires an enterprise license."
+      />
     </div>
   );
 };