refactor: filter types for logs page

apps/dashboard/app/(app)/logs/components/charts/query-timeseries.schema.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { filterOperatorEnum } from "../../filters.schema";
+import { logsFilterOperatorEnum } from "../../filters.schema";
 
 export const queryTimeseriesPayload = z.object({
   startTime: z.number().int(),
@@ -9,7 +9,7 @@ export const queryTimeseriesPayload = z.object({
     .object({
       filters: z.array(
         z.object({
-          operator: filterOperatorEnum,
+          operator: logsFilterOperatorEnum,
           value: z.string(),
         }),
       ),

apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx

@@ -1,13 +1,13 @@
 import { KeyboardButton } from "@/components/keyboard-button";
 import { TimestampInfo } from "@/components/timestamp-info";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { cn } from "@/lib/utils";
 import { XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { format } from "date-fns";
 import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
-import type { FilterValue } from "../../filters.type";
+import type { LogsFilterValue } from "../../filters.schema";
 import { useFilters } from "../../hooks/use-filters";
-import { useKeyboardShortcut } from "../../hooks/use-keyboard-shortcut";
 
 const formatFieldName = (field: string): string => {
   switch (field) {
@@ -57,7 +57,7 @@ const formatValue = (value: string | number, field: string): string => {
 };
 
 type ControlPillProps = {
-  filter: FilterValue;
+  filter: LogsFilterValue;
   onRemove: (id: string) => void;
   isFocused?: boolean;
   onFocus?: () => void;

apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx

@@ -1,7 +1,7 @@
 import { isDisplayProperty, useLogsContext } from "@/app/(app)/logs/context/logs";
-import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
 import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import {
   type KeyboardEvent,
   type PropsWithChildren,

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filter-checkbox.tsx

@@ -1,4 +1,4 @@
-import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import type { LogsFilterValue } from "@/app/(app)/logs/filters.schema";
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
@@ -21,7 +21,7 @@ interface BaseCheckboxFilterProps<TCheckbox extends BaseCheckboxOption> {
   scrollContainerRef?: React.RefObject<HTMLDivElement>;
   renderBottomGradient?: () => React.ReactNode;
   renderOptionContent?: (option: TCheckbox) => React.ReactNode;
-  createFilterValue: (option: TCheckbox) => Pick<FilterValue, "value" | "metadata">;
+  createFilterValue: (option: TCheckbox) => Pick<LogsFilterValue, "value" | "metadata">;
 }
 
 export const FilterCheckbox = <TCheckbox extends BaseCheckboxOption>({
@@ -47,7 +47,7 @@ export const FilterCheckbox = <TCheckbox extends BaseCheckboxOption>({
     const selectedValues = checkboxes.filter((c) => c.checked).map((c) => createFilterValue(c));
 
     const otherFilters = filters.filter((f) => f.field !== filterField);
-    const newFilters: FilterValue[] = selectedValues.map((filterValue) => ({
+    const newFilters: LogsFilterValue[] = selectedValues.map((filterValue) => ({
       id: crypto.randomUUID(),
       field: filterField,
       operator: "is",

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filters-popover.tsx

@@ -1,7 +1,7 @@
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
-import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
 import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { CaretRight } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { type KeyboardEvent, type PropsWithChildren, useEffect, useRef, useState } from "react";

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts

@@ -1,9 +1,9 @@
-import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import type { LogsFilterValue } from "@/app/(app)/logs/filters.schema";
 import { useEffect, useState } from "react";
 
 type UseCheckboxStateProps<TItem> = {
   options: Array<{ id: number } & TItem>;
-  filters: FilterValue[];
+  filters: LogsFilterValue[];
   filterField: string;
   checkPath: keyof TItem; // Specify which field to get from checkbox item
   shouldSyncWithOptions?: boolean;

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/methods-filter.tsx

@@ -1,9 +1,8 @@
-import type { HttpMethod } from "@/app/(app)/logs/filters.type";
 import { FilterCheckbox } from "./filter-checkbox";
 
 type MethodOption = {
   id: number;
-  method: HttpMethod;
+  method: string;
   checked: boolean;
 };
 

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/paths-filter.tsx

@@ -1,4 +1,4 @@
-import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import type { LogsFilterValue } from "@/app/(app)/logs/filters.schema";
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { Checkbox } from "@/components/ui/checkbox";
 import { trpc } from "@/lib/trpc/client";
@@ -33,7 +33,7 @@ export const PathsFilter = () => {
 
     // Keep all non-paths filters and add new path filters
     const otherFilters = filters.filter((f) => f.field !== "paths");
-    const pathFilters: FilterValue[] = selectedPaths.map((path) => ({
+    const pathFilters: LogsFilterValue[] = selectedPaths.map((path) => ({
       id: crypto.randomUUID(),
       field: "paths",
       operator: "is",

apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/status-filter.tsx

@@ -1,4 +1,4 @@
-import type { ResponseStatus } from "@/app/(app)/logs/filters.type";
+import type { ResponseStatus } from "@/app/(app)/logs/types";
 import { FilterCheckbox } from "./filter-checkbox";
 
 type StatusOption = {

apps/dashboard/app/(app)/logs/components/controls/components/logs-live-switch.tsx

@@ -1,9 +1,9 @@
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { CircleCarretRight } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { useLogsContext } from "../../../context/logs";
 import { useFilters } from "../../../hooks/use-filters";
-import { useKeyboardShortcut } from "../../../hooks/use-keyboard-shortcut";
 import { HISTORICAL_DATA_WINDOW } from "../../table/hooks/use-logs-query";
 
 export const LogsLiveSwitch = () => {

apps/dashboard/app/(app)/logs/components/controls/components/logs-refresh.tsx

@@ -1,11 +1,11 @@
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { trpc } from "@/lib/trpc/client";
 import { Refresh3 } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { useState } from "react";
 import { useLogsContext } from "../../../context/logs";
 import { useFilters } from "../../../hooks/use-filters";
-import { useKeyboardShortcut } from "../../../hooks/use-keyboard-shortcut";
 
 export const LogsRefresh = () => {
   const { toggleLive, isLive } = useLogsContext();

apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx

@@ -1,7 +1,7 @@
-import { transformStructuredOutputToFilters } from "@/app/(app)/logs/filters.schema";
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
-import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
+import { transformStructuredOutputToFilters } from "@/components/logs/validation/utils/transform-structured-output-filter-format";
 import { toast } from "@/components/ui/toaster";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { CaretRightOutline, CircleInfoSparkle, Magnifier, Refresh3, XMark } from "@unkey/icons";

apps/dashboard/app/(app)/logs/components/table/query-logs.schema.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { filterOperatorEnum } from "../../filters.schema";
+import { logsFilterOperatorEnum } from "../../filters.schema";
 
 export const queryLogsPayload = z.object({
   limit: z.number().int(),
@@ -10,7 +10,7 @@ export const queryLogsPayload = z.object({
     .object({
       filters: z.array(
         z.object({
-          operator: filterOperatorEnum,
+          operator: logsFilterOperatorEnum,
           value: z.string(),
         }),
       ),

apps/dashboard/app/(app)/logs/constants.ts

@@ -2,9 +2,6 @@ export const DEFAULT_DRAGGABLE_WIDTH = 500;
 export const MAX_DRAGGABLE_WIDTH = 800;
 export const MIN_DRAGGABLE_WIDTH = 300;
 
-export const ONE_DAY_MS = 24 * 60 * 60 * 1000;
-export const DEFAULT_LOGS_FETCH_COUNT = 100;
-
 export const YELLOW_STATES = ["RATE_LIMITED", "EXPIRED", "USAGE_EXCEEDED"];
 export const RED_STATES = ["DISABLED", "FORBIDDEN", "INSUFFICIENT_PERMISSIONS"];