feat: ratelimit overview v2

apps/dashboard/app/(app)/desktop-sidebar.tsx

@@ -3,8 +3,8 @@ import { createWorkspaceNavigation, resourcesNavigation } from "@/app/(app)/work
 import { Feedback } from "@/components/dashboard/feedback-component";
 import { Badge } from "@/components/ui/badge";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useDelayLoader } from "@/hooks/useDelayLoader";
 import type { Workspace } from "@/lib/db";
-import { useDelayLoader } from "@/lib/hooks/useDelayLoader";
 import { cn } from "@/lib/utils";
 import { Loader2, type LucideIcon } from "lucide-react";
 import Link from "next/link";

apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts

@@ -1,31 +1,11 @@
+import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp";
+import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants";
 import { trpc } from "@/lib/trpc/client";
-import type { TimeseriesGranularity } from "@/lib/trpc/routers/logs/query-timeseries/utils";
-import { addMinutes, format } from "date-fns";
 import { useMemo } from "react";
 import type { z } from "zod";
 import { useFilters } from "../../../hooks/use-filters";
 import type { queryTimeseriesPayload } from "../query-timeseries.schema";
 
-// Duration in milliseconds for historical data fetch window (1 hours)
-const TIMESERIES_DATA_WINDOW = 60 * 60 * 1000;
-
-const formatTimestamp = (value: string | number, granularity: TimeseriesGranularity) => {
-  const date = new Date(value);
-  const offset = new Date().getTimezoneOffset() * -1;
-  const localDate = addMinutes(date, offset);
-
-  switch (granularity) {
-    case "perMinute":
-      return format(localDate, "HH:mm:ss");
-    case "perHour":
-      return format(localDate, "MMM d, HH:mm");
-    case "perDay":
-      return format(localDate, "MMM d");
-    default:
-      return format(localDate, "Pp");
-  }
-};
-
 export const useFetchTimeseries = () => {
   const { filters } = useFilters();
 
@@ -115,7 +95,7 @@ export const useFetchTimeseries = () => {
   });
 
   const timeseries = data?.timeseries.map((ts) => ({
-    displayX: formatTimestamp(ts.x, data.granularity),
+    displayX: formatTimestampForChart(ts.x, data.granularity),
     originalTimestamp: ts.x,
     ...ts.y,
   }));

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

@@ -1,6 +1,6 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
 import { ControlCloud } from "@/components/logs/control-cloud";
 import { format } from "date-fns";
