Merge pull request #170 from ajnart/system-info

System info

src/components/modules/calendar/CalendarModule.tsx

@@ -11,7 +11,7 @@ import {
   RadarrMediaDisplay,
   LidarrMediaDisplay,
   ReadarrMediaDisplay,
-} from './MediaDisplay';
+} from '../common';
 import { serviceItem } from '../../../tools/types';
 
 export const CalendarModule: IModule = {

src/components/modules/common/MediaDisplay.tsx

@@ -14,7 +14,7 @@ export interface IMedia {
   episodeNumber?: number;
 }
 
-function MediaDisplay(props: { media: IMedia }) {
+export function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group position="apart">

src/components/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './MediaDisplay';

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,64 @@
+import {
+  Center,
+  Group,
+  RingProgress,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconCpu } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import si from 'systeminformation';
+import { useListState } from '@mantine/hooks';
+import { IModule } from '../modules';
+
+export const SystemModule: IModule = {
+  title: 'System info',
+  description: 'Show the current CPU usage and memory usage',
+  icon: IconCpu,
+  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 second
+  useEffect(() => {
+    setInterval(() => {
+      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    }, 1000);
+  }, [args]);
+
+  // Update data every time data changes
+  const [cpuLoadHistory, cpuLoadHistoryHandlers] =
+    useListState<si.Systeminformation.CurrentLoadData>([]);
+
+  // useEffect(() => {
+
+  // }, [data]);
+
+  const theme = useMantineTheme();
+  const currentLoad = data?.load?.currentLoad ?? 0;
+
+  return (
+    <Center>
+      <Group p="sm" direction="column" align="center">
+        <Title order={3}>Current CPU load</Title>
+        <RingProgress
+          size={150}
+          label={<Center>{`${currentLoad.toFixed(2)}%`}</Center>}
+          thickness={15}
+          roundCaps
+          sections={[{ value: currentLoad ?? 0, color: 'cyan' }]}
+        />
+      </Group>
+    </Center>
+  );
+}

src/components/modules/system/index.ts

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