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

Apply offline dimming to Docker containers and services

Browse source 
Match Proxmox behavior by dimming stopped containers and degraded services with opacity-60, and showing dashes for metrics (CPU, memory, uptime, restarts) when containers are not running.
This commit is contained in:
rcourtman 2025-10-28 22:37:49 +00:00
parent 0f43c33bb7
commit 6462ec6ba1
1 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
View file

@ -372,6 +372,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
const state = () => toLower(container.state); const state = () => toLower(container.state);
const health = () => toLower(container.health); const health = () => toLower(container.health);
const isRunning = () => state() === 'running';
const statusBadgeClass = () => { const statusBadgeClass = () => {
if (state() === 'running' && (!health() || health() === 'healthy')) { if (state() === 'running' && (!health() || health() === 'healthy')) {
@ -404,7 +405,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
<tr <tr
class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${ class={`border-b border-gray-200 dark:border-gray-700 transition-all duration-200 ${
hasDrawerContent() ? 'cursor-pointer' : '' hasDrawerContent() ? 'cursor-pointer' : ''
} ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}`} } ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isRunning() ? 'opacity-60' : ''}`}
onClick={toggle} onClick={toggle}
aria-expanded={expanded()} aria-expanded={expanded()}
> >
@ -439,7 +440,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-1">
<Show <Show
when={container.cpuPercent && container.cpuPercent > 0} when={isRunning() && container.cpuPercent && container.cpuPercent > 0}
fallback={<span class="text-xs text-gray-400">—</span>} fallback={<span class="text-xs text-gray-400">—</span>}
> >
<MetricBar value={cpuPercent()} label={formatPercent(cpuPercent())} type="cpu" /> <MetricBar value={cpuPercent()} label={formatPercent(cpuPercent())} type="cpu" />
@ -447,7 +448,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-1">
<Show <Show
when={container.memoryUsageBytes && container.memoryUsageBytes > 0} when={isRunning() && container.memoryUsageBytes && container.memoryUsageBytes > 0}
fallback={<span class="text-xs text-gray-400">—</span>} fallback={<span class="text-xs text-gray-400">—</span>}
> >
<MetricBar <MetricBar
@ -459,10 +460,16 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
</Show> </Show>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300"> <td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300">
{restarts()} <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
<span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span> {restarts()}
<span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
</Show>
</td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300">
<Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
{uptime()}
</Show>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300">{uptime()}</td>
</tr> </tr>
<Show when={expanded() && hasDrawerContent()}> <Show when={expanded() && hasDrawerContent()}>
@ -552,6 +559,11 @@ const DockerServiceRow: Component<{ row: Extract<DockerRow, { kind: 'service' }>
const badge = serviceHealthBadge(service); const badge = serviceHealthBadge(service);
const updatedAt = ensureMs(service.updatedAt ?? service.createdAt); const updatedAt = ensureMs(service.updatedAt ?? service.createdAt);
const isHealthy = () => {
const desired = service.desiredTasks ?? 0;
const running = service.runningTasks ?? 0;
return desired > 0 && running >= desired;
};
const serviceTitle = () => { const serviceTitle = () => {
const primary = service.name || service.id || 'Service'; const primary = service.name || service.id || 'Service';
@ -568,7 +580,7 @@ const DockerServiceRow: Component<{ row: Extract<DockerRow, { kind: 'service' }>
expanded() expanded()
? 'bg-gray-50 dark:bg-gray-800/40' ? 'bg-gray-50 dark:bg-gray-800/40'
: 'hover:bg-gray-50 dark:hover:bg-gray-800/50' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
}`} } ${!isHealthy() ? 'opacity-60' : ''}`}
onClick={toggle} onClick={toggle}
aria-expanded={expanded()} aria-expanded={expanded()}
> >