feat: Add memory and swap information to system widget

pacholoamit · Oct 13, 2024 · 9ba2e08 · 9ba2e08
1 parent 83e78a6
commit 9ba2e08
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/src/components/system-information-widget.tsx b/src/components/system-information-widget.tsx
@@ -1,20 +1,62 @@
 import { useShallow } from "zustand/react/shallow";
 
+import Card from "@/components/card";
 import useGlobalCpuSelectors from "@/features/metrics/stores/global-cpu.store";
+import useMemorySelectors from "@/features/metrics/stores/memory.store";
+import useSwapSelectors from "@/features/metrics/stores/swap.store";
 import useSystemStoreSelectors from "@/features/metrics/stores/system.store";
-import { Group, Title } from "@mantine/core";
+import formatBytes from "@/features/metrics/utils/format-bytes";
+import { Grid, Group, Text, Title } from "@mantine/core";
 
 const SystemInformationWidget: React.FC = () => {
   const info = useSystemStoreSelectors(useShallow((state) => state.info));
   const cpuBrand = useGlobalCpuSelectors(useShallow((state) => state.latest.brand));
 
+  const memory = useMemorySelectors.use.latest().total;
+  const swap = useSwapSelectors.use.latest().total;
+
   return (
-    <Group>
-      <Title order={6}>CPU: {cpuBrand}</Title>
-      <Title order={6}>CPU cores: {info.coreCount}</Title>
-      <Title order={6}>OS: {info.os}</Title>
-      <Title order={6}>Kernel: {info.kernelVersion}</Title>
-    </Group>
+    <Card height="">
+      <Grid>
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            CPU
+          </Text>
+          <Text size={"sm"}>{cpuBrand}</Text>
+        </Grid.Col>
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            OS
+          </Text>
+          <Text size={"sm"}>{info.os}</Text>
+        </Grid.Col>
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            CPU cores
+          </Text>
+          <Text size={"sm"}>{info.coreCount}</Text>
+        </Grid.Col>
+
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            Kernel
+          </Text>
+          <Text size={"sm"}>{info.kernelVersion}</Text>
+        </Grid.Col>
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            Memory
+          </Text>
+          <Text size={"sm"}>{formatBytes(memory)}</Text>
+        </Grid.Col>
+        <Grid.Col md={2} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            Swap
+          </Text>
+          <Text size={"sm"}>{formatBytes(swap)}</Text>
+        </Grid.Col>
+      </Grid>
+    </Card>
   );
 };
 

diff --git a/src/features/metrics/pages/dashboard.page.tsx b/src/features/metrics/pages/dashboard.page.tsx
@@ -64,10 +64,10 @@ const CpuSection = () => {
 const NetworksSection = () => {
   return (
     <>
-      <Grid.Col md={6} sm={12}>
+      <Grid.Col md={6} sm={12} offset={6}>
         <NetworksReceivedAreaChart />
       </Grid.Col>
-      <Grid.Col md={6} sm={12}>
+      <Grid.Col md={6} sm={12} offset={6}>
         <NetworksTransmittedAreaChart />
       </Grid.Col>
     </>
@@ -92,9 +92,12 @@ const DashboardPage = () => {
   const hostname = useSystemStoreSelectors(useShallow((state) => state.info.hostname));
   const greeting = useRandomGreeting(hostname);
   return (
-    <PageWrapper name={greeting} widget={<SystemInformationWidget />}>
+    <PageWrapper name={greeting}>
       <Grid gutter="sm">
-        <StatsRings />
+        <Grid.Col span={12}>
+          <SystemInformationWidget />
+        </Grid.Col>
+        {/* <StatsRings /> */}
         <CpuSection />
         <MemorySection />
         <DiskSection />