diff --git a/frontend/public/images/integrations/IBM.png b/frontend/public/images/integrations/IBM.png new file mode 100644 index 000000000..7fafbb6c3 Binary files /dev/null and b/frontend/public/images/integrations/IBM.png differ diff --git a/frontend/src/helpers/auditLogStreams.ts b/frontend/src/helpers/auditLogStreams.ts index faa132dd2..ab216957c 100644 --- a/frontend/src/helpers/auditLogStreams.ts +++ b/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 diff --git a/frontend/src/hooks/api/auditLogStreams/enums.ts b/frontend/src/hooks/api/auditLogStreams/enums.ts index ebef18574..3cc5cdffb 100644 --- a/frontend/src/hooks/api/auditLogStreams/enums.ts +++ b/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" } diff --git a/frontend/src/hooks/api/auditLogStreams/types/index.ts b/frontend/src/hooks/api/auditLogStreams/types/index.ts index f780510c2..6efd5a77d 100644 --- a/frontend/src/hooks/api/auditLogStreams/types/index.ts +++ b/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; diff --git a/frontend/src/hooks/api/auditLogStreams/types/providers/qradar-provider.ts b/frontend/src/hooks/api/auditLogStreams/types/providers/qradar-provider.ts new file mode 100644 index 000000000..d97226f4a --- /dev/null +++ b/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: {}; +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx index 26708e17b..12d2e9cb6 100644 --- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx +++ b/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 (
- {/* setSearch(e.target.value)} - leftIcon={} - placeholder="Search options..." - className="bg-mineshaft-800 placeholder:text-mineshaft-400" - /> */}
{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 (
- {/* {Boolean(filteredOptions.length) && ( - -

Infisical is constantly adding support for more providers.

-

- {`If you don't see the third-party - provider you're looking for,`}{" "} - - let us know on Slack - {" "} - or{" "} - - make a request on GitHub - - . -

- - } - > -
- - Don't see the third-party provider you're looking for? - - -
- - } - count={filteredOptions.length} - page={page} - perPage={perPage} - onChangePage={setPage} - onChangePerPage={setPerPage} - perPageList={[16]} - /> - )} */} + handlePopUpToggle("upgradePlan", isOpen)} + text="This audit log stream provider requires an enterprise license." + />
); };