fix: resolved oracle failing in app connection

backend/src/services/app-connection/shared/sql/sql-connection-fns.ts

@@ -106,7 +106,7 @@ export const validateSqlConnectionCredentials = async (config: TSqlConnectionCon
   try {
     client = await getSqlConnectionClient({ app, credentials });
 
-    await client.raw(`Select 1`);
+    await client.raw(config.app === AppConnection.OracleDB ? `SELECT 1 FROM DUAL` : `Select 1`);
 
     return credentials;
   } catch (error) {

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

@@ -18,7 +18,6 @@ export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   popUpProps: PopoverProps;
   popUpContentProps: PopoverContentProps;
   dateFormat?: "PPP" | "PP" | "P"; // extend as needed
-  buttonClassName?: string;
 };
 
 // Doc: https://react-day-picker.js.org/
@@ -28,7 +27,6 @@ export const DatePicker = ({
   popUpProps,
   popUpContentProps,
   dateFormat = "PPP",
-  buttonClassName,
   ...props
 }: DatePickerProps) => {
   const [timeValue, setTimeValue] = useState<string>(value ? format(value, "HH:mm") : "00:00");
@@ -59,11 +57,7 @@ export const DatePicker = ({
   return (
     <Popover {...popUpProps}>
       <PopoverTrigger asChild>
-        <Button
+        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
-          className={buttonClassName}
-          variant="outline_bg"
-          leftIcon={<FontAwesomeIcon icon={faCalendar} />}
-        >
           {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>

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

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

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

@@ -57,7 +57,6 @@ 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 pageView />
+          <LogsSection />
         </div>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, 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";
@@ -22,26 +22,15 @@ import {
 import {
   auditLogDateFilterFormSchema,
   AuditLogDateFilterType,
-  TAuditLogDateFilterFormData,
+  TAuditLogDateFilterFormData
-  Timezone
 } from "./types";
 
 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);
@@ -70,244 +59,154 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
   };
 
   return (
-    <>
+    <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
-      <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
+      <div className="mr-2 flex items-center">
-        <div className="flex items-center">
+        {filter.type === AuditLogDateFilterType.Relative ? (
-          {filter.type === AuditLogDateFilterType.Relative ? (
+          <>
-            <>
+            {RELATIVE_VALUES.map((el) => (
-              {RELATIVE_VALUES.map((el) => (
+              <Button
-                <Button
+                variant="outline_bg"
-                  variant="outline_bg"
+                className={twMerge(
-                  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.type === AuditLogDateFilterType.Relative &&
+                    filter.relativeModeValue === el &&
-                      filter.relativeModeValue === el &&
+                    "border-primary/40 bg-primary/[0.1]"
-                      "border-primary/40 bg-primary/[0.1]"
+                )}
-                  )}
+                key={`${el}-relative`}
-                  key={`${el}-relative`}
+                onClick={() =>
-                  onClick={() =>
+                  setFilter({
-                    setFilter({
+                    relativeModeValue: el,
-                      relativeModeValue: el,
+                    type: AuditLogDateFilterType.Relative,
-                      type: AuditLogDateFilterType.Relative,
+                    endDate: new Date(),
-                      endDate: new Date(),
+                    startDate: new Date(Number(new Date()) - ms(el))
-                      startDate: new Date(Number(new Date()) - ms(el))
+                  })
-                    })
+                }
-                  }
+              >
-                >
+                {el}
-                  {el}
+              </Button>
-                </Button>
+            ))}
-              ))}
+          </>
-            </>
+        ) : (
-          ) : (
+          <>
-            <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")}</div>
+              {format(filter.startDate, "yyyy-MM-dd HH:mm")}
-              <div>
-                <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faChevronRight} />
-              </div>
-              <div>{format(filter.endDate, "yyyy-MM-dd HH:mm")}</div>
             </div>
-          )}
+            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-          <DropdownMenuTrigger asChild>
+              <FontAwesomeIcon icon={faChevronRight} />
-            <Button
+            </div>
-              variant="outline_bg"
+            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-              className={twMerge(
+              {format(filter.endDate, "yyyy-MM-dd HH:mm")}
-                "w-[8rem] rounded-none rounded-r-md px-3 py-2 font-normal",
+            </div>
-                (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
+          </>
-                  "border-primary/40 bg-primary/[0.1]"
+        )}
-              )}
+        <DropdownMenuTrigger asChild>
-            >
+          <Button
-              <span>Custom</span> <FontAwesomeIcon className="ml-1" icon={faCalendar} />
+            variant="outline_bg"
-              {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
+            className={twMerge(
-                <span className="ml-1">({filter.relativeModeValue})</span>
+              "rounded-none rounded-r-md px-3 py-2",
-              )}
+              (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
-            </Button>
+                "border-primary/40 bg-primary/[0.1]"
-          </DropdownMenuTrigger>
+            )}
-        </div>
+          >
-        <DropdownMenuContent
+            <FontAwesomeIcon icon={faCalendar} />
-          className="!min-w-[434px] bg-mineshaft-800 p-4"
+            {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
-          align="end"
+              <span className="ml-1">({filter.relativeModeValue})</span>
-          sideOffset={8}
+            )}
-        >
+          </Button>
-          <form onSubmit={handleSubmit(onSubmit)}>
+        </DropdownMenuTrigger>
+      </div>
+      <DropdownMenuContent className="min-w-80 p-4" align="center" alignOffset={16}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            control={control}
+            name="type"
+            render={({ field }) => (
+              <FormControl className="mb-2 w-full">
+                <Select
+                  value={field.value}
+                  onValueChange={(el) => field.onChange(el)}
+                  className="w-full"
+                >
+                  <SelectItem value={AuditLogDateFilterType.Relative}>Relative</SelectItem>
+                  <SelectItem value={AuditLogDateFilterType.Absolute}>Absolute</SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {selectType === AuditLogDateFilterType.Relative && (
             <Controller
               control={control}
-              name="type"
+              name="relativeModeValue"
               render={({ field }) => (
-                <div className="mb-7">
+                <FormControl className="mb-0 w-full" helperText="Example: 1h, 1d, 2d">
-                  <Button
+                  <Input {...field} value={field.value || ""} />
-                    onClick={() => field.onChange(AuditLogDateFilterType.Absolute)}
+                </FormControl>
-                    variant="outline_bg"
-                    className={twMerge(
-                      "h-8 rounded-r-none font-normal",
-                      field.value === AuditLogDateFilterType.Absolute &&
-                        "border-primary/40 bg-primary/[0.1]"
-                    )}
-                  >
-                    Absolute
-                  </Button>
-                  <Button
-                    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 && (
+          )}
+          {selectType === AuditLogDateFilterType.Absolute && (
+            <div className="mb-2 flex h-10 w-full items-center justify-between gap-2">
               <Controller
+                name="startDate"
                 control={control}
-                name="relativeModeValue"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                render={({ field }) => {
-                  const duration = field.value?.substring(0, field.value.length - 1);
-                  const unitOfTime = field.value?.at(-1);
                   return (
-                    <div className="flex flex-col gap-4">
+                    <FormControl
-                      {RELATIVE_OPTIONS.map(({ label, unit, values }) => (
+                      className="relative top-2"
-                        <div key={unit} className="flex items-center gap-2">
+                      errorText={error?.message}
-                          <div className="w-16">{label}</div>
+                      isError={Boolean(error)}
-                          {values.map((v) => {
+                    >
-                            const value = `${v}${unit}`;
+                      <DatePicker
-                            return (
+                        value={field.value || undefined}
-                              <Button
+                        onChange={onChange}
-                                key={value}
+                        dateFormat="P"
-                                variant="outline_bg"
+                        popUpProps={{
-                                onClick={() => field.onChange(value)}
+                          open: isStartDatePickerOpen,
-                                className={twMerge(
+                          onOpenChange: setIsStartDatePickerOpen
-                                  "h-8 w-12",
+                        }}
-                                  field.value === value && "border-primary/40 bg-primary/[0.1]"
+                        popUpContentProps={{}}
-                                )}
+                      />
-                              >
+                    </FormControl>
-                                {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>
                   );
                 }}
               />
-            )}
+              <div className="flex items-center -space-x-3">
-            {selectType === AuditLogDateFilterType.Absolute && (
+                <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
-              <div className="flex h-10 w-full items-center justify-between gap-2">
+                <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
-                <Controller
-                  name="startDate"
-                  control={control}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                    return (
-                      <FormControl
-                        className="relative top-2"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                        label="Start Date"
-                      >
-                        <DatePicker
-                          value={field.value || undefined}
-                          onChange={onChange}
-                          dateFormat="P"
-                          buttonClassName="w-44 h-8 font-normal"
-                          popUpProps={{
-                            open: isStartDatePickerOpen,
-                            onOpenChange: setIsStartDatePickerOpen
-                          }}
-                          popUpContentProps={{}}
-                        />
-                      </FormControl>
-                    );
-                  }}
-                />
-                <FontAwesomeIcon
-                  icon={faChevronRight}
-                  size="xs"
-                  className="mt-6 text-mineshaft-400"
-                />
-                <Controller
-                  name="endDate"
-                  control={control}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                    return (
-                      <FormControl
-                        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"
-                          popUpProps={{
-                            open: isEndDatePickerOpen,
-                            onOpenChange: setIsEndDatePickerOpen
-                          }}
-                          popUpContentProps={{}}
-                        />
-                      </FormControl>
-                    );
-                  }}
-                />
               </div>
-            )}
+              <Controller
-            <div className="mt-8 w-full justify-end">
+                name="endDate"
-              <Button
+                control={control}
-                size="sm"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                type="submit"
+                  return (
-                className="h-9 w-24 font-normal"
+                    <FormControl
-                variant="outline_bg"
+                      className="relative top-2"
-                isDisabled={!formState.isDirty}
+                      errorText={error?.message}
-              >
+                      isError={Boolean(error)}
-                Apply
+                    >
-              </Button>
+                      <DatePicker
+                        value={field.value || undefined}
+                        onChange={onChange}
+                        dateFormat="P"
+                        popUpProps={{
+                          open: isEndDatePickerOpen,
+                          onOpenChange: setIsEndDatePickerOpen
+                        }}
+                        popUpContentProps={{}}
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
             </div>
-          </form>
+          )}
-        </DropdownMenuContent>
+          <div className="mt-4">
-      </DropdownMenu>
+            <Button size="xs" type="submit" isDisabled={!formState.isDirty}>
-      <Select
+              Apply
-        value={timezone}
+            </Button>
-        onValueChange={(val) => setTimezone(val as Timezone)}
+          </div>
-        className="w-[10.6rem] border !border-mineshaft-500 !bg-mineshaft-600 capitalize"
+        </form>
-        dropdownContainerClassName="max-w-none"
+      </DropdownMenuContent>
-        position="popper"
+    </DropdownMenu>
-        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,6 +1,4 @@
 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";
@@ -15,19 +13,17 @@ import {
   AuditLogDateFilterType,
   Presets,
   TAuditLogDateFilterFormData,
-  TAuditLogFilterFormData,
+  TAuditLogFilterFormData
-  Timezone
 } from "./types";
 
 type Props = {
   presets?: Presets;
   refetchInterval?: number;
   showFilters?: boolean;
-  pageView?: boolean;
 };
 
 export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true, pageView = false }: Props) => {
+  ({ presets, refetchInterval, showFilters = true }: Props) => {
     const { subscription } = useSubscription();
 
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -35,8 +31,6 @@ 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(),
@@ -49,85 +43,10 @@ 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 && (
+          {showFilters && <LogsDateFilter filter={dateFilter} setFilter={setDateFilter} />}
-            <LogsDateFilter
-              filter={dateFilter}
-              setFilter={setDateFilter}
-              timezone={timezone}
-              setTimezone={setTimezone}
-            />
-          )}
           {showFilters && (
             <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
           )}
@@ -148,7 +67,6 @@ 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,5 +1,6 @@
 import { Fragment } from "react";
-import { faFile } from "@fortawesome/free-solid-svg-icons";
+import { faFile, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -13,23 +14,22 @@ import {
   Td,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
 import { useGetAuditLogs } from "@app/hooks/api";
 import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";
 
 import { LogsTableRow } from "./LogsTableRow";
-import { Timezone } from "./types";
 
 type Props = {
   filter: TGetAuditLogsFilter;
   refetchInterval?: number;
-  timezone: Timezone;
 };
 
 const AUDIT_LOG_LIMIT = 30;
 
-export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
+export const LogsTable = ({ filter, refetchInterval }: Props) => {
   // Determine the project ID for filtering
   const filterProjectId =
     // Use the projectId from the filter if it exists
@@ -57,7 +57,16 @@ export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
               <Th className="w-24">
                 <Spinner size="xs" className={twMerge(isPending ? "opacity-100" : "opacity-0")} />
               </Th>
-              <Th className="w-64">Timestamp</Th>
+              <Th className="w-64">
+                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>
@@ -70,7 +79,6 @@ export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
                       rowNumber={index + i * AUDIT_LOG_LIMIT + 1}
                       auditLog={auditLog}
                       key={`audit-log-${auditLog.id}`}
-                      timezone={timezone}
                     />
                   ))}
                 </Fragment>
@@ -88,7 +96,7 @@ export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
       </TableContainer>
       {!isEmpty && (
         <Button
-          className="mt-4 px-4 py-3 text-sm"
+          className="mb-20 mt-4 px-4 py-3 text-sm"
           isFullWidth
           variant="outline_bg"
           isLoading={isFetchingNextPage}

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

@@ -7,12 +7,9 @@ import { useToggle } from "@app/hooks";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { AuditLog } from "@app/hooks/api/auditLogs/types";
 
-import { Timezone } from "./types";
-
 type Props = {
   auditLog: AuditLog;
   rowNumber: number;
-  timezone: Timezone;
 };
 
 type TagProps = {
@@ -30,17 +27,7 @@ const Tag = ({ label, value }: TagProps) => {
   );
 };
 
-const formatDateTime = (timestamp: string | Date, timezone: Timezone) => {
+export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
-  const date = new Date(timestamp);
-
-  if (timezone === Timezone.UTC) {
-    const utcDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
-    return `${format(utcDate, "MMM do yyyy, hh:mm a")} UTC`;
-  }
-  return format(date, "MMM do yyyy, hh:mm a");
-};
-
-export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
   const [isOpen, setIsOpen] = useToggle();
 
   return (
@@ -59,7 +46,9 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
           <FontAwesomeIcon icon={isOpen ? faCaretDown : faCaretRight} />
           {rowNumber}
         </Td>
-        <Td className="align-top">{formatDateTime(auditLog.createdAt, timezone)}</Td>
+        <Td className="align-top">
+          {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} />

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

@@ -8,11 +8,6 @@ export enum AuditLogDateFilterType {
   Absolute = "absolute"
 }
 
-export enum Timezone {
-  Local = "local",
-  UTC = "UTC"
-}
-
 export const auditLogFilterFormSchema = z.object({
   eventMetadata: z.object({}).optional(),
   project: z