Merge pull request #2429 from Infisical/daniel/integration-ui-improvements

feat: integration details page with logging
2026-10-15 23:47:06 +00:00 · 2024-09-17 14:29:26 +04:00
parent 10e7999334 09887a7405
commit 5740d2b4e4
33 changed files with 1248 additions and 191 deletions
@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+import { twMerge } from "tailwind-merge";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useUser,
+  useWorkspace
+} from "@app/context";
+import { useGetIntegration } from "@app/hooks/api";
+import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
+
+import { IntegrationAuditLogsSection } from "./components/IntegrationAuditLogsSection";
+import { IntegrationConnectionSection } from "./components/IntegrationConnectionSection";
+import { IntegrationDetailsSection } from "./components/IntegrationDetailsSection";
+import { IntegrationSettingsSection } from "./components/IntegrationSettingsSection";
+
+export const IntegrationDetailsPage = () => {
+  const router = useRouter();
+  const integrationId = router.query.integrationId as string;
+
+  const { data: integration } = useGetIntegration(integrationId, {
+    refetchInterval: 4000
+  });
+
+  const projectId = useWorkspace().currentWorkspace?.id;
+  const { mutateAsync: syncIntegration } = useSyncIntegration();
+  const { currentOrg } = useOrganization();
+
+  return integration ? (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+        <Button
+          variant="link"
+          type="submit"
+          leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+          onClick={() => {
+            router.push(`/integrations/${projectId}`);
+          }}
+          className="mb-4"
+        >
+          Integrations
+        </Button>
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-3xl font-semibold text-white">
+            {integrationSlugNameMapping[integration.integration]} Integration
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild className="rounded-lg">
+              <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                <Tooltip content="More options">
+                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                </Tooltip>
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuItem
+                onClick={async () => {
+                  await syncIntegration({
+                    id: integration.id,
+                    lastUsed: integration.lastUsed!,
+                    workspaceId: projectId!
+                  });
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faRefresh} />
+                  Manually Sync
+                </div>
+              </DropdownMenuItem>
+              <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Member}>
+                {(isAllowed) => (
+                  <DropdownMenuItem
+                    className={twMerge(
+                      isAllowed
+                        ? "hover:!bg-red-500 hover:!text-white"
+                        : "pointer-events-none cursor-not-allowed opacity-50"
+                    )}
+                    onClick={() => {}}
+                    disabled={!isAllowed}
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faTrash} />
+                      Delete Integration
+                    </div>
+                  </DropdownMenuItem>
+                )}
+              </OrgPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="flex justify-center">
+          <div className="mr-4 w-96">
+            <IntegrationDetailsSection integration={integration} />
+            <IntegrationConnectionSection integration={integration} />
+          </div>
+          <div className="space-y-4">
+            <IntegrationSettingsSection integration={integration} />
+            <IntegrationAuditLogsSection orgId={currentOrg?.id || ""} integration={integration} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : null;
+};
@@ -0,0 +1,78 @@
+import Link from "next/link";
+
+import { EmptyState } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import { EventType } from "@app/hooks/api/auditLogs/enums";
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+import { LogsSection } from "@app/views/Project/AuditLogsPage/components";
+
+// Add more events if needed
+const INTEGRATION_EVENTS = [EventType.INTEGRATION_SYNCED];
+
+type Props = {
+  integration: TIntegrationWithEnv;
+  orgId: string;
+};
+
+export const IntegrationAuditLogsSection = ({ integration, orgId }: Props) => {
+  const { subscription, isLoading } = useSubscription();
+
+  const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
+
+  // eslint-disable-next-line no-nested-ternary
+  return subscription?.auditLogs ? (
+    <div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Logs</p>
+        <p className="text-xs text-gray-400">
+          Displaying audit logs from the last {auditLogsRetentionDays} days
+        </p>
+      </div>
+      <LogsSection
+        refetchInterval={4000}
+        remappedHeaders={{
+          Metadata: "Sync Status"
+        }}
+        showFilters={false}
+        presets={{
+          eventMetadata: { integrationId: integration.id },
+          startDate: new Date(new Date().setDate(new Date().getDate() - auditLogsRetentionDays)),
+          eventType: INTEGRATION_EVENTS
+        }}
+        filterClassName="bg-mineshaft-900 static"
+      />
+    </div>
+  ) : !isLoading ? (
+    <div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 opacity-60">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Logs</p>
+      </div>
+      <EmptyState
+        className="rounded-lg"
+        title={
+          <div>
+            <p>
+              Please{" "}
+              <Link
+                href={
+                  subscription && subscription.slug !== null
+                    ? `/org${orgId}/billing`
+                    : "https://infisical.com/scheduledemo"
+                }
+                passHref
+              >
+                <a
+                  className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                  target="_blank"
+                >
+                  upgrade your subscription
+                </a>
+              </Link>{" "}
+              to view integration logs
+            </p>
+          </div>
+        }
+      />
+    </div>
+  ) : null;
+};
@@ -0,0 +1,194 @@
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+
+import { FormLabel } from "@app/components/v2";
+import { IntegrationMappingBehavior, TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+export const IntegrationConnectionSection = ({ integration }: Props) => {
+  const specifcQoveryDetails = () => {
+    if (integration.integration !== "qovery") return null;
+
+    return (
+      <div className="flex flex-row">
+        <div className="flex flex-col">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{integration?.owner || "-"}</div>
+        </div>
+        <div className="flex flex-col">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Project" />
+          <div className="text-sm text-mineshaft-300">{integration?.targetService || "-"}</div>
+        </div>
+        <div className="flex flex-col">
+          <FormLabel
+            className="text-sm font-semibold text-mineshaft-300"
+            label="Target Environment"
+          />
+          <div className="text-sm text-mineshaft-300">{integration?.targetEnvironment || "-"}</div>
+        </div>
+      </div>
+    );
+  };
+
+  const isNotAwsManagerOneToOneDetails = () => {
+    const isAwsSecretManagerOneToOne =
+      integration.integration === "aws-secret-manager" &&
+      integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE;
+
+    if (isAwsSecretManagerOneToOne) {
+      return null;
+    }
+
+    const formLabel = () => {
+      switch (integration.integration) {
+        case "qovery":
+          return integration.scope;
+        case "circleci":
+        case "terraform-cloud":
+          return "Project";
+        case "aws-secret-manager":
+          return "Secret";
+        case "aws-parameter-store":
+        case "rundeck":
+          return "Path";
+        case "github":
+          if (["github-env", "github-repo"].includes(integration.scope!)) {
+            return "Repository";
+          }
+          return "Organization";
+
+        default:
+          return "App";
+      }
+    };
+
+    const contents = () => {
+      switch (integration.integration) {
+        case "hashicorp-vault":
+          return `${integration.app} - path: ${integration.path}`;
+        case "github":
+          if (integration.scope === "github-org") {
+            return `${integration.owner}`;
+          }
+          return `${integration.owner}/${integration.app}`;
+
+        case "aws-parameter-store":
+        case "rundeck":
+          return `${integration.path}`;
+
+        default:
+          return `${integration.app}`;
+      }
+    };
+
+    return (
+      <div className="flex flex-col">
+        <FormLabel className="text-sm font-semibold text-mineshaft-300" label={formLabel()} />
+        <div className="text-sm text-mineshaft-300">{contents()}</div>
+      </div>
+    );
+  };
+
+  const targetEnvironmentDetails = () => {
+    if (
+      ["vercel", "netlify", "railway", "gitlab", "teamcity", "bitbucket"].includes(
+        integration.integration
+      ) ||
+      (integration.integration === "github" && integration.scope === "github-env")
+    ) {
+      return (
+        <div className="flex flex-col">
+          <FormLabel
+            className="text-sm font-semibold text-mineshaft-300"
+            label="Target Environment"
+          />
+          <div className="text-sm text-mineshaft-300">
+            {integration.targetEnvironment || integration.targetEnvironmentId}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const generalIntegrationSpecificDetails = () => {
+    if (integration.integration === "checkly" && integration.targetService) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Group" />
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "circleci" && integration.owner) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
+          <div className="text-sm text-mineshaft-300">{integration.owner}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "terraform-cloud" && integration.targetService) {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Category" />
+          <div className="text-sm text-mineshaft-300">{integration.targetService}</div>
+        </div>
+      );
+    }
+
+    if (integration.integration === "checkly" || integration.integration === "github") {
+      return (
+        <div>
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Suffix" />
+          <div className="text-sm text-mineshaft-300">
+            {integration?.metadata?.secretSuffix || "-"}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Connection</h3>
+      </div>
+
+      <div className="mt-4">
+        <FormLabel className="my-2" label="Source" />
+
+        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
+          <div className="flex flex-col">
+            <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Environment" />
+            <div className="text-sm text-mineshaft-300">{integration.environment.name}</div>
+          </div>
+          <div className="flex flex-col">
+            <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Path" />
+            <div className="text-sm text-mineshaft-300">{integration.secretPath}</div>
+          </div>
+        </div>
+
+        <FormLabel className="my-2" label="Destination" />
+        <div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
+          <FormLabel className="text-sm font-semibold text-mineshaft-300" label="Platform" />
+          <div className="text-sm text-mineshaft-300">
+            {integrationSlugNameMapping[integration.integration]}
+          </div>
+
+          {specifcQoveryDetails()}
+          {isNotAwsManagerOneToOneDetails()}
+          {targetEnvironmentDetails()}
+          {generalIntegrationSpecificDetails()}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,69 @@
+import { faCalendarCheck, faCheckCircle, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+import { twMerge } from "tailwind-merge";
+
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+export const IntegrationDetailsSection = ({ integration }: Props) => {
+  return (
+    <div>
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <h3 className="text-lg font-semibold text-mineshaft-100">Integration Details</h3>
+        </div>
+        <div className="mt-4">
+          <div className="space-y-3">
+            <div>
+              <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+              <p className="text-sm text-mineshaft-300">
+                {integrationSlugNameMapping[integration.integration]}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-mineshaft-300">Sync Status</p>
+              <div className="flex items-center">
+                <p
+                  className={twMerge(
+                    "mr-2 text-sm font-medium",
+                    integration.isSynced ? "text-green-500" : "text-red-500"
+                  )}
+                >
+                  {integration.isSynced ? "Synced" : "Not Synced"}
+                </p>
+                <FontAwesomeIcon
+                  size="sm"
+                  className={twMerge(integration.isSynced ? "text-green-500" : "text-red-500")}
+                  icon={integration.isSynced ? faCheckCircle : faCircleXmark}
+                />
+              </div>
+            </div>
+            {integration.lastUsed && (
+              <div>
+                <p className="text-sm font-semibold text-mineshaft-300">Latest Successful Sync</p>
+                <div className="flex items-center gap-2 text-sm text-mineshaft-300">
+                  {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
+                  <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
+                </div>
+              </div>
+            )}
+
+            <div>
+              {!integration.isSynced && integration.syncMessage && (
+                <>
+                  <p className="text-sm font-semibold text-mineshaft-300">Latest Sync Error</p>
+                  <p className="text-sm text-mineshaft-300">{integration.syncMessage}</p>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,89 @@
+import { TIntegrationWithEnv } from "@app/hooks/api/integrations/types";
+
+type Props = {
+  integration: TIntegrationWithEnv;
+};
+
+type Metadata = NonNullable<TIntegrationWithEnv["metadata"]>;
+type MetadataKey = keyof Metadata;
+type MetadataValue<K extends MetadataKey> = Metadata[K];
+
+const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]>, string> = {
+  githubVisibility: "Github Visibility",
+  githubVisibilityRepoIds: "Github Visibility Repo Ids",
+  shouldAutoRedeploy: "Auto Redeploy Target Application When Secrets Change",
+  secretAWSTag: "Tags For Secrets Stored In AWS",
+  kmsKeyId: "AWS KMS Key ID",
+  secretSuffix: "Secret Suffix",
+  secretPrefix: "Secret Prefix",
+  syncBehavior: "Secrets Sync behavior",
+  mappingBehavior: "Secrets Mapping Behavior",
+  scope: "Scope",
+  org: "Organization",
+  project: "Project",
+  environment: "Environment",
+  shouldDisableDelete: "AWS Secret Deletion Disabled",
+  shouldMaskSecrets: "GitLab Secrets Masking Enabled",
+  shouldProtectSecrets: "GitLab Secret Protection Enabled",
+  shouldEnableDelete: "GitHub Secret Deletion Enabled"
+} as const;
+
+export const IntegrationSettingsSection = ({ integration }: Props) => {
+  const renderValue = <K extends MetadataKey>(key: K, value: MetadataValue<K>) => {
+    if (!value) return null;
+
+    // If it's a boolean, we render a generic "Yes" or "No" response.
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+
+    // When the value is an object or array, or array of objects, we need to handle some special cases.
+    if (typeof value === "object") {
+      if (key === "secretAWSTag") {
+        return (value as MetadataValue<"secretAWSTag">)!.map(({ key: tagKey, value: tagValue }) => (
+          <p key={tagKey} className="text-sm text-gray-200">
+            {tagKey}={tagValue}
+          </p>
+        ));
+      }
+
+      if (key === "githubVisibilityRepoIds") {
+        return value.join(", ");
+      }
+    }
+
+    if (typeof value === "string") {
+      return value.length ? value : "N/A";
+    }
+
+    if (typeof value === "number") {
+      return value;
+    }
+
+    return null;
+  };
+
+  if (!integration.metadata || Object.keys(integration.metadata).length === 0) {
+    return null;
+  }
+
+  // eslint-disable-next-line no-nested-ternary
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <p className="text-lg font-semibold text-gray-200">Integration Settings</p>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        {integration.metadata &&
+          Object.entries(integration.metadata).map(([key, value]) => (
+            <div key={key} className="flex flex-col">
+              <p className="text-sm text-gray-400">
+                {metadataMappings[key as keyof typeof metadataMappings]}
+              </p>
+              <p className="text-sm text-gray-200">{renderValue(key as MetadataKey, value)}</p>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { IntegrationDetailsPage } from "./IntegrationDetailsPage";
@@ -1,6 +1,10 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { useRouter } from "next/router";
 import {
  faArrowRight,
  faCalendarCheck,
+  faEllipsis,
  faRefresh,
  faWarning,
  faXmark
@@ -10,7 +14,7 @@ import { format } from "date-fns";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormLabel, IconButton, Tag, Tooltip } from "@app/components/v2";
+import { Badge, FormLabel, IconButton, Tooltip } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
@@ -28,9 +32,12 @@ export const ConfiguredIntegrationItem = ({
  onRemoveIntegration,
  onManualSyncIntegration
 }: IProps) => {
+  const router = useRouter();
+
  return (
    <div
-      className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3"
+      className="max-w-8xl flex cursor-pointer justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3 transition-all hover:bg-mineshaft-700"
+      onClick={() => router.push(`/integrations/details/${integration.id}`)}
      key={`integration-${integration?.id.toString()}`}
    >
      <div className="flex">
@@ -168,9 +175,9 @@ export const ConfiguredIntegrationItem = ({
          </div>
        )}
      </div>
-      <div className="mt-[1.5rem] flex cursor-default">
+      <div className="mt-[1.5rem] flex cursor-default space-x-3">
        {integration.isSynced != null && integration.lastUsed != null && (
-          <Tag key={integration.id} className={integration.isSynced ? "bg-green-800" : "bg-red/80"}>
+          <Badge variant={integration.isSynced ? "success" : "danger"} key={integration.id}>
            <Tooltip
              center
              className="max-w-xs whitespace-normal break-words"
@@ -178,7 +185,7 @@ export const ConfiguredIntegrationItem = ({
                <div className="flex max-h-[10rem] flex-col overflow-auto ">
                  <div className="flex self-start">
                    <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
-                    <div className="text-sm">Last sync</div>
+                    <div className="text-sm">Last successful sync</div>
                  </div>
                  <div className="pl-5 text-left text-xs">
                    {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
@@ -195,43 +202,62 @@ export const ConfiguredIntegrationItem = ({
                </div>
              }
            >
-              <div className="flex items-center space-x-2 text-white">
+              <div className="flex h-full items-center space-x-2">
                <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
                {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
              </div>
            </Tooltip>
-          </Tag>
+          </Badge>
        )}
-        <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
+        <div className="space-x-1.5">
          <Tooltip className="text-center" content="Manually sync integration secrets">
-            <Button
-              onClick={() => onManualSyncIntegration()}
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualSyncIntegration();
+              }}
+              ariaLabel="sync"
+              colorSchema="primary"
+              variant="star"
              className="max-w-[2.5rem] border-none bg-mineshaft-500"
            >
-              <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
-            </Button>
+              <FontAwesomeIcon icon={faRefresh} className="px-1" />
+            </IconButton>
          </Tooltip>
-        </div>
-        <ProjectPermissionCan
-          I={ProjectPermissionActions.Delete}
-          a={ProjectPermissionSub.Integrations}
-        >
-          {(isAllowed: boolean) => (
-            <div className="flex items-end opacity-80 duration-200 hover:opacity-100">
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Delete}
+            a={ProjectPermissionSub.Integrations}
+          >
+            {(isAllowed: boolean) => (
              <Tooltip content="Remove Integration">
                <IconButton
-                  onClick={() => onRemoveIntegration()}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemoveIntegration();
+                  }}
                  ariaLabel="delete"
                  isDisabled={!isAllowed}
                  colorSchema="danger"
                  variant="star"
+                  className="max-w-[2.5rem] border-none bg-mineshaft-500"
                >
-                  <FontAwesomeIcon icon={faXmark} className="px-0.5" />
+                  <FontAwesomeIcon icon={faXmark} className="px-1" />
                </IconButton>
              </Tooltip>
-            </div>
-          )}
-        </ProjectPermissionCan>
+            )}
+          </ProjectPermissionCan>
+
+          <Tooltip content="View details">
+            <IconButton
+              ariaLabel="delete"
+              colorSchema="primary"
+              variant="star"
+              className="max-w-[2.5rem] border-none bg-mineshaft-500"
+            >
+              <FontAwesomeIcon icon={faEllipsis} className="px-1" />
+            </IconButton>
+          </Tooltip>
+        </div>
      </div>
    </div>
  );
@@ -42,7 +42,9 @@ export const UserAuditLogsSection = withPermission(
        <LogsSection
          showFilters={showFilter}
          filterClassName="bg-mineshaft-900 static"
-          presetActor={orgMembership.user.id}
+          presets={{
+            actorId: orgMembership.user.id
+          }}
          isOrgAuditLogs
        />
      </div>
@@ -1,14 +1,29 @@
+/* eslint-disable no-nested-ternary */
 import { useState } from "react";
-import { Control, Controller, UseFormReset } from "react-hook-form";
-import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { Control, Controller, UseFormReset, UseFormWatch } from "react-hook-form";
+import {
+  faCheckCircle,
+  faChevronDown,
+  faFilterCircleXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";

-import { Button, DatePicker, FormControl, Select, SelectItem } from "@app/components/v2";
+import {
+  Button,
+  DatePicker,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FormControl,
+  Select,
+  SelectItem
+} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogActorFilterOpts } from "@app/hooks/api";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
-import { ActorType } from "@app/hooks/api/auditLogs/enums";
+import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
 import { Actor } from "@app/hooks/api/auditLogs/types";

 import { AuditLogFilterFormData } from "./types";
@@ -20,13 +35,17 @@ const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label
 }));

 type Props = {
-  presetActor?: string;
+  presets?: {
+    actorId?: string;
+    eventType?: EventType[];
+  };
  className?: string;
  control: Control<AuditLogFilterFormData>;
  reset: UseFormReset<AuditLogFilterFormData>;
+  watch: UseFormWatch<AuditLogFilterFormData>;
 };

-export const LogsFilter = ({ presetActor, className, control, reset }: Props) => {
+export const LogsFilter = ({ presets, className, control, reset, watch }: Props) => {
  const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
  const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);

@@ -71,6 +90,8 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
    }
  };

+  const selectedEventTypes = watch("eventType") as EventType[] | undefined;
+
  return (
    <div
      className={twMerge(
@@ -82,29 +103,69 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
        <Controller
          control={control}
          name="eventType"
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            <FormControl
-              label="Event"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="w-40"
-            >
-              <Select
-                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
-                {...field}
-                onValueChange={(e) => onChange(e)}
-                className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
-              >
-                {eventTypes.map(({ label, value }) => (
-                  <SelectItem value={String(value || "")} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </Select>
+          render={({ field }) => (
+            <FormControl label="Events">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                    {selectedEventTypes?.length === 1
+                      ? eventTypes.find((eventType) => eventType.value === selectedEventTypes[0])
+                          ?.label
+                      : selectedEventTypes?.length === 0
+                      ? "Select event types"
+                      : `${selectedEventTypes?.length} events selected`}
+                    <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-xs" />
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-hidden">
+                  <div className="max-h-80 overflow-y-auto">
+                    {eventTypes && eventTypes.length > 0 ? (
+                      eventTypes.map((eventType) => {
+                        const isSelected = selectedEventTypes?.includes(
+                          eventType.value as EventType
+                        );
+
+                        return (
+                          <DropdownMenuItem
+                            onSelect={(event) => eventTypes.length > 1 && event.preventDefault()}
+                            onClick={() => {
+                              if (selectedEventTypes?.includes(eventType.value as EventType)) {
+                                field.onChange(
+                                  selectedEventTypes?.filter((e: string) => e !== eventType.value)
+                                );
+                              } else {
+                                field.onChange([...(selectedEventTypes || []), eventType.value]);
+                              }
+                            }}
+                            key={`event-type-${eventType.value}`}
+                            icon={
+                              isSelected ? (
+                                <FontAwesomeIcon
+                                  icon={faCheckCircle}
+                                  className="pr-0.5 text-primary"
+                                />
+                              ) : (
+                                <div className="pl-[1.01rem]" />
+                              )
+                            }
+                            iconPos="left"
+                            className="w-[28.4rem] text-sm"
+                          >
+                            {eventType.label}
+                          </DropdownMenuItem>
+                        );
+                      })
+                    ) : (
+                      <div />
+                    )}
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
            </FormControl>
          )}
        />
-        {!isLoading && data && data.length > 0 && !presetActor && (
+
+        {!isLoading && data && data.length > 0 && !presets?.actorId && (
          <Controller
            control={control}
            name="actor"
@@ -207,8 +268,8 @@ export const LogsFilter = ({ presetActor, className, control, reset }: Props) =>
        leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} />}
        onClick={() =>
          reset({
-            eventType: undefined,
-            actor: presetActor,
+            eventType: presets?.eventType || [],
+            actor: presets?.actorId,
            userAgentType: undefined,
            startDate: undefined,
            endDate: undefined
@@ -5,24 +5,38 @@ import { yupResolver } from "@hookform/resolvers/yup";

 import { UpgradePlanModal } from "@app/components/v2";
 import { useSubscription } from "@app/context";
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { ActorType, EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { LogsFilter } from "./LogsFilter";
-import { LogsTable } from "./LogsTable";
+import { LogsTable, TAuditLogTableHeader } from "./LogsTable";
 import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";

 type Props = {
-  presetActor?: string;
+  presets?: {
+    actorId?: string;
+    eventType?: EventType[];
+    actorType?: ActorType;
+    startDate?: Date;
+    endDate?: Date;
+    eventMetadata?: Record<string, string>;
+  };
+
  showFilters?: boolean;
  filterClassName?: string;
  isOrgAuditLogs?: boolean;
+  showActorColumn?: boolean;
+  remappedHeaders?: Partial<Record<TAuditLogTableHeader, string>>;
+  refetchInterval?: number;
 };

 export const LogsSection = ({
-  presetActor,
+  presets,
  filterClassName,
+  remappedHeaders,
  isOrgAuditLogs,
+  showActorColumn,
+  refetchInterval,
  showFilters
 }: Props) => {
  const { subscription } = useSubscription();
@@ -33,11 +47,12 @@ export const LogsSection = ({
  const { control, reset, watch } = useForm<AuditLogFilterFormData>({
    resolver: yupResolver(auditLogFilterFormSchema),
    defaultValues: {
-      actor: presetActor,
+      actor: presets?.actorId,
+      eventType: presets?.eventType || [],
      page: 1,
      perPage: 10,
-      startDate: new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
-      endDate: new Date(new Date(Date.now()).setHours(23, 59, 59, 999)) // end of today
+      startDate: presets?.startDate ?? new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
+      endDate: presets?.endDate ?? new Date(new Date(Date.now()).setHours(23, 59, 59, 999)) // end of today
    }
  });

@@ -47,7 +62,7 @@ export const LogsSection = ({
    }
  }, [subscription]);

-  const eventType = watch("eventType") as EventType | undefined;
+  const eventType = watch("eventType") as EventType[] | undefined;
  const userAgentType = watch("userAgentType") as UserAgentType | undefined;
  const actor = watch("actor");

@@ -59,19 +74,27 @@ export const LogsSection = ({
      {showFilters && (
        <LogsFilter
          className={filterClassName}
-          presetActor={presetActor}
+          presets={presets}
          control={control}
+          watch={watch}
          reset={reset}
        />
      )}
      <LogsTable
+        refetchInterval={refetchInterval}
+        remappedHeaders={remappedHeaders}
        isOrgAuditLogs={isOrgAuditLogs}
-        eventType={eventType}
-        userAgentType={userAgentType}
-        showActorColumn={!presetActor}
-        actor={actor}
-        startDate={startDate}
-        endDate={endDate}
+        showActorColumn={!!showActorColumn && !isOrgAuditLogs}
+        filter={{
+          eventMetadata: presets?.eventMetadata,
+          actorType: presets?.actorType,
+          limit: 15,
+          eventType,
+          userAgentType,
+          startDate,
+          endDate,
+          actorId: actor
+        }}
      />
      <UpgradePlanModal
        isOpen={popUp.upgradePlan.isOpen}
@@ -15,43 +15,41 @@ import {
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetAuditLogs } from "@app/hooks/api";
-import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";

 import { LogsTableRow } from "./LogsTableRow";

 type Props = {
-  eventType?: EventType;
-  userAgentType?: UserAgentType;
-  actor?: string;
-  startDate?: Date;
-  endDate?: Date;
  isOrgAuditLogs?: boolean;
  showActorColumn: boolean;
+  filter?: TGetAuditLogsFilter;
+  remappedHeaders?: Partial<Record<TAuditLogTableHeader, string>>;
+  refetchInterval?: number;
 };

 const AUDIT_LOG_LIMIT = 15;

+const TABLE_HEADERS = ["Timestamp", "Event", "Project", "Actor", "Source", "Metadata"] as const;
+export type TAuditLogTableHeader = (typeof TABLE_HEADERS)[number];
+
 export const LogsTable = ({
-  eventType,
-  userAgentType,
  showActorColumn,
-  actor,
-  startDate,
-  endDate,
-  isOrgAuditLogs
+  isOrgAuditLogs,
+  filter,
+  remappedHeaders,
+  refetchInterval
 }: Props) => {
  const { currentWorkspace } = useWorkspace();

  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
    {
-      eventType,
-      userAgentType,
-      actor,
-      startDate,
-      endDate,
+      ...filter,
      limit: AUDIT_LOG_LIMIT
    },
-    !isOrgAuditLogs ? currentWorkspace?.id ?? "" : null
+    !isOrgAuditLogs ? currentWorkspace?.id ?? "" : null,
+    {
+      refetchInterval
+    }
  );

  const isEmpty = !isLoading && !data?.pages?.[0].length;
@@ -62,18 +60,24 @@ export const LogsTable = ({
        <Table>
          <THead>
            <Tr>
-              <Th>Timestamp</Th>
-              <Th>Event</Th>
-              {isOrgAuditLogs && <Th>Project</Th>}
-              {showActorColumn && <Th>Actor</Th>}
-              <Th>Source</Th>
-              <Th>Metadata</Th>
+              {TABLE_HEADERS.map((header, idx) => {
+                if (
+                  (header === "Project" && !isOrgAuditLogs) ||
+                  (header === "Actor" && !showActorColumn)
+                ) {
+                  return null;
+                }
+
+                return (
+                  <Th key={`table-header-${idx + 1}`}>{remappedHeaders?.[header] || header}</Th>
+                );
+              })}
            </Tr>
          </THead>
          <TBody>
            {!isLoading &&
              data?.pages?.map((group, i) => (
-                <Fragment key={`auditlog-item-${i + 1}`}>
+                <Fragment key={`audit-log-fragment-${i + 1}`}>
                  {group.map((auditLog) => (
                    <LogsTableRow
                      showActorColumn={showActorColumn}
@@ -1,4 +1,4 @@
-import { Td, Tr } from "@app/components/v2";
+import { Badge, Td, Tooltip, Tr } from "@app/components/v2";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
 import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
 import { Actor, AuditLog, Event } from "@app/hooks/api/auditLogs/types";
@@ -461,6 +461,21 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
            <p>{`Secret Request Channels: ${event.metadata.secretRequestChannels}`}</p>
          </Td>
        );
+
+      case EventType.INTEGRATION_SYNCED:
+        return (
+          <Td>
+            <Tooltip
+              className="max-w-xs whitespace-normal break-words"
+              content={event.metadata.syncMessage!}
+              isDisabled={!event.metadata.syncMessage}
+            >
+              <Badge variant={event.metadata.isSynced ? "success" : "danger"}>
+                <p className="text-center">{event.metadata.isSynced ? "Successful" : "Failed"}</p>
+              </Badge>
+            </Tooltip>
+          </Td>
+        );
      default:
        return <Td />;
    }
@@ -484,16 +499,41 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
    return formattedDate;
  };

+  const renderSource = () => {
+    const { event, actor } = auditLog;
+
+    if (event.type === EventType.INTEGRATION_SYNCED) {
+      if (actor.type === ActorType.USER) {
+        return (
+          <Td>
+            <p>Manually triggered by {actor.metadata.email}</p>
+          </Td>
+        );
+      }
+
+      // Platform / automatic syncs
+      return (
+        <Td>
+          <p>Automatically synced by Infisical</p>
+        </Td>
+      );
+    }
+
+    return (
+      <Td>
+        <p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
+        <p>{auditLog.ipAddress}</p>
+      </Td>
+    );
+  };
+
  return (
    <Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
      <Td>{formatDate(auditLog.createdAt)}</Td>
      <Td>{`${eventToNameMap[auditLog.event.type]}`}</Td>
      {isOrgAuditLogs && <Td>{auditLog.project.name}</Td>}
      {showActorColumn && renderActor(auditLog.actor)}
-      <Td>
-        <p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
-        <p>{auditLog.ipAddress}</p>
-      </Td>
+      {renderSource()}
      {renderMetadata(auditLog.event)}
    </Tr>
  );
@@ -4,7 +4,8 @@ import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";

 export const auditLogFilterFormSchema = yup
  .object({
-    eventType: yup.string().oneOf(Object.values(EventType), "Invalid event type"),
+    eventMetadata: yup.object({}).optional(),
+    eventType: yup.array(yup.string().oneOf(Object.values(EventType), "Invalid event type")),
    actor: yup.string(),
    userAgentType: yup.string().oneOf(Object.values(UserAgentType), "Invalid user agent type"),
    startDate: yup.date(),
				`@@ -0,0 +1 @@`
				`export { IntegrationDetailsPage } from "./IntegrationDetailsPage";`