+
-
-
+
+
+ {/* Chart is using more space than it should to be able to display tooltip correctly so we can -margin that empty space */}
+
+
);
}
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index fc1a326a0f..80c3bea0ca 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -7,7 +7,8 @@ import { notFound } from "next/navigation";
import { createSearchParamsCache } from "nuqs/server";
import { DEFAULT_LOGS_FETCH_COUNT } from "./constants";
import { LogsPage } from "./logs-page";
-import { queryParamsPayload } from "./query-state";
+import { type QuerySearchParams, queryParamsPayload } from "./query-state";
+import { getTimeseriesGranularity } from "./utils";
const searchParamsCache = createSearchParamsCache(queryParamsPayload);
@@ -28,21 +29,54 @@ export default async function Page({
return notFound();
}
- const logs = await clickhouse.api.logs({
- workspaceId: workspace.id,
- limit: DEFAULT_LOGS_FETCH_COUNT,
- startTime: parsedParams.startTime,
- endTime: parsedParams.endTime ?? Date.now(),
- host: parsedParams.host,
- requestId: parsedParams.requestId,
- method: parsedParams.method,
- path: parsedParams.path,
- responseStatus: parsedParams.responseStatus,
- });
+ const [logs, timeseries] = await fetchInitialLogsAndTimeseriesData(parsedParams, workspace.id);
+
+ if (timeseries.err) {
+ console.error(
+ "Error occured when fetching from clickhouse for chart",
+ timeseries.err.toString(),
+ );
+ throw new Error("Something went wrong when fetching timeseries data for chart");
+ }
if (logs.err) {
- throw new Error(`Something went wrong when fetching logs from ClickHouse: ${logs.err.message}`);
+ console.error("Error occured when fetching from clickhouse for table", logs.err.toString());
+ throw new Error("Something went wrong when fetching logs for table");
}
- return
;
+ return
;
}
+
+const fetchInitialLogsAndTimeseriesData = async (
+ params: Readonly
,
+ workspaceId: string,
+) => {
+ const { startTime, endTime, granularity } = getTimeseriesGranularity(
+ params.startTime,
+ params.endTime,
+ );
+
+ const logs = clickhouse.api.logs({
+ workspaceId,
+ limit: DEFAULT_LOGS_FETCH_COUNT,
+ startTime,
+ endTime,
+ host: params.host,
+ requestId: params.requestId,
+ method: params.method,
+ path: params.path,
+ responseStatus: params.responseStatus,
+ });
+
+ const timeseries = clickhouse.api.timeseries[granularity]({
+ workspaceId,
+ startTime,
+ endTime,
+ host: params.host,
+ method: params.method,
+ path: params.path,
+ responseStatus: params.responseStatus,
+ });
+
+ return Promise.all([logs, timeseries]);
+};
diff --git a/apps/dashboard/app/(app)/logs/query-state.ts b/apps/dashboard/app/(app)/logs/query-state.ts
index 6aec5f5698..38d6927662 100644
--- a/apps/dashboard/app/(app)/logs/query-state.ts
+++ b/apps/dashboard/app/(app)/logs/query-state.ts
@@ -5,7 +5,6 @@ import {
parseAsString,
useQueryStates,
} from "nuqs";
-import { ONE_DAY_MS } from "./constants";
export type PickKeys = K;
@@ -15,13 +14,13 @@ export type ResponseStatus = (typeof STATUSES)[number];
export type Timeline = (typeof TIMELINE_OPTIONS)[number];
export type QuerySearchParams = {
- host: string;
- requestId: string;
- method: string;
- path: string;
- responseStatuses: ResponseStatus[];
- startTime: number;
- endTime?: number;
+ host: string | null;
+ requestId: string | null;
+ method: string | null;
+ path: string | null;
+ responseStatus: ResponseStatus[];
+ startTime?: number | null;
+ endTime?: number | null;
};
export const queryParamsPayload = {
@@ -30,7 +29,7 @@ export const queryParamsPayload = {
method: parseAsString,
path: parseAsString,
responseStatus: parseAsArrayOf(parseAsNumberLiteral(STATUSES)).withDefault([]),
- startTime: parseAsInteger.withDefault(Date.now() - ONE_DAY_MS),
+ startTime: parseAsInteger,
endTime: parseAsInteger,
};
diff --git a/apps/dashboard/app/(app)/logs/types.ts b/apps/dashboard/app/(app)/logs/types.ts
index 8936833049..575aaef3f1 100644
--- a/apps/dashboard/app/(app)/logs/types.ts
+++ b/apps/dashboard/app/(app)/logs/types.ts
@@ -1,19 +1,3 @@
-export type Log = {
- request_id: string;
- time: number;
- workspace_id: string;
- host: string;
- method: string;
- path: string;
- request_headers: string[];
- request_body: string;
- response_status: number;
- response_headers: string[];
- response_body: string;
- error: string;
- service_latency: number;
-};
-
export type ResponseBody = {
keyId: string;
valid: boolean;
diff --git a/apps/dashboard/app/(app)/logs/utils.ts b/apps/dashboard/app/(app)/logs/utils.ts
index 4f1fd1aa9c..5577eb4ef4 100644
--- a/apps/dashboard/app/(app)/logs/utils.ts
+++ b/apps/dashboard/app/(app)/logs/utils.ts
@@ -1,4 +1,5 @@
-import type { Log, ResponseBody } from "./types";
+import type { Log } from "@unkey/clickhouse/src/logs";
+import type { ResponseBody } from "./types";
class ResponseBodyParseError extends Error {
constructor(
@@ -82,3 +83,54 @@ export const safeParseJson = (jsonString?: string | null) => {
return "Invalid JSON format";
}
};
+
+export const HOUR_IN_MS = 60 * 60 * 1000;
+const DAY_IN_MS = 24 * HOUR_IN_MS;
+const WEEK_IN_MS = 7 * DAY_IN_MS;
+
+export type TimeseriesGranularity = "perMinute" | "perHour" | "perDay";
+type TimeseriesConfig = {
+ granularity: TimeseriesGranularity;
+ startTime: number;
+ endTime: number;
+};
+
+export const getTimeseriesGranularity = (
+ startTime?: number | null,
+ endTime?: number | null,
+): TimeseriesConfig => {
+ const now = Date.now();
+
+ // If both of them are missing fallback to perMinute and fetch lastHour to show latest
+ if (!startTime && !endTime) {
+ return {
+ granularity: "perMinute",
+ startTime: now - HOUR_IN_MS,
+ endTime: now,
+ };
+ }
+
+ // Set default end time if missing
+ const effectiveEndTime = endTime ?? now;
+ // Set default start time if missing (last hour)
+ const effectiveStartTime = startTime ?? effectiveEndTime - HOUR_IN_MS;
+ const timeRange = effectiveEndTime - effectiveStartTime;
+ let granularity: TimeseriesGranularity;
+
+ if (timeRange > WEEK_IN_MS) {
+ // > 7 days
+ granularity = "perDay";
+ } else if (timeRange > HOUR_IN_MS) {
+ // > 1 hour
+ granularity = "perHour";
+ } else {
+ // <= 1 hour
+ granularity = "perMinute";
+ }
+
+ return {
+ granularity,
+ startTime: effectiveStartTime,
+ endTime: effectiveEndTime,
+ };
+};
diff --git a/apps/dashboard/components/ui/calendar.tsx b/apps/dashboard/components/ui/calendar.tsx
index 4fd18528ef..728bc3357d 100644
--- a/apps/dashboard/components/ui/calendar.tsx
+++ b/apps/dashboard/components/ui/calendar.tsx
@@ -17,12 +17,12 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
- caption: "flex justify-center pt-1 relative items-center",
+ caption: "flex justify-between px-2 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "default" }),
- "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+ "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 flex justify-center items-center mr-2",
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
@@ -33,7 +33,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
day: cn(
buttonVariants({ variant: "ghost" }),
- "h-9 w-9 p-0 font-normal aria-selected:opacity-100 text-[13px]",
+ "h-9 w-9 p-0 font-normal aria-selected:opacity-100 text-[13px] flex items-center justify-center",
),
day_range_end: "day-range-end",
day_selected:
diff --git a/apps/dashboard/components/virtual-table.tsx b/apps/dashboard/components/virtual-table.tsx
new file mode 100644
index 0000000000..e7db975304
--- /dev/null
+++ b/apps/dashboard/components/virtual-table.tsx
@@ -0,0 +1,240 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ScrollText } from "lucide-react";
+import type React from "react";
+import { useRef, useState } from "react";
+
+export type Column = {
+ key: string;
+ header: string;
+ width: string;
+ render: (item: T) => React.ReactNode;
+};
+
+export type VirtualTableProps = {
+ data: T[];
+ columns: Column[];
+ isLoading?: boolean;
+ rowHeight?: number;
+ tableHeight?: string;
+ onRowClick?: (item: T | null) => void;
+ onLoadMore?: () => void;
+ emptyState?: React.ReactNode;
+ loadingRows?: number;
+ overscanCount?: number;
+ keyExtractor: (item: T) => string | number;
+ rowClassName?: (item: T) => string;
+ selectedClassName?: (item: T, isSelected: boolean) => string;
+ selectedItem?: T | null;
+ renderDetails?: (item: T, onClose: () => void, distanceToTop: number) => React.ReactNode;
+};
+
+const DEFAULT_ROW_HEIGHT = 26;
+const DEFAULT_LOADING_ROWS = 50;
+const DEFAULT_OVERSCAN = 5;
+const TABLE_BORDER_THICKNESS = 1;
+
+export function VirtualTable({
+ data,
+ columns,
+ isLoading = false,
+ rowHeight = DEFAULT_ROW_HEIGHT,
+ tableHeight = "80vh",
+ onRowClick,
+ onLoadMore,
+ emptyState,
+ loadingRows = DEFAULT_LOADING_ROWS,
+ overscanCount = DEFAULT_OVERSCAN,
+ keyExtractor,
+ rowClassName,
+ selectedClassName,
+ selectedItem,
+ renderDetails,
+}: VirtualTableProps) {
+ const parentRef = useRef(null);
+ const tableRef = useRef(null);
+ const [tableDistanceToTop, setTableDistanceToTop] = useState(0);
+
+ const virtualizer = useVirtualizer({
+ count: isLoading ? loadingRows : data.length,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => rowHeight,
+ overscan: overscanCount,
+ onChange: (instance) => {
+ const lastItem = instance.getVirtualItems().at(-1);
+ if (!lastItem || !onLoadMore) {
+ return;
+ }
+
+ if (!isLoading && lastItem.index >= data.length - 1 - instance.options.overscan) {
+ onLoadMore();
+ }
+ },
+ });
+
+ const handleRowClick = (item: T) => {
+ if (onRowClick) {
+ onRowClick(item);
+ setTableDistanceToTop(
+ (tableRef.current?.getBoundingClientRect().top ?? 0) +
+ window.scrollY -
+ TABLE_BORDER_THICKNESS,
+ );
+ }
+ };
+
+ const LoadingRow = () => (
+ col.width).join(" ") }}
+ >
+ {columns.map((column) => (
+
+ ))}
+
+ {emptyState || (
+
+
+
+ No data available
+
+
+ )}
+
+
col.width).join(" "),
+ }}
+ >
+ {columns.map((column) => (
+
+ {column.header}
+
+ ))}
+
+
+
+
{
+ if (el) {
+ //@ts-expect-error safe to bypass
+ parentRef.current = el;
+ //@ts-expect-error safe to bypass
+ tableRef.current = el;
+ }
+ }}
+ className="overflow-auto"
+ style={{ height: tableHeight }}
+ >
+
+ {virtualizer.getVirtualItems().map((virtualRow) => {
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ const item = data[virtualRow.index];
+ if (!item) {
+ return null;
+ }
+
+ const isSelected = selectedItem
+ ? keyExtractor(selectedItem) === keyExtractor(item)
+ : false;
+
+ return (
+
handleRowClick(item)}
+ tabIndex={virtualRow.index}
+ aria-selected={isSelected}
+ onKeyDown={(event) => {
+ if (event.key === "Escape" && onRowClick) {
+ onRowClick(null);
+ }
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ handleRowClick(item);
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault();
+ const nextElement = document.querySelector(
+ `[data-index="${virtualRow.index + 1}"]`,
+ ) as HTMLElement;
+ nextElement?.focus();
+ }
+ if (event.key === "ArrowUp") {
+ event.preventDefault();
+ const prevElement = document.querySelector(
+ `[data-index="${virtualRow.index - 1}"]`,
+ ) as HTMLElement;
+ prevElement?.focus();
+ }
+ }}
+ className={cn(
+ "grid text-[13px] leading-[14px] mb-[1px] rounded-[5px] cursor-pointer absolute top-0 left-0 w-full hover:bg-background-subtle/90 pl-1",
+ rowClassName?.(item),
+ selectedItem && {
+ "opacity-50": !isSelected,
+ "opacity-100": isSelected,
+ },
+ selectedClassName?.(item, isSelected),
+ )}
+ style={{
+ gridTemplateColumns: columns.map((col) => col.width).join(" "),
+ height: `${rowHeight}px`,
+ top: `${virtualRow.start}px`,
+ }}
+ >
+ {columns.map((column) => (
+
+ {column.render(item)}
+
+ ))}
+
+ );
+ })}
+
+
+ {selectedItem &&
+ renderDetails &&
+ renderDetails(selectedItem, () => onRowClick?.(null as any), tableDistanceToTop)}
+
+