fix(ui): add back missing service navbar components

app/Livewire/Project/Service/Navbar.php

@@ -0,0 +1,154 @@
+<?php
+
+namespace App\Livewire\Project\Service;
+
+use App\Actions\Service\StartService;
+use App\Actions\Service\StopService;
+use App\Enums\ProcessStatus;
+use App\Events\ServiceStatusChanged;
+use App\Models\Service;
+use Illuminate\Support\Facades\Auth;
+use Livewire\Component;
+use Spatie\Activitylog\Models\Activity;
+
+class Navbar extends Component
+{
+    public Service $service;
+
+    public array $parameters;
+
+    public array $query;
+
+    public $isDeploymentProgress = false;
+
+    public $docker_cleanup = true;
+
+    public $title = 'Configuration';
+
+    public function mount()
+    {
+        if (str($this->service->status)->contains('running') && is_null($this->service->config_hash)) {
+            $this->service->isConfigurationChanged(true);
+            $this->dispatch('configurationChanged');
+        }
+    }
+
+    public function getListeners()
+    {
+        $userId = Auth::id();
+
+        return [
+            "echo-private:user.{$userId},ServiceStatusChanged" => 'serviceStarted',
+            'envsUpdated' => '$refresh',
+            'refreshStatus' => '$refresh',
+        ];
+    }
+
+    public function serviceStarted()
+    {
+        // $this->dispatch('success', 'Service status changed.');
+        if (is_null($this->service->config_hash) || $this->service->isConfigurationChanged()) {
+            $this->service->isConfigurationChanged(true);
+            $this->dispatch('configurationChanged');
+        } else {
+            $this->dispatch('configurationChanged');
+        }
+    }
+
+    public function check_status_without_notification()
+    {
+        $this->dispatch('check_status');
+    }
+
+    public function check_status()
+    {
+        $this->dispatch('check_status');
+        $this->dispatch('success', 'Service status updated.');
+    }
+
+    public function checkDeployments()
+    {
+        try {
+            $activity = Activity::where('properties->type_uuid', $this->service->uuid)->latest()->first();
+            $status = data_get($activity, 'properties.status');
+            if ($status === ProcessStatus::QUEUED->value || $status === ProcessStatus::IN_PROGRESS->value) {
+                $this->isDeploymentProgress = true;
+            } else {
+                $this->isDeploymentProgress = false;
+            }
+        } catch (\Throwable) {
+            $this->isDeploymentProgress = false;
+        }
+
+        return $this->isDeploymentProgress;
+    }
+
+    public function start()
+    {
+        $activity = StartService::run($this->service, pullLatestImages: true);
+        $this->dispatch('activityMonitor', $activity->id);
+    }
+
+    public function forceDeploy()
+    {
+        try {
+            $activities = Activity::where('properties->type_uuid', $this->service->uuid)->where('properties->status', ProcessStatus::IN_PROGRESS->value)->orWhere('properties->status', ProcessStatus::QUEUED->value)->get();
+            foreach ($activities as $activity) {
+                $activity->properties->status = ProcessStatus::ERROR->value;
+                $activity->save();
+            }
+            $activity = StartService::run($this->service, pullLatestImages: true, stopBeforeStart: true);
+            $this->dispatch('activityMonitor', $activity->id);
+        } catch (\Exception $e) {
+            $this->dispatch('error', $e->getMessage());
+        }
+    }
+
+    public function stop($cleanupContainers = false)
+    {
+        try {
+            StopService::run($this->service, false, $this->docker_cleanup);
+            ServiceStatusChanged::dispatch();
+            if ($cleanupContainers) {
+                $this->dispatch('success', 'Containers cleaned up.');
+            } else {
+                $this->dispatch('success', 'Service stopped.');
+            }
+        } catch (\Exception $e) {
+            $this->dispatch('error', $e->getMessage());
+        }
+    }
+
+    public function restart()
+    {
+        $this->checkDeployments();
+        if ($this->isDeploymentProgress) {
+            $this->dispatch('error', 'There is a deployment in progress.');
+
+            return;
+        }
+        $activity = StartService::run($this->service, stopBeforeStart: true);
+        $this->dispatch('activityMonitor', $activity->id);
+    }
+
+    public function pullAndRestartEvent()
+    {
+        $this->checkDeployments();
+        if ($this->isDeploymentProgress) {
+            $this->dispatch('error', 'There is a deployment in progress.');
+
+            return;
+        }
+        $activity = StartService::run($this->service, pullLatestImages: true, stopBeforeStart: true);
+        $this->dispatch('activityMonitor', $activity->id);
+    }
+
+    public function render()
+    {
+        return view('livewire.project.service.navbar', [
+            'checkboxes' => [
+                ['id' => 'docker_cleanup', 'label' => __('resource.docker_cleanup')],
+            ],
+        ]);
+    }
+}

