haeaeae/dockhand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile: Only show total of stacks

Browse Source 
The detailed display of stacks (following x/x/x/x) is too wide
for mobile display.
So for mobile display only, we limit this information to the total number
of stacks.
This commit is contained in:
sieren
2026-01-12 14:25:53 +01:00
committed by Jarek Krochmalski
parent f2657a3d4d
commit 027aee434c
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+1
View File
@@ -994,6 +994,7 @@
width={2}
height={Math.max(item.h, 2)}
oneventsclick={() => handleEventsClick(tile.stats!.id)}
showStacksBreakdown={false}
/>
</div>
{/if}
src/routes/dashboard/EnvironmentTile.svelte
+8 -7
View File
@@ -26,9 +26,10 @@
width?: number;
height?: number;
oneventsclick?: () => void;
showStacksBreakdown?: boolean;
}
let { stats, width = 1, height = 1, oneventsclick }: Props = $props();
let { stats, width = 1, height = 1, oneventsclick, showStacksBreakdown = true }: Props = $props();
const EnvIcon = $derived(getIconComponent(stats.icon));
@@ -349,7 +350,7 @@
{#if stats.collectMetrics && stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
</div>
{/if}
@@ -450,7 +451,7 @@
{#if stats.collectMetrics && stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
{#if stats.recentEvents}
<DashboardRecentEvents events={stats.recentEvents} limit={8} onclick={oneventsclick} />
@@ -554,7 +555,7 @@
{#if stats.collectMetrics && stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
{#if stats.recentEvents}
<DashboardRecentEvents events={stats.recentEvents} limit={8} onclick={oneventsclick} />
@@ -599,7 +600,7 @@
{#if stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
</div>
<!-- Right column -->
@@ -645,7 +646,7 @@
{#if stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
{#if stats.recentEvents}
<DashboardRecentEvents events={stats.recentEvents} limit={5} onclick={oneventsclick} />
@@ -697,7 +698,7 @@
{#if stats.metrics}
<DashboardCpuMemoryBars metrics={stats.metrics} collectMetrics={stats.collectMetrics} />
{/if}
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} />
<DashboardResourceStats images={stats.images} volumes={stats.volumes} networks={stats.networks} stacks={stats.stacks} loading={stats.loading} showStacksBreakdown={showStacksBreakdown} />
<DashboardEventsSummary today={stats.events.today} total={stats.events.total} />
{#if stats.recentEvents}
<DashboardRecentEvents events={stats.recentEvents} limit={10} onclick={oneventsclick} />
src/routes/dashboard/dashboard-resource-stats.svelte
+3 -2
View File
@@ -14,9 +14,10 @@
networks: { total: number };
stacks: { total: number; running: number; partial: number; stopped: number };
loading?: LoadingStates;
showStacksBreakdown?: boolean;
}
let { images, volumes, networks, stacks, loading }: Props = $props();
let { images, volumes, networks, stacks, loading, showStacksBreakdown = true }: Props = $props();
// Only show skeleton if loading AND we don't have data yet
// This prevents blinking when refreshing with existing data
@@ -46,7 +47,7 @@
{:else}
<span class="font-medium">
{stacks.total}
{#if stacks.total > 0}
{#if showStacksBreakdown && stacks.total > 0}
<span class="text-emerald-500">{stacks.running}</span>/<span class="text-amber-500">{stacks.partial}</span>/<span class="text-red-500">{stacks.stopped}</span>
{/if}
</span>