fix: service ui structure
This commit is contained in:
Andras Bacsai
@@ -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
|
||||
|
||||
@@ -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 @@
|
||||
</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 @@
|
||||
<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,8 +165,9 @@
|
||||
</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>
|
||||
@@ -182,35 +175,23 @@
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user