Adjust Docker host badges and task type column

This commit is contained in:
rcourtman 2025-10-29 10:53:17 +00:00
parent 93faaacbd1
commit b606a0db99
2 changed files with 16 additions and 10 deletions

View file

@ -251,9 +251,12 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
({summary.host.hostname}) ({summary.host.hostname})
</span> </span>
</Show> </Show>
<span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 whitespace-nowrap">
Docker
</span>
<Show when={summary.host.dockerVersion}> <Show when={summary.host.dockerVersion}>
<span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 whitespace-nowrap"> <span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
Docker {summary.host.dockerVersion} v{summary.host.dockerVersion}
</span> </span>
</Show> </Show>
</div> </div>

View file

@ -1166,6 +1166,7 @@ const DockerServiceRow: Component<{
<thead class="bg-gray-100 dark:bg-gray-900/40 text-[10px] uppercase tracking-wide text-gray-600 dark:text-gray-200"> <thead class="bg-gray-100 dark:bg-gray-900/40 text-[10px] uppercase tracking-wide text-gray-600 dark:text-gray-200">
<tr> <tr>
<th class="py-1 pr-2 text-left font-medium">Task</th> <th class="py-1 pr-2 text-left font-medium">Task</th>
<th class="py-1 px-2 text-left font-medium w-[80px]">Type</th>
<th class="py-1 px-2 text-left font-medium">Node</th> <th class="py-1 px-2 text-left font-medium">Node</th>
<th class="py-1 px-2 text-left font-medium">State</th> <th class="py-1 px-2 text-left font-medium">State</th>
<th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th> <th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th>
@ -1209,19 +1210,21 @@ const DockerServiceRow: Component<{
return ( return (
<tr class="hover:bg-gray-100 dark:hover:bg-gray-800/40"> <tr class="hover:bg-gray-100 dark:hover:bg-gray-800/40">
<td class="py-1 pr-2"> <td class="py-1 pr-2">
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100"> <div class="flex items-center gap-1 text-sm text-gray-900 dark:text-gray-100">
<span class="truncate font-medium" title={taskTitle()}> <span class="truncate font-medium" title={taskTitle()}>
{taskLabel()} {taskLabel()}
</span> </span>
<span
class={`hidden sm:inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass(
'task',
)}`}
>
Task
</span>
</div> </div>
</td> </td>
<td class="py-1 px-2">
<span
class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass(
'task',
)}`}
>
Task
</span>
</td>
<td class="py-1 px-2 text-gray-600 dark:text-gray-400"> <td class="py-1 px-2 text-gray-600 dark:text-gray-400">
{task.nodeName || task.nodeId || '—'} {task.nodeName || task.nodeId || '—'}
</td> </td>