mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-18 08:14:35 +00:00
refactor(dashboard): remove deployment loading logic and introduce DeploymentsIndicator component for better UI management
This commit is contained in:
Andras Bacsai committed
1 parent
db2d44ca1f
commit
a03c1b3b4b
11 files changed
+150
-94
No files matched your search
@@ -7,6 +7,7 @@
|
||||
<!-- Global search component - included once to prevent keyboard shortcut duplication -->
|
||||
<livewire:global-search />
|
||||
@auth
|
||||
<livewire:deployments-indicator />
|
||||
<div x-data="{
|
||||
open: false,
|
||||
init() {
|
||||
|
||||
@@ -125,52 +125,4 @@
|
||||
@endif
|
||||
@endif
|
||||
</section>
|
||||
|
||||
@if ($servers->count() > 0 && $projects->count() > 0)
|
||||
<section>
|
||||
<div class="flex items-start gap-2">
|
||||
<h3 class="pb-2">Deployments</h3>
|
||||
@if (count($deploymentsPerServer) > 0)
|
||||
<x-loading />
|
||||
@endif
|
||||
@can('cleanupDeploymentQueue', Application::class)
|
||||
<x-modal-confirmation title="Confirm Cleanup Queues?" buttonTitle="Cleanup Queues" isErrorButton
|
||||
submitAction="cleanupQueue" :actions="['All running Deployment Queues will be cleaned up.']" :confirmWithText="false" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Cleanup Deployment Queues" :dispatchEvent="true"
|
||||
dispatchEventType="success" dispatchEventMessage="Deployment Queues cleanup started." />
|
||||
@endcan
|
||||
</div>
|
||||
<div wire:poll.3000ms="loadDeployments" class="grid grid-cols-1">
|
||||
@forelse ($deploymentsPerServer as $serverName => $deployments)
|
||||
<h4 class="pb-2">{{ $serverName }}</h4>
|
||||
<div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
|
||||
@foreach ($deployments as $deployment)
|
||||
<a href="{{ data_get($deployment, 'deployment_url') }}" @class([
|
||||
'gap-2 cursor-pointer box group border-l-2 border-dotted',
|
||||
'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
|
||||
'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
|
||||
])>
|
||||
<div class="flex flex-col justify-center mx-6">
|
||||
<div class="box-title">
|
||||
{{ data_get($deployment, 'application_name') }}
|
||||
</div>
|
||||
@if (data_get($deployment, 'pull_request_id') !== 0)
|
||||
<div class="box-description">
|
||||
PR #{{ data_get($deployment, 'pull_request_id') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="box-description">
|
||||
{{ str(data_get($deployment, 'status'))->headline() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@empty
|
||||
<div>No deployments running.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,92 @@
|
||||
<div wire:poll.3000ms x-data="{
|
||||
expanded: @entangle('expanded')
|
||||
}" class="fixed bottom-0 z-50 mb-4 left-0 lg:left-56 ml-4">
|
||||
@if ($this->deploymentCount > 0)
|
||||
<div class="relative">
|
||||
<!-- Indicator Button -->
|
||||
<button @click="expanded = !expanded"
|
||||
class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">
|
||||
<!-- Animated spinner -->
|
||||
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
|
||||
stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<!-- Deployment count -->
|
||||
<span class="text-sm font-medium dark:text-neutral-200 text-gray-800">
|
||||
{{ $this->deploymentCount }} {{ Str::plural('deployment', $this->deploymentCount) }}
|
||||
</span>
|
||||
|
||||
<!-- Expand/collapse icon -->
|
||||
<svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600"
|
||||
:class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Expanded deployment list -->
|
||||
<div x-show="expanded" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2"
|
||||
x-cloak
|
||||
class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200">
|
||||
|
||||
<div class="p-4 space-y-3">
|
||||
@foreach ($this->deployments as $deployment)
|
||||
<a href="{{ $deployment->deployment_url }}"
|
||||
class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 transition-all duration-200 hover:ring-2 hover:ring-coollabs dark:hover:ring-warning cursor-pointer">
|
||||
<!-- Status indicator -->
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
@if ($deployment->status === 'in_progress')
|
||||
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10"
|
||||
stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-4 h-4 dark:text-coolgray-300 text-gray-500"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Deployment info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium dark:text-neutral-200 text-gray-900 truncate">
|
||||
{{ $deployment->application_name }}
|
||||
</div>
|
||||
<p class="text-xs dark:text-neutral-400 text-gray-600 mt-1">
|
||||
{{ $deployment->server_name }}
|
||||
</p>
|
||||
@if ($deployment->pull_request_id)
|
||||
<p class="text-xs dark:text-neutral-400 text-gray-600">
|
||||
PR #{{ $deployment->pull_request_id }}
|
||||
</p>
|
||||
@endif
|
||||
<p class="text-xs mt-1 capitalize"
|
||||
:class="{
|
||||
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
|
||||
'dark:text-coolgray-300 text-gray-500': '{{ $deployment->status }}' === 'queued'
|
||||
}">
|
||||
{{ str_replace('_', ' ', $deployment->status) }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
Reference in new issue
Block a user