cleanup

thirdweb-dev · Jul 29, 2024 · 8d850fa · 8d850fa
1 parent 2a34f68
commit 8d850fa
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 58 deletions.
diff --git a/apps/dashboard/src/app/api/engine-status/errors/route.ts b/apps/dashboard/src/app/api/engine-status/errors/route.ts
@@ -40,6 +40,6 @@ export const POST = async () => {
     'sum(increase(traefik_service_requests_total{code=~"[4-9].."}[1h]))';
   const data = await fetchPrometheusData(query);
   return NextResponse.json(transformPrometheusData(data), {
-    status: 200
+    status: 200,
   });
 };
diff --git a/apps/dashboard/src/app/api/engine-status/prometheus/route.ts b/apps/dashboard/src/app/api/engine-status/prometheus/route.ts
@@ -48,9 +48,7 @@ export const POST = async () => {
     'sum(increase(traefik_service_requests_total{code=~"[4-9].."}[1h])) by (code)';
   const data = await fetchPrometheusData(query);
 
-  return NextResponse.json(
-    {
-      data: data,
-    }
-  );
+  return NextResponse.json({
+    data: data,
+  });
 };
diff --git a/apps/dashboard/src/app/api/engine-status/status-codes/route.ts b/apps/dashboard/src/app/api/engine-status/status-codes/route.ts
@@ -56,6 +56,6 @@ export const POST = async () => {
   const query = "sum(increase(traefik_service_requests_total{}[1h])) by (code)";
   const data = await fetchPrometheusData(query);
   return NextResponse.json(transformPrometheusData(data), {
-    status: 200
+    status: 200,
   });
 };
diff --git a/apps/dashboard/src/app/api/engine-status/volume/route.ts b/apps/dashboard/src/app/api/engine-status/volume/route.ts
@@ -39,6 +39,6 @@ export const POST = async () => {
   const query = "sum(increase(traefik_service_requests_total{}[1h]))";
   const data = await fetchPrometheusData(query);
   return NextResponse.json(transformPrometheusData(data), {
-    status: 200
+    status: 200,
   });
 };
