refactor: improve ux of lobby metrics

rivet-gg · Sep 27, 2024 · e7a925b · e7a925b
1 parent eb52557
commit e7a925b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 22 deletions.
diff --git a/apps/hub/src/domains/game/components/game-matchmaker/game-matchmaker-lobby-details-panel.tsx b/apps/hub/src/domains/game/components/game-matchmaker/game-matchmaker-lobby-details-panel.tsx
@@ -88,7 +88,7 @@ export function GameMatchmakerLobbyDetailsPanel({
           <TabsTrigger value="logs">Output</TabsTrigger>
           <TabsTrigger value="errors">Error</TabsTrigger>
           {isLive && metrics ? (
-            <TabsTrigger value="stats">Stats</TabsTrigger>
+            <TabsTrigger value="stats">Monitor</TabsTrigger>
           ) : null}
         </TabsList>
         <TabsContent value="logs" className="min-h-0 flex-1 mt-0 p-4">

diff --git a/apps/hub/src/domains/game/components/game-matchmaker/lobby-cpu-stats.tsx b/apps/hub/src/domains/game/components/game-matchmaker/lobby-cpu-stats.tsx
@@ -49,10 +49,7 @@ export function LobbyCPUStats({ cpu, metricsAt, syncId }: LobbyCPUStatsProps) {
         <YAxis
           dataKey="value"
           axisLine={false}
-          padding={{ top: 10 }}
-          domain={([, dataMax]) => {
-            return [0, Math.ceil(dataMax * 100) / 100];
-          }}
+          domain={[0, 1]}
           tickFormatter={(value) => `${value * 100}%`}
         />
         <ChartTooltip

diff --git a/apps/hub/src/domains/game/components/game-matchmaker/lobby-memory-stats.tsx b/apps/hub/src/domains/game/components/game-matchmaker/lobby-memory-stats.tsx
@@ -38,6 +38,8 @@ export function LobbyMemoryStats({
     },
   }));
 
+  const max = allocatedMemory || Math.max(...memory);
+
   const id = useId();
 
   const fillId = `fill-${id}`;
@@ -57,11 +59,8 @@ export function LobbyMemoryStats({
         <YAxis
           dataKey="value"
           axisLine={false}
-          padding={{ top: 10 }}
-          domain={([, dataMax]) => {
-            return [0, allocatedMemory || dataMax];
-          }}
-          tickFormatter={(value) => `${filesize(value)}`}
+          domain={[0, max]}
+          tickFormatter={(value) => `${Math.ceil((value / max) * 100)}%`}
         />
         <ChartTooltip
           content={
@@ -75,7 +74,7 @@ export function LobbyMemoryStats({
                 if (typeof value !== "number") {
                   return "n/a";
                 }
-                return filesize(value);
+                return `${filesize(value)} (${Math.round((value / max) * 100).toFixed(2)}%)`;
               }}
             />
           }

diff --git a/apps/hub/src/domains/game/components/game-matchmaker/lobby-metrics.tsx b/apps/hub/src/domains/game/components/game-matchmaker/lobby-metrics.tsx
@@ -14,7 +14,8 @@ export function LobbyMetrics({
   const currentMemory = memory[memory.length - 1];
   const memoryPercentage = (currentMemory / (allocatedMemory || 1)) * 100;
 
-  const cpuPercentage = cpu[cpu.length - 1] * 100;
+  const cpuPercentage = cpu[cpu.length - 1];
+  const maxMemory = allocatedMemory || Math.max(...memory);
   return (
     <Flex gap="2">
       <WithTooltip
@@ -26,7 +27,7 @@ export function LobbyMetrics({
         }
         content={
           <>
-            {filesize(currentMemory)} / {filesize(allocatedMemory || 1)} (
+            {filesize(currentMemory)} / {filesize(maxMemory)} (
             {memoryPercentage.toFixed(2)}%)
           </>
         }
@@ -36,7 +37,7 @@ export function LobbyMetrics({
         trigger={
           <Flex direction="col" gap="2" className="min-w-20">
             <SmallText>CPU</SmallText>
-            <Progress className="h-2" value={cpu[cpu.length - 1] * 100} />
+            <Progress className="h-2" value={cpu[cpu.length - 1]} />
           </Flex>
         }
         content={<>{cpuPercentage.toFixed(2)}%</>}

diff --git a/apps/hub/src/domains/game/components/game-matchmaker/lobby-stats.tsx b/apps/hub/src/domains/game/components/game-matchmaker/lobby-stats.tsx
@@ -27,22 +27,28 @@ export function LobbyStats({
     <ScrollArea className=" h-full w-full overflow-auto  p-4">
       <div className="grid grid-cols-1 gap-4 @3xl:grid-cols-2 gap-y-8 ">
         <div>
-          <p className="mb-4 font-bold">Memory Usage</p>
+          <p className="mb-4 font-bold ml-5">Memory Usage</p>
           <LobbyMemoryStats
             memory={memory}
             metricsAt={metricsAt}
             allocatedMemory={allocatedMemory}
             syncId={syncId}
           />
-          <Flex items="center" justify="center" py="4" gap="4">
-            <Progress value={memoryPercentage} />
+          <Flex
+            items="center"
+            justify="center"
+            py="4"
+            gap="4"
+            className="ml-16"
+          >
+            <Progress value={memoryPercentage} className="h-2" />
             <Flex direction="col" gap="2">
               <Strong className="tabular-nums">
                 {memoryPercentage.toFixed(2)}%
               </Strong>
             </Flex>
           </Flex>
-          <p>
+          <p className="ml-16">
             <Strong className="tabular-nums">
               {filesize(memory[memory.length - 1])}
             </Strong>{" "}
@@ -54,11 +60,17 @@ export function LobbyStats({
           </p>
         </div>
         <div>
-          <p className="mb-4 font-bold">CPU Usage</p>
+          <p className="mb-4 font-bold ml-5">CPU Usage</p>
           <LobbyCPUStats cpu={cpu} metricsAt={metricsAt} syncId={syncId} />
 
-          <Flex items="center" justify="center" py="4" gap="4">
-            <Progress value={cpuPercentage} />
+          <Flex
+            items="center"
+            justify="center"
+            py="4"
+            gap="4"
+            className="ml-16"
+          >
+            <Progress value={cpuPercentage} className="h-2" />
             <Flex direction="col" gap="2">
               <Strong className="tabular-nums">
                 {cpuPercentage.toFixed(2)}%

diff --git a/packages/components/src/ui/chart.tsx b/packages/components/src/ui/chart.tsx
@@ -145,7 +145,6 @@ const ChartTooltipContent = React.forwardRef<
       const key = `${labelKey || item.dataKey || item.name || "value"}`;
 
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      console.log({ config, item, key }, itemConfig);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label