administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Conditional Render GPU Stats (#1)

Browse Source 
Check if GPU stats are available
This commit is contained in:
Stuart 2024-04-27 01:29:20 +01:00 committed by GitHub
parent ab032aa004
commit 39d887cbb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
web/src/views/system/GeneralMetrics.tsx
View File

@ -212,7 +212,7 @@ export default function GeneralMetrics({
} = {}; } = {};
statsHistory.forEach((stats, statsIdx) => { statsHistory.forEach((stats, statsIdx) => {
if (!stats) { if (!stats || !canGetGpuInfo) {
return; return;
} }
@ -225,7 +225,7 @@ export default function GeneralMetrics({
}); });
}); });
return Object.keys(series).length > 0 ? Object.values(series) : []; return Object.keys(series).length > 0 ? Object.values(series) : [];
}, [statsHistory]); }, [statsHistory, canGetGpuInfo]);
const gpuMemSeries = useMemo(() => { const gpuMemSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
@ -245,7 +245,7 @@ export default function GeneralMetrics({
} = {}; } = {};
statsHistory.forEach((stats, statsIdx) => { statsHistory.forEach((stats, statsIdx) => {
if (!stats) { if (!stats || !canGetGpuInfo) {
return; return;
} }
@ -258,7 +258,7 @@ export default function GeneralMetrics({
}); });
}); });
return Object.values(series); return Object.values(series);
}, [statsHistory]); }, [statsHistory, canGetGpuInfo]);
// other processes stats // other processes stats
@ -411,13 +411,13 @@ export default function GeneralMetrics({
)} )}
</div> </div>
{(statsHistory.length == 0 || statsHistory[0].gpu_usages) && ( {canGetGpuInfo &&
<> (statsHistory.length == 0 || statsHistory[0].gpu_usages) && (
<div className="mt-4 flex items-center justify-between"> <>
<div className="text-muted-foreground text-sm font-medium"> <div className="mt-4 flex items-center justify-between">
GPUs <div className="text-muted-foreground text-sm font-medium">
</div> GPUs
{canGetGpuInfo && ( </div>
<Button <Button
className="cursor-pointer" className="cursor-pointer"
size="sm" size="sm"
@ -425,52 +425,51 @@ export default function GeneralMetrics({
> >
Hardware Info Hardware Info
</Button> </Button>
)} </div>
</div> <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2"> {statsHistory.length != 0 ? (
{statsHistory.length != 0 ? ( <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl"> <div className="mb-5">GPU Usage</div>
<div className="mb-5">GPU Usage</div> {gpuSeries.map((series) => (
{gpuSeries.map((series) => ( <ThresholdBarGraph
<ThresholdBarGraph key={series.name}
key={series.name} graphId={`${series.name}-gpu`}
graphId={`${series.name}-gpu`} name={series.name}
name={series.name} unit="%"
unit="%" threshold={GPUUsageThreshold}
threshold={GPUUsageThreshold} updateTimes={updateTimes}
updateTimes={updateTimes} data={[series]}
data={[series]} />
/> ))}
))} </div>
</div> ) : (
) : ( <Skeleton className="w-full aspect-video" />
<Skeleton className="w-full aspect-video" /> )}
)} {statsHistory.length != 0 ? (
{statsHistory.length != 0 ? ( <>
<> {gpuMemSeries && (
{gpuMemSeries && ( <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
<div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl"> <div className="mb-5">GPU Memory</div>
<div className="mb-5">GPU Memory</div> {gpuMemSeries.map((series) => (
{gpuMemSeries.map((series) => ( <ThresholdBarGraph
<ThresholdBarGraph key={series.name}
key={series.name} graphId={`${series.name}-mem`}
graphId={`${series.name}-mem`} unit="%"
unit="%" name={series.name}
name={series.name} threshold={GPUMemThreshold}
threshold={GPUMemThreshold} updateTimes={updateTimes}
updateTimes={updateTimes} data={[series]}
data={[series]} />
/> ))}
))} </div>
</div> )}
)} </>
</> ) : (
) : ( <Skeleton className="w-full aspect-video" />
<Skeleton className="w-full aspect-video" /> )}
)} </div>
</div> </>
</> )}
)}
<div className="mt-4 text-muted-foreground text-sm font-medium"> <div className="mt-4 text-muted-foreground text-sm font-medium">
Other Processes Other Processes