Put metrics graphs in 2 columns

pluralsh · Feb 9, 2023 · b650bff · b650bff
1 parent 6035940
commit b650bff
Showing 1 changed file with 30 additions and 20 deletions.
diff --git a/assets/src/components/apps/app/components/component/ComponentMetrics.tsx b/assets/src/components/apps/app/components/component/ComponentMetrics.tsx
@@ -19,30 +19,35 @@ function Graphs({ cpu: [cpu], mem: [mem] }) {
     { cpuValues: convertVals(cpu.values), memValues: convertVals(mem.values) }), [cpu, mem])
 
   return (
-    <>
-      <Div
-        height={280}
-        marginVertical="large"
+    <Flex
+      gap="large"
+      grow={1}
+      height={320}
+      padding="large"
+    >
+      <Flex
+        direction="column"
+        grow={1}
       >
         <GraphHeader title="Overall CPU Usage" />
         <Graph
           data={[{ id: 'cpu', data: cpuValues }]}
           yFormat={undefined}
           tickRotation={undefined}
         />
-      </Div>
-      <Div
-        height={280}
-        marginVertical="large"
+      </Flex>
+      <Flex
+        direction="column"
+        grow={1}
       >
         <GraphHeader title="Overall Memory Usage" />
         <Graph
           data={[{ id: 'memory', data: memValues }]}
           yFormat={filesize}
           tickRotation={undefined}
         />
-      </Div>
-    </>
+      </Flex>
+    </Flex>
   )
 }
 
@@ -55,30 +60,35 @@ function PodGraphs({ cpu, mem }) {
   }, [cpu, mem])
 
   return (
-    <>
-      <Div
-        height={280}
-        marginVertical="large"
+    <Flex
+      gap="large"
+      grow={1}
+      height={320}
+      padding="large"
+    >
+      <Flex
+        direction="column"
+        grow={1}
       >
         <GraphHeader title="Pod CPU Usage" />
         <Graph
           data={cpuGraph}
           yFormat={undefined}
           tickRotation={undefined}
         />
-      </Div>
-      <Div
-        height={280}
-        marginVertical="large"
+      </Flex>
+      <Flex
+        direction="column"
+        grow={1}
       >
         <GraphHeader title="Pod Memory Usage" />
         <Graph
           data={memGraph}
           yFormat={filesize}
           tickRotation={undefined}
         />
-      </Div>
-    </>
+      </Flex>
+    </Flex>
   )
 }