Merge pull request #4190 from Infisical/audit-log-date-selector

improvement(frontend): Revise and expand audit log date filter and page

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -1,11 +1,13 @@
 import { ChangeEventHandler, useState } from "react";
-import { DayPicker, DayPickerProps, getDefaultClassNames, UI } from "react-day-picker";
+import { DayPicker, DayPickerProps, getDefaultClassNames, TZDate, UI } from "react-day-picker";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
 import { format, setHours, setMinutes } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
+import { formatDateTime, Timezone } from "@app/helpers/datetime";
+
 import { Button } from "../Button";
 import { Input } from "../Input";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
@@ -18,6 +20,32 @@ export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   popUpProps: PopoverProps;
   popUpContentProps: PopoverContentProps;
   dateFormat?: "PPP" | "PP" | "P"; // extend as needed
+  buttonClassName?: string;
+  timezone?: Timezone;
+};
+
+const localTimeToUTC = (timeString: string) => {
+  const today = new Date();
+  const [hours, minutes] = timeString.split(":").map(Number);
+
+  today.setHours(hours, minutes, 0, 0);
+
+  const utcHours = today.getUTCHours().toString().padStart(2, "0");
+  const utcMinutes = today.getUTCMinutes().toString().padStart(2, "0");
+
+  return `${utcHours}:${utcMinutes}`;
+};
+
+const utcTimeToLocal = (utcTimeString: string) => {
+  const today = new Date();
+  const [hours, minutes] = utcTimeString.split(":").map(Number);
+
+  today.setUTCHours(hours, minutes, 0, 0);
+
+  const localHours = today.getHours().toString().padStart(2, "0");
+  const localMinutes = today.getMinutes().toString().padStart(2, "0");
+
+  return `${localHours}:${localMinutes}`;
 };
 
 // Doc: https://react-day-picker.js.org/
