fix: service ui structure

coollabsio · Dec 17, 2024 · b774847 · b774847
1 parent 9994742
commit b774847
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 84 deletions.
diff --git a/app/Livewire/Project/Service/Configuration.php b/app/Livewire/Project/Service/Configuration.php
@@ -9,16 +9,22 @@
 
 class Configuration extends Component
 {
+    public $currentRoute;
+
+    public $project;
+
+    public $environment;
+
     public ?Service $service = null;
 
     public $applications;
 
     public $databases;
 
-    public array $parameters;
-
     public array $query;
 
+    public array $parameters;
+
     public function getListeners()
     {
         $userId = Auth::id();
@@ -38,11 +44,21 @@ public function render()
     public function mount()
     {
         $this->parameters = get_route_parameters();
+        $this->currentRoute = request()->route()->getName();
         $this->query = request()->query();
-        $this->service = Service::whereUuid($this->parameters['service_uuid'])->first();
-        if (! $this->service) {
-            return redirect()->route('dashboard');
-        }
+        $project = currentTeam()
+            ->projects()
+            ->select('id', 'uuid', 'team_id')
+            ->where('uuid', request()->route('project_uuid'))
+            ->firstOrFail();
+        $environment = $project->environments()
+            ->select('id', 'name', 'project_id')
+            ->where('name', request()->route('environment_name'))
+            ->firstOrFail();
+        $this->service = $environment->services()->whereUuid(request()->route('service_uuid'))->firstOrFail();
+
+        $this->project = $project;
+        $this->environment = $environment;
         $this->applications = $this->service->applications->sort();
         $this->databases = $this->service->databases->sort();
     }

diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
@@ -2,17 +2,21 @@
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
         <nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a href="{{ route('project.application.configuration', $parameters) }}">
+            <a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
-            <a href="{{ route('project.application.deployment.index', $parameters) }}">
+            <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.application.deployment.index', $parameters) }}">
                 <button>Deployments</button>
             </a>
-            <a href="{{ route('project.application.logs', $parameters) }}">
+            <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.application.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
             @if (!$application->destination->server->isSwarm())
-                <a href="{{ route('project.application.command', $parameters) }}">
+                <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
+                    href="{{ route('project.application.command', $parameters) }}">
                     <button>Terminal</button>
                 </a>
             @endif

diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
@@ -1,50 +1,42 @@
-<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }">
+<div>
     <x-slot:title>
         {{ data_get_str($service, 'name')->limit(10) }} > Configuration | Coolify
     </x-slot>
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex flex-col gap-8 pt-6 h-full sm:flex-row">
-        <div class="flex flex-col gap-2 items-start min-w-fit">
+
+    <div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
+        <div class="flex flex-col items-start gap-2 min-w-fit">
             <a class="menu-item sm:min-w-fit" target="_blank" href="{{ $service->documentation() }}">Documentation
                 <x-external-link /></a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'service-stack' && 'menu-item-active'"
-                @click.prevent="activeTab = 'service-stack';
-                window.location.hash = 'service-stack'"
-                href="#">Service Stack</a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'environment-variables' && 'menu-item-active'"
-                @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
-                href="#">Environment
-                Variables</a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'storages' && 'menu-item-active'"
-                @click.prevent="activeTab = 'storages';
-                window.location.hash = 'storages'"
-                href="#">Storages</a>
-            <a class="menu-item" :class="activeTab === 'scheduled-tasks' && 'menu-item-active'"
-                @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
-                href="#">Scheduled Tasks
-            </a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'logs' && 'menu-item-active'"
-                @click.prevent="activeTab = 'logs';
-                window.location.hash = 'logs'"
-                href="#">Logs</a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'webhooks' && 'menu-item-active'"
-                @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
-            </a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'resource-operations' && 'menu-item-active'"
-                @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
-                href="#">Resource Operations
-            </a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'tags' && 'menu-item-active'"
-                @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
-            </a>
-            <a class="menu-item sm:min-w-fit" :class="activeTab === 'danger' && 'menu-item-active'"
-                @click.prevent="activeTab = 'danger';
-                window.location.hash = 'danger'"
-                href="#">Danger Zone
-            </a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.configuration', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>General</a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.environment-variables', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Environment Variables</a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.storages', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Persistent Storages</a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Scheduled Tasks</a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.webhooks', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Webhooks</a>
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.resource-operations', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Resource Operations</a>
+
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.tags', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Tags</a>
+
+            <a class='menu-item' wire:current.exact="menu-item-active"
+                href="{{ route('project.service.danger', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid]) }}"
+                wire:navigate>Danger Zone</a>
         </div>
         <div class="w-full">
-            <div x-cloak x-show="activeTab === 'service-stack'">
+            @if (request()->route()->getName() === 'project.service.configuration')
                 <livewire:project.service.stack-form :service="$service" />
                 <h3>Services</h3>
                 <div class="grid grid-cols-1 gap-2 pt-4 xl:grid-cols-1">
@@ -103,7 +95,7 @@ class="w-4 h-4 dark:text-warning text-coollabs"
                                 </div>
                                 <div class="flex items-center px-4">
                                     <a class="mx-4 text-xs font-bold hover:underline"
-                                        href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $application->uuid]) }}">
+                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $application->uuid]) }}">
                                         Settings
                                     </a>
                                     @if (str($application->status)->contains('running'))
