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