michael/ripster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
mboehmlaender
2026-03-13 15:15:50 +00:00
parent f38081649f
commit b6cac5efb4
7 changed files with 205 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/pages/DashboardPage.jsx
View File

@@ -768,20 +768,6 @@ export default function DashboardPage({
const memoryMetrics = monitoringSample?.memory || null;
const gpuMetrics = monitoringSample?.gpu || null;
const storageMetrics = Array.isArray(monitoringSample?.storage) ? monitoringSample.storage : [];
const storageGroups = useMemo(() => {
const groups = [];
const mountMap = new Map();
for (const entry of storageMetrics) {
const groupKey = entry?.mountPoint || `__no_mount_${entry?.key}`;
if (!mountMap.has(groupKey)) {
const group = { mountPoint: entry?.mountPoint || null, entries: [], representative: entry };
mountMap.set(groupKey, group);
groups.push(group);
}
mountMap.get(groupKey).entries.push(entry);
}
return groups;
}, [storageMetrics]);
const cpuPerCoreMetrics = Array.isArray(cpuMetrics?.perCore) ? cpuMetrics.perCore : [];
const gpuDevices = Array.isArray(gpuMetrics?.devices) ? gpuMetrics.devices : [];
@@ -1868,55 +1854,57 @@ export default function DashboardPage({
<section className="hardware-monitor-block">
<h4>Freier Speicher in Pfaden</h4>
<div className="hardware-storage-list">
{storageGroups.map((group) => {
const rep = group.representative;
const tone = getStorageUsageTone(rep?.usagePercent);
const usagePercent = Number(rep?.usagePercent);
{storageMetrics.map((entry) => {
const tone = getStorageUsageTone(entry?.usagePercent);
const usagePercent = Number(entry?.usagePercent);
const barValue = Number.isFinite(usagePercent)
? Math.max(0, Math.min(100, usagePercent))
: 0;
const hasError = group.entries.every((e) => e?.error);
const groupKey = group.mountPoint || group.entries.map((e) => e?.key).join('-');
const hasError = Boolean(entry?.error);
const entryKey = entry?.key || entry?.path || 'storage-entry';
return (
<div
key={`storage-group-${groupKey}`}
key={`storage-entry-${entryKey}`}
className={`hardware-storage-item compact${hasError ? ' has-error' : ''}`}
>
<div className="hardware-storage-head">
<strong>{group.entries.map((e) => e?.label || e?.key || 'Pfad').join(' · ')}</strong>
<strong>{entry?.label || entry?.key || 'Pfad'}</strong>
<span className={`hardware-storage-percent tone-${tone}`}>
{hasError ? 'Fehler' : formatPercent(rep?.usagePercent)}
{hasError ? 'Fehler' : formatPercent(entry?.usagePercent)}
</span>
</div>
{hasError ? (
<small className="error-text">{rep?.error}</small>
<small className="error-text">{entry?.error}</small>
) : (
<>
<div className={`hardware-storage-bar tone-${tone}`}>
<ProgressBar value={barValue} showValue={false} />
</div>
<div className="hardware-storage-summary">
<small>Frei: {formatBytes(rep?.freeBytes)}</small>
<small>Gesamt: {formatBytes(rep?.totalBytes)}</small>
<small>Frei: {formatBytes(entry?.freeBytes)}</small>
<small>Gesamt: {formatBytes(entry?.totalBytes)}</small>
</div>
</>
)}
{group.entries.map((entry) => (
<div key={entry?.key} className="hardware-storage-paths">
<small className="hardware-storage-label-tag">{entry?.label || entry?.key}:</small>
<small className="hardware-storage-path" title={entry?.path || '-'}>
{entry?.path || '-'}
<div className="hardware-storage-paths">
<small className="hardware-storage-label-tag">Pfad:</small>
<small className="hardware-storage-path" title={entry?.path || '-'}>
{entry?.path || '-'}
</small>
{entry?.mountPoint ? (
<small className="hardware-storage-path" title={entry.mountPoint}>
Mount: {entry.mountPoint}
</small>
{entry?.queryPath && entry.queryPath !== entry.path ? (
<small className="hardware-storage-path" title={entry.queryPath}>
(Parent: {entry.queryPath})
</small>
) : null}
{entry?.note ? <small className="hardware-storage-path">{entry.note}</small> : null}
</div>
))}
) : null}
{entry?.queryPath && entry.queryPath !== entry.path ? (
<small className="hardware-storage-path" title={entry.queryPath}>
Parent: {entry.queryPath}
</small>
) : null}
{entry?.note ? <small className="hardware-storage-path">{entry.note}</small> : null}
</div>
</div>
);
})}