resources/views/livewire/project/service/navbar.blade.php

@@ -0,0 +1,182 @@
+<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>
+        <x-slot:content>
+            <livewire:activity-monitor header="Logs" showWaiting fullHeight />
+        </x-slot:content>
+    </x-slide-over>
+    <h1>{{ $title }}</h1>
+    <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
+    <div class="navbar-main" x-data">
+        <nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+                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>
+            </a>
+            <x-services.links :service="$service" />
+        </nav>
+        @if ($service->isDeployable)
+            <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
+                <x-services.advanced :service="$service" />
+                @if (str($service->status)->contains('running'))
+                    <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+                        <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2">
+                                <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                <path d="M20 4v5h-5" />
+                            </g>
+                        </svg>
+                        Restart
+                    </x-forms.button>
+                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" submitAction="stop"
+                        :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]" :confirmWithText="false" :confirmWithPassword="false"
+                        step1ButtonText="Continue" step2ButtonText="Stop Service" :dispatchEvent="true"
+                        dispatchEventType="stopEvent">
+                        <x-slot:button-title>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-slot:button-title>
+                    </x-modal-confirmation>
+                @elseif (str($service->status)->contains('degraded'))
+                    <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+                        <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2">
+                                <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                <path d="M20 4v5h-5" />
+                            </g>
+                        </svg>
+                        Restart
+                    </x-forms.button>
+                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" submitAction="stop"
+                        :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]" :confirmWithText="false" :confirmWithPassword="false"
+                        step1ButtonText="Continue" step2ButtonText="Stop Service" :dispatchEvent="true"
+                        dispatchEventType="stopEvent">
+                        <x-slot:button-title>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-slot:button-title>
+                    </x-modal-confirmation>
+                @elseif (str($service->status)->contains('exited'))
+                    <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M7 4v16l13 -8z" />
+                        </svg>
+                        Deploy
+                    </button>
+                @else
+                    <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" submitAction="stop"
+                        :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]" :confirmWithText="false" :confirmWithPassword="false"
+                        step1ButtonText="Continue" step2ButtonText="Stop Service" :dispatchEvent="true"
+                        dispatchEventType="stopEvent">
+                        <x-slot:button-title>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                                <path
+                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                </path>
+                            </svg>
+                            Stop
+                        </x-slot:button-title>
+                    </x-modal-confirmation>
+                    <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M7 4v16l13 -8z" />
+                        </svg>
+                        Deploy
+                    </button>
+                @endif
+            </div>
+        @else
+            <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
+                <div class="text-error">
+                    Unable to deploy. <a class="underline font-bold cursor-pointer"
+                        href="{{ route('project.service.environment-variables', $parameters) }}">
+                        Required environment variables missing.</a>
+                </div>
+            </div>
+        @endif
+    </div>
+    @script
+        <script>
+            $wire.$on('stopEvent', () => {
+                $wire.$dispatch('info', 'Gracefully stopping service, it could take a while depending on the service.');
+                $wire.$call('stop');
+            });
+            $wire.$on('startEvent', async () => {
+                const isDeploymentProgress = await $wire.$call('checkDeployments');
+                if (isDeploymentProgress) {
+                    $wire.$dispatch('error',
+                        'There is a deployment in progress.<br><br>You can force deploy in the "Advanced" section.'
+                    );
+                    return;
+                }
+                window.dispatchEvent(new CustomEvent('startservice'));
+                $wire.$call('start');
+            });
+            $wire.$on('forceDeployEvent', () => {
+                window.dispatchEvent(new CustomEvent('startservice'));
+                $wire.$call('forceDeploy');
+            });
+            $wire.$on('restartEvent', async () => {
+                const isDeploymentProgress = await $wire.$call('checkDeployments');
+                if (isDeploymentProgress) {
+                    $wire.$dispatch('error',
+                        'There is a deployment in progress.<br><br>You can force deploy in the "Advanced" section.'
+                    );
+                    return;
+                }
+                $wire.$dispatch('info', 'Service restart in progress.');
+                window.dispatchEvent(new CustomEvent('startservice'));
+                $wire.$call('restart');
+            });
+            $wire.$on('pullAndRestartEvent', () => {
+                $wire.$dispatch('info', 'Pulling new images and restarting service.');
+                window.dispatchEvent(new CustomEvent('startservice'));
+                $wire.$call('pullAndRestartEvent');
+            });
+            $wire.on('imagePulled', () => {
+                window.dispatchEvent(new CustomEvent('startservice'));
+                $wire.$dispatch('info', 'Restarting service.');
+            });
+        </script>
+    @endscript
+</div>