@@ -151,12 +143,12 @@ class="w-4 h-4 dark:text-warning text-coollabs"
                                 <div class="flex items-center px-4">
                                     @if ($database->isBackupSolutionAvailable())
                                         <a class="mx-4 text-xs font-bold hover:underline"
-                                            href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $database->uuid]) }}#backups">
+                                            href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}#backups">
                                             Backups
                                         </a>
                                     @endif
                                     <a class="mx-4 text-xs font-bold hover:underline"
-                                        href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $database->uuid]) }}">
+                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
                                         Settings
                                     </a>
                                     @if (str($database->status)->contains('running'))
@@ -173,44 +165,33 @@ class="w-4 h-4 dark:text-warning text-coollabs"
                         </div>
                     @endforeach
                 </div>
-            </div>
-            <div x-cloak x-show="activeTab === 'storages'">
+            @elseif (request()->route()->getName() === 'project.service.environment-variables')
+                <livewire:project.shared.environment-variable.all :resource="$service" />
+            @elseif (request()->route()->getName() === 'project.service.storages')
                 <div class="flex gap-2 items-center">
                     <h2>Storages</h2>
                 </div>
                 <div class="pb-4">Persistent storage to preserve data between deployments.</div>
                 <div class="pb-4 dark:text-warning text-coollabs">If you would like to add a volume, you must add it to
                     your compose file (Service Stack tab).</div>
                 @foreach ($applications as $application)
-                    <livewire:project.service.storage wire:key="application-{{ $application->id }}" :resource="$application"
-                        lazy />
+                    <livewire:project.service.storage wire:key="application-{{ $application->id }}"
+                        :resource="$application" />
                 @endforeach
                 @foreach ($databases as $database)
-                    <livewire:project.service.storage wire:key="database-{{ $database->id }}" :resource="$database"
-                        lazy />
+                    <livewire:project.service.storage wire:key="database-{{ $database->id }}" :resource="$database" />
                 @endforeach
-            </div>
-            <div x-cloak x-show="activeTab === 'scheduled-tasks'">
+            @elseif (request()->route()->getName() === 'project.service.scheduled-tasks.show')
                 <livewire:project.shared.scheduled-task.all :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'webhooks'">
+            @elseif (request()->route()->getName() === 'project.service.webhooks')
                 <livewire:project.shared.webhooks :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'logs'">
-                <livewire:project.shared.logs :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'environment-variables'">
-                <livewire:project.shared.environment-variable.all :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'resource-operations'">
+            @elseif (request()->route()->getName() === 'project.service.resource-operations')
                 <livewire:project.shared.resource-operations :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'tags'">
