From 8da0b38662a664d2168c7044e3c5209decce40c9 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 31 May 2022 19:59:31 +0200 Subject: [PATCH] :zap: Working on system info --- package.json | 1 + .../modules/calendar/CalendarModule.tsx | 2 +- .../MediaDisplay.story.tsx | 0 .../{calendar => common}/MediaDisplay.tsx | 2 +- src/components/modules/common/index.ts | 1 + .../modules/system/SystemModule.tsx | 88 +++++++++++++++++-- yarn.lock | 11 +++ 7 files changed, 97 insertions(+), 8 deletions(-) rename src/components/modules/{calendar => common}/MediaDisplay.story.tsx (100%) rename src/components/modules/{calendar => common}/MediaDisplay.tsx (98%) create mode 100644 src/components/modules/common/index.ts diff --git a/package.json b/package.json index dd8eef488..94be675e0 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "prism-react-renderer": "^1.3.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "systeminformation": "^5.11.16", "uuid": "^8.3.2" }, "devDependencies": { diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index 627d73e8b..058a81e7d 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/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 = { diff --git a/src/components/modules/calendar/MediaDisplay.story.tsx b/src/components/modules/common/MediaDisplay.story.tsx similarity index 100% rename from src/components/modules/calendar/MediaDisplay.story.tsx rename to src/components/modules/common/MediaDisplay.story.tsx diff --git a/src/components/modules/calendar/MediaDisplay.tsx b/src/components/modules/common/MediaDisplay.tsx similarity index 98% rename from src/components/modules/calendar/MediaDisplay.tsx rename to src/components/modules/common/MediaDisplay.tsx index 5c27801bc..d8d945d67 100644 --- a/src/components/modules/calendar/MediaDisplay.tsx +++ b/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 ( diff --git a/src/components/modules/common/index.ts b/src/components/modules/common/index.ts new file mode 100644 index 000000000..7b64171d2 --- /dev/null +++ b/src/components/modules/common/index.ts @@ -0,0 +1 @@ +export * from './MediaDisplay'; diff --git a/src/components/modules/system/SystemModule.tsx b/src/components/modules/system/SystemModule.tsx index bcbc179f8..7fe016d6e 100644 --- a/src/components/modules/system/SystemModule.tsx +++ b/src/components/modules/system/SystemModule.tsx @@ -1,9 +1,20 @@ -import { Center, Group, RingProgress, Title } from '@mantine/core'; +import { + Card, + Center, + ColorSwatch, + Group, + RingProgress, + Text, + Title, + useMantineTheme, +} from '@mantine/core'; import { Cpu } from 'tabler-icons-react'; import { useEffect, useState } from 'react'; import axios from 'axios'; import si from 'systeminformation'; +import { ResponsiveLine } from '@nivo/line'; import { IModule } from '../modules'; +import { useListState } from '@mantine/hooks'; export const SystemModule: IModule = { title: 'System info', @@ -21,21 +32,86 @@ interface ApiResponse { export default function SystemInfo(args: any) { const [data, setData] = useState(); - // Refresh data every 5 seconds + + // Refresh data every second useEffect(() => { - axios.get('/api/modules/systeminfo').then((res) => setData(res.data)); setInterval(() => { axios.get('/api/modules/systeminfo').then((res) => setData(res.data)); - }, 3 * 1000); - }, []); + }, 1000); + }, [args]); + + // Update data every time data changes + const [cpuLoadHistory, cpuLoadHistoryHandlers] = + useListState([]); + + // useEffect(() => { + + // }, [data]); + + const theme = useMantineTheme(); + const currentLoad = data?.load?.currentLoad ?? 0; + return (
Current CPU load + { + const Download = slice.points[0].data.y as number; + const Upload = slice.points[1].data.y as number; + // Get the number of seconds since the last update. + const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000; + // Round to the nearest second. + const roundedSeconds = Math.round(seconds); + return ( + + {roundedSeconds} seconds ago + + + + + CPU: {currentLoad} + + + + + ); + }} + data={[ + { + id: 'downloads', + data: chartDataUp, + }, + ]} + curve="monotoneX" + yFormat=" >-.2f" + axisTop={null} + axisRight={null} + enablePoints={false} + animate={false} + enableGridX={false} + enableGridY={false} + enableArea + defs={[ + linearGradientDef('gradientA', [ + { offset: 0, color: 'inherit' }, + { offset: 100, color: 'inherit', opacity: 0 }, + ]), + ]} + fill={[{ match: '*', id: 'gradientA' }]} + colors={[ + // Blue + theme.colors.blue[5], + // Green + theme.colors.green[5], + ]} + /> {`${data?.load?.currentLoad.toFixed(2)}%`}
} + label={
{`${(currentLoad * 100).toFixed(2)}%`}
} thickness={12} roundCaps sections={[{ value: data?.load?.currentLoad ?? 0, color: 'cyan' }]} diff --git a/yarn.lock b/yarn.lock index 0512feee1..c2d5107a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9444,6 +9444,7 @@ __metadata: react: ^17.0.1 react-dom: ^17.0.1 require-from-string: ^2.0.2 + systeminformation: ^5.11.16 typescript: 4.6.4 uuid: ^8.3.2 languageName: unknown @@ -15069,6 +15070,16 @@ __metadata: languageName: node linkType: hard +"systeminformation@npm:^5.11.16": + version: 5.11.16 + resolution: "systeminformation@npm:5.11.16" + bin: + systeminformation: lib/cli.js + checksum: 4e4fb4c9c86c658c7e07a7661ac85a102bfb0a134f76cc5c5e7daf7ba13f9b43895d4ce4d80e55275a3395d254d20a84c53f036f1baececf5b94028ec93242c4 + conditions: (os=darwin | os=linux | os=win32 | os=freebsd | os=openbsd | os=netbsd | os=sunos | os=android) + languageName: node + linkType: hard + "tapable@npm:^1.0.0, tapable@npm:^1.1.3": version: 1.1.3 resolution: "tapable@npm:1.1.3"