Skip to content

Commit ac48b24

Browse files
committed
add analytics to insight page (#7488)
<!-- start pr-codex --> ## PR-Codex overview This PR introduces enhancements to the `Insight` feature in the application, including new analytics components, improved data fetching, and user interface updates for better user experience. ### Detailed summary - Added `limit` parameter to analytics type definitions. - Refactored imports in `insight-ftux.tsx`. - Introduced `InsightAnalyticsFilter` component for filtering analytics data. - Created `Layout` component with project validation and redirection. - Added `InsightFooter` for footer links. - Implemented `TopInsightChainsTable` and `TopInsightEndpointsTable` for displaying analytics data. - Added `getInsightChainUsage`, `getInsightStatusCodeUsage`, and `getInsightEndpointUsage` API functions for fetching analytics. - Enhanced `RequestsByStatusGraph` for visualizing status code requests. - Updated `Page` component to handle authentication and data fetching more efficiently. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a comprehensive analytics dashboard for project insights, including interactive charts and tables for usage, errors, top endpoints, and top chains. * Added filters for date range and interval selection, with preferences saved for future visits. * Enhanced visualization with a stacked bar chart for HTTP status codes and detailed tables for endpoints and chains. * Included a streamlined layout with improved navigation, footer resources, and a "Get Started with Insight" call-to-action. * Added new analytics data fetching capabilities covering usage by chain, status code, endpoint, and overall metrics. * **Refactor** * Simplified the insights page by removing redundant logic and focusing on authenticated analytics display. * **Bug Fixes** * Improved error handling during data fetching to ensure UI stability when analytics data is unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent bde53fc commit ac48b24

File tree

11 files changed

+893
-187
lines changed

11 files changed

+893
-187
lines changed

apps/dashboard/src/@/api/analytics.ts

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,29 @@ import type {
1717
import { getAuthToken } from "./auth-token";
1818
import { getChains } from "./chain";
1919

20+
export interface InsightChainStats {
21+
date: string;
22+
chainId: string;
23+
totalRequests: number;
24+
}
25+
26+
export interface InsightStatusCodeStats {
27+
date: string;
28+
httpStatusCode: number;
29+
totalRequests: number;
30+
}
31+
32+
export interface InsightEndpointStats {
33+
date: string;
34+
endpoint: string;
35+
totalRequests: number;
36+
}
37+
38+
interface InsightUsageStats {
39+
date: string;
40+
totalRequests: number;
41+
}
42+
2043
async function fetchAnalytics(
2144
input: string | URL,
2245
init?: RequestInit,
@@ -76,6 +99,9 @@ function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
7699
if (params.period) {
77100
searchParams.append("period", params.period);
78101
}
102+
if (params.limit) {
103+
searchParams.append("limit", params.limit.toString());
104+
}
79105
return searchParams;
80106
}
81107

@@ -424,3 +450,91 @@ export async function getEngineCloudMethodUsage(
424450
const json = await res.json();
425451
return json.data as EngineCloudStats[];
426452
}
453+
454+
export async function getInsightChainUsage(
455+
params: AnalyticsQueryParams,
456+
): Promise<{ data: InsightChainStats[] } | { errorMessage: string }> {
457+
const searchParams = buildSearchParams(params);
458+
const res = await fetchAnalytics(
459+
`v2/insight/usage/by-chain?${searchParams.toString()}`,
460+
{
461+
method: "GET",
462+
},
463+
);
464+
465+
if (res?.status !== 200) {
466+
const reason = await res?.text();
467+
const errMsg = `Failed to fetch Insight chain usage: ${res?.status} - ${res.statusText} - ${reason}`;
468+
console.error(errMsg);
469+
return { errorMessage: errMsg };
470+
}
471+
472+
const json = await res.json();
473+
return { data: json.data as InsightChainStats[] };
474+
}
475+
476+
export async function getInsightStatusCodeUsage(
477+
params: AnalyticsQueryParams,
478+
): Promise<{ data: InsightStatusCodeStats[] } | { errorMessage: string }> {
479+
const searchParams = buildSearchParams(params);
480+
const res = await fetchAnalytics(
481+
`v2/insight/usage/by-status-code?${searchParams.toString()}`,
482+
{
483+
method: "GET",
484+
},
485+
);
486+
487+
if (res?.status !== 200) {
488+
const reason = await res?.text();
489+
const errMsg = `Failed to fetch Insight status code usage: ${res?.status} - ${res.statusText} - ${reason}`;
490+
console.error(errMsg);
491+
return { errorMessage: errMsg };
492+
}
493+
494+
const json = await res.json();
495+
return { data: json.data as InsightStatusCodeStats[] };
496+
}
497+
498+
export async function getInsightEndpointUsage(
499+
params: AnalyticsQueryParams,
500+
): Promise<{ data: InsightEndpointStats[] } | { errorMessage: string }> {
501+
const searchParams = buildSearchParams(params);
502+
const res = await fetchAnalytics(
503+
`v2/insight/usage/by-endpoint?${searchParams.toString()}`,
504+
{
505+
method: "GET",
506+
},
507+
);
508+
509+
if (res?.status !== 200) {
510+
const reason = await res?.text();
511+
const errMsg = `Failed to fetch Insight endpoint usage: ${res?.status} - ${res.statusText} - ${reason}`;
512+
console.error(errMsg);
513+
return { errorMessage: errMsg };
514+
}
515+
516+
const json = await res.json();
517+
return { data: json.data as InsightEndpointStats[] };
518+
}
519+
520+
export async function getInsightUsage(
521+
params: AnalyticsQueryParams,
522+
): Promise<{ data: InsightUsageStats[] } | { errorMessage: string }> {
523+
const searchParams = buildSearchParams(params);
524+
const res = await fetchAnalytics(
525+
`v2/insight/usage?${searchParams.toString()}`,
526+
{
527+
method: "GET",
528+
},
529+
);
530+
531+
if (res?.status !== 200) {
532+
const reason = await res?.text();
533+
const errMsg = `Failed to fetch Insight usage: ${res?.status} - ${res.statusText} - ${reason}`;
534+
console.error(errMsg);
535+
return { errorMessage: errMsg };
536+
}
537+
538+
const json = await res.json();
539+
return { data: json.data as InsightUsageStats[] };
540+
}

apps/dashboard/src/@/types/analytics.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,5 @@ export interface AnalyticsQueryParams {
7878
from?: Date;
7979
to?: Date;
8080
period?: "day" | "week" | "month" | "year" | "all";
81+
limit?: number;
8182
}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/blueprint-card.tsx

Lines changed: 0 additions & 97 deletions
This file was deleted.

0 commit comments

Comments
 (0)