diff --git a/apps/dashboard/src/components/engine/status/components/ErrorRate.tsx b/apps/dashboard/src/components/engine/status/components/ErrorRate.tsx
@@ -16,6 +16,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { Skeleton } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 export function ErrorRate() {
   const monitorData = useQuery(["errorRate"], async () => {
@@ -38,13 +40,13 @@ export function ErrorRate() {
     },
   } satisfies ChartConfig;
 
-  const getAreaCharts = () => {
-    const areaCharts: JSX.Element[] = [];
+  const areaCharts = useMemo(() => {
+    const charts: JSX.Element[] = [];
     if (monitorData.data?.tags === undefined) {
-      return areaCharts;
+      return <Skeleton />; // TODO: Show that data is not available
     }
     for (const tag of monitorData.data.tags) {
-      areaCharts.push(
+      charts.push(
         <Bar
           key={tag}
           dataKey={tag}
@@ -56,8 +58,8 @@ export function ErrorRate() {
         />,
       );
     }
-    return areaCharts;
-  };
+    return charts;
+  }, [monitorData]);
 
   return (
     <Card>
@@ -96,7 +98,7 @@ export function ErrorRate() {
               tickCount={3}
             />
             <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            {getAreaCharts()}
+            {areaCharts}
           </BarChart>
         </ChartContainer>
       </CardContent>

diff --git a/apps/dashboard/src/components/engine/status/components/Healthcheck.tsx b/apps/dashboard/src/components/engine/status/components/Healthcheck.tsx
@@ -7,7 +7,7 @@ import { PrimaryInfoItem } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/
 import { CircleCheck, XIcon } from "lucide-react";
 import { useState } from "react";
 
-function useChainStatswithRPC(engineUrlBase: string) {
+function useEngineHealthStats(engineUrlBase: string) {
   const [shouldRefetch, setShouldRefetch] = useState(true);
   const engineUrl = `${engineUrlBase}/system/health`;
   return useQuery({
@@ -33,12 +33,12 @@ function useChainStatswithRPC(engineUrlBase: string) {
   });
 }
 
-export function Healthcheck(props: { rpc: string }) {
-  const stats = useChainStatswithRPC(props.rpc);
+export function Healthcheck(props: { engineUrl: string }) {
+  const stats = useEngineHealthStats(props.engineUrl);
 
   return (
     <>
-      {/* Engine URL */}
+      {/* Engine Reachability */}
       <PrimaryInfoItem
         title="Engine"
         titleIcon={
@@ -60,7 +60,7 @@ export function Healthcheck(props: { rpc: string }) {
             </ToolTipLabel>
           ) : stats.isError ? (
             <ToolTipLabel label="Not Working">
-              <div className="text-lg text-destructive-text">Unreachable</div>
+              <div className="text-lg text-destructive-text">Not Reachable</div>
             </ToolTipLabel>
           ) : (
             <div className="flex py-1 h-[28px] w-[70px]">
@@ -85,7 +85,7 @@ export function Healthcheck(props: { rpc: string }) {
         )}
       </PrimaryInfoItem>
 
-      {/* Block Height */}
+      {/* Health Status */}
       <PrimaryInfoItem title="Status" titleIcon={<PulseDot />}>
         {stats.isError ? (
           <p className="text-lg fade-in-0 animate-in text-destructive-text">

diff --git a/apps/dashboard/src/components/engine/status/components/StatusCodes.tsx b/apps/dashboard/src/components/engine/status/components/StatusCodes.tsx
@@ -11,7 +11,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import {
-  type ChartConfig,
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
@@ -35,41 +34,31 @@ export function StatusCodes() {
     return json;
   });
 
-  const chartConfig: { [key: string]: { label: string; color: string } } = {
-    "200": {
-      label: "200",
-      color: "hsl(var(--chart-2))",
-    },
-    "207": {
-      label: "207",
-      color: "hsl(var(--chart-3))",
-    },
-    "404": {
-      label: "404",
-      color: "hsl(var(--chart-3))",
-    },
-    "500": {
-      label: "500",
-      color: "hsl(var(--chart-5))",
-    },
-    "502": {
-      label: "502",
-      color: "hsl(var(--chart-5))",
-    },
-    "524": {
-      label: "524",
-      color: "hsl(var(--chart-5))",
-    },
-    "504": {
-      label: "524",
-      color: "hsl(var(--chart-5))",
-    },
-  } satisfies ChartConfig;
+  const chartConfig = useMemo(() => {
+    if (!monitorData || !monitorData.data || !monitorData.data.tags) {
+      return {};
+    }
+
+    const config: { [key: string]: { label: string; color: string } } = {};
+    for (const tag of monitorData.data.tags) {
+      config[tag] = {
+        label: tag,
+        color:
+          Number.parseInt(tag) < 400
+            ? "hsl(var(--chart-2))"
+            : Number.parseInt(tag) < 500
+              ? "hsl(var(--chart-3))"
+              : "hsl(var(--chart-5))",
+      };
+    }
+
+    return config;
+  }, [monitorData]);
 
   const areaCharts = useMemo(() => {
     const charts: JSX.Element[] = [];
-    if (monitorData.data?.tags === undefined) {
-      return <Skeleton className="h-20" />;
+    if (!monitorData || !monitorData.data || !monitorData.data.tags) {
+      return <Skeleton />; // Show that data is not available
     }
 
     for (const tag of monitorData.data.tags) {
@@ -85,8 +74,7 @@ export function StatusCodes() {
         />,
       );
     }
-
-    return charts;
+    return charts.reverse();
   }, [monitorData]);
 
   return (

diff --git a/apps/dashboard/src/components/engine/status/components/TransactionVolume.tsx b/apps/dashboard/src/components/engine/status/components/TransactionVolume.tsx
@@ -20,7 +20,7 @@ import {
 const chartConfig = {
   value: {
     label: "Requests",
-    color: "hsl(var(--chart-2))",
+    color: "hsl(var(--chart-1))",
   },
 } satisfies ChartConfig;
 

diff --git a/apps/dashboard/src/components/engine/status/status.tsx b/apps/dashboard/src/components/engine/status/status.tsx
@@ -19,7 +19,7 @@ export const EngineStatus: React.FC<EngineStatusProps> = ({ instanceUrl }) => {
             <Heading size="title.md">Metrics</Heading>
           </Flex>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10 gap-4">
-            <Healthcheck rpc={instanceUrl} />
+            <Healthcheck engineUrl={instanceUrl} />
           </div>
           <TransactionVolume />
           <StatusCodes />