From efc832a2b43c34cbc5fb1d413725954c9ff1e9cd Mon Sep 17 00:00:00 2001 From: ogzhanolguncu Date: Thu, 24 Apr 2025 13:26:52 +0300 Subject: [PATCH 1/3] fix: charts and logs data count This will prevent charts and logs showing the different data. Previously, logs and charts were using different intervals for the default fetch. Reason was to show more data on the chart, but that gives the wrong impression to users. --- .../components/charts/bar-chart/hooks/use-fetch-timeseries.ts | 4 ++-- .../charts/line-chart/hooks/use-fetch-timeseries.ts | 4 ++-- .../logs/components/charts/hooks/use-fetch-timeseries.ts | 4 ++-- .../components/charts/bar-chart/hooks/use-fetch-timeseries.ts | 4 ++-- .../logs/components/charts/hooks/use-fetch-timeseries.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts index ab7179332e..33a9eb9cfb 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { KEY_VERIFICATION_OUTCOMES } from "@unkey/clickhouse/src/keys/keys"; import { useMemo } from "react"; @@ -13,7 +13,7 @@ export const useFetchVerificationTimeseries = (apiId: string | null) => { const queryParams = useMemo(() => { const params: KeysOverviewQueryTimeseriesPayload = { - startTime: dateNow - TIMESERIES_DATA_WINDOW * 24, + startTime: dateNow - HISTORICAL_DATA_WINDOW, endTime: dateNow, keyIds: { filters: [] }, outcomes: { filters: [] }, diff --git a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts index f28abd351b..a0f22edc53 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { KEY_VERIFICATION_OUTCOMES } from "@unkey/clickhouse/src/keys/keys"; import { useMemo } from "react"; @@ -13,7 +13,7 @@ export const useFetchActiveKeysTimeseries = (apiId: string | null) => { const queryParams = useMemo(() => { const params: KeysOverviewQueryTimeseriesPayload = { - startTime: dateNow - TIMESERIES_DATA_WINDOW * 24, + startTime: dateNow - HISTORICAL_DATA_WINDOW, endTime: dateNow, keyIds: { filters: [] }, outcomes: { filters: [] }, diff --git a/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts index 677b05bdb7..34a58a1ad0 100644 --- a/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { useMemo } from "react"; import type { z } from "zod"; @@ -12,7 +12,7 @@ export const useFetchTimeseries = () => { const dateNow = useMemo(() => Date.now(), []); const queryParams = useMemo(() => { const params: z.infer = { - startTime: dateNow - TIMESERIES_DATA_WINDOW, + startTime: dateNow - HISTORICAL_DATA_WINDOW, endTime: dateNow, host: { filters: [] }, method: { filters: [] }, diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts index 381e63a0da..7a3cfd416b 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { useQueryTime } from "@/providers/query-time-provider"; import { useMemo } from "react"; @@ -13,7 +13,7 @@ export const useFetchRatelimitOverviewTimeseries = (namespaceId: string) => { const queryParams = useMemo(() => { const params: RatelimitOverviewQueryTimeseriesPayload = { namespaceId, - startTime: timestamp - TIMESERIES_DATA_WINDOW, + startTime: timestamp - HISTORICAL_DATA_WINDOW, endTime: timestamp, identifiers: { filters: [] }, since: "", diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/charts/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/charts/hooks/use-fetch-timeseries.ts index a5205f2324..a487d2f501 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/charts/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/charts/hooks/use-fetch-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { useQueryTime } from "@/providers/query-time-provider"; import { useMemo } from "react"; @@ -13,7 +13,7 @@ export const useFetchRatelimitTimeseries = (namespaceId: string) => { const queryParams = useMemo(() => { const params: RatelimitQueryTimeseriesPayload = { namespaceId, - startTime: timestamp - TIMESERIES_DATA_WINDOW, + startTime: timestamp - HISTORICAL_DATA_WINDOW, endTime: timestamp, identifiers: { filters: [] }, since: "", From ef6fe2b898b4b1349b0358b3119ab990c46c6c42 Mon Sep 17 00:00:00 2001 From: ogzhanolguncu Date: Thu, 24 Apr 2025 13:37:01 +0300 Subject: [PATCH 2/3] fix: get rid of all TIMESERIES_DATA_WINDOW --- .../apis/_components/hooks/use-query-timeseries.ts | 4 ++-- .../charts/line-chart/hooks/use-fetch-timeseries.ts | 11 ++++++----- apps/dashboard/components/logs/constants.ts | 1 - 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts b/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts index 39b8190199..41bbab4bf7 100644 --- a/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts +++ b/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts @@ -1,5 +1,5 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; import { useEffect, useMemo, useState } from "react"; import type { VerificationQueryTimeseriesPayload } from "./query-timeseries.schema"; @@ -13,7 +13,7 @@ export const useFetchVerificationTimeseries = (keyspaceId: string | null) => { const queryParams = useMemo(() => { const params: VerificationQueryTimeseriesPayload = { keyspaceId: keyspaceId ?? "", - startTime: dateNow - TIMESERIES_DATA_WINDOW * 24, + startTime: dateNow - HISTORICAL_DATA_WINDOW, endTime: dateNow, since: "", }; diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts index fb35bccf24..749f6f84de 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/line-chart/hooks/use-fetch-timeseries.ts @@ -1,19 +1,20 @@ import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp"; -import { TIMESERIES_DATA_WINDOW } from "@/components/logs/constants"; +import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants"; import { trpc } from "@/lib/trpc/client"; +import { useQueryTime } from "@/providers/query-time-provider"; import { useMemo } from "react"; import { useFilters } from "../../../../hooks/use-filters"; import type { RatelimitOverviewQueryTimeseriesPayload } from "../../bar-chart/query-timeseries.schema"; export const useFetchRatelimitOverviewLatencyTimeseries = (namespaceId: string) => { const { filters } = useFilters(); - const dateNow = useMemo(() => Date.now(), []); + const { queryTime: timestamp } = useQueryTime(); const queryParams = useMemo(() => { const params: RatelimitOverviewQueryTimeseriesPayload = { namespaceId, - startTime: dateNow - TIMESERIES_DATA_WINDOW, - endTime: dateNow, + startTime: timestamp - HISTORICAL_DATA_WINDOW, + endTime: timestamp, identifiers: { filters: [] }, since: "", }; @@ -52,7 +53,7 @@ export const useFetchRatelimitOverviewLatencyTimeseries = (namespaceId: string) }); return params; - }, [filters, dateNow, namespaceId]); + }, [filters, timestamp, namespaceId]); const { data, isLoading, isError } = trpc.ratelimit.overview.logs.queryRatelimitLatencyTimeseries.useQuery(queryParams, { diff --git a/apps/dashboard/components/logs/constants.ts b/apps/dashboard/components/logs/constants.ts index 37ff88b5b9..9438156e80 100644 --- a/apps/dashboard/components/logs/constants.ts +++ b/apps/dashboard/components/logs/constants.ts @@ -1,3 +1,2 @@ // Those two setting is being used by every log table and chart. So be carefuly when you are making changes. Consult to core team. export const HISTORICAL_DATA_WINDOW = 12 * 60 * 60 * 1000; -export const TIMESERIES_DATA_WINDOW = 60 * 60 * 1000; From 5bc1ab325bc8a5698dc20c205e896d51fa11d876 Mon Sep 17 00:00:00 2001 From: ogzhanolguncu Date: Thu, 24 Apr 2025 13:51:46 +0300 Subject: [PATCH 3/3] tests: fix broken case --- ...s-query.test.ts => use-logs-query.test.tsx} | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) rename apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/{use-logs-query.test.ts => use-logs-query.test.tsx} (87%) diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.ts b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.tsx similarity index 87% rename from apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.ts rename to apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.tsx index ff6709cd2a..66f9b87410 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.ts +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.test.tsx @@ -1,12 +1,23 @@ import { trpc } from "@/lib/trpc/client"; +import { QueryTimeProvider } from "@/providers/query-time-provider"; import { act, renderHook } from "@testing-library/react"; import type { RatelimitLog } from "@unkey/clickhouse/src/ratelimits"; +// biome-ignore lint/style/useImportType: we need react for mocking +import * as React from "react"; import { beforeEach, describe, expect, it, vi } from "vitest"; import { useRatelimitLogsQuery } from "./use-logs-query"; let mockFilters: any[] = []; const mockDate = 1706024400000; +vi.mock("@/providers/query-time-provider", () => ({ + QueryTimeProvider: ({ children }: { children: React.ReactNode }) => children, + useQueryTime: () => ({ + queryTime: new Date(mockDate), + refreshQueryTime: vi.fn(), + }), +})); + vi.mock("@/lib/trpc/client", () => { const useInfiniteQuery = vi.fn().mockReturnValue({ data: null, @@ -76,7 +87,7 @@ describe("useRatelimitLogsQuery filter processing", () => { { field: "status", operator: "is", value: {} }, ]; renderHook(() => useRatelimitLogsQuery({ namespaceId: "test-namspace" })); - expect(consoleMock).toHaveBeenCalledTimes(3); + expect(consoleMock).toHaveBeenCalledTimes(6); }); it("handles time-based filters", () => { @@ -146,7 +157,10 @@ describe("useRatelimitLogsQuery realtime logs", () => { pollIntervalMs, namespaceId: "test-namespace", }), - { initialProps: { startPolling: true, pollIntervalMs: 1000 } }, + { + initialProps: { startPolling: true, pollIntervalMs: 1000 }, + wrapper: ({ children }) => {children}, + }, ); expect(result.current.historicalLogs).toHaveLength(2);