✨ System-info WIP

src/components/layout/Aside.tsx

@@ -1,5 +1,5 @@
 import { Aside as MantineAside, Group } from '@mantine/core';
-import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule } from '../modules';
+import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule, SystemModule } from '../modules';
 import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Aside(props: any) {
@@ -20,6 +20,7 @@ export default function Aside(props: any) {
         <ModuleWrapper module={TotalDownloadsModule} />
         <ModuleWrapper module={WeatherModule} />
         <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={SystemModule} />
       </Group>
     </MantineAside>
   );

src/components/modules/index.ts

@@ -4,3 +4,4 @@ export * from './search';
 export * from './ping';
 export * from './weather';
 export * from './downloads';
+export * from './system';

src/components/modules/system/SystemModule.tsx

@@ -0,0 +1,46 @@
+import { Center, Group, RingProgress, Title } from '@mantine/core';
+import { Cpu } from 'tabler-icons-react';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import si from 'systeminformation';
+import { IModule } from '../modules';
+
+export const SystemModule: IModule = {
+  title: 'System info',
+  description: 'Show the current CPU usage and memory usage',
+  icon: Cpu,
+  component: SystemInfo,
+};
+
+interface ApiResponse {
+  cpu: si.Systeminformation.CpuData;
+  os: si.Systeminformation.OsData;
+  memory: si.Systeminformation.MemData;
+  load: si.Systeminformation.CurrentLoadData;
+}
+
+export default function SystemInfo(args: any) {
+  const [data, setData] = useState<ApiResponse>();
+  // Refresh data every 5 seconds
+  useEffect(() => {
+    axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    setInterval(() => {
+      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    }, 3 * 1000);
+  }, []);
+
+  return (
+    <Center>
+      <Group p="sm" direction="column" align="center">
+        <Title order={3}>Current CPU load</Title>
+        <RingProgress
+          size={120}
+          label={<Center>{`${data?.load?.currentLoad.toFixed(2)}%`}</Center>}
+          thickness={12}
+          roundCaps
+          sections={[{ value: data?.load?.currentLoad ?? 0, color: 'cyan' }]}
+        />
+      </Group>
+    </Center>
+  );
+}

src/components/modules/system/index.ts

@@ -0,0 +1 @@
+export { SystemModule } from './SystemModule';

src/pages/api/modules/systeminfo.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import si from 'systeminformation';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  const [osInfo, cpuInfo, memInfo, cpuLoad] = await Promise.all([
+    si.osInfo(),
+    si.cpu(),
+    si.mem(),
+    si.currentLoad(),
+  ]);
+
+  const sysinfo = {
+    cpu: cpuInfo,
+    os: osInfo,
+    mem: memInfo,
+    load: cpuLoad,
+  };
+  res.status(200).json(sysinfo);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};