From 13fd1a9fc0df1081c38f3ba0d034f42ceb4679bf Mon Sep 17 00:00:00 2001 From: ajnart Date: Mon, 23 May 2022 09:57:49 +0200 Subject: [PATCH 1/5] :sparkles: System-info WIP --- src/components/layout/Aside.tsx | 3 +- src/components/modules/index.ts | 1 + .../modules/system/SystemModule.tsx | 46 +++++++++++++++++++ src/components/modules/system/index.ts | 1 + src/pages/api/modules/systeminfo.ts | 30 ++++++++++++ 5 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/components/modules/system/SystemModule.tsx create mode 100644 src/components/modules/system/index.ts create mode 100644 src/pages/api/modules/systeminfo.ts diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx index 36aad4bbd..c856a4e31 100644 --- a/src/components/layout/Aside.tsx +++ b/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) { + ); diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts index 410bf3b56..f7396ed66 100644 --- a/src/components/modules/index.ts +++ b/src/components/modules/index.ts @@ -4,3 +4,4 @@ export * from './search'; export * from './ping'; export * from './weather'; export * from './downloads'; +export * from './system'; diff --git a/src/components/modules/system/SystemModule.tsx b/src/components/modules/system/SystemModule.tsx new file mode 100644 index 000000000..bcbc179f8 --- /dev/null +++ b/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(); + // 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 ( +
+ + Current CPU load + {`${data?.load?.currentLoad.toFixed(2)}%`}
} + thickness={12} + roundCaps + sections={[{ value: data?.load?.currentLoad ?? 0, color: 'cyan' }]} + /> + + + ); +} diff --git a/src/components/modules/system/index.ts b/src/components/modules/system/index.ts new file mode 100644 index 000000000..75d1a257e --- /dev/null +++ b/src/components/modules/system/index.ts @@ -0,0 +1 @@ +export { SystemModule } from './SystemModule'; diff --git a/src/pages/api/modules/systeminfo.ts b/src/pages/api/modules/systeminfo.ts new file mode 100644 index 000000000..2e4537e32 --- /dev/null +++ b/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', + }); +}; From 8da0b38662a664d2168c7044e3c5209decce40c9 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 31 May 2022 19:59:31 +0200 Subject: [PATCH 2/5] :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" From 64b1679b03de39b912b642122f432f0b2de29e94 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 31 May 2022 20:22:53 +0200 Subject: [PATCH 3/5] :bug: Fixing bugs in system info --- src/components/modules/system/SystemModule.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/modules/system/SystemModule.tsx b/src/components/modules/system/SystemModule.tsx index 7fe016d6e..060d89482 100644 --- a/src/components/modules/system/SystemModule.tsx +++ b/src/components/modules/system/SystemModule.tsx @@ -40,23 +40,22 @@ export default function SystemInfo(args: any) { }, 1000); }, [args]); - // Update data every time data changes + // Update data every time data changes const [cpuLoadHistory, cpuLoadHistoryHandlers] = useListState([]); - // useEffect(() => { - - // }, [data]); + // useEffect(() => { + + // }, [data]); const theme = useMantineTheme(); const currentLoad = data?.load?.currentLoad ?? 0; - return (
Current CPU load - { @@ -108,7 +107,7 @@ export default function SystemInfo(args: any) { // Green theme.colors.green[5], ]} - /> + /> */} {`${(currentLoad * 100).toFixed(2)}%`}
} From de3792fb6bb8bd31d8b5985f22e49ae0bc516ffe Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Wed, 1 Jun 2022 11:08:27 +0200 Subject: [PATCH 4/5] :bug: Fixing a bug related to imports --- src/components/modules/system/SystemModule.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modules/system/SystemModule.tsx b/src/components/modules/system/SystemModule.tsx index 060d89482..414098fad 100644 --- a/src/components/modules/system/SystemModule.tsx +++ b/src/components/modules/system/SystemModule.tsx @@ -8,7 +8,7 @@ import { Title, useMantineTheme, } from '@mantine/core'; -import { Cpu } from 'tabler-icons-react'; +import { IconCpu } from '@tabler/icons'; import { useEffect, useState } from 'react'; import axios from 'axios'; import si from 'systeminformation'; @@ -19,7 +19,7 @@ import { useListState } from '@mantine/hooks'; export const SystemModule: IModule = { title: 'System info', description: 'Show the current CPU usage and memory usage', - icon: Cpu, + icon: IconCpu, component: SystemInfo, }; From 25fa376c2d9c5605926960f73dc0a2065300e942 Mon Sep 17 00:00:00 2001 From: ajnart Date: Fri, 3 Jun 2022 13:53:52 +0200 Subject: [PATCH 5/5] :sparkles: Update display for current CPU --- src/components/layout/Aside.tsx | 10 ++- .../modules/downloads/DownloadsModule.tsx | 11 +-- .../modules/system/SystemModule.tsx | 67 ++----------------- 3 files changed, 14 insertions(+), 74 deletions(-) diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx index c856a4e31..9154fea10 100644 --- a/src/components/layout/Aside.tsx +++ b/src/components/layout/Aside.tsx @@ -1,5 +1,11 @@ import { Aside as MantineAside, Group } from '@mantine/core'; -import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule, SystemModule } from '../modules'; +import { + WeatherModule, + DateModule, + CalendarModule, + TotalDownloadsModule, + SystemModule, +} from '../modules'; import { ModuleWrapper } from '../modules/moduleWrapper'; export default function Aside(props: any) { @@ -15,7 +21,7 @@ export default function Aside(props: any) { base: 'auto', }} > - + diff --git a/src/components/modules/downloads/DownloadsModule.tsx b/src/components/modules/downloads/DownloadsModule.tsx index f8f55fd26..3f440b905 100644 --- a/src/components/modules/downloads/DownloadsModule.tsx +++ b/src/components/modules/downloads/DownloadsModule.tsx @@ -1,13 +1,4 @@ -import { - Table, - Text, - Tooltip, - Title, - Group, - Progress, - Skeleton, - ScrollArea, -} from '@mantine/core'; +import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core'; import { IconDownload as Download } from '@tabler/icons'; import { useEffect, useState } from 'react'; import axios from 'axios'; diff --git a/src/components/modules/system/SystemModule.tsx b/src/components/modules/system/SystemModule.tsx index 414098fad..2b84357f2 100644 --- a/src/components/modules/system/SystemModule.tsx +++ b/src/components/modules/system/SystemModule.tsx @@ -1,10 +1,7 @@ import { - Card, Center, - ColorSwatch, Group, RingProgress, - Text, Title, useMantineTheme, } from '@mantine/core'; @@ -12,9 +9,8 @@ import { IconCpu } from '@tabler/icons'; 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'; +import { IModule } from '../modules'; export const SystemModule: IModule = { title: 'System info', @@ -55,65 +51,12 @@ export default function SystemInfo(args: any) {
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], - ]} - /> */} {`${(currentLoad * 100).toFixed(2)}%`}
} - thickness={12} + size={150} + label={
{`${currentLoad.toFixed(2)}%`}
} + thickness={15} roundCaps - sections={[{ value: data?.load?.currentLoad ?? 0, color: 'cyan' }]} + sections={[{ value: currentLoad ?? 0, color: 'cyan' }]} />