Add RPC usage chart to dashboard

Author: jnsdls

apps/dashboard/src/@/api/usage/rpc.ts

@@ -0,0 +1,54 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+
+export type RPCUsageDataItem = {
+  date: string;
+  usageType: "included" | "overage" | "rate-limit";
+  count: string;
+};
+
+export const fetchRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+    from: string;
+    to: string;
+    period: "day" | "week" | "month" | "year" | "all";
+  }) => {
+    const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/usage-types`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+    url.searchParams.set("from", params.from);
+    url.searchParams.set("to", params.to);
+    url.searchParams.set("period", params.period);
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as RPCUsageDataItem[],
+    };
+  },
+  ["nebula-analytics"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx

@@ -1,6 +1,8 @@
 import { getInAppWalletUsage, getUserOpUsage } from "@/api/analytics";
 import type { Team } from "@/api/team";
 import type { TeamSubscription } from "@/api/team-subscription";
+import type { RPCUsageDataItem } from "@/api/usage/rpc";
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { Button } from "@/components/ui/button";
 import type {
   Account,
@@ -28,6 +30,7 @@ type UsageProps = {
     image: string | null;
     slug: string;
   }[];
+  rpcUsage: RPCUsageDataItem[];
 };
 
 const compactNumberFormatter = new Intl.NumberFormat("en-US", {
@@ -42,24 +45,8 @@ export const Usage: React.FC<UsageProps> = ({
   team,
   client,
   projects,
+  rpcUsage,
 }) => {
-  // TODO - get this from team instead of account
-  const rpcMetrics = useMemo(() => {
-    if (!usageData) {
-      return {};
-    }
-
-    return {
-      title: "Unlimited Requests",
-      total: (
-        <span className="text-muted-foreground">
-          {compactNumberFormatter.format(usageData.rateLimits.rpc)} Requests Per
-          Second
-        </span>
-      ),
-    };
-  }, [usageData]);
-
   const gatewayMetrics = useMemo(() => {
     if (!usageData) {
       return {};
@@ -91,6 +78,37 @@ export const Usage: React.FC<UsageProps> = ({
 
   const storageUsage = team.capabilities.storage.upload;
 
+  const rpcUsageData = useMemo(() => {
+    const mappedRPCUsage = rpcUsage.reduce(
+      (acc, curr) => {
+        switch (curr.usageType) {
+          case "rate-limit":
+            acc[curr.date] = {
+              ...(acc[curr.date] || {}),
+              "rate-limit":
+                (acc[curr.date]?.["rate-limit"] || 0) + Number(curr.count),
+              included: acc[curr.date]?.included || 0,
+            };
+            break;
+          default:
+            acc[curr.date] = {
+              ...(acc[curr.date] || {}),
+              "rate-limit": acc[curr.date]?.["rate-limit"] || 0,
+              included: (acc[curr.date]?.included || 0) + Number(curr.count),
+            };
+            break;
+        }
+        return acc;
+      },
+      {} as Record<string, { included: number; "rate-limit": number }>,
+    );
+
+    return Object.entries(mappedRPCUsage).map(([date, usage]) => ({
+      time: new Date(date).getTime(),
+      ...usage,
+    }));
+  }, [rpcUsage]);
+
   return (
     <div className="flex grow flex-col gap-8">
       <InAppWalletUsersChartCard
@@ -118,10 +136,25 @@ export const Usage: React.FC<UsageProps> = ({
       />
 
       <UsageCard
-        {...rpcMetrics}
-        name="RPC"
-        description="Amount of RPC requests allowed per second in your plan"
-      />
+        name="RPC Requests"
+        description={`Your plan allows for ${usageData.rateLimits.rpc} requests per second.`}
+      >
+        <ThirdwebBarChart
+          data={rpcUsageData}
+          isPending={false}
+          variant="stacked"
+          config={{
+            included: {
+              label: "RPC Requests",
+              color: "hsl(var(--chart-1))",
+            },
+            "rate-limit": {
+              label: "Rate Limited Requests",
+              color: "hsl(var(--chart-3))",
+            },
+          }}
+        />
+      </UsageCard>
 
       <UsageCard
         {...gatewayMetrics}

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx

@@ -1,7 +1,9 @@
 import { getProjects } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { getTeamSubscriptions } from "@/api/team-subscription";
+import { fetchRPCUsage } from "@/api/usage/rpc";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { normalizeTimeISOString } from "lib/time";
 import { redirect } from "next/navigation";
 import { getValidAccount } from "../../../../../account/settings/getAccount";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
@@ -24,13 +26,32 @@ export default async function Page(props: {
     redirect("/team");
   }
 
-  const [accountUsage, subscriptions, projects] = await Promise.all([
+  if (!authToken) {
+    return (
+      <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
+        Something went wrong. Please try again later.
+      </div>
+    );
+  }
+
+  const [accountUsage, subscriptions, projects, rpcUsage] = await Promise.all([
     getAccountUsage(),
     getTeamSubscriptions(team.slug),
     getProjects(team.slug),
+    fetchRPCUsage({
+      authToken,
+      period: "day",
+      // 7 days ago
+      from: normalizeTimeISOString(
+        new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+      ),
+      // now
+      to: normalizeTimeISOString(new Date()),
+      teamId: team.id,
+    }),
   ]);
 
-  if (!accountUsage || !subscriptions || !authToken) {
+  if (!accountUsage || !subscriptions) {
     return (
       <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
         Something went wrong. Please try again later.
@@ -48,6 +69,7 @@ export default async function Page(props: {
       account={account}
       team={team}
       client={client}
+      rpcUsage={rpcUsage.ok ? rpcUsage.data : []}
       projects={projects.map((project) => ({
         id: project.id,
         name: project.name,