mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-12 15:53:46 -04:00
feat(deployments): show spinners for in-progress status
This commit is contained in:
Andras Bacsai
@@ -5,6 +5,7 @@
|
||||
'as' => 'span',
|
||||
'dynamic' => false,
|
||||
'pulse' => false, // ping the dot for a state that is still in progress
|
||||
'spinning' => false, // show the loading spinner instead of the dot, e.g. for a running deployment
|
||||
])
|
||||
|
||||
@php
|
||||
@@ -23,12 +24,19 @@
|
||||
@if ($dynamic)
|
||||
{{ $slot }}
|
||||
@else
|
||||
@if ($spinning)
|
||||
<svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
|
||||
<path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
@else
|
||||
<span class="relative flex size-1.5 shrink-0">
|
||||
@if ($pulse)
|
||||
<span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
@endif
|
||||
<span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
</span>
|
||||
@endif
|
||||
<span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
|
||||
@endif
|
||||
</button>
|
||||
@@ -37,12 +45,19 @@
|
||||
@if ($dynamic)
|
||||
{{ $slot }}
|
||||
@else
|
||||
@if ($spinning)
|
||||
<svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
|
||||
<path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
@else
|
||||
<span class="relative flex size-1.5 shrink-0">
|
||||
@if ($pulse)
|
||||
<span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
@endif
|
||||
<span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
</span>
|
||||
@endif
|
||||
<span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
|
||||
@endif
|
||||
</a>
|
||||
@@ -51,12 +66,19 @@
|
||||
@if ($dynamic)
|
||||
{{ $slot }}
|
||||
@else
|
||||
@if ($spinning)
|
||||
<svg class="loading-indicator size-3 shrink-0 animate-spin text-neutral-500 dark:text-fg-dim" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
|
||||
<path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
@else
|
||||
<span class="relative flex size-1.5 shrink-0">
|
||||
@if ($pulse)
|
||||
<span class="absolute inline-flex size-full rounded-full opacity-75 motion-safe:animate-ping {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
@endif
|
||||
<span class="relative inline-flex size-1.5 rounded-full {{ $dotClasses[$type] ?? $dotClasses['neutral'] }}"></span>
|
||||
</span>
|
||||
@endif
|
||||
<span class="truncate">{{ collect([$label, $status])->filter()->join(' ') }}</span>
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@@ -81,14 +81,14 @@
|
||||
{{ $deployment->server_name ?: '-' }}
|
||||
</p>
|
||||
<span class="hidden @2xl:block">
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
|
||||
</span>
|
||||
<p class="hidden truncate text-[12px] text-neutral-500 @2xl:block dark:text-fg-dim">
|
||||
{{ $deployment->created_at?->diffForHumans() ?? '-' }}
|
||||
</p>
|
||||
|
||||
<div class="mt-3 flex min-w-0 items-center gap-3 @2xl:hidden">
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
|
||||
<p class="min-w-0 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
|
||||
{{ $environmentPath ?: '-' }}
|
||||
<span class="px-1 text-neutral-300 dark:text-white/15">·</span>
|
||||
@@ -141,14 +141,14 @@
|
||||
{{ $deployment->server_name ?: '-' }}
|
||||
</p>
|
||||
<span class="hidden @2xl:block">
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
|
||||
</span>
|
||||
<p class="hidden truncate text-[12px] text-neutral-500 @2xl:block dark:text-fg-dim">
|
||||
{{ $deployment->created_at?->diffForHumans() ?? '-' }}
|
||||
</p>
|
||||
|
||||
<div class="mt-3 flex min-w-0 items-center gap-3 @2xl:hidden">
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" />
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'" />
|
||||
<p class="min-w-0 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
|
||||
{{ $environmentPath ?: '-' }}
|
||||
<span class="px-1 text-neutral-300 dark:text-white/15">·</span>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
|
||||
{{ $deployment->application_name }}
|
||||
</p>
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType"
|
||||
<x-status-badge :status="$deploymentStatus" :type="$deploymentStatusType" :spinning="$deployment->status === 'in_progress'"
|
||||
class="shrink-0" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -276,6 +276,7 @@
|
||||
@unless ($embedded)
|
||||
<span class="min-w-0">
|
||||
<x-status-badge as="button" :status="$statusLabel" :type="$statusType"
|
||||
:spinning="$deploymentStatus === 'in_progress'"
|
||||
class="table-filter-value table-filter-badge" title="Filter by {{ $statusLabel }}"
|
||||
wire:click="toggleDeploymentFilter('status:{{ $deploymentStatus }}')" />
|
||||
</span>
|
||||
@@ -333,6 +334,10 @@
|
||||
<span>{{ \Carbon\Carbon::parse(data_get($deployment, 'created_at'))->diffForHumans(syntax: \Carbon\CarbonInterface::DIFF_ABSOLUTE, short: true) }}</span>
|
||||
<x-loading compact x-cloak x-show="selecting === '{{ data_get($deployment, 'deployment_uuid') }}'"
|
||||
aria-label="Loading deployment logs..." />
|
||||
@if ($deploymentStatus === 'in_progress')
|
||||
<x-loading compact x-show="selecting !== '{{ data_get($deployment, 'deployment_uuid') }}'"
|
||||
aria-label="Deployment in progress" />
|
||||
@else
|
||||
<span x-show="selecting !== '{{ data_get($deployment, 'deployment_uuid') }}'" @class([
|
||||
'size-2 shrink-0 rounded-full',
|
||||
'bg-emerald-500' => $statusType === 'success',
|
||||
@@ -340,6 +345,7 @@
|
||||
'bg-red-500' => $statusType === 'error',
|
||||
'bg-neutral-400 dark:bg-neutral-500' => $statusType === 'neutral',
|
||||
])></span>
|
||||
@endif
|
||||
</a>
|
||||
@endif
|
||||
<a href="{{ $deploymentUrl }}" {!! $deploymentLinkAttributes !!} class="deployment-row-link absolute inset-0"
|
||||
|
||||
@@ -336,6 +336,9 @@
|
||||
</button>
|
||||
</div>
|
||||
<span class="flex shrink-0 items-center gap-1.5 text-xs font-medium text-neutral-600 dark:text-fg-dim">
|
||||
@if ($deploymentStatus === 'in_progress')
|
||||
<x-loading compact />
|
||||
@else
|
||||
<span @class([
|
||||
'size-2 shrink-0 rounded-full',
|
||||
'bg-emerald-500' => $deploymentStatusType === 'success',
|
||||
@@ -343,6 +346,7 @@
|
||||
'bg-red-500' => $deploymentStatusType === 'error',
|
||||
'bg-neutral-400 dark:bg-neutral-500' => $deploymentStatusType === 'neutral',
|
||||
])></span>
|
||||
@endif
|
||||
{{ $deploymentStatusLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user