danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix duplicate version prefix and Hosts view column alignment

Browse source 
- Remove duplicate 'v' prefix in Docker agent version display - backend
  normalizeAgentVersion() already adds it. Related to #769

- Add missing Disk column to Hosts view table, matching Docker/Proxmox
  views. Shows aggregate disk usage across all mounted filesystems.
  Related to #771

- Fix CPU/Memory column alignment in Hosts view from left to center,
  consistent with other views
This commit is contained in:
rcourtman 2025-11-28 00:07:40 +00:00
parent e3ce05581b
commit 12dc8eac0f
2 changed files with 36 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
View file

@ -376,7 +376,7 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
: 'Agent is up to date' : 'Agent is up to date'
}${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`} }${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`}
> >
v{version()} {version()}
</span> </span>
)} )}
</Show> </Show>

41
frontend-modern/src/components/Hosts/HostsOverview.tsx
View file

@ -175,19 +175,22 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
<table class="w-full border-collapse"> <table class="w-full border-collapse">
<thead> <thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600"> <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[24%]"> <th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
Host Host
</th> </th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]"> <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]">
Platform Platform
</th> </th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]"> <th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
CPU CPU
</th> </th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]"> <th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
Memory Memory
</th> </th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]"> <th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
Disk
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
Uptime Uptime
</th> </th>
</tr> </tr>
@ -199,6 +202,20 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
const memPercent = () => host.memory?.usage ?? 0; const memPercent = () => host.memory?.usage ?? 0;
const memUsed = () => formatBytes(host.memory?.used ?? 0, 0); const memUsed = () => formatBytes(host.memory?.used ?? 0, 0);
const memTotal = () => formatBytes(host.memory?.total ?? 0, 0); const memTotal = () => formatBytes(host.memory?.total ?? 0, 0);
// Calculate aggregate disk usage from all disks
const diskStats = createMemo(() => {
if (!host.disks || host.disks.length === 0) return { percent: 0, used: 0, total: 0 };
const totalUsed = host.disks.reduce((sum, d) => sum + (d.used ?? 0), 0);
const totalSize = host.disks.reduce((sum, d) => sum + (d.total ?? 0), 0);
return {
percent: totalSize > 0 ? (totalUsed / totalSize) * 100 : 0,
used: totalUsed,
total: totalSize
};
});
const diskPercent = () => diskStats().percent;
const diskUsed = () => formatBytes(diskStats().used, 0);
const diskTotal = () => formatBytes(diskStats().total, 0);
const hostStatus = createMemo(() => getHostStatusIndicator(host)); const hostStatus = createMemo(() => getHostStatusIndicator(host));
// Drawer state // Drawer state
@ -312,6 +329,18 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
/> />
</Show> </Show>
</td> </td>
<td class="px-2 py-2">
<Show
when={diskPercent() > 0}
fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
>
<MetricBar
label={`${diskUsed()} / ${diskTotal()}`}
value={diskPercent()}
type="disk"
/>
</Show>
</td>
<td class="px-2 py-2"> <td class="px-2 py-2">
<Show <Show
when={host.uptimeSeconds} when={host.uptimeSeconds}
@ -327,7 +356,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
{/* Drawer - Additional Info */} {/* Drawer - Additional Info */}
<Show when={drawerOpen() && hasDrawerContent()}> <Show when={drawerOpen() && hasDrawerContent()}>
<tr class="bg-gray-50 dark:bg-gray-900/50"> <tr class="bg-gray-50 dark:bg-gray-900/50">
<td class="px-4 py-3" colSpan={5}> <td class="px-4 py-3" colSpan={6}>
<div class="flex flex-wrap justify-start gap-3"> <div class="flex flex-wrap justify-start gap-3">
{/* System Info */} {/* System Info */}
<div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30"> <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">