@@ -27,12 +55,16 @@ export const DatePicker = ({
   popUpProps,
   popUpContentProps,
   dateFormat = "PPP",
+  buttonClassName,
+  timezone,
   ...props
 }: DatePickerProps) => {
   const [timeValue, setTimeValue] = useState<string>(value ? format(value, "HH:mm") : "00:00");
+  const displayUtc = timezone === Timezone.UTC;
 
   const handleTimeChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const time = e.target.value;
+    const time = displayUtc ? utcTimeToLocal(e.target.value) : e.target.value;
+
     if (time) {
       setTimeValue(time);
       if (value) {
@@ -57,8 +89,14 @@ export const DatePicker = ({
   return (
     <Popover {...popUpProps}>
       <PopoverTrigger asChild>
-        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
+        <Button
-          {value ? format(value, dateFormat) : "Pick a date and time"}
+          className={buttonClassName}
+          variant="outline_bg"
+          leftIcon={<FontAwesomeIcon icon={faCalendar} />}
+        >
+          {value
+            ? formatDateTime({ timestamp: value, timezone, dateFormat })
+            : "Pick a date and time"}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -72,9 +110,10 @@ export const DatePicker = ({
           <DayPicker
             {...props}
             mode="single"
-            selected={value}
+            selected={value ? new TZDate(value, displayUtc ? "UTC" : undefined) : undefined}
-            onSelect={handleDaySelect}
+            onSelect={(date) => handleDaySelect(date ? new TZDate(date, undefined) : undefined)}
             className="font-inter text-mineshaft-200"
+            timeZone={displayUtc ? "UTC" : undefined}
             classNames={{
               today: "text-primary border-primary",
               selected: " text-mineshaft-100 bg-mineshaft-500",
@@ -88,7 +127,7 @@ export const DatePicker = ({
         <div className="mx-4 my-4">
           <Input
             type="time"
-            value={timeValue}
+            value={displayUtc ? localTimeToUTC(timeValue) : timeValue}
             onChange={handleTimeChange}
             className="bg-mineshaft-700 text-white [color-scheme:dark]"
           />

frontend/src/components/v2/Select/Select.tsx

@@ -19,6 +19,7 @@ type Props = {
   icon?: IconProp;
   isMulti?: boolean;
   iconClassName?: string;
+  dropdownContainerStyle?: React.CSSProperties;
 };
 
 export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
@@ -35,6 +36,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       position,
       containerClassName,
       iconClassName,
+      dropdownContainerStyle,
       ...props
     },
     ref
@@ -82,7 +84,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                 dropdownContainerClassName
               )}
               position={position}
-              style={{ width: "var(--radix-select-trigger-width)" }}
+              style={dropdownContainerStyle ?? { width: "var(--radix-select-trigger-width)" }}
             >
               <SelectPrimitive.ScrollUpButton>
                 <div className="flex items-center justify-center">

frontend/src/helpers/datetime.ts

@@ -0,0 +1,24 @@
+import { format } from "date-fns";
+
+export enum Timezone {
+  Local = "local",
+  UTC = "UTC"
+}
+
+export const formatDateTime = ({
+  timezone,
+  timestamp,
+  dateFormat = "MMM do yyyy, hh:mm a"
+}: {
+  timestamp: string | Date;
+  timezone?: Timezone;
+  dateFormat?: string;
+}) => {
+  const date = new Date(timestamp);
+
+  if (timezone === Timezone.UTC) {
+    const utcDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
+    return `${format(utcDate, dateFormat)}`;
+  }
+  return format(date, dateFormat);
+};

frontend/src/hooks/api/auditLogs/queries.tsx

@@ -57,6 +57,7 @@ export const useGetAuditLogs = (
     },
     getNextPageParam: (lastPage, pages) =>
       lastPage.length !== 0 ? pages.length * filters.limit : undefined,
+    placeholderData: (prev) => prev,
     ...options
   });
 };

frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx

@@ -18,7 +18,7 @@ export const AuditLogsPage = () => {
             title="Audit logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
-          <LogsSection />
+          <LogsSection pageView />
         </div>
       </div>
     </div>

frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx

@@ -1,9 +1,8 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faArrowRight, faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { format } from "date-fns";
 import ms from "ms";
 import { twMerge } from "tailwind-merge";
 
@@ -18,6 +17,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { formatDateTime, Timezone } from "@app/helpers/datetime";
 
 import {
   auditLogDateFilterFormSchema,
@@ -28,9 +28,19 @@ import {
 type Props = {
   setFilter: (data: TAuditLogDateFilterFormData) => void;
   filter: TAuditLogDateFilterFormData;
+  setTimezone: (timezone: Timezone) => void;
+  timezone: Timezone;
 };
 const RELATIVE_VALUES = ["5m", "30m", "1h", "3h", "12h"];
-export const LogsDateFilter = ({ setFilter, filter }: Props) => {
+
+const RELATIVE_OPTIONS = [
+  { label: "Minutes", unit: "m", values: [5, 10, 15, 30, 45] },
+  { label: "Hours", unit: "h", values: [1, 2, 3, 6, 8, 12] },
+  { label: "Days", unit: "d", values: [1, 2, 3, 4, 5, 6] },
+  { label: "Weeks", unit: "w", values: [1, 2, 3, 4] }
+];
+
+export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
   const [isPopupOpen, setIsPopOpen] = useState(false);
@@ -59,15 +69,16 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
   };
 
   return (
+    <>
       <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
-      <div className="mr-2 flex items-center">
+        <div className="flex items-center">
           {filter.type === AuditLogDateFilterType.Relative ? (
             <>
               {RELATIVE_VALUES.map((el) => (
                 <Button
                   variant="outline_bg"
                   className={twMerge(
-                  "rounded-none px-3 py-2 first:rounded-l-md",
+                    "w-[3.82rem] rounded-none px-3 py-2 font-normal first:rounded-l-md",
                     filter.type === AuditLogDateFilterType.Relative &&
                       filter.relativeModeValue === el &&
                       "border-primary/40 bg-primary/[0.1]"
@@ -87,65 +98,138 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
               ))}
             </>
           ) : (
-          <>
+            <div className="flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent bg-mineshaft-600 px-5 py-2 text-sm text-bunker-200">
-            <div className="rounded-l-md border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
+              <div>
-              {format(filter.startDate, "yyyy-MM-dd HH:mm")}
+                {formatDateTime({
+                  timezone,
+                  timestamp: filter.startDate,
+                  dateFormat: "yyyy/MM/dd HH:mm"
+                })}
               </div>
-            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
+              <div>
-              <FontAwesomeIcon icon={faChevronRight} />
+                <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faChevronRight} />
+              </div>
+              <div>
+                {formatDateTime({
+                  timezone,
+                  timestamp: filter.endDate,
+                  dateFormat: "yyyy/MM/dd HH:mm"
+                })}
               </div>
-            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-              {format(filter.endDate, "yyyy-MM-dd HH:mm")}
             </div>
-          </>
           )}
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline_bg"
               className={twMerge(
-              "rounded-none rounded-r-md px-3 py-2",
+                "w-[8rem] rounded-none rounded-r-md px-3 py-2 font-normal",
                 (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
                   "border-primary/40 bg-primary/[0.1]"
               )}
             >
-            <FontAwesomeIcon icon={faCalendar} />
+              <span>Custom</span> <FontAwesomeIcon className="ml-1" icon={faCalendar} />
               {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
                 <span className="ml-1">({filter.relativeModeValue})</span>
               )}
             </Button>
           </DropdownMenuTrigger>
         </div>
-      <DropdownMenuContent className="min-w-80 p-4" align="center" alignOffset={16}>
+        <DropdownMenuContent
+          className="!min-w-[434px] bg-mineshaft-800 p-4"
+          align="end"
+          sideOffset={8}
+        >
           <form onSubmit={handleSubmit(onSubmit)}>
             <Controller
               control={control}
               name="type"
               render={({ field }) => (
-              <FormControl className="mb-2 w-full">
+                <div className="mb-7">
-                <Select
+                  <Button
-                  value={field.value}
+                    onClick={() => field.onChange(AuditLogDateFilterType.Absolute)}
-                  onValueChange={(el) => field.onChange(el)}
+                    variant="outline_bg"
-                  className="w-full"
+                    className={twMerge(
+                      "h-8 rounded-r-none font-normal",
+                      field.value === AuditLogDateFilterType.Absolute &&
+                        "border-primary/40 bg-primary/[0.1]"
+                    )}
                   >
-                  <SelectItem value={AuditLogDateFilterType.Relative}>Relative</SelectItem>
+                    Absolute
-                  <SelectItem value={AuditLogDateFilterType.Absolute}>Absolute</SelectItem>
+                  </Button>
-                </Select>
+                  <Button
-              </FormControl>
+                    onClick={() => field.onChange(AuditLogDateFilterType.Relative)}
+                    variant="outline_bg"
+                    className={twMerge(
+                      "h-8 rounded-l-none font-normal",
+                      field.value === AuditLogDateFilterType.Relative &&
+                        "border-primary/40 bg-primary/[0.1]"
+                    )}
+                  >
+                    Relative
+                  </Button>
+                </div>
               )}
             />
             {selectType === AuditLogDateFilterType.Relative && (
               <Controller
                 control={control}
                 name="relativeModeValue"
-              render={({ field }) => (
+                render={({ field }) => {
-                <FormControl className="mb-0 w-full" helperText="Example: 1h, 1d, 2d">
+                  const duration = field.value?.substring(0, field.value.length - 1);
-                  <Input {...field} value={field.value || ""} />
+                  const unitOfTime = field.value?.at(-1);
-                </FormControl>
+                  return (
+                    <div className="flex flex-col gap-4">
+                      {RELATIVE_OPTIONS.map(({ label, unit, values }) => (
+                        <div key={unit} className="flex items-center gap-2">
+                          <div className="w-16">{label}</div>
+                          {values.map((v) => {
+                            const value = `${v}${unit}`;
+                            return (
+                              <Button
+                                key={value}
+                                variant="outline_bg"
+                                onClick={() => field.onChange(value)}
+                                className={twMerge(
+                                  "h-8 w-12",
+                                  field.value === value && "border-primary/40 bg-primary/[0.1]"
                                 )}
+                              >
+                                {v}
+                              </Button>
+                            );
+                          })}
+                        </div>
+                      ))}
+                      <div className="flex items-center gap-2">
+                        <FormControl className="mb-0 w-28" label="Duration">
+                          <Input
+                            type="number"
+                            value={duration || "1"}
+                            onChange={(val) => field.onChange(`${val}${unitOfTime}`)}
+                            max={60}
+                            min={1}
+                          />
+                        </FormControl>
+                        <FormControl className="mb-0 w-36" label="Unit of Time">
+                          <Select
+                            value={unitOfTime}
+                            onValueChange={(val) => field.onChange(`${duration}${val}`)}
+                            className="w-full"
+                            position="popper"
+                          >
+                            {RELATIVE_OPTIONS.map((opt) => (
+                              <SelectItem value={opt.unit}>{opt.label}</SelectItem>
+                            ))}
+                          </Select>
+                        </FormControl>
+                      </div>
+                    </div>
+                  );
+                }}
               />
             )}
             {selectType === AuditLogDateFilterType.Absolute && (
-            <div className="mb-2 flex h-10 w-full items-center justify-between gap-2">
+              <div className="flex h-10 w-full items-center justify-between gap-2">
                 <Controller
                   name="startDate"
                   control={control}
@@ -155,11 +239,14 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
                         className="relative top-2"
                         errorText={error?.message}
                         isError={Boolean(error)}
+                        label="Start Date"
                       >
                         <DatePicker
                           value={field.value || undefined}
                           onChange={onChange}
+                          timezone={timezone}
                           dateFormat="P"
+                          buttonClassName="w-44 h-8 font-normal"
                           popUpProps={{
                             open: isStartDatePickerOpen,
                             onOpenChange: setIsStartDatePickerOpen
@@ -170,10 +257,11 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
                     );
                   }}
                 />
-              <div className="flex items-center -space-x-3">
+                <FontAwesomeIcon
-                <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
+                  icon={faChevronRight}
-                <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
+                  size="xs"
-              </div>
+                  className="mt-6 text-mineshaft-400"
+                />
                 <Controller
                   name="endDate"
                   control={control}
@@ -183,11 +271,14 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
                         className="relative top-2"
                         errorText={error?.message}
                         isError={Boolean(error)}
+                        label="End Date"
                       >
                         <DatePicker
                           value={field.value || undefined}
                           onChange={onChange}
                           dateFormat="P"
+                          buttonClassName="w-44 h-8 font-normal"
+                          timezone={timezone}
                           popUpProps={{
                             open: isEndDatePickerOpen,
                             onOpenChange: setIsEndDatePickerOpen
@@ -200,13 +291,36 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
                 />
               </div>
             )}
-          <div className="mt-4">
+            <div className="mt-8 w-full justify-end">
-            <Button size="xs" type="submit" isDisabled={!formState.isDirty}>
+              <Button
+                size="sm"
+                type="submit"
+                className="h-9 w-24 font-normal"
+                variant="outline_bg"
+                isDisabled={!formState.isDirty}
+              >
                 Apply
               </Button>
             </div>
           </form>
         </DropdownMenuContent>
       </DropdownMenu>
+      <Select
+        value={timezone}
+        onValueChange={(val) => setTimezone(val as Timezone)}
+        className="w-[10.6rem] border !border-mineshaft-500 !bg-mineshaft-600 capitalize"
+        dropdownContainerClassName="max-w-none"
+        position="popper"
+        dropdownContainerStyle={{
+          width: "100%"
+        }}
+      >
+        {Object.values(Timezone).map((tz) => (
+          <SelectItem value={tz} className="capitalize" key={tz}>
+            {tz} Timezone
+          </SelectItem>
+        ))}
+      </Select>
+    </>
   );
 };

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useState } from "react";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { Timezone } from "@app/helpers/datetime";
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -20,10 +23,11 @@ type Props = {
   presets?: Presets;
   refetchInterval?: number;
   showFilters?: boolean;
+  pageView?: boolean;
 };
 
 export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true }: Props) => {
+  ({ presets, refetchInterval, showFilters = true, pageView = false }: Props) => {
     const { subscription } = useSubscription();
 
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -31,6 +35,8 @@ export const LogsSection = withPermission(
       eventType: presets?.eventType || [],
       actor: presets?.actorId
     });
+    const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);
+
     const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>({
       startDate: new Date(Number(new Date()) - ms("1h")),
       endDate: new Date(),
@@ -43,10 +49,85 @@ export const LogsSection = withPermission(
         handlePopUpOpen("upgradePlan");
       }
     }, [subscription]);
+
+    if (pageView)
+      return (
+        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
+            <div>
+              <div className="flex items-center gap-1 whitespace-nowrap">
+                <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
+                <a
+                  href="https://infisical.com/docs/documentation/platform/audit-logs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <div className="ml-1 mt-[0.1rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                    <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                    <span>Docs</span>
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      className="mb-[0.07rem] ml-1.5 text-[10px]"
+                    />
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+              {showFilters && (
+                <LogsDateFilter
+                  filter={dateFilter}
+                  setFilter={setDateFilter}
+                  timezone={timezone}
+                  setTimezone={setTimezone}
+                />
+              )}
+              {showFilters && (
+                <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <LogsTable
+              refetchInterval={refetchInterval}
+              filter={{
+                secretPath: logFilter.secretPath || undefined,
+                secretKey: logFilter.secretKey || undefined,
+                eventMetadata: logFilter?.eventMetadata,
+                projectId: logFilter?.project?.id,
+                actorType: presets?.actorType,
+                limit: 15,
+                eventType: logFilter?.eventType,
+                userAgentType: logFilter?.userAgentType,
+                startDate: dateFilter?.startDate,
+                endDate: dateFilter?.endDate,
+                environment: logFilter?.environment?.slug,
+                actor: logFilter?.actor
+              }}
+              timezone={timezone}
+            />
+            <UpgradePlanModal
+              isOpen={popUp.upgradePlan.isOpen}
+              onOpenChange={(isOpen) => {
+                handlePopUpToggle("upgradePlan", isOpen);
+              }}
+              text="You can use audit logs if you switch to a paid Infisical plan."
+            />
+          </div>
+        </div>
+      );
+
     return (
       <div className="space-y-2">
         <div className="flex w-full justify-end">
-          {showFilters && <LogsDateFilter filter={dateFilter} setFilter={setDateFilter} />}
+          {showFilters && (
+            <LogsDateFilter
+              filter={dateFilter}
+              setFilter={setDateFilter}
+              timezone={timezone}
+              setTimezone={setTimezone}
+            />
+          )}
           {showFilters && (
             <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
           )}
@@ -67,6 +148,7 @@ export const LogsSection = withPermission(
             environment: logFilter?.environment?.slug,
             actor: logFilter?.actor
           }}
+          timezone={timezone}
         />
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}

frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from "react";
-import { faFile, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faFile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -14,9 +13,9 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
+import { Timezone } from "@app/helpers/datetime";
 import { useGetAuditLogs } from "@app/hooks/api";
 import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";
 
@@ -25,11 +24,12 @@ import { LogsTableRow } from "./LogsTableRow";
 type Props = {
   filter: TGetAuditLogsFilter;
   refetchInterval?: number;
+  timezone: Timezone;
 };
 
 const AUDIT_LOG_LIMIT = 30;
 
-export const LogsTable = ({ filter, refetchInterval }: Props) => {
+export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
   // Determine the project ID for filtering
   const filterProjectId =
     // Use the projectId from the filter if it exists
@@ -57,16 +57,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
               <Th className="w-24">
                 <Spinner size="xs" className={twMerge(isPending ? "opacity-100" : "opacity-0")} />
               </Th>
-              <Th className="w-64">
+              <Th className="w-64">Timestamp</Th>
-                Timestamp
-                <Tooltip
-                  className="normal-case"
-                  content="Time displayed in your system's time zone."
-                  sideOffset={10}
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} className="ml-1" />
-                </Tooltip>
-              </Th>
               <Th>Event</Th>
             </Tr>
           </THead>
@@ -79,6 +70,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
                       rowNumber={index + i * AUDIT_LOG_LIMIT + 1}
                       auditLog={auditLog}
                       key={`audit-log-${auditLog.id}`}
+                      timezone={timezone}
                     />
                   ))}
                 </Fragment>
@@ -96,7 +88,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
       </TableContainer>
       {!isEmpty && (
         <Button
-          className="mb-20 mt-4 px-4 py-3 text-sm"
+          className="mt-4 px-4 py-3 text-sm"
           isFullWidth
           variant="outline_bg"
           isLoading={isFetchingNextPage}

frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx

@@ -1,8 +1,8 @@
 import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
 
 import { Td, Tr } from "@app/components/v2";
+import { formatDateTime, Timezone } from "@app/helpers/datetime";
 import { useToggle } from "@app/hooks";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { AuditLog } from "@app/hooks/api/auditLogs/types";
@@ -10,6 +10,7 @@ import { AuditLog } from "@app/hooks/api/auditLogs/types";
 type Props = {
   auditLog: AuditLog;
   rowNumber: number;
+  timezone: Timezone;
 };
 
 type TagProps = {
@@ -27,7 +28,7 @@ const Tag = ({ label, value }: TagProps) => {
   );
 };
 
-export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
+export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
   const [isOpen, setIsOpen] = useToggle();
 
   return (
@@ -46,9 +47,7 @@ export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
           <FontAwesomeIcon icon={isOpen ? faCaretDown : faCaretRight} />
           {rowNumber}
         </Td>
-        <Td className="align-top">
+        <Td className="align-top">{formatDateTime({ timestamp: auditLog.createdAt, timezone })}</Td>
-          {format(new Date(auditLog.createdAt), "MMM do yyyy, hh:mm a")}
-        </Td>
         <Td>
           <div className="flex flex-wrap gap-4 text-sm">
             <Tag label="event" value={auditLog.event.type} />