+            @elseif (request()->route()->getName() === 'project.service.tags')
                 <livewire:project.shared.tags :resource="$service" />
-            </div>
-            <div x-cloak x-show="activeTab === 'danger'">
+            @elseif (request()->route()->getName() === 'project.service.danger')
                 <livewire:project.shared.danger :resource="$service" />
-            </div>
+            @endif
         </div>
     </div>
 </div>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
@@ -1,4 +1,4 @@
-<div wire:poll.10000ms="check_status_without_notification">
+<div>
     <livewire:project.shared.configuration-checker :resource="$service" />
     <x-slide-over @startservice.window="slideOverOpen = true" closeWithX fullScreen>
         <x-slot:title>Service Startup</x-slot:title>
@@ -14,6 +14,10 @@
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
+            <a class="{{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.service.logs', $parameters) }}">
+                <button>Logs</button>
+            </a>
             <a class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.command', $parameters) }}">
                 <button>Terminal</button>

diff --git a/resources/views/livewire/project/shared/logs.blade.php b/resources/views/livewire/project/shared/logs.blade.php
@@ -7,7 +7,6 @@
         <h1>Logs</h1>
         <livewire:project.application.heading :application="$resource" />
         <div class="pt-4">
-            <h2>Logs</h2>
             <div class="subtitle">Here you can see the logs of the application.</div>
             <div class="pt-2" wire:loading wire:target="loadContainers">
                 Loading containers...
@@ -31,10 +30,8 @@
         <h1>Logs</h1>
         <livewire:project.database.heading :database="$resource" />
         <div class="pt-4">
+            <div class="subtitle">Here you can see the logs of the database.</div>
             @forelse ($containers as $container)
-                @if ($loop->first)
-                    <h2 class="pb-4">Logs</h2>
-                @endif
                 @if (data_get($servers, '0'))
                     <livewire:project.shared.get-logs :server="data_get($servers, '0')" :resource="$resource" :container="$container" />
                 @else
@@ -45,11 +42,10 @@
             @endforelse
         </div>
     @elseif ($type === 'service')
-        <div>
+        <livewire:project.service.navbar :service="$resource" :parameters="$parameters" :query="$query" title="Logs" />
+        <div class="pt-4">
+            <div class="subtitle">Here you can see the logs of the service.</div>
             @forelse ($containers as $container)
-                @if ($loop->first)
-                    <h2 class="pb-4">Logs</h2>
-                @endif
                 @if (data_get($servers, '0'))
                     <livewire:project.shared.get-logs :server="data_get($servers, '0')" :resource="$resource" :container="$container" />
                 @else

diff --git a/routes/web.php b/routes/web.php
@@ -215,6 +215,14 @@
     });
     Route::prefix('project/{project_uuid}/{environment_name}/service/{service_uuid}')->group(function () {
         Route::get('/', ServiceConfiguration::class)->name('project.service.configuration');
+        Route::get('/logs', Logs::class)->name('project.service.logs');
+        Route::get('/environment-variables', ServiceConfiguration::class)->name('project.service.environment-variables');
+        Route::get('/storages', ServiceConfiguration::class)->name('project.service.storages');
+        Route::get('/scheduled-tasks', ServiceConfiguration::class)->name('project.service.scheduled-tasks.show');
+        Route::get('/webhooks', ServiceConfiguration::class)->name('project.service.webhooks');
+        Route::get('/resource-operations', ServiceConfiguration::class)->name('project.service.resource-operations');
+        Route::get('/tags', ServiceConfiguration::class)->name('project.service.tags');
+        Route::get('/danger', ServiceConfiguration::class)->name('project.service.danger');
         Route::get('/terminal', ExecuteContainerCommand::class)->name('project.service.command');
         Route::get('/{stack_service_uuid}', ServiceIndex::class)->name('project.service.index');
         Route::get('/tasks/{task_uuid}', ScheduledTaskShow::class)->name('project.service.scheduled-tasks');