Merge pull request #2479 from Infisical/misc/audit-log-page-warning-and-auto-select

misc: added maintenance notice to audit log page

frontend/src/views/Org/AuditLogsPage/AuditLogsPage.tsx

@@ -1,3 +1,4 @@
+import { NoticeBanner } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
@@ -10,6 +11,14 @@ export const AuditLogsPage = withPermission(
         <div className="w-full max-w-7xl px-6">
           <div className="bg-bunker-800 py-6">
             <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
+            {(window.location.origin.includes("https://app.infisical.com") ||
+              window.location.origin.includes("https://gamma.infisical.com")) && (
+              <NoticeBanner title="The audit logs page is in maintenance" className="mt-4">
+                We are currently working on improving the performance of querying audit logs.
+                However, please note that audit logs are still being published as usual, so there’s
+                no disruption to log generation.
+              </NoticeBanner>
+            )}
             <div />
           </div>
           <LogsSection filterClassName="static p-2" showFilters isOrgAuditLogs />

frontend/src/views/Org/AuditLogsPage/components/LogsFilter.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { Control, Controller, UseFormReset, UseFormWatch } from "react-hook-form";
+import { Control, Controller, UseFormReset, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import {
   faCheckCircle,
   faChevronDown,
@@ -41,6 +41,7 @@ type Props = {
   };
   className?: string;
   isOrgAuditLogs?: boolean;
+  setValue: UseFormSetValue<AuditLogFilterFormData>;
   control: Control<AuditLogFilterFormData>;
   reset: UseFormReset<AuditLogFilterFormData>;
   watch: UseFormWatch<AuditLogFilterFormData>;
@@ -51,6 +52,7 @@ export const LogsFilter = ({
   isOrgAuditLogs,
   className,
   control,
+  setValue,
   reset,
   watch
 }: Props) => {
@@ -60,6 +62,12 @@ export const LogsFilter = ({
   const { currentWorkspace, workspaces } = useWorkspace();
   const { data, isLoading } = useGetAuditLogActorFilterOpts(currentWorkspace?.id ?? "");
 
+  useEffect(() => {
+    if (workspaces.length) {
+      setValue("projectId", workspaces[0].id);
+    }
+  }, [workspaces]);
+
   const renderActorSelectItem = (actor: Actor) => {
     switch (actor.type) {
       case ActorType.USER:
@@ -243,20 +251,14 @@ export const LogsFilter = ({
                 className="w-40"
               >
                 <Select
-                  value={value === undefined ? "all" : value}
+                  value={value}
                   {...field}
-                  onValueChange={(e) => {
+                  onValueChange={(e) => onChange(e)}
-                    if (e === "all") onChange(undefined);
-                    else onChange(e);
-                  }}
                   className={twMerge(
                     "w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100",
                     value === undefined && "text-mineshaft-400"
                   )}
                 >
-                  <SelectItem value="all" key="all">
-                    All projects
-                  </SelectItem>
                   {workspaces.map((project) => (
                     <SelectItem value={String(project.id || "")} key={project.id}>
                       {project.name}

frontend/src/views/Org/AuditLogsPage/components/LogsSection.tsx

@@ -44,7 +44,7 @@ export const LogsSection = ({
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
-  const { control, reset, watch } = useForm<AuditLogFilterFormData>({
+  const { control, reset, watch, setValue } = useForm<AuditLogFilterFormData>({
     resolver: yupResolver(auditLogFilterFormSchema),
     defaultValues: {
       projectId: undefined,
@@ -79,6 +79,7 @@ export const LogsSection = ({
           className={filterClassName}
           presets={presets}
           control={control}
+          setValue={setValue}
           watch={watch}
           reset={reset}
         />