diff --git a/backend/src/ee/routes/v1/audit-log-stream-routers/index.ts b/backend/src/ee/routes/v1/audit-log-stream-routers/index.ts index 2f19e7522..ea3d48b30 100644 --- a/backend/src/ee/routes/v1/audit-log-stream-routers/index.ts +++ b/backend/src/ee/routes/v1/audit-log-stream-routers/index.ts @@ -1,15 +1,18 @@ import { LogProvider } from "@app/ee/services/audit-log-stream/audit-log-stream-enums"; import { - CustomProviderSchema, - SanitizedCustomProviderSchema + CreateCustomProviderLogStreamSchema, + SanitizedCustomProviderSchema, + UpdateCustomProviderLogStreamSchema } from "@app/ee/services/audit-log-stream/custom/custom-provider-schemas"; import { - DatadogProviderSchema, - SanitizedDatadogProviderSchema + CreateDatadogProviderLogStreamSchema, + SanitizedDatadogProviderSchema, + UpdateDatadogProviderLogStreamSchema } from "@app/ee/services/audit-log-stream/datadog/datadog-provider-schemas"; import { + CreateSplunkProviderLogStreamSchema, SanitizedSplunkProviderSchema, - SplunkProviderSchema + UpdateSplunkProviderLogStreamSchema } from "@app/ee/services/audit-log-stream/splunk/splunk-provider-schemas"; import { registerAuditLogStreamEndpoints } from "./audit-log-stream-endpoints"; @@ -23,8 +26,8 @@ export const AUDIT_LOG_STREAM_REGISTER_ROUTER_MAP: Record { @@ -32,8 +35,8 @@ export const AUDIT_LOG_STREAM_REGISTER_ROUTER_MAP: Record { @@ -41,8 +44,8 @@ export const AUDIT_LOG_STREAM_REGISTER_ROUTER_MAP: Record { - return [getCustomProviderListItem(), getDatadogProviderListItem(), getSplunkProviderListItem()].sort((a, b) => + return [getDatadogProviderListItem(), getSplunkProviderListItem(), getCustomProviderListItem()].sort((a, b) => a.name.localeCompare(b.name) ); }; diff --git a/backend/src/ee/services/audit-log-stream/audit-log-stream-schemas.ts b/backend/src/ee/services/audit-log-stream/audit-log-stream-schemas.ts new file mode 100644 index 000000000..4fba79107 --- /dev/null +++ b/backend/src/ee/services/audit-log-stream/audit-log-stream-schemas.ts @@ -0,0 +1,14 @@ +import { AuditLogStreamsSchema } from "@app/db/schemas"; + +export const BaseProviderSchema = AuditLogStreamsSchema.omit({ + encryptedCredentials: true, + provider: true, + + // Old "archived" values + encryptedHeadersAlgorithm: true, + encryptedHeadersCiphertext: true, + encryptedHeadersIV: true, + encryptedHeadersKeyEncoding: true, + encryptedHeadersTag: true, + url: true +}); diff --git a/backend/src/ee/services/audit-log-stream/custom/custom-provider-schemas.ts b/backend/src/ee/services/audit-log-stream/custom/custom-provider-schemas.ts index 5d375c42f..032f81be8 100644 --- a/backend/src/ee/services/audit-log-stream/custom/custom-provider-schemas.ts +++ b/backend/src/ee/services/audit-log-stream/custom/custom-provider-schemas.ts @@ -1,6 +1,7 @@ import { z } from "zod"; import { LogProvider } from "../audit-log-stream-enums"; +import { BaseProviderSchema } from "../audit-log-stream-schemas"; export const CustomProviderCredentialsSchema = z.object({ url: z.string().url().trim().min(1).max(255), @@ -12,13 +13,13 @@ export const CustomProviderCredentialsSchema = z.object({ .array() }); -export const CustomProviderSchema = z.object({ - provider: z.literal(LogProvider.Custom), +const BaseCustomProviderSchema = BaseProviderSchema.extend({ provider: z.literal(LogProvider.Custom) }); + +export const CustomProviderSchema = BaseCustomProviderSchema.extend({ credentials: CustomProviderCredentialsSchema }); -export const SanitizedCustomProviderSchema = z.object({ - provider: z.literal(LogProvider.Custom), +export const SanitizedCustomProviderSchema = BaseCustomProviderSchema.extend({ credentials: z.object({ url: CustomProviderCredentialsSchema.shape.url, // Only return header keys @@ -30,3 +31,11 @@ export const CustomProviderListItemSchema = z.object({ name: z.literal("Custom"), provider: z.literal(LogProvider.Custom) }); + +export const CreateCustomProviderLogStreamSchema = z.object({ + credentials: CustomProviderCredentialsSchema +}); + +export const UpdateCustomProviderLogStreamSchema = z.object({ + credentials: CustomProviderCredentialsSchema +}); diff --git a/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-factory.ts b/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-factory.ts index f4b8738fa..ec55784da 100644 --- a/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-factory.ts +++ b/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-factory.ts @@ -1,5 +1,6 @@ import { RawAxiosRequestHeaders } from "axios"; +import { getConfig } from "@app/lib/config/env"; import { request } from "@app/lib/config/request"; import { BadRequestError } from "@app/lib/errors"; import { blockLocalAndPrivateIpAddresses } from "@app/lib/validator"; @@ -8,6 +9,20 @@ import { AUDIT_LOG_STREAM_TIMEOUT } from "../../audit-log/audit-log-queue"; import { TLogStreamFactoryStreamLog, TLogStreamFactoryValidateCredentials } from "../audit-log-stream-types"; import { TDatadogProviderCredentials } from "./datadog-provider-types"; +function createPayload(event: Record) { + const appCfg = getConfig(); + + const ddtags = [`env:${appCfg.NODE_ENV || "unknown"}`].join(","); + + return { + ...event, + hostname: new URL(appCfg.SITE_URL || "http://infisical").hostname, + ddsource: "infisical", + service: "infisical", + ddtags + }; +} + export const DatadogProviderFactory = () => { const validateCredentials: TLogStreamFactoryValidateCredentials = async ({ credentials @@ -19,15 +34,11 @@ export const DatadogProviderFactory = () => { const streamHeaders: RawAxiosRequestHeaders = { "Content-Type": "application/json", "DD-API-KEY": token }; await request - .post( - url, - { ping: "ok" }, - { - headers: streamHeaders, - timeout: AUDIT_LOG_STREAM_TIMEOUT, - signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT) - } - ) + .post(url, createPayload({ ping: "ok" }), { + headers: streamHeaders, + timeout: AUDIT_LOG_STREAM_TIMEOUT, + signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT) + }) .catch((err) => { throw new BadRequestError({ message: `Failed to connect with Datadog: ${(err as Error)?.message}` }); }); @@ -42,15 +53,11 @@ export const DatadogProviderFactory = () => { const streamHeaders: RawAxiosRequestHeaders = { "Content-Type": "application/json", "DD-API-KEY": token }; - await request.post( - url, - { ...auditLog, ddsource: "infisical", service: "audit-logs" }, - { - headers: streamHeaders, - timeout: AUDIT_LOG_STREAM_TIMEOUT, - signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT) - } - ); + await request.post(url, createPayload(auditLog), { + headers: streamHeaders, + timeout: AUDIT_LOG_STREAM_TIMEOUT, + signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT) + }); }; return { diff --git a/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-schemas.ts b/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-schemas.ts index 7adae1ae6..0445d79f2 100644 --- a/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-schemas.ts +++ b/backend/src/ee/services/audit-log-stream/datadog/datadog-provider-schemas.ts @@ -2,6 +2,7 @@ import RE2 from "re2"; import { z } from "zod"; import { LogProvider } from "../audit-log-stream-enums"; +import { BaseProviderSchema } from "../audit-log-stream-schemas"; export const DatadogProviderCredentialsSchema = z.object({ url: z.string().url().trim().min(1).max(255), @@ -11,13 +12,13 @@ export const DatadogProviderCredentialsSchema = z.object({ .refine((val) => new RE2(/^[a-fA-F0-9]{32}$/).test(val), "Invalid Datadog API key format") }); -export const DatadogProviderSchema = z.object({ - provider: z.literal(LogProvider.Datadog), +const BaseDatadogProviderSchema = BaseProviderSchema.extend({ provider: z.literal(LogProvider.Datadog) }); + +export const DatadogProviderSchema = BaseDatadogProviderSchema.extend({ credentials: DatadogProviderCredentialsSchema }); -export const SanitizedDatadogProviderSchema = z.object({ - provider: z.literal(LogProvider.Datadog), +export const SanitizedDatadogProviderSchema = BaseDatadogProviderSchema.extend({ credentials: DatadogProviderCredentialsSchema.pick({ url: true }) @@ -27,3 +28,11 @@ export const DatadogProviderListItemSchema = z.object({ name: z.literal("Datadog"), provider: z.literal(LogProvider.Datadog) }); + +export const CreateDatadogProviderLogStreamSchema = z.object({ + credentials: DatadogProviderCredentialsSchema +}); + +export const UpdateDatadogProviderLogStreamSchema = z.object({ + credentials: DatadogProviderCredentialsSchema +}); diff --git a/backend/src/ee/services/audit-log-stream/splunk/splunk-provider-schemas.ts b/backend/src/ee/services/audit-log-stream/splunk/splunk-provider-schemas.ts index b03524951..ab28db616 100644 --- a/backend/src/ee/services/audit-log-stream/splunk/splunk-provider-schemas.ts +++ b/backend/src/ee/services/audit-log-stream/splunk/splunk-provider-schemas.ts @@ -1,19 +1,45 @@ import { z } from "zod"; import { LogProvider } from "../audit-log-stream-enums"; +import { BaseProviderSchema } from "../audit-log-stream-schemas"; export const SplunkProviderCredentialsSchema = z.object({ - hostname: z.string().url().trim().min(1).max(255), + hostname: z + .string() + .trim() + .min(1) + .max(255) + .superRefine((val, ctx) => { + if (val.includes("://")) { + ctx.addIssue({ + code: "custom", + message: "Hostname should not include protocol" + }); + return; + } + + try { + const url = new URL(`https://${val}`); + if (url.hostname !== val) { + ctx.addIssue({ + code: "custom", + message: "Must be a valid hostname without port or path" + }); + } + } catch { + ctx.addIssue({ code: "custom", message: "Invalid hostname" }); + } + }), token: z.string().uuid().trim().min(1) }); -export const SplunkProviderSchema = z.object({ - provider: z.literal(LogProvider.Splunk), +const BaseSplunkProviderSchema = BaseProviderSchema.extend({ provider: z.literal(LogProvider.Splunk) }); + +export const SplunkProviderSchema = BaseSplunkProviderSchema.extend({ credentials: SplunkProviderCredentialsSchema }); -export const SanitizedSplunkProviderSchema = z.object({ - provider: z.literal(LogProvider.Splunk), +export const SanitizedSplunkProviderSchema = BaseSplunkProviderSchema.extend({ credentials: SplunkProviderCredentialsSchema.pick({ hostname: true }) @@ -23,3 +49,11 @@ export const SplunkProviderListItemSchema = z.object({ name: z.literal("Splunk"), provider: z.literal(LogProvider.Splunk) }); + +export const CreateSplunkProviderLogStreamSchema = z.object({ + credentials: SplunkProviderCredentialsSchema +}); + +export const UpdateSplunkProviderLogStreamSchema = z.object({ + credentials: SplunkProviderCredentialsSchema +}); diff --git a/frontend/public/images/integrations/Datadog.png b/frontend/public/images/integrations/Datadog.png new file mode 100644 index 000000000..7c1b33de0 Binary files /dev/null and b/frontend/public/images/integrations/Datadog.png differ diff --git a/frontend/public/images/integrations/Splunk.png b/frontend/public/images/integrations/Splunk.png new file mode 100644 index 000000000..54f13cd25 Binary files /dev/null and b/frontend/public/images/integrations/Splunk.png differ diff --git a/frontend/src/helpers/auditLogStreams.ts b/frontend/src/helpers/auditLogStreams.ts new file mode 100644 index 000000000..c3d36a512 --- /dev/null +++ b/frontend/src/helpers/auditLogStreams.ts @@ -0,0 +1,29 @@ +import { faCode, IconDefinition } from "@fortawesome/free-solid-svg-icons"; + +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TAuditLogStream } from "@app/hooks/api/types"; +import { DiscriminativePick } from "@app/types"; + +export const AUDIT_LOG_STREAM_PROVIDER_MAP: Record< + LogProvider, + { name: string; image?: string; icon?: IconDefinition; size?: number } +> = { + [LogProvider.Custom]: { name: "Custom", icon: faCode }, + [LogProvider.Datadog]: { name: "Datadog", image: "Datadog.png" }, + [LogProvider.Splunk]: { name: "Splunk", image: "Splunk.png", size: 65 } +}; + +export function getProviderUrl( + logStream: DiscriminativePick +) { + switch (logStream.provider) { + case LogProvider.Custom: + return logStream.credentials.url; + case LogProvider.Datadog: + return logStream.credentials.url; + case LogProvider.Splunk: + return `https://${logStream.credentials.hostname}:8088/services/collector/event`; + default: + return "Not found"; + } +} diff --git a/frontend/src/hooks/api/auditLogStreams/enums.ts b/frontend/src/hooks/api/auditLogStreams/enums.ts new file mode 100644 index 000000000..9c03dc2bd --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/enums.ts @@ -0,0 +1,5 @@ +export enum LogProvider { + Datadog = "datadog", + Splunk = "splunk", + Custom = "custom" +} diff --git a/frontend/src/hooks/api/auditLogStreams/index.tsx b/frontend/src/hooks/api/auditLogStreams/index.tsx index 72b1fba1a..0c2adeab0 100644 --- a/frontend/src/hooks/api/auditLogStreams/index.tsx +++ b/frontend/src/hooks/api/auditLogStreams/index.tsx @@ -1,6 +1,2 @@ -export { - useCreateAuditLogStream, - useDeleteAuditLogStream, - useUpdateAuditLogStream -} from "./mutations"; -export { useGetAuditLogStreamDetails, useGetAuditLogStreams } from "./queries"; +export * from "./mutations"; +export * from "./queries"; diff --git a/frontend/src/hooks/api/auditLogStreams/mutations.tsx b/frontend/src/hooks/api/auditLogStreams/mutations.tsx index 1ed93f95b..67246baa0 100644 --- a/frontend/src/hooks/api/auditLogStreams/mutations.tsx +++ b/frontend/src/hooks/api/auditLogStreams/mutations.tsx @@ -12,50 +12,54 @@ import { export const useCreateAuditLogStream = () => { const queryClient = useQueryClient(); - - return useMutation<{ auditLogStream: TAuditLogStream }, object, TCreateAuditLogStreamDTO>({ - mutationFn: async (dto) => { + return useMutation({ + mutationFn: async ({ provider, ...params }: TCreateAuditLogStreamDTO) => { const { data } = await apiRequest.post<{ auditLogStream: TAuditLogStream }>( - "/api/v1/audit-log-streams", - dto + `/api/v1/audit-log-streams/${provider}`, + { ...params, provider } ); - return data; + + return data.auditLogStream; }, - onSuccess: (_, { orgId }) => { - queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) }); - } + onSuccess: () => queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() }) }); }; export const useUpdateAuditLogStream = () => { const queryClient = useQueryClient(); - - return useMutation<{ auditLogStream: TAuditLogStream }, object, TUpdateAuditLogStreamDTO>({ - mutationFn: async (dto) => { + return useMutation({ + mutationFn: async ({ auditLogStreamId, provider, ...params }: TUpdateAuditLogStreamDTO) => { const { data } = await apiRequest.patch<{ auditLogStream: TAuditLogStream }>( - `/api/v1/audit-log-streams/${dto.id}`, - dto + `/api/v1/audit-log-streams/${provider}/${auditLogStreamId}`, + params ); - return data; + + return data.auditLogStream; }, - onSuccess: (_, { orgId }) => { - queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) }); + onSuccess: (_, { auditLogStreamId, provider }) => { + queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() }); + queryClient.invalidateQueries({ + queryKey: auditLogStreamKeys.getById(provider, auditLogStreamId) + }); } }); }; export const useDeleteAuditLogStream = () => { const queryClient = useQueryClient(); - - return useMutation<{ auditLogStream: TAuditLogStream }, object, TDeleteAuditLogStreamDTO>({ - mutationFn: async (dto) => { + return useMutation({ + mutationFn: async ({ auditLogStreamId, provider }: TDeleteAuditLogStreamDTO) => { const { data } = await apiRequest.delete<{ auditLogStream: TAuditLogStream }>( - `/api/v1/audit-log-streams/${dto.id}` + `/api/v1/audit-log-streams/${provider}/${auditLogStreamId}` ); - return data; + + return data.auditLogStream; }, - onSuccess: (_, { orgId }) => { - queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list(orgId) }); + onSuccess: (_, { auditLogStreamId, provider }) => { + queryClient.invalidateQueries({ queryKey: auditLogStreamKeys.list() }); + queryClient.invalidateQueries({ + queryKey: auditLogStreamKeys.getById(provider, auditLogStreamId) + }); } }); }; diff --git a/frontend/src/hooks/api/auditLogStreams/queries.tsx b/frontend/src/hooks/api/auditLogStreams/queries.tsx index ff7d8b499..97d7d6267 100644 --- a/frontend/src/hooks/api/auditLogStreams/queries.tsx +++ b/frontend/src/hooks/api/auditLogStreams/queries.tsx @@ -1,40 +1,89 @@ -import { useQuery } from "@tanstack/react-query"; +import { useQuery, UseQueryOptions } from "@tanstack/react-query"; import { apiRequest } from "@app/config/request"; -import { TAuditLogStream } from "./types"; +import { TAuditLogStreamProviderOption } from "./types/provider-options"; +import { LogProvider } from "./enums"; +import { TAuditLogStream, TAuditLogStreamProviderMap } from "./types"; export const auditLogStreamKeys = { - list: (orgId: string) => ["audit-log-stream", { orgId }], - getById: (id: string) => ["audit-log-stream-details", { id }] + all: ["audit-log-stream"] as const, + options: () => [...auditLogStreamKeys.all, "options"] as const, + list: () => [...auditLogStreamKeys.all, "list"] as const, + getById: (provider: string, id: string) => + [...auditLogStreamKeys.all, provider, "get-by-id", id] as const }; -const fetchAuditLogStreams = async () => { - const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>( - "/api/v1/audit-log-streams" - ); +export const useGetAuditLogStreamOptions = ( + options?: Omit< + UseQueryOptions< + TAuditLogStreamProviderOption[], + unknown, + TAuditLogStreamProviderOption[], + ReturnType + >, + "queryKey" | "queryFn" + > +) => { + return useQuery({ + queryKey: auditLogStreamKeys.options(), + queryFn: async () => { + const { data } = await apiRequest.get<{ providerOptions: TAuditLogStreamProviderOption[] }>( + "/api/v1/audit-log-streams/options" + ); - return data.auditLogStreams; -}; - -export const useGetAuditLogStreams = (orgId: string) => - useQuery({ - queryKey: auditLogStreamKeys.list(orgId), - queryFn: () => fetchAuditLogStreams(), - enabled: Boolean(orgId) + return data.providerOptions; + }, + ...options }); - -const fetchAuditLogStreamDetails = async (id: string) => { - const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStream }>( - `/api/v1/audit-log-streams/${id}` - ); - - return data.auditLogStream; }; -export const useGetAuditLogStreamDetails = (id: string) => - useQuery({ - queryKey: auditLogStreamKeys.getById(id), - queryFn: () => fetchAuditLogStreamDetails(id), - enabled: Boolean(id) +export const useListAuditLogStreams = ( + options?: Omit< + UseQueryOptions< + TAuditLogStream[], + unknown, + TAuditLogStream[], + ReturnType + >, + "queryKey" | "queryFn" + > +) => { + return useQuery({ + queryKey: auditLogStreamKeys.list(), + queryFn: async () => { + const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>( + "/api/v1/audit-log-streams" + ); + + return data.auditLogStreams; + }, + ...options }); +}; + +export const useGetAuditLogStreamById = ( + provider: T, + logStreamId: string, + options?: Omit< + UseQueryOptions< + TAuditLogStreamProviderMap[T], + unknown, + TAuditLogStreamProviderMap[T], + ReturnType + >, + "queryKey" | "queryFn" + > +) => { + return useQuery({ + queryKey: auditLogStreamKeys.getById(provider, logStreamId), + queryFn: async () => { + const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStreamProviderMap[T] }>( + `/api/v1/audit-log-streams/${provider}/${logStreamId}` + ); + + return data.auditLogStream; + }, + ...options + }); +}; diff --git a/frontend/src/hooks/api/auditLogStreams/types.ts b/frontend/src/hooks/api/auditLogStreams/types.ts deleted file mode 100644 index 8e21a3209..000000000 --- a/frontend/src/hooks/api/auditLogStreams/types.ts +++ /dev/null @@ -1,28 +0,0 @@ -export type LogStreamHeaders = { - key: string; - value: string; -}; - -export type TAuditLogStream = { - id: string; - url: string; - headers?: LogStreamHeaders[]; -}; - -export type TCreateAuditLogStreamDTO = { - url: string; - headers?: LogStreamHeaders[]; - orgId: string; -}; - -export type TUpdateAuditLogStreamDTO = { - id: string; - url?: string; - headers?: LogStreamHeaders[]; - orgId: string; -}; - -export type TDeleteAuditLogStreamDTO = { - id: string; - orgId: string; -}; diff --git a/frontend/src/hooks/api/auditLogStreams/types/index.ts b/frontend/src/hooks/api/auditLogStreams/types/index.ts new file mode 100644 index 000000000..d3dffe6a9 --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/index.ts @@ -0,0 +1,25 @@ +import { LogProvider } from "../enums"; +import { TCustomProviderLogStream } from "./providers/custom-provider"; +import { TDatadogProviderLogStream } from "./providers/datadog-provider"; +import { TSplunkProviderLogStream } from "./providers/splunk-provider"; + +export type TAuditLogStream = + | TCustomProviderLogStream + | TDatadogProviderLogStream + | TSplunkProviderLogStream; + +export type TAuditLogStreamProviderMap = { + [LogProvider.Custom]: TCustomProviderLogStream; + [LogProvider.Datadog]: TDatadogProviderLogStream; + [LogProvider.Splunk]: TSplunkProviderLogStream; +}; + +export type TCreateAuditLogStreamDTO = Pick; +export type TUpdateAuditLogStreamDTO = Pick & { + provider: LogProvider; + auditLogStreamId: string; +}; +export type TDeleteAuditLogStreamDTO = { + provider: LogProvider; + auditLogStreamId: string; +}; diff --git a/frontend/src/hooks/api/auditLogStreams/types/provider-options.ts b/frontend/src/hooks/api/auditLogStreams/types/provider-options.ts new file mode 100644 index 000000000..e9b06dfef --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/provider-options.ts @@ -0,0 +1,11 @@ +import { LogProvider } from "../enums"; + +export type TAuditLogStreamProviderOptionBase = { + name: string; +}; + +export type TAuditLogStreamProviderOption = { + [P in keyof typeof LogProvider]: TAuditLogStreamProviderOptionBase & { + provider: (typeof LogProvider)[P]; + }; +}[keyof typeof LogProvider]; diff --git a/frontend/src/hooks/api/auditLogStreams/types/providers/custom-provider.ts b/frontend/src/hooks/api/auditLogStreams/types/providers/custom-provider.ts new file mode 100644 index 000000000..83ff9e010 --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/providers/custom-provider.ts @@ -0,0 +1,10 @@ +import { LogProvider } from "../../enums"; +import { TRootProviderLogStream } from "./root-provider"; + +export type TCustomProviderLogStream = TRootProviderLogStream & { + provider: LogProvider.Custom; + credentials: { + url: string; + headers: { key: string; value: string }[]; + }; +}; diff --git a/frontend/src/hooks/api/auditLogStreams/types/providers/datadog-provider.ts b/frontend/src/hooks/api/auditLogStreams/types/providers/datadog-provider.ts new file mode 100644 index 000000000..85198bb1a --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/providers/datadog-provider.ts @@ -0,0 +1,10 @@ +import { LogProvider } from "../../enums"; +import { TRootProviderLogStream } from "./root-provider"; + +export type TDatadogProviderLogStream = TRootProviderLogStream & { + provider: LogProvider.Datadog; + credentials: { + url: string; + token: string; + }; +}; diff --git a/frontend/src/hooks/api/auditLogStreams/types/providers/root-provider.ts b/frontend/src/hooks/api/auditLogStreams/types/providers/root-provider.ts new file mode 100644 index 000000000..5ea3137e5 --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/providers/root-provider.ts @@ -0,0 +1,6 @@ +export type TRootProviderLogStream = { + id: string; + orgId: string; + createdAt: string; + updatedAt: string; +}; diff --git a/frontend/src/hooks/api/auditLogStreams/types/providers/splunk-provider.ts b/frontend/src/hooks/api/auditLogStreams/types/providers/splunk-provider.ts new file mode 100644 index 000000000..bf5c676ef --- /dev/null +++ b/frontend/src/hooks/api/auditLogStreams/types/providers/splunk-provider.ts @@ -0,0 +1,10 @@ +import { LogProvider } from "../../enums"; +import { TRootProviderLogStream } from "./root-provider"; + +export type TSplunkProviderLogStream = TRootProviderLogStream & { + provider: LogProvider.Splunk; + credentials: { + hostname: string; + token: string; + }; +}; diff --git a/frontend/src/layouts/OrganizationLayout/components/AuditLogBanner/AuditLogBanner.tsx b/frontend/src/layouts/OrganizationLayout/components/AuditLogBanner/AuditLogBanner.tsx index 9f7494076..755611587 100644 --- a/frontend/src/layouts/OrganizationLayout/components/AuditLogBanner/AuditLogBanner.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/AuditLogBanner/AuditLogBanner.tsx @@ -1,12 +1,10 @@ -import { useOrganization } from "@app/context"; -import { useFetchServerStatus, useGetAuditLogStreams } from "@app/hooks/api"; +import { useFetchServerStatus, useListAuditLogStreams } from "@app/hooks/api"; import { OrgAlertBanner } from "../OrgAlertBanner"; export const AuditLogBanner = () => { - const org = useOrganization(); const { data: status, isLoading: isLoadingStatus } = useFetchServerStatus(); - const { data: streams, isLoading: isLoadingStreams } = useGetAuditLogStreams(org.currentOrg.id); + const { data: streams, isLoading: isLoadingStreams } = useListAuditLogStreams(); if (isLoadingStreams || isLoadingStatus || !streams) return null; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm.tsx deleted file mode 100644 index 7e16afd60..000000000 --- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import { Controller, useFieldArray, useForm } from "react-hook-form"; -import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { z } from "zod"; - -import { createNotification } from "@app/components/notifications"; -import { Button, FormControl, FormLabel, IconButton, Input, Spinner } from "@app/components/v2"; -import { useOrganization } from "@app/context"; -import { - useCreateAuditLogStream, - useGetAuditLogStreamDetails, - useUpdateAuditLogStream -} from "@app/hooks/api"; - -type Props = { - id?: string; - onClose: () => void; -}; - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const formSchema = z.object({ - url: z.string().url().min(1), - headers: z - .object({ - key: z.string(), - value: z.string() - }) - .array() - .optional() -}); -type TForm = z.infer; - -export const AuditLogStreamForm = ({ id = "", onClose }: Props) => { - const isEdit = Boolean(id); - const { currentOrg } = useOrganization(); - const orgId = currentOrg?.id || ""; - - const auditLogStream = useGetAuditLogStreamDetails(id); - const createAuditLogStream = useCreateAuditLogStream(); - const updateAuditLogStream = useUpdateAuditLogStream(); - - const { - handleSubmit, - control, - setValue, - getValues, - formState: { isSubmitting } - } = useForm({ - values: auditLogStream?.data, - defaultValues: { - headers: [{ key: "", value: "" }] - } - }); - - const headerFields = useFieldArray({ - control, - name: "headers" - }); - - const handleAuditLogStreamEdit = async ({ headers, url }: TForm) => { - if (!id) return; - try { - await updateAuditLogStream.mutateAsync({ - id, - orgId, - headers, - url - }); - createNotification({ - type: "success", - text: "Successfully updated stream" - }); - onClose(); - } catch (err) { - console.log(err); - createNotification({ - type: "error", - text: "Failed to update stream" - }); - } - }; - - const handleFormSubmit = async ({ headers = [], url }: TForm) => { - if (isSubmitting) return; - const sanitizedHeaders = headers.filter(({ key, value }) => Boolean(key) && Boolean(value)); - const streamHeaders = sanitizedHeaders.length ? sanitizedHeaders : undefined; - if (isEdit) { - await handleAuditLogStreamEdit({ headers: streamHeaders, url }); - return; - } - try { - await createAuditLogStream.mutateAsync({ - orgId, - headers: streamHeaders, - url - }); - createNotification({ - type: "success", - text: "Successfully created stream" - }); - onClose(); - } catch (err) { - console.log(err); - createNotification({ - type: "error", - text: (err as Error)?.message ?? "Failed to create stream" - }); - } - }; - - if (isEdit && auditLogStream.isPending) { - return ( -
- -
- ); - } - - return ( -
-
- ( - - - - )} - /> - - {headerFields.fields.map(({ id: headerFieldId }, i) => ( -
- ( - - - - )} - /> - ( - - - - )} - /> - { - const header = getValues("headers"); - if (header && header?.length > 1) { - headerFields.remove(i); - } else { - setValue("headers", [{ key: "", value: "" }]); - } - }} - > - - -
- ))} -
- -
-
-
- - -
-
- ); -}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/AuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/AuditLogStreamForm.tsx new file mode 100644 index 000000000..1af5e8d1a --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/AuditLogStreamForm.tsx @@ -0,0 +1,125 @@ +import { createNotification } from "@app/components/notifications"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; +import { useCreateAuditLogStream, useUpdateAuditLogStream } from "@app/hooks/api"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TAuditLogStream } from "@app/hooks/api/types"; +import { DiscriminativePick } from "@app/types"; + +import { AuditLogStreamHeader } from "../components/AuditLogStreamHeader"; +import { CustomProviderAuditLogStreamForm } from "./CustomProviderAuditLogStreamForm"; +import { DatadogProviderAuditLogStreamForm } from "./DatadogProviderAuditLogStreamForm"; +import { SplunkProviderAuditLogStreamForm } from "./SplunkProviderAuditLogStreamForm"; + +type FormProps = { + onComplete: (auditLogStream: TAuditLogStream) => void; +}; + +type CreateFormProps = FormProps & { provider: LogProvider }; +type UpdateFormProps = FormProps & { + auditLogStream: TAuditLogStream; +}; + +const CreateForm = ({ provider, onComplete }: CreateFormProps) => { + const createAuditLogStream = useCreateAuditLogStream(); + const { name: providerName } = AUDIT_LOG_STREAM_PROVIDER_MAP[provider]; + + const onSubmit = async ( + formData: DiscriminativePick + ) => { + try { + const logStream = await createAuditLogStream.mutateAsync(formData); + createNotification({ + text: `Successfully created ${providerName} Log Stream`, + type: "success" + }); + onComplete(logStream); + } catch (err: any) { + console.error(err); + createNotification({ + title: `Failed to create ${providerName} Log Stream`, + text: err.message, + type: "error" + }); + } + }; + + switch (provider) { + case LogProvider.Custom: + return ; + case LogProvider.Datadog: + return ; + case LogProvider.Splunk: + return ; + default: + throw new Error(`Unhandled Provider: ${provider}`); + } +}; + +const UpdateForm = ({ auditLogStream, onComplete }: UpdateFormProps) => { + const updateAuditLogStream = useUpdateAuditLogStream(); + const { name: providerName } = AUDIT_LOG_STREAM_PROVIDER_MAP[auditLogStream.provider]; + + const onSubmit = async ( + formData: DiscriminativePick + ) => { + try { + const connection = await updateAuditLogStream.mutateAsync({ + auditLogStreamId: auditLogStream.id, + ...formData + }); + createNotification({ + text: `Successfully updated ${providerName} Log Stream`, + type: "success" + }); + onComplete(connection); + } catch (err: any) { + console.error(err); + createNotification({ + title: `Failed to update ${providerName} Log Stream`, + text: err.message, + type: "error" + }); + } + }; + + switch (auditLogStream.provider) { + case LogProvider.Custom: + return ( + + ); + case LogProvider.Datadog: + return ( + + ); + case LogProvider.Splunk: + return ( + + ); + default: + throw new Error(`Unhandled Provider: ${(auditLogStream as TAuditLogStream).provider}`); + } +}; + +type Props = { onBack?: () => void } & Pick & + ( + | { provider: LogProvider; auditLogStream?: undefined } + | { provider?: undefined; auditLogStream: TAuditLogStream } + ); +export const AuditLogStreamForm = ({ onBack, ...props }: Props) => { + const { provider, auditLogStream } = props; + + return ( +
+ + {auditLogStream ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/CustomProviderAuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/CustomProviderAuditLogStreamForm.tsx new file mode 100644 index 000000000..e0dd68155 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/CustomProviderAuditLogStreamForm.tsx @@ -0,0 +1,154 @@ +import { Controller, FormProvider, useFieldArray, useForm } from "react-hook-form"; +import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; + +import { Button, FormControl, FormLabel, IconButton, Input, ModalClose } from "@app/components/v2"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TCustomProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/custom-provider"; + +type Props = { + auditLogStream?: TCustomProviderLogStream; + onSubmit: (formData: FormData) => void; +}; + +const formSchema = z.object({ + provider: z.literal(LogProvider.Custom), + credentials: z.object({ + url: z.string().url().trim().min(1).max(255), + headers: z + .object({ + key: z.string().min(1), + value: z.string().min(1) + }) + .array() + }) +}); + +type FormData = z.infer; + +export const CustomProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => { + const isUpdate = Boolean(auditLogStream); + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: auditLogStream ?? { + provider: LogProvider.Custom + } + }); + + const { + handleSubmit, + control, + formState: { isSubmitting, isDirty }, + getValues, + setValue + } = form; + + const headerFields = useFieldArray({ + control, + name: "credentials.headers" + }); + + return ( + +
+ ( + + + + )} + /> + + + {headerFields.fields.map(({ id: headerFieldId }, i) => ( +
+ ( + + + + )} + /> + ( + + + + )} + /> + { + const header = getValues("credentials.headers"); + if (header && header?.length > 1) { + headerFields.remove(i); + } else { + setValue("credentials.headers", [{ key: "", value: "" }]); + } + }} + > + + +
+ ))} +
+ +
+ +
+ + + + +
+ +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx new file mode 100644 index 000000000..8ed339446 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/DatadogProviderAuditLogStreamForm.tsx @@ -0,0 +1,132 @@ +import { Controller, FormProvider, useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; + +import { + Button, + FormControl, + ModalClose, + SecretInput, + Select, + SelectItem +} from "@app/components/v2"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TDatadogProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/datadog-provider"; + +type Props = { + auditLogStream?: TDatadogProviderLogStream; + onSubmit: (formData: FormData) => void; +}; + +const formSchema = z.object({ + provider: z.literal(LogProvider.Datadog), + credentials: z.object({ + url: z.string().url().trim().min(1).max(255), + token: z + .string() + .trim() + .regex(/^[a-fA-F0-9]{32}$/, "Invalid Datadog API key format") + }) +}); + +type FormData = z.infer; + +const DATADOG_ENDPOINTS = { + "Datadog US1": "https://http-intake.logs.datadoghq.com/api/v2/logs", + "Datadog US3": "https://http-intake.logs.us3.datadoghq.com/api/v2/logs", + "Datadog US5": "https://http-intake.logs.us5.datadoghq.com/api/v2/logs", + "Datadog EU": "https://http-intake.logs.datadoghq.eu/api/v2/logs", + "Datadog AP1": "https://http-intake.logs.ap1.datadoghq.com/api/v2/logs", + "Datadog AP2": "https://http-intake.logs.ap2.datadoghq.com/api/v2/logs", + "Datadog GovCloud (US1-FED)": "https://http-intake.logs.ddog-gov.com/api/v2/logs" +}; + +export const DatadogProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => { + const isUpdate = Boolean(auditLogStream); + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: auditLogStream ?? { + provider: LogProvider.Datadog, + credentials: { + url: DATADOG_ENDPOINTS["Datadog US1"] + } + } + }); + + const { + handleSubmit, + control, + formState: { isSubmitting, isDirty } + } = form; + + return ( + +
+ ( + + + + )} + /> + ( + + onChange(e.target.value)} + /> + + )} + /> +
+ + + + +
+ +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/SplunkProviderAuditLogStreamForm.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/SplunkProviderAuditLogStreamForm.tsx new file mode 100644 index 000000000..c9d248d61 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/SplunkProviderAuditLogStreamForm.tsx @@ -0,0 +1,120 @@ +import { Controller, FormProvider, useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; + +import { Button, FormControl, Input, ModalClose, SecretInput } from "@app/components/v2"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TSplunkProviderLogStream } from "@app/hooks/api/auditLogStreams/types/providers/splunk-provider"; + +type Props = { + auditLogStream?: TSplunkProviderLogStream; + onSubmit: (formData: FormData) => void; +}; + +const formSchema = z.object({ + provider: z.literal(LogProvider.Splunk), + credentials: z.object({ + hostname: z + .string() + .trim() + .min(1) + .max(255) + .superRefine((val, ctx) => { + if (val.includes("://")) { + ctx.addIssue({ + code: "custom", + message: "Hostname should not include protocol" + }); + return; + } + + try { + const url = new URL(`https://${val}`); + if (url.hostname !== val) { + ctx.addIssue({ + code: "custom", + message: "Must be a valid hostname without port or path" + }); + } + } catch { + ctx.addIssue({ code: "custom", message: "Invalid hostname" }); + } + }), + token: z.string().uuid().trim().min(1) + }) +}); + +type FormData = z.infer; + +export const SplunkProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Props) => { + const isUpdate = Boolean(auditLogStream); + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: auditLogStream ?? { + provider: LogProvider.Splunk + } + }); + + const { + handleSubmit, + control, + formState: { isSubmitting, isDirty } + } = form; + + return ( + +
+ ( + + + + )} + /> + ( + + onChange(e.target.value)} + /> + + )} + /> +
+ + + + +
+ +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx index beb0f63db..b58d1a6eb 100644 --- a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx @@ -1,72 +1,24 @@ -import { faPlug, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; -import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; -import { - Button, - DeleteActionModal, - EmptyState, - Modal, - ModalContent, - Table, - TableContainer, - TableSkeleton, - TBody, - Td, - THead, - Tr -} from "@app/components/v2"; -import { - OrgPermissionActions, - OrgPermissionSubjects, - useOrganization, - useSubscription -} from "@app/context"; +import { Button } from "@app/components/v2"; +import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context"; import { withPermission } from "@app/hoc"; import { usePopUp } from "@app/hooks"; -import { useDeleteAuditLogStream, useGetAuditLogStreams } from "@app/hooks/api"; -import { AuditLogStreamForm } from "./AuditLogStreamForm"; +import { AuditLogStreamTable } from "./components/AuditLogStreamTable"; +import { AddAuditLogStreamModal } from "./components"; export const AuditLogStreamsTab = withPermission( () => { - const { currentOrg } = useOrganization(); - const orgId = currentOrg?.id || ""; - const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([ - "auditLogStreamForm", - "deleteAuditLogStream", - "upgradePlan" - ] as const); const { subscription } = useSubscription(); - const { data: auditLogStreams, isPending: isAuditLogStreamsLoading } = - useGetAuditLogStreams(orgId); - - // mutation - const { mutateAsync: deleteAuditLogStream } = useDeleteAuditLogStream(); - - const handleAuditLogStreamDelete = async () => { - try { - const auditLogStreamId = popUp?.deleteAuditLogStream?.data as string; - await deleteAuditLogStream({ - id: auditLogStreamId, - orgId - }); - handlePopUpClose("deleteAuditLogStream"); - createNotification({ - type: "success", - text: "Successfully deleted stream" - }); - } catch (err) { - console.log(err); - createNotification({ - type: "error", - text: "Failed to delete stream" - }); - } - }; + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ + "auditLogStreamForm", + "upgradePlan" + ] as const); return (
@@ -84,8 +36,10 @@ export const AuditLogStreamsTab = withPermission( }} leftIcon={} isDisabled={!isAllowed} + variant="outline_bg" + colorSchema="secondary" > - Create + Add Log Stream )} @@ -93,102 +47,15 @@ export const AuditLogStreamsTab = withPermission(

Send audit logs from Infisical to external logging providers via HTTP

-
- - - - - - - - - - {isAuditLogStreamsLoading && ( - - )} - {!isAuditLogStreamsLoading && auditLogStreams && auditLogStreams?.length === 0 && ( - - - - )} - {!isAuditLogStreamsLoading && - auditLogStreams?.map(({ id, url }) => ( - - - - - ))} - -
URLAction
- -
- {url} - -
- - {(isAllowed) => ( - - )} - - - {(isAllowed) => ( - - )} - -
-
- -
- + { - handlePopUpToggle("auditLogStreamForm", isModalOpen); - }} - > - - handlePopUpToggle("auditLogStreamForm")} - /> - - + onOpenChange={(isOpen) => handlePopUpToggle("auditLogStreamForm", isOpen)} + /> handlePopUpToggle("upgradePlan", isOpen)} - text="You can add audit log streams if you switch to Infisical's Enterprise plan." - /> - handlePopUpToggle("deleteAuditLogStream", isOpen)} - onClose={() => handlePopUpClose("deleteAuditLogStream")} - onDeleteApproved={handleAuditLogStreamDelete} + text="You can add audit log streams if you switch to Infisical's Enterprise plan." />
); diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AddAuditLogStreamModal.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AddAuditLogStreamModal.tsx new file mode 100644 index 000000000..5a6892a49 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AddAuditLogStreamModal.tsx @@ -0,0 +1,69 @@ +import { Dispatch, SetStateAction, useState } from "react"; + +import { Modal, ModalContent } from "@app/components/v2"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { TAuditLogStream } from "@app/hooks/api/types"; + +import { AuditLogStreamForm } from "../AuditLogStreamForm/AuditLogStreamForm"; +import { LogStreamProviderSelect } from "./LogStreamProviderSelect"; + +type Props = { + isOpen: boolean; + onOpenChange: (isOpen: boolean) => void; +}; + +type ContentProps = { + onComplete: (auditLogStream: TAuditLogStream) => void; + selectedProvider: LogProvider | null; + setSelectedProvider: Dispatch>; +}; + +const Content = ({ onComplete, selectedProvider, setSelectedProvider }: ContentProps) => { + if (selectedProvider) { + return ( + setSelectedProvider(null)} + provider={selectedProvider} + /> + ); + } + + return ; +}; + +export const AddAuditLogStreamModal = ({ isOpen, onOpenChange }: Props) => { + const [selectedProvider, setSelectedProvider] = useState(null); + + return ( + { + onOpenChange(e); + if (!e) setSelectedProvider(null); + }} + > + + Select a log provider or{" "} + {" "} + to stream logs to. + + > + onOpenChange(false)} + selectedProvider={selectedProvider} + setSelectedProvider={setSelectedProvider} + /> + + + ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx new file mode 100644 index 000000000..12185b869 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx @@ -0,0 +1,54 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; + +type Props = { + provider: LogProvider; + logStreamExists: boolean; + onBack?: () => void; +}; + +export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Props) => { + const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider]; + + return ( +
+
+ {providerDetails.image ? ( + {providerDetails.name} + ) : ( + providerDetails.icon && ( +
+ +
+ ) + )} +
+
+
{providerDetails.name}
+

+ {logStreamExists + ? `${providerDetails.name} Log Stream` + : `Create a ${providerDetails.name} Log Stream`} +

+
+ {onBack && ( + + )} +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx new file mode 100644 index 000000000..037ba6f2a --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamRow.tsx @@ -0,0 +1,111 @@ +import { faAsterisk, faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { twMerge } from "tailwind-merge"; + +import { OrgPermissionCan } from "@app/components/permissions"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + IconButton, + Td, + Tooltip, + Tr +} from "@app/components/v2"; +import { OrgPermissionSubjects } from "@app/context"; +import { OrgPermissionActions } from "@app/context/OrgPermissionContext/types"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP, getProviderUrl } from "@app/helpers/auditLogStreams"; +import { TAuditLogStream } from "@app/hooks/api/types"; + +type Props = { + logStream: TAuditLogStream; + onDelete: (logStream: TAuditLogStream) => void; + onEditCredentials: (logStream: TAuditLogStream) => void; +}; + +export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Props) => { + const { id, provider } = logStream; + + const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider]; + const url = getProviderUrl(logStream); + + return ( + + +
+
+ {providerDetails.image ? ( + {providerDetails.name} + ) : ( + providerDetails.icon && ( + + ) + )} +
+ {providerDetails.name} +
+ + +
+

{url}

+
+ + +
+ + + + + + + + + + {(isAllowed: boolean) => ( + } + onClick={() => onEditCredentials(logStream)} + > + Edit Credentials + + )} + + + {(isAllowed: boolean) => ( + } + onClick={() => onDelete(logStream)} + > + Delete Stream + + )} + + + + +
+ + + ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx new file mode 100644 index 000000000..a9f739acc --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamTable.tsx @@ -0,0 +1,304 @@ +import { useMemo, useState } from "react"; +import { + faArrowDown, + faArrowUp, + faFilter, + faMagnifyingGlass, + faPlug, + faSearch +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { twMerge } from "tailwind-merge"; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, + EmptyState, + IconButton, + Input, + Pagination, + Table, + TableContainer, + TableSkeleton, + TBody, + Th, + THead, + Tr +} from "@app/components/v2"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP, getProviderUrl } from "@app/helpers/auditLogStreams"; +import { + getUserTablePreference, + PreferenceKey, + setUserTablePreference +} from "@app/helpers/userTablePreferences"; +import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; +import { useListAuditLogStreams } from "@app/hooks/api"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; +import { OrderByDirection } from "@app/hooks/api/generic/types"; +import { TAuditLogStream } from "@app/hooks/api/types"; + +import { AuditLogStreamRow } from "./AuditLogStreamRow"; +import { DeleteAuditLogStreamModal } from "./DeleteAuditLogStreamModal"; +import { EditAuditLogStreamCredentialsModal } from "./EditAuditLogStreamCredentialsModal"; + +enum LogStreamsOrderBy { + Provider = "provider", + Url = "url" +} + +type LogStreamFilters = { + providers: LogProvider[]; +}; + +export const AuditLogStreamTable = () => { + const { isPending, data: logStreams = [] } = useListAuditLogStreams(); + + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ + "delete", + "editCredentials" + ] as const); + + const [filters, setFilters] = useState({ + providers: [] + }); + + const { + search, + setSearch, + setPage, + page, + perPage, + setPerPage, + offset, + orderDirection, + toggleOrderDirection, + orderBy, + setOrderDirection, + setOrderBy + } = usePagination(LogStreamsOrderBy.Provider, { + initPerPage: getUserTablePreference("logStreamsTable", PreferenceKey.PerPage, 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("logStreamsTable", PreferenceKey.PerPage, newPerPage); + }; + + const filteredLogStreams = useMemo( + () => + logStreams + .filter((stream) => { + const { provider } = stream; + + if (filters.providers.length && !filters.providers.includes(provider)) return false; + + const searchValue = search.trim().toLowerCase(); + + return AUDIT_LOG_STREAM_PROVIDER_MAP[provider].name.toLowerCase().includes(searchValue); + }) + .sort((a, b) => { + const [one, two] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; + + switch (orderBy) { + case LogStreamsOrderBy.Url: + return getProviderUrl(one) + .toLowerCase() + .localeCompare(getProviderUrl(two).toLowerCase()); + case LogStreamsOrderBy.Provider: + default: + return AUDIT_LOG_STREAM_PROVIDER_MAP[one.provider].name + .toLowerCase() + .localeCompare(AUDIT_LOG_STREAM_PROVIDER_MAP[two.provider].name.toLowerCase()); + } + }), + [logStreams, orderDirection, search, orderBy, filters] + ); + + useResetPageHelper({ + totalCount: filteredLogStreams.length, + offset, + setPage + }); + + const handleSort = (column: LogStreamsOrderBy) => { + if (column === orderBy) { + toggleOrderDirection(); + return; + } + + setOrderBy(column); + setOrderDirection(OrderByDirection.ASC); + }; + + const getClassName = (col: LogStreamsOrderBy) => + twMerge("ml-2", orderBy === col ? "" : "opacity-30"); + + const getColSortIcon = (col: LogStreamsOrderBy) => + orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown; + + const isTableFiltered = Boolean(filters.providers.length); + + const handleDelete = (logStream: TAuditLogStream) => handlePopUpOpen("delete", logStream); + + const handleEditCredentials = (logStream: TAuditLogStream) => { + handlePopUpOpen("editCredentials", logStream); + }; + + return ( +
+
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search audit log streams..." + className="flex-1" + /> + + + + + + + + Filter by Provider + {logStreams.length ? ( + [...new Set(logStreams.map(({ provider }) => provider))].map((provider) => { + const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider]; + + return ( + { + e.preventDefault(); + setFilters((prev) => ({ + ...prev, + providers: prev.providers.includes(provider) + ? prev.providers.filter((a) => a !== provider) + : [...prev.providers, provider] + })); + }} + key={provider} + iconPos="right" + > +
+ {providerDetails.image ? ( + {providerDetails.name} + ) : ( + providerDetails.icon && ( + + ) + )} + {providerDetails.name} +
+ + ); + }) + ) : ( + No Providers Configured + )} + + +
+ + + + + + + + + + + {isPending && ( + + )} + {filteredLogStreams.slice(offset, perPage * page).map((stream) => ( + + ))} + +
+
+ Provider + handleSort(LogStreamsOrderBy.Provider)} + > + + +
+ 		+
+ Endpoint URL + handleSort(LogStreamsOrderBy.Url)} + > + + +
+ 		+
+ {Boolean(filteredLogStreams.length) && ( + + )} + {!isPending && !filteredLogStreams?.length && ( + + )} + + handlePopUpToggle("delete", isOpen)} + auditLogStream={popUp.delete.data} + /> + handlePopUpToggle("editCredentials", isOpen)} + auditLogStream={popUp.editCredentials.data} + /> +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/DeleteAuditLogStreamModal.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/DeleteAuditLogStreamModal.tsx new file mode 100644 index 000000000..1a65e6c67 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/DeleteAuditLogStreamModal.tsx @@ -0,0 +1,54 @@ +import { createNotification } from "@app/components/notifications"; +import { DeleteActionModal } from "@app/components/v2"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; +import { useDeleteAuditLogStream } from "@app/hooks/api"; +import { TAuditLogStream } from "@app/hooks/api/types"; + +type Props = { + auditLogStream?: TAuditLogStream; + isOpen: boolean; + onOpenChange: (isOpen: boolean) => void; +}; + +export const DeleteAuditLogStreamModal = ({ isOpen, onOpenChange, auditLogStream }: Props) => { + const deleteAuditLogStream = useDeleteAuditLogStream(); + + if (!auditLogStream) return null; + + const { id: auditLogStreamId, provider } = auditLogStream; + + const providerDetails = AUDIT_LOG_STREAM_PROVIDER_MAP[provider]; + + const handleDelete = async () => { + try { + await deleteAuditLogStream.mutateAsync({ + auditLogStreamId, + provider + }); + + createNotification({ + text: `Successfully deleted ${providerDetails.name} stream`, + type: "success" + }); + + onOpenChange(false); + } catch (err) { + console.error(err); + + createNotification({ + text: `Failed to delete ${providerDetails.name} stream`, + type: "error" + }); + } + }; + + return ( + + ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/EditAuditLogStreamCredentialsModal.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/EditAuditLogStreamCredentialsModal.tsx new file mode 100644 index 000000000..6e21b10fe --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/EditAuditLogStreamCredentialsModal.tsx @@ -0,0 +1,34 @@ +import { Modal, ModalContent } from "@app/components/v2"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; +import { TAuditLogStream } from "@app/hooks/api/types"; + +import { AuditLogStreamForm } from "../AuditLogStreamForm/AuditLogStreamForm"; + +type Props = { + isOpen: boolean; + onOpenChange: (isOpen: boolean) => void; + auditLogStream?: TAuditLogStream; +}; + +export const EditAuditLogStreamCredentialsModal = ({ + isOpen, + onOpenChange, + auditLogStream +}: Props) => { + if (!auditLogStream) return null; + + return ( + + + onOpenChange(false)} + auditLogStream={auditLogStream} + /> + + + ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx new file mode 100644 index 000000000..af81cb9ca --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/LogStreamProviderSelect.tsx @@ -0,0 +1,155 @@ +import { useMemo } from "react"; +import { faSearch } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import { EmptyState, Spinner } from "@app/components/v2"; +import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams"; +import { usePagination, useResetPageHelper } from "@app/hooks"; +import { useGetAuditLogStreamOptions } from "@app/hooks/api"; +import { LogProvider } from "@app/hooks/api/auditLogStreams/enums"; + +type Props = { + onSelect: (provider: LogProvider) => void; +}; + +// TODO: When we have more than 1 page of providers, uncomment the search components + +export const LogStreamProviderSelect = ({ onSelect }: Props) => { + const { isPending, data: logStreamOptions } = useGetAuditLogStreamOptions(); + + const { search, setPage, page, perPage, offset } = usePagination("", { + initPerPage: 16 + }); + + const filteredOptions = useMemo( + () => + (logStreamOptions || []) + .filter( + ({ name, provider }) => + name.toLowerCase().includes(search.trim().toLowerCase()) || + provider.toLowerCase().includes(search.trim().toLowerCase()) + ) + .sort((a, b) => { + if (a.provider === LogProvider.Custom) return 1; + if (b.provider === LogProvider.Custom) return -1; + return 0; + }), + [logStreamOptions, search] + ); + + useResetPageHelper({ + totalCount: filteredOptions.length, + offset, + setPage + }); + + if (isPending) { + return ( +
+ +

Loading options...

+
+ ); + } + + 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]; + + return ( + + ); + })} + {!filteredOptions?.length && ( + + )} +
+ {/* {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]} + /> + )} */} +
+ ); +}; diff --git a/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/index.tsx b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/index.tsx new file mode 100644 index 000000000..69febb4a9 --- /dev/null +++ b/frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/index.tsx @@ -0,0 +1 @@ +export * from "./AddAuditLogStreamModal";