From a163cc3678a5c71cbfb59a42cefe457b38762567 Mon Sep 17 00:00:00 2001 From: Fred KISSIE Date: Wed, 20 May 2026 04:50:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20show=20loading=20animation=20on?= =?UTF-8?q?=20http=20request=20logs=20table?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- messages/en-US.json | 1 + .../[orgId]/settings/logs/request/page.tsx | 71 +++++++++++++++++-- src/components/LogDataTable.tsx | 16 ++++- src/lib/queries.ts | 10 +-- 4 files changed, 88 insertions(+), 10 deletions(-) diff --git a/messages/en-US.json b/messages/en-US.json index 0071ceec0..454ab7975 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -1620,6 +1620,7 @@ "certificateStatus": "Certificate", "certificateStatusAutoRefreshHint": "Status refreshes automatically.", "loading": "Loading", + "loadingEllipsis": "Loading...", "loadingAnalytics": "Loading Analytics", "restart": "Restart", "domains": "Domains", diff --git a/src/app/[orgId]/settings/logs/request/page.tsx b/src/app/[orgId]/settings/logs/request/page.tsx index e87609e75..2196a0342 100644 --- a/src/app/[orgId]/settings/logs/request/page.tsx +++ b/src/app/[orgId]/settings/logs/request/page.tsx @@ -19,6 +19,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useMemo, useState, useTransition } from "react"; import { useStoredPageSize } from "@app/hooks/useStoredPageSize"; import { build } from "@server/build"; +import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types"; export default function GeneralPage() { const router = useRouter(); @@ -79,7 +80,9 @@ export default function GeneralPage() { if (dateRange.startDate?.date) { const dt = new Date(dateRange.startDate.date); if (dateRange.startDate.time) { - const [h, m, s] = dateRange.startDate.time.split(":").map(Number); + const [h, m, s] = dateRange.startDate.time + .split(":") + .map(Number); dt.setHours(h, m, s || 0); } timeStart = dt.toISOString(); @@ -114,7 +117,7 @@ export default function GeneralPage() { }; }, [dateRange, currentPage, pageSize, filters]); - const { data, isFetching, refetch } = useQuery({ + const { data, isFetching, isLoading, refetch } = useQuery({ ...logQueries.requests({ orgId: orgId as string, filters: queryFilters @@ -122,7 +125,7 @@ export default function GeneralPage() { enabled: build !== "oss" }); - const rows = data?.log ?? []; + const rows = isLoading ? generateSampleRequestLogs() : (data?.log ?? []); const totalCount = data?.pagination?.total ?? 0; const filterAttributes = data?.filterAttributes ?? { actors: [], @@ -681,7 +684,7 @@ export default function GeneralPage() { currentPage={currentPage} onPageChange={handlePageChange} onPageSizeChange={handlePageSizeChange} - isLoading={isFetching} + isLoading={isLoading} pageSize={pageSize} // Row expansion props expandable={true} @@ -690,3 +693,63 @@ export default function GeneralPage() { ); } + +function generateSampleRequestLogs(): QueryRequestAuditLogResponse["log"] { + const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"]; + const paths = [ + "/api/v1/users", + "/dashboard", + "/settings", + "/health", + "/metrics" + ]; + const hosts = ["app.example.com", "api.example.com", "admin.example.com"]; + const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"]; + const allowedReasons = [100, 101, 102, 103, 104, 105, 106, 107, 108]; + const deniedReasons = [201, 202, 203, 204, 205, 299]; + const actors = [ + "alice@example.com", + "bob@example.com", + "carol@example.com", + null + ]; + + const now = Math.floor(Date.now() / 1000); + const sevenDaysAgo = now - 7 * 24 * 60 * 60; + + return Array.from({ length: 10 }, (_, i) => { + const action = Math.random() > 0.3; + const reason = action + ? allowedReasons[Math.floor(Math.random() * allowedReasons.length)] + : deniedReasons[Math.floor(Math.random() * deniedReasons.length)]; + const actor = actors[Math.floor(Math.random() * actors.length)]; + + return { + timestamp: Math.floor( + sevenDaysAgo + Math.random() * (now - sevenDaysAgo) + ), + action, + reason, + orgId: "sample-org", + actorType: actor ? "user" : null, + actor, + actorId: actor ? `user-${i}` : null, + resourceId: Math.floor(Math.random() * 5) + 1, + siteResourceId: null, + resourceNiceId: `resource-${(i % 3) + 1}`, + resourceName: `Resource ${(i % 3) + 1}`, + ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`, + location: locations[Math.floor(Math.random() * locations.length)], + userAgent: "Mozilla/5.0", + metadata: null, + headers: null, + query: null, + originalRequestURL: null, + scheme: "https", + host: hosts[Math.floor(Math.random() * hosts.length)], + path: paths[Math.floor(Math.random() * paths.length)], + method: methods[Math.floor(Math.random() * methods.length)], + tls: true + }; + }); +} diff --git a/src/components/LogDataTable.tsx b/src/components/LogDataTable.tsx index 14e87ff75..767f0a145 100644 --- a/src/components/LogDataTable.tsx +++ b/src/components/LogDataTable.tsx @@ -28,6 +28,7 @@ import { ChevronRight, Download, Loader, + LoaderIcon, RefreshCw } from "lucide-react"; import { useTranslations } from "next-intl"; @@ -427,7 +428,7 @@ export function LogDataTable({ )} - + {table.getHeaderGroups().map((headerGroup) => ( @@ -535,6 +536,19 @@ export function LogDataTable({ )}
+ + {isLoading && ( + <> +
+
+
+ + {t("loadingEllipsis")} +
+
+ + )} +