feat/change metrics components

src-tauri/src/commands.rs

@@ -181,7 +181,7 @@ pub fn delete_file(path: String) -> Result<(), String> {
 }
 
 #[tauri::command]
-pub fn add_pachtop_exclusion(window: tauri::Window) -> Result<(), String> {
+pub fn add_pachtop_exclusion(_: tauri::Window) -> Result<(), String> {
     #[cfg(target_os = "windows")]
     {
         let shell = window.app_handle().shell();

src-tauri/src/metrics.rs

@@ -1,6 +1,7 @@
 use crate::models::*;
 use crate::utils::{current_time, get_percentage};
 use base64::prelude::*;
+use chrono::prelude::*;
 use std::cmp::Ordering;
 use std::collections::HashMap;
 use std::str::{self};
@@ -29,13 +30,21 @@ impl SystemInformationTrait for Metrics {
         let hostname = System::host_name().unwrap_or("Unknown".to_string());
         let core_count = System::physical_core_count(&self.sys).unwrap_or(0);
         let os = System::long_os_version().unwrap_or("Unknown".to_string());
+        let uptime = Utc
+            .timestamp(System::uptime() as i64, 0)
+            .format("%H:%M:%S")
+            .to_string();
+
+        let arch = System::cpu_arch().unwrap_or("Unknown".to_string());
 
         SysInfo {
             kernel_version,
             os,
             os_version,
             hostname,
             core_count,
+            uptime,
+            arch,
         }
     }
 }

src-tauri/src/models.rs

@@ -89,6 +89,8 @@ pub struct SysInfo {
     pub hostname: String,
     #[ts(type = "number")]
     pub core_count: usize,
+    pub uptime: String,
+    pub arch: String,
 }
 
 pub trait SystemInformationTrait {

src/components/dashboard-section-divider.tsx

@@ -0,0 +1,25 @@
+import { Divider, Grid, Text } from '@mantine/core';
+
+interface DashboardSectionsDividerProps {
+  label: string;
+}
+const DashboardSectionsDivider = ({ label }: DashboardSectionsDividerProps) => {
+  return (
+    <>
+      <Grid.Col span={12}>
+        <Divider
+          my="xs"
+          label={
+            <>
+              <Text c="dimmed" size="sm" tt="uppercase" weight={700}>
+                {label}
+              </Text>
+            </>
+          }
+        />
+      </Grid.Col>
+    </>
+  );
+};
+
+export default DashboardSectionsDivider;

src/components/system-information-widget.tsx

@@ -1,12 +1,12 @@
-import { useShallow } from "zustand/react/shallow";
+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 formatBytes from "@/features/metrics/utils/format-bytes";
-import { Grid, Group, Text, Title } from "@mantine/core";
+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 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));
@@ -17,44 +17,57 @@ const SystemInformationWidget: React.FC = () => {
 
   return (
     <Card height="">
-      <Grid>
-        <Grid.Col md={2} sm={6}>
+      <Grid align="center" justify="center">
+        <Grid.Col md={1.5} 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}>
+        <Grid.Col md={1.5} 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}>
+        <Grid.Col md={1.5} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            Arch
+          </Text>
+          <Text size={"sm"}>{info.arch}</Text>
+        </Grid.Col>
+        <Grid.Col md={1.5} 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}>
+        <Grid.Col md={1.5} 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}>
+        <Grid.Col md={1.5} 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}>
+        <Grid.Col md={1.5} sm={6}>
           <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
             Swap
           </Text>
           <Text size={"sm"}>{formatBytes(swap)}</Text>
         </Grid.Col>
+
+        <Grid.Col md={1.5} sm={6}>
+          <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+            Uptime
+          </Text>
+          <Text size={"sm"}>{info.uptime}</Text>
+        </Grid.Col>
       </Grid>
     </Card>
   );

src/features/metrics/pages/dashboard.page.tsx

@@ -1,5 +1,6 @@
 import { useShallow } from 'zustand/react/shallow';
 
+import DashboardSectionsDivider from '@/components/dashboard-section-divider';
 import PageWrapper from '@/components/page-wrapper';
 import SystemInformationWidget from '@/components/system-information-widget';
 import CpusBarChart from '@/features/metrics/components/cpus/cpus.bar-charts';
@@ -16,26 +17,7 @@ import SwapStatsRing from '@/features/metrics/components/swap/swap.stats-ring';
 import useDisksSelectors from '@/features/metrics/stores/disk.store';
 import useSystemStoreSelectors from '@/features/metrics/stores/system.store';
 import useRandomGreeting from '@/hooks/useRandomGreeting';
-import { Divider, Grid, Text } from '@mantine/core';
-
-// const StatsRings = () => {
-//   return (
-//     <>
-//       <Grid.Col sm={6} md={6} lg={3} xl={3}>
-//         <GlobalCpuStatsRing />
-//       </Grid.Col>
-//       <Grid.Col sm={6} md={6} lg={3} xl={3}>
-//         <MemoryStatsRing />
-//       </Grid.Col>
-//       <Grid.Col sm={6} md={6} lg={3} xl={3}>
-//         <SwapStatsRing />
-//       </Grid.Col>
-//       <Grid.Col sm={6} md={6} lg={3} xl={3}>
-//         <DiskStatsRing />
-//       </Grid.Col>
-//     </>
-//   );
-// };
+import { Box, Center, Divider, Grid, Text } from '@mantine/core';
 
 const MemorySection = () => {
   return (
@@ -79,6 +61,10 @@ const NetworksSection = () => {
 const DiskSection = () => {
   const disks = useDisksSelectors.use.disks();
 
+  if (disks.length === 0) {
+    return <DashboardNoDataAvailable message="No disk data available" />;
+  }
+
   return (
     <>
       {disks.map((disk) => (
@@ -90,25 +76,24 @@ const DiskSection = () => {
   );
 };
 
-interface DashboardSectionsDividerProps {
-  label: string;
+const TempsSection = () => {
+  const temps = [];
+
+  if (temps.length === 0) {
+    return <DashboardNoDataAvailable message="No temperature data available" />;
+  }
+};
+
+interface DashboardNoDataAvailableProps {
+  message: string;
 }
-const DashboardSectionsDivider = ({ label }: DashboardSectionsDividerProps) => {
+const DashboardNoDataAvailable = ({ message }: DashboardNoDataAvailableProps) => {
   return (
-    <>
-      <Grid.Col span={12}>
-        <Divider
-          my="xs"
-          label={
-            <>
-              <Text c="dimmed" size="sm" tt="uppercase" weight={700}>
-                {label}
-              </Text>
-            </>
-          }
-        />
-      </Grid.Col>
-    </>
+    <Center maw={400} h={190} mx="auto">
+      <Text c="dimmed" size="sm" tt="uppercase" fw={700}>
+        {message}
+      </Text>
+    </Center>
   );
 };
 
@@ -126,8 +111,9 @@ const DashboardPage = () => {
         <MemorySection />
         <DashboardSectionsDivider label="Disks" />
         <DiskSection />
-        <DashboardSectionsDivider label="Networks" />
-        <NetworksSection />
+        <DashboardSectionsDivider label="Temps" />
+        <TempsSection />
+        {/* <NetworksSection /> */}
       </Grid>
     </PageWrapper>
   );

src/lib/bindings/SysInfo.ts

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type SysInfo = { kernelVersion: string, os: string, osVersion: string, hostname: string, coreCount: number, };
+export type SysInfo = { kernelVersion: string, os: string, osVersion: string, hostname: string, coreCount: number, uptime: string, arch: string, };