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

Align Docker drawer cards with Proxmox layout

Browse source
This commit is contained in:
rcourtman 2025-10-29 11:00:04 +00:00
parent b606a0db99
commit 35ab52b75b
1 changed files with 131 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -732,19 +732,19 @@ const DockerContainerRow: Component<{
<Show when={expanded() && hasDrawerContent()}> <Show when={expanded() && hasDrawerContent()}>
<tr class="bg-gray-50 dark:bg-gray-900/50"> <tr class="bg-gray-50 dark:bg-gray-900/50">
<td colSpan={props.columns} class="px-4 py-3"> <td colSpan={props.columns} class="px-4 py-3">
<div class="grid gap-3 md:grid-cols-2"> <div class="flex flex-wrap justify-start gap-3">
<Show when={container.ports && container.ports.length > 0}> <Show when={container.ports && container.ports.length > 0}>
<div> <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400"> <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
Ports Ports
</div> </div>
<div class="mt-1 flex flex-wrap gap-1"> <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
{container.ports!.map((port) => { {container.ports!.map((port) => {
const label = port.publicPort const label = port.publicPort
? `${port.publicPort}:${port.privatePort}/${port.protocol}` ? `${port.publicPort}:${port.privatePort}/${port.protocol}`
: `${port.privatePort}/${port.protocol}`; : `${port.privatePort}/${port.protocol}`;
return ( return (
<span class="rounded bg-blue-100 px-1.5 py-0.5 text-[11px] text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"> <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{label} {label}
</span> </span>
); );
@ -754,34 +754,40 @@ const DockerContainerRow: Component<{
</Show> </Show>
<Show when={container.networks && container.networks.length > 0}> <Show when={container.networks && container.networks.length > 0}>
<div> <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400"> <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
Networks Networks
</div> </div>
<div class="mt-1 space-y-1 text-xs text-gray-700 dark:text-gray-300"> <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
{container.networks!.map((network) => ( {container.networks!.map((network) => (
<div> <div class="rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700/70">
<span class="font-medium">{network.name}</span> <div class="font-medium text-gray-700 dark:text-gray-200">{network.name}</div>
<div class="mt-0.5 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
<Show when={network.ipv4}> <Show when={network.ipv4}>
<span class="ml-2 text-gray-500 dark:text-gray-400">IPv4: {network.ipv4}</span> <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{network.ipv4}
</span>
</Show> </Show>
<Show when={network.ipv6}> <Show when={network.ipv6}>
<span class="ml-2 text-gray-500 dark:text-gray-400">IPv6: {network.ipv6}</span> <span class="rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
{network.ipv6}
</span>
</Show> </Show>
</div> </div>
</div>
))} ))}
</div> </div>
</div> </div>
</Show> </Show>
<Show when={container.labels && Object.keys(container.labels).length > 0}> <Show when={container.labels && Object.keys(container.labels).length > 0}>
<div class="md:col-span-2"> <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="text-[11px] font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400"> <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
Labels Labels
</div> </div>
<div class="mt-1 flex flex-wrap gap-1"> <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
{Object.entries(container.labels!).map(([key, value]) => ( {Object.entries(container.labels!).map(([key, value]) => (
<span class="rounded bg-gray-200 px-1.5 py-0.5 text-[11px] text-gray-700 dark:bg-gray-700/60 dark:text-gray-200"> <span class="rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200">
{key} {key}
<Show when={value}>: {value}</Show> <Show when={value}>: {value}</Show>
</span> </span>
@ -1154,14 +1160,15 @@ const DockerServiceRow: Component<{
<Show when={expanded() && hasTasks()}> <Show when={expanded() && hasTasks()}>
<tr class="bg-gray-50 dark:bg-gray-900/60"> <tr class="bg-gray-50 dark:bg-gray-900/60">
<td colSpan={props.columns} class="px-4 py-3"> <td colSpan={props.columns} class="px-4 py-3">
<div class="space-y-2 border-l-4 border-gray-200 dark:border-gray-700 pl-3"> <div class="flex flex-wrap justify-start gap-3">
<div class="flex items-center justify-between text-[11px] font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300"> <div class="min-w-[320px] flex-1 rounded border border-gray-200 bg-white/70 p-3 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="flex items-center justify-between text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
<span>Tasks</span> <span>Tasks</span>
<span class="text-[10px] font-normal text-gray-500 dark:text-gray-400"> <span class="text-[10px] font-normal text-gray-500 dark:text-gray-400">
{tasks.length} {tasks.length === 1 ? 'entry' : 'entries'} {tasks.length} {tasks.length === 1 ? 'entry' : 'entries'}
</span> </span>
</div> </div>
<div class="overflow-x-auto border border-gray-200 dark:border-gray-700/60 rounded-lg bg-white dark:bg-gray-900/60"> <div class="mt-2 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-100 dark:divide-gray-800/60 text-xs"> <table class="min-w-full divide-y divide-gray-100 dark:divide-gray-800/60 text-xs">
<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>
@ -1260,6 +1267,7 @@ const DockerServiceRow: Component<{
</table> </table>
</div> </div>
</div> </div>
</div>
</td> </td>
</tr> </tr>
</Show> </Show>