1.0.9
This commit is contained in:
1 parent
62636426bf
commit
c185d00dc3
60 files changed
+2830
-918
No files matched your search
@@ -5,6 +5,7 @@
|
||||
Pause,
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
ArrowUpCircle,
|
||||
Loader2
|
||||
} from 'lucide-svelte';
|
||||
|
||||
@@ -14,6 +15,7 @@
|
||||
paused: number;
|
||||
restarting: number;
|
||||
unhealthy: number;
|
||||
pendingUpdates: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
@@ -54,10 +56,14 @@
|
||||
<AlertTriangle class="w-3 h-3 text-muted-foreground/50" />
|
||||
<div class="skeleton w-3 h-3 rounded"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<ArrowUpCircle class="w-3 h-3 text-muted-foreground/50" />
|
||||
<div class="skeleton w-3 h-3 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if showSkeleton}
|
||||
<!-- Full skeleton grid view -->
|
||||
<div class="grid grid-cols-6 gap-1 min-h-5">
|
||||
<div class="grid grid-cols-7 gap-1 min-h-5">
|
||||
<div class="flex items-center gap-1">
|
||||
<Play class="w-3.5 h-3.5 text-muted-foreground/50" />
|
||||
<div class="skeleton w-4 h-4 rounded"></div>
|
||||
@@ -78,6 +84,10 @@
|
||||
<AlertTriangle class="w-3.5 h-3.5 text-muted-foreground/50" />
|
||||
<div class="skeleton w-4 h-4 rounded"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<ArrowUpCircle class="w-3.5 h-3.5 text-muted-foreground/50" />
|
||||
<div class="skeleton w-4 h-4 rounded"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-muted-foreground/50">Total</span>
|
||||
<div class="skeleton w-4 h-4 rounded"></div>
|
||||
@@ -106,10 +116,14 @@
|
||||
<AlertTriangle class="w-3 h-3 {containers.unhealthy > 0 ? 'text-red-500' : 'text-emerald-500'}" />
|
||||
<span class="text-2xs font-medium">{containers.unhealthy}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5 {containers.pendingUpdates > 0 ? 'pending-glow' : ''}" title="Pending updates">
|
||||
<ArrowUpCircle class="w-3 h-3 {containers.pendingUpdates > 0 ? 'text-amber-400' : 'text-muted-foreground'}" />
|
||||
<span class="text-2xs font-medium {containers.pendingUpdates > 0 ? 'text-amber-400' : ''}">{containers.pendingUpdates}</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Full grid view -->
|
||||
<div class="grid grid-cols-6 gap-1 min-h-5">
|
||||
<div class="grid grid-cols-7 gap-1 min-h-5">
|
||||
<div class="flex items-center gap-1" title="Running containers">
|
||||
<Play class="w-3.5 h-3.5 text-emerald-500" />
|
||||
<span class="text-sm font-medium">{containers.running}</span>
|
||||
@@ -130,6 +144,10 @@
|
||||
<AlertTriangle class="w-3.5 h-3.5 {containers.unhealthy > 0 ? 'text-red-500' : 'text-emerald-500'}" />
|
||||
<span class="text-sm font-medium">{containers.unhealthy}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 {containers.pendingUpdates > 0 ? 'pending-glow' : ''}" title="Pending updates">
|
||||
<ArrowUpCircle class="w-3.5 h-3.5 {containers.pendingUpdates > 0 ? 'text-amber-400' : 'text-muted-foreground'}" />
|
||||
<span class="text-sm font-medium {containers.pendingUpdates > 0 ? 'text-amber-400' : ''}">{containers.pendingUpdates}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1" title="Total containers">
|
||||
<span class="text-xs text-muted-foreground">Total</span>
|
||||
<span class="text-sm font-medium">{containers.total}</span>
|
||||
@@ -147,4 +165,15 @@
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
@keyframes pending-pulse {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 5px rgba(251, 191, 36, 0.3));
|
||||
}
|
||||
}
|
||||
:global(.pending-glow) {
|
||||
animation: pending-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user