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)/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)/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]/_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/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: "", 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); 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;