-import { HISTORICAL_DATA_WINDOW } from "../../constants";
 import { useFilters } from "../../hooks/use-filters";
 
 const formatFieldName = (field: string): string => {

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

@@ -1,78 +1,36 @@
-import { InputSearch } from "@unkey/icons";
-import { Button } from "@unkey/ui";
-import { cn } from "@unkey/ui/src/lib/utils";
-import { useState } from "react";
-import { useFilters } from "../../../../../hooks/use-filters";
+import { logsFilterFieldConfig } from "@/app/(app)/logs/filters.schema";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
+import { FilterOperatorInput } from "@/components/logs/filter-operator-input";
 
 export const PathsFilter = () => {
   const { filters, updateFilters } = useFilters();
-  const activeFilter = filters.find((f) => f.field === "paths");
-  const [searchText, setSearchText] = useState(activeFilter?.value.toString() ?? "");
-  const [isFocused, setIsFocused] = useState(false);
 
-  const handleSearch = () => {
-    const activeFilters = filters.filter((f) => f.field !== "paths");
-    if (searchText.trim()) {
-      updateFilters([
-        ...activeFilters,
-        {
-          field: "paths",
-          value: searchText,
-          id: crypto.randomUUID(),
-          operator: "contains",
-        },
-      ]);
-    } else {
-      updateFilters(activeFilters);
-    }
-  };
+  const pathOperators = logsFilterFieldConfig.paths.operators;
+  const options = pathOperators.map((op) => ({
+    id: op,
+    label: op,
+  }));
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (isFocused) {
-      e.stopPropagation();
-      if (e.key === "Enter") {
-        handleSearch();
-      }
-    }
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
+  const activePathFilter = filters.find((f) => f.field === "paths");
 
   return (
-    <div className="flex flex-col p-4 gap-2 w-[300px]">
-      <div className="relative w-full">
-        <div
-          className={cn(
-            "flex items-center gap-2 px-2 py-1 h-8 rounded-md hover:bg-gray-3 bg-gray-4 transition-all duration-200",
-            isFocused && "bg-gray-4",
-          )}
-        >
-          <InputSearch className="w-4 h-4 text-accent-12" />
-          <input
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            type="text"
-            placeholder="Search for path..."
-            className="w-full text-[13px] font-medium text-accent-12 bg-transparent border-none outline-none focus:ring-0 focus:outline-none placeholder:text-accent-12"
-          />
-        </div>
-      </div>
-      <Button
-        variant="primary"
-        className="font-sans mt-2 w-full h-9 rounded-md"
-        onClick={handleSearch}
-      >
-        Search
-      </Button>
-    </div>
+    <FilterOperatorInput
+      label="Path"
+      options={options}
+      defaultOption={activePathFilter?.operator}
+      defaultText={activePathFilter?.value as string}
+      onApply={(id, text) => {
+        const activeFiltersWithoutPaths = filters.filter((f) => f.field !== "paths");
+        updateFilters([
+          ...activeFiltersWithoutPaths,
+          {
+            field: "paths",
+            id: crypto.randomUUID(),
+            operator: id,
+            value: text,
+          },
+        ]);
+      }}
+    />
   );
 };

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

@@ -1,5 +1,5 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
 import { LiveSwitchButton } from "@/components/logs/live-switch-button";
-import { HISTORICAL_DATA_WINDOW } from "../../../constants";
 import { useLogsContext } from "../../../context/logs";
 import { useFilters } from "../../../hooks/use-filters";
 

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

@@ -1,8 +1,8 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
 import { trpc } from "@/lib/trpc/client";
 import type { Log } from "@unkey/clickhouse/src/logs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { z } from "zod";
-import { HISTORICAL_DATA_WINDOW } from "../../../constants";
 import { useFilters } from "../../../hooks/use-filters";
 import type { queryLogsPayload } from "../query-logs.schema";
 
@@ -13,6 +13,8 @@ type UseLogsQueryParams = {
   startPolling?: boolean;
 };
 
+const REALTIME_DATA_LIMIT = 100;
+
 export function useLogsQuery({
   limit = 50,
   pollIntervalMs = 5000,
@@ -25,7 +27,7 @@ export function useLogsQuery({
   const queryClient = trpc.useUtils();
 
   const realtimeLogs = useMemo(() => {
-    return Array.from(realtimeLogsMap.values());
+    return sortLogs(Array.from(realtimeLogsMap.values()));
   }, [realtimeLogsMap]);
 
   const historicalLogs = useMemo(() => Array.from(historicalLogsMap.values()), [historicalLogsMap]);
@@ -142,7 +144,6 @@ export function useLogsQuery({
   });
 
   // Query for new logs (polling)
-  // biome-ignore lint/correctness/useExhaustiveDependencies: biome wants to everything as dep
   const pollForNewLogs = useCallback(async () => {
     try {
       const latestTime = realtimeLogs[0]?.time ?? historicalLogs[0]?.time;
@@ -169,19 +170,30 @@ export function useLogsQuery({
           newMap.set(log.request_id, log);
           added++;
 
-          if (newMap.size > Math.min(limit, 100)) {
-            const oldestKey = Array.from(newMap.keys()).shift()!;
-            newMap.delete(oldestKey);
+          // Remove oldest entries when exceeding the size limit `100`
+          if (newMap.size > Math.min(limit, REALTIME_DATA_LIMIT)) {
+            const entries = Array.from(newMap.entries());
+            const oldestEntry = entries.reduce((oldest, current) => {
+              return oldest[1].time < current[1].time ? oldest : current;
+            });
+            newMap.delete(oldestEntry[0]);
           }
         }
 
-        // If nothing was added, return old map to prevent re-render
         return added > 0 ? newMap : prevMap;
       });
     } catch (error) {
       console.error("Error polling for new logs:", error);
     }
-  }, [queryParams, queryClient, limit, pollIntervalMs, historicalLogsMap]);
+  }, [
+    queryParams,
+    queryClient,
+    limit,
+    pollIntervalMs,
+    historicalLogsMap,
+    realtimeLogs,
+    historicalLogs,
+  ]);
 
   // Set up polling effect
   useEffect(() => {
@@ -221,3 +233,7 @@ export function useLogsQuery({
     isPolling: startPolling,
   };
 }
+
+const sortLogs = (logs: Log[]) => {
+  return logs.toSorted((a, b) => b.time - a.time);
+};

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx

@@ -21,7 +21,7 @@ export const LogMetaSection = ({ content }: { content: string }) => {
       <div className="text-[13px] text-accent-9 font-sans">Meta</div>
       <Card className="bg-gray-2 border-gray-4 rounded-lg">
         <CardContent className="py-2 px-3 text-xs relative group min-w-[300px]">
-          <pre className="text-accent-12">{content ?? "<EMPTY>"}</pre>
+          <pre className="text-accent-12">{content}</pre>
           <Button
             shape="square"
             onClick={handleClick}

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx

@@ -36,8 +36,8 @@ export const LogSection = ({
                   const value = valueParts.join(":").trim();
                   return (
                     <div className="group flex items-center w-full p-[3px]" key={key}>
-                      <span className="w-28 text-left truncate text-accent-9">{key}:</span>
-                      <span className="ml-2 text-xs text-accent-12 ">{value}</span>
+                      <span className="text-left text-accent-9 whitespace-nowrap">{key}:</span>
+                      <span className="ml-2 text-xs text-accent-12 truncate">{value}</span>
                     </div>
                   );
                 })

apps/dashboard/app/(app)/logs/components/table/log-details/index.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { useMemo } from "react";
 import { DEFAULT_DRAGGABLE_WIDTH } from "../../../constants";
 import { useLogsContext } from "../../../context/logs";
@@ -45,20 +44,39 @@ export const LogDetails = ({ distanceToTop }: Props) => {
       style={panelStyle}
     >
       <LogHeader log={log} onClose={handleClose} />
-
-      <LogSection details={log.request_headers} title="Request Header" />
       <LogSection
-        details={JSON.stringify(safeParseJson(log.request_body), null, 2)}
+        details={log.request_headers.length ? log.request_headers : "<EMPTY>"}
+        title="Request Header"
+      />
+      <LogSection
+        details={
+          JSON.stringify(safeParseJson(log.request_body), null, 2) === "null"
+            ? "<EMPTY>"
+            : JSON.stringify(safeParseJson(log.request_body), null, 2)
+        }
         title="Request Body"
       />
-      <LogSection details={log.response_headers} title="Response Header" />
       <LogSection
-        details={JSON.stringify(safeParseJson(log.response_body), null, 2)}
+        details={log.response_headers.length ? log.response_headers : "<EMPTY>"}
+        title="Response Header"
+      />
+      <LogSection
+        details={
+          JSON.stringify(safeParseJson(log.response_body), null, 2) === "null"
+            ? "<EMPTY>"
+            : JSON.stringify(safeParseJson(log.response_body), null, 2)
+        }
         title="Response Body"
       />
       <div className="mt-3" />
       <LogFooter log={log} />
-      <LogMetaSection content={JSON.stringify(extractResponseField(log, "meta"), null, 2)} />
+      <LogMetaSection
+        content={
+          JSON.stringify(extractResponseField(log, "meta"), null, 2) === "null"
+            ? "<EMPTY>"
+            : JSON.stringify(extractResponseField(log, "meta"), null, 2)
+        }
+      />
     </ResizablePanel>
   );
 };

apps/dashboard/app/(app)/logs/components/table/logs-table.tsx

@@ -6,8 +6,8 @@ import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
-import { TriangleWarning2 } from "@unkey/icons";
-import { Empty } from "@unkey/ui";
+import { BookBookmark, TriangleWarning2 } from "@unkey/icons";
+import { Button, Empty } from "@unkey/ui";
 import { useMemo } from "react";
 import { isDisplayProperty, useLogsContext } from "../../context/logs";
 import { extractResponseField } from "../../utils";
@@ -253,6 +253,18 @@ export const LogsTable = () => {
               Keep track of all activity within your workspace. We collect all API requests, giving
               you a clear history to find problems or debug issues.
             </Empty.Description>
+            <Empty.Actions className="mt-4 justify-start">
+              <a
+                href="https://www.unkey.com/docs/introduction"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button>
+                  <BookBookmark />
+                  Documentation
+                </Button>
+              </a>
+            </Empty.Actions>
           </Empty>
         </div>
       }

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

@@ -7,5 +7,3 @@ export const RED_STATES = ["DISABLED", "FORBIDDEN", "INSUFFICIENT_PERMISSIONS"];
 
 export const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
 export const STATUSES = [200, 400, 500] as const;
-
-export const HISTORICAL_DATA_WINDOW = 12 * 60 * 60 * 1000;

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/form-field.tsx

@@ -0,0 +1,30 @@
+import { Label } from "@/components/ui/label";
+import { CircleInfo } from "@unkey/icons";
+import type { ReactNode } from "react";
+import { InputTooltip } from "../_overview/components/table/components/logs-actions/components/input-tooltip";
+
+type FormFieldProps = {
+  label: string;
+  tooltip?: string;
+  error?: string;
+  children: ReactNode;
+};
+
+export const FormField = ({ label, tooltip, error, children }: FormFieldProps) => (
+  // biome-ignore lint/a11y/useKeyWithClickEvents: no need for button
+  <div className="flex flex-col gap-1" onClick={(e) => e.stopPropagation()}>
+    <Label
+      className="text-gray-11 text-[13px] flex items-center"
+      onClick={(e) => e.preventDefault()}
+    >
+      {label}
+      {tooltip && (
+        <InputTooltip desc={tooltip}>
+          <CircleInfo size="md-regular" className="text-accent-8 ml-[10px]" />
+        </InputTooltip>
+      )}
+    </Label>
+    {children}
+    {error && <span className="text-error-10 text-[13px] font-medium">{error}</span>}
+  </div>
+);