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 -->

Author: iuwqyir

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

@@ -17,6 +17,29 @@ import type {
 import { getAuthToken } from "./auth-token";
 import { getChains } from "./chain";
 
+export interface InsightChainStats {
+  date: string;
+  chainId: string;
+  totalRequests: number;
+}
+
+export interface InsightStatusCodeStats {
+  date: string;
+  httpStatusCode: number;
+  totalRequests: number;
+}
+
+export interface InsightEndpointStats {
+  date: string;
+  endpoint: string;
+  totalRequests: number;
+}
+
+interface InsightUsageStats {
+  date: string;
+  totalRequests: number;
+}
+
 async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
@@ -76,6 +99,9 @@ function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   if (params.period) {
     searchParams.append("period", params.period);
   }
+  if (params.limit) {
+    searchParams.append("limit", params.limit.toString());
+  }
   return searchParams;
 }
 
@@ -424,3 +450,91 @@ export async function getEngineCloudMethodUsage(
   const json = await res.json();
   return json.data as EngineCloudStats[];
 }
+
+export async function getInsightChainUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightChainStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-chain?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight chain usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightChainStats[] };
+}
+
+export async function getInsightStatusCodeUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightStatusCodeStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-status-code?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight status code usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightStatusCodeStats[] };
+}
+
+export async function getInsightEndpointUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightEndpointStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-endpoint?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight endpoint usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightEndpointStats[] };
+}
+
+export async function getInsightUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightUsageStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightUsageStats[] };
+}

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

@@ -78,4 +78,5 @@ export interface AnalyticsQueryParams {
   from?: Date;
   to?: Date;
   period?: "day" | "week" | "month" | "year" | "all";
+  limit?: number;
 }