refactor(dashboard): remove deployment loading logic and introduce DeploymentsIndicator component for better UI management

2025-09-30 11:43:30 +02:00 · 2025-09-30 11:43:30 +02:00 · a03c1b3b4b
commit a03c1b3b4b
parent db2d44ca1f
11 changed files with 150 additions and 94 deletions
--- a/app/Livewire/Dashboard.php
+++ b/app/Livewire/Dashboard.php
@ -2,13 +2,10 @@

 namespace App\Livewire;

-use App\Models\Application;
-use App\Models\ApplicationDeploymentQueue;
 use App\Models\PrivateKey;
 use App\Models\Project;
 use App\Models\Server;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Artisan;
 use Livewire\Component;

 class Dashboard extends Component
@ -19,41 +16,11 @@ class Dashboard extends Component

    public Collection $privateKeys;

-    public array $deploymentsPerServer = [];
-
    public function mount()
    {
        $this->privateKeys = PrivateKey::ownedByCurrentTeam()->get();
        $this->servers = Server::ownedByCurrentTeam()->get();
        $this->projects = Project::ownedByCurrentTeam()->get();
-        $this->loadDeployments();
-    }
-
-    public function cleanupQueue()
-    {
-        try {
-            $this->authorize('cleanupDeploymentQueue', Application::class);
-        } catch (\Illuminate\Auth\Access\AuthorizationException $e) {
-            return handleError($e, $this);
-        }
-
-        Artisan::queue('cleanup:deployment-queue', [
-            '--team-id' => currentTeam()->id,
-        ]);
-    }
-
-    public function loadDeployments()
-    {
-        $this->deploymentsPerServer = ApplicationDeploymentQueue::whereIn('status', ['in_progress', 'queued'])->whereIn('server_id', $this->servers->pluck('id'))->get([
-            'id',
-            'application_id',
-            'application_name',
-            'deployment_url',
-            'pull_request_id',
-            'server_name',
-            'server_id',
-            'status',
-        ])->sortBy('id')->groupBy('server_name')->toArray();
    }

    public function navigateToProject($projectUuid)
--- a/app/Livewire/DeploymentsIndicator.php
+++ b/app/Livewire/DeploymentsIndicator.php
@ -0,0 +1,49 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\ApplicationDeploymentQueue;
+use App\Models\Server;
+use Livewire\Attributes\Computed;
+use Livewire\Component;
+
+class DeploymentsIndicator extends Component
+{
+    public bool $expanded = false;
+
+    #[Computed]
+    public function deployments()
+    {
+        $servers = Server::ownedByCurrentTeam()->get();
+
+        return ApplicationDeploymentQueue::whereIn('status', ['in_progress', 'queued'])
+            ->whereIn('server_id', $servers->pluck('id'))
+            ->get([
+                'id',
+                'application_id',
+                'application_name',
+                'deployment_url',
+                'pull_request_id',
+                'server_name',
+                'server_id',
+                'status',
+            ])
+            ->sortBy('id');
+    }
+
+    #[Computed]
+    public function deploymentCount()
+    {
+        return $this->deployments->count();
+    }
+
+    public function toggleExpanded()
+    {
+        $this->expanded = ! $this->expanded;
+    }
+
+    public function render()
+    {
+        return view('livewire.deployments-indicator');
+    }
+}
--- a/app/Livewire/Project/Application/PreviewsCompose.php
+++ b/app/Livewire/Project/Application/PreviewsCompose.php
@ -73,7 +73,7 @@ public function generate()
                $host = $url->getHost();
                $schema = $url->getScheme();
                $portInt = $url->getPort();
-                $port = $portInt !== null ? ':' . $portInt : '';
+                $port = $portInt !== null ? ':'.$portInt : '';
                $random = new Cuid2;
                $preview_fqdn = str_replace('{{random}}', $random, $template);
                $preview_fqdn = str_replace('{{domain}}', $host, $preview_fqdn);
--- a/app/Livewire/Project/Shared/HealthChecks.php
+++ b/app/Livewire/Project/Shared/HealthChecks.php
@ -52,13 +52,13 @@ public function toggleHealthcheck()
        try {
            $this->authorize('update', $this->resource);
            $wasEnabled = $this->resource->health_check_enabled;
-            $this->resource->health_check_enabled = !$this->resource->health_check_enabled;
+            $this->resource->health_check_enabled = ! $this->resource->health_check_enabled;
            $this->resource->save();

-            if ($this->resource->health_check_enabled && !$wasEnabled && $this->resource->isRunning()) {
+            if ($this->resource->health_check_enabled && ! $wasEnabled && $this->resource->isRunning()) {
                $this->dispatch('info', 'Health check has been enabled. A restart is required to apply the new settings.');
            } else {
-                $this->dispatch('success', 'Health check ' . ($this->resource->health_check_enabled ? 'enabled' : 'disabled') . '.');
+                $this->dispatch('success', 'Health check '.($this->resource->health_check_enabled ? 'enabled' : 'disabled').'.');
            }
        } catch (\Throwable $e) {
            return handleError($e, $this);
--- a/app/Livewire/Server/Advanced.php
+++ b/app/Livewire/Server/Advanced.php
@ -2,10 +2,7 @@

 namespace App\Livewire\Server;

-use App\Models\InstanceSettings;
 use App\Models\Server;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Hash;
 use Livewire\Attributes\Validate;
 use Livewire\Component;

@ -39,8 +36,6 @@ public function mount(string $server_uuid)
        }
    }

-
-
    public function syncData(bool $toModel = false)
    {
        if ($toModel) {
--- a/bootstrap/helpers/socialite.php
+++ b/bootstrap/helpers/socialite.php
@ -75,7 +75,7 @@ function get_socialite_provider(string $provider)
        $config
    );

-    if ($provider == 'gitlab' && !empty($oauth_setting->base_url)) {
+    if ($provider == 'gitlab' && ! empty($oauth_setting->base_url)) {
        $socialite->setHost($oauth_setting->base_url);
    }

--- a/database/factories/TeamFactory.php
+++ b/database/factories/TeamFactory.php
@ -20,7 +20,7 @@ class TeamFactory extends Factory
    public function definition(): array
    {
        return [
-            'name' => $this->faker->company() . ' Team',
+            'name' => $this->faker->company().' Team',
            'description' => $this->faker->sentence(),
            'personal_team' => false,
            'show_boarding' => false,
@ -34,7 +34,7 @@ public function personal(): static
    {
        return $this->state(fn (array $attributes) => [
            'personal_team' => true,
-            'name' => $this->faker->firstName() . "'s Team",
+            'name' => $this->faker->firstName()."'s Team",
        ]);
    }
 }
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -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() {
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@ -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>
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@ -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>