lone-cloud/gerbil
0
0
Fork 0
mirror of https://github.com/lone-cloud/gerbil synced 2026-06-04 04:04:44 -07:00
Code Issues Projects Releases Packages Wiki Activity

minor adjustments

Browse source
This commit is contained in:
Egor 2025-09-10 17:45:44 -07:00
parent cc636250da
commit 6de8417b5d
2 changed files with 33 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/StatusBar.tsx
View file

@ -6,7 +6,6 @@ import {
Tooltip, Tooltip,
Badge, Badge,
Group, Group,
useMantineTheme,
useComputedColorScheme, useComputedColorScheme,
} from '@mantine/core'; } from '@mantine/core';
import { Settings } from 'lucide-react'; import { Settings } from 'lucide-react';
@ -38,7 +37,6 @@ export const StatusBar = ({
); );
const [gpuMetrics, setGpuMetrics] = useState<GpuMetrics | null>(null); const [gpuMetrics, setGpuMetrics] = useState<GpuMetrics | null>(null);
const [settingsModalOpen, setSettingsModalOpen] = useState(false); const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const theme = useMantineTheme();
const colorScheme = useComputedColorScheme('light', { const colorScheme = useComputedColorScheme('light', {
getInitialValueInEffect: true, getInitialValueInEffect: true,
}); });
@ -75,15 +73,10 @@ export const StatusBar = ({
}; };
}, [maxDataPoints]); }, [maxDataPoints]);
if (!cpuMetrics || !memoryMetrics) {
return null;
}
return ( return (
<Box <Box
px="xs" px="xs"
style={{ style={{
borderTop: `1px solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,
backgroundColor: backgroundColor:
colorScheme === 'dark' colorScheme === 'dark'
? 'var(--mantine-color-dark-8)' ? 'var(--mantine-color-dark-8)'
@ -91,32 +84,36 @@ export const StatusBar = ({
}} }}
> >
<Flex align="center" justify="space-between"> <Flex align="center" justify="space-between">
<Group gap="xs" wrap="nowrap"> <Group gap="xs">
<Tooltip label={`${cpuMetrics.usage.toFixed(1)}%`} position="top"> {cpuMetrics && memoryMetrics && (
<Badge <>
size="sm" <Tooltip label={`${cpuMetrics.usage.toFixed(1)}%`} position="top">
variant="light" <Badge
style={{ minWidth: '5rem', textAlign: 'center' }} size="sm"
> variant="light"
CPU: {cpuMetrics.usage.toFixed(1)}% style={{ minWidth: '5rem', textAlign: 'center' }}
</Badge> >
</Tooltip> CPU: {cpuMetrics.usage.toFixed(1)}%
</Badge>
</Tooltip>
<Tooltip <Tooltip
label={`${memoryMetrics.used.toFixed(1)} GB / ${memoryMetrics.total.toFixed(1)} GB (${memoryMetrics.usage.toFixed(1)}%)`} label={`${memoryMetrics.used.toFixed(1)} GB / ${memoryMetrics.total.toFixed(1)} GB (${memoryMetrics.usage.toFixed(1)}%)`}
position="top" position="top"
> >
<Badge <Badge
size="sm" size="sm"
variant="light" variant="light"
style={{ minWidth: '5rem', textAlign: 'center' }} style={{ minWidth: '5rem', textAlign: 'center' }}
> >
RAM: {memoryMetrics.usage.toFixed(1)}% RAM: {memoryMetrics.usage.toFixed(1)}%
</Badge> </Badge>
</Tooltip> </Tooltip>
</>
)}
{gpuMetrics?.gpus.map((gpu, index) => ( {gpuMetrics?.gpus.map((gpu, index) => (
<Group key={`gpu-${index}`} gap={4} wrap="nowrap"> <Group gap="xs" key={`gpu-${index}`}>
<Tooltip label={`${gpu.usage.toFixed(1)}%`} position="top"> <Tooltip label={`${gpu.usage.toFixed(1)}%`} position="top">
<Badge <Badge
size="sm" size="sm"

14
src/main/modules/monitoring.ts
View file

@ -45,9 +45,7 @@ let cpuInterval: ReturnType<typeof setInterval> | null = null;
let memoryInterval: ReturnType<typeof setInterval> | null = null; let memoryInterval: ReturnType<typeof setInterval> | null = null;
let gpuInterval: ReturnType<typeof setInterval> | null = null; let gpuInterval: ReturnType<typeof setInterval> | null = null;
let isRunning = false; let isRunning = false;
const cpuUpdateFrequency = 1000; const updateFrequency = 2000;
const memoryUpdateFrequency = 1000;
const gpuUpdateFrequency = 2000;
let mainWindow: BrowserWindow | null = null; let mainWindow: BrowserWindow | null = null;
export function startMonitoring(window: BrowserWindow) { export function startMonitoring(window: BrowserWindow) {
@ -59,17 +57,17 @@ export function startMonitoring(window: BrowserWindow) {
collectAndSendCpuMetrics(); collectAndSendCpuMetrics();
cpuInterval = setInterval(() => { cpuInterval = setInterval(() => {
collectAndSendCpuMetrics(); collectAndSendCpuMetrics();
}, cpuUpdateFrequency); }, updateFrequency);
collectAndSendMemoryMetrics(); collectAndSendMemoryMetrics();
memoryInterval = setInterval(() => { memoryInterval = setInterval(() => {
collectAndSendMemoryMetrics(); collectAndSendMemoryMetrics();
}, memoryUpdateFrequency); }, updateFrequency);
collectAndSendGpuMetrics(); collectAndSendGpuMetrics();
gpuInterval = setInterval(() => { gpuInterval = setInterval(() => {
collectAndSendGpuMetrics(); collectAndSendGpuMetrics();
}, gpuUpdateFrequency); }, updateFrequency);
} }
export function stopMonitoring() { export function stopMonitoring() {
@ -109,8 +107,8 @@ async function collectAndSendMemoryMetrics() {
const usedBytes = memData.active || memData.used; const usedBytes = memData.active || memData.used;
const totalBytes = memData.total; const totalBytes = memData.total;
const metrics: MemoryMetrics = { const metrics: MemoryMetrics = {
used: Math.round(usedBytes / (1024 * 1024 * 1024) * 10) / 10, used: Math.round((usedBytes / (1024 * 1024 * 1024)) * 10) / 10,
total: Math.round(totalBytes / (1024 * 1024 * 1024) * 10) / 10, total: Math.round((totalBytes / (1024 * 1024 * 1024)) * 10) / 10,
usage: (usedBytes / totalBytes) * 100, usage: (usedBytes / totalBytes) * 100,
}; };