navbar changed in order top move as first element the button for start/redeploy

This commit is contained in:
Francesco Bruno 2024-05-05 16:33:52 +00:00
parent d52aac76c0
commit 91dbf1f01a
10 changed files with 179 additions and 163 deletions

View File

@ -157,7 +157,7 @@ tr td:first-child {
} }
.menu-item { .menu-item {
@apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300; @apply flex items-center text-sm w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
} }
.menu-item-active { .menu-item-active {
@ -185,7 +185,7 @@ tr td:first-child {
} }
.navbar-main { .navbar-main {
@apply flex items-center h-fit gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200 overflow-x-scroll min-h-10; @apply flex h-fit flex-col sm:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 sm:items-center;
} }
.loading { .loading {

View File

@ -1,18 +1,20 @@
<div class="pb-6"> <div class="pb-6">
<h1>Notifications</h1> <h1>Notifications</h1>
<div class="subtitle">Get notified about your infrastructure.</div> <div class="subtitle">Get notified about your infrastructure.</div>
<nav class="navbar-main"> <div class="navbar-main">
<a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}" <nav class="flex gap-4 overflow-x-scroll items-center">
href="{{ route('notifications.email') }}"> <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
<button>Email</button> href="{{ route('notifications.email') }}">
</a> <button>Email</button>
<a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}" </a>
href="{{ route('notifications.telegram') }}"> <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
<button>Telegram</button> href="{{ route('notifications.telegram') }}">
</a> <button>Telegram</button>
<a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}" </a>
href="{{ route('notifications.discord') }}"> <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
<button>Discord</button> href="{{ route('notifications.discord') }}">
</a> <button>Discord</button>
</nav> </a>
</nav>
</div>
</div> </div>

View File

@ -1,12 +1,14 @@
<div class="pb-6"> <div class="pb-6">
<h1>Security</h1> <h1>Security</h1>
<div class="subtitle">Security related settings.</div> <div class="subtitle">Security related settings.</div>
<nav class="navbar-main"> <div class="navbar-main">
<a href="{{ route('security.private-key.index') }}"> <nav class="flex gap-4 overflow-x-scroll items-center">
<button>Private Keys</button> <a href="{{ route('security.private-key.index') }}">
</a> <button>Private Keys</button>
<a href="{{ route('security.api-tokens') }}"> </a>
<button>API tokens</button> <a href="{{ route('security.api-tokens') }}">
</a> <button>API tokens</button>
</nav> </a>
</nav>
</div>
</div> </div>

View File

@ -5,47 +5,49 @@
<livewire:server.proxy.status :server="$server" /> <livewire:server.proxy.status :server="$server" />
</div> </div>
<div class="subtitle">{{ data_get($server, 'name') }}.</div> <div class="subtitle">{{ data_get($server, 'name') }}.</div>
<nav class="navbar-main"> <div class="navbar-main">
<a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}" <nav class="flex gap-4 overflow-x-scroll items-center">
href="{{ route('server.show', [ <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
'server_uuid' => data_get($parameters, 'server_uuid'), href="{{ route('server.show', [
]) }}">
<button>General</button>
</a>
<a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
href="{{ route('server.private-key', [
'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}">
<button>Private Key</button>
</a>
<a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
href="{{ route('server.resources', [
'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}">
<button>Resources</button>
</a>
@if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
<a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
href="{{ route('server.proxy', [
'server_uuid' => data_get($parameters, 'server_uuid'), 'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}"> ]) }}">
<button>Proxy</button> <button>General</button>
</a> </a>
<a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
href="{{ route('server.destinations', [ href="{{ route('server.private-key', [
'server_uuid' => data_get($parameters, 'server_uuid'), 'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}"> ]) }}">
<button>Destinations</button> <button>Private Key</button>
</a> </a>
<a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
href="{{ route('server.log-drains', [ href="{{ route('server.resources', [
'server_uuid' => data_get($parameters, 'server_uuid'), 'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}"> ]) }}">
<button>Log Drains</button> <button>Resources</button>
</a> </a>
@endif @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
<a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
<div class="flex-1"></div> href="{{ route('server.proxy', [
<livewire:server.proxy.deploy :server="$server" /> 'server_uuid' => data_get($parameters, 'server_uuid'),
</nav> ]) }}">
<button>Proxy</button>
</a>
<a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
href="{{ route('server.destinations', [
'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}">
<button>Destinations</button>
</a>
<a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
href="{{ route('server.log-drains', [
'server_uuid' => data_get($parameters, 'server_uuid'),
]) }}">
<button>Log Drains</button>
</a>
@endif
</nav>
<div class="order-first sm:order-last">
<livewire:server.proxy.deploy :server="$server" />
</div>
</div>
</div> </div>

View File

@ -1,17 +1,19 @@
<div class="pb-5"> <div class="pb-5">
<h1>Settings</h1> <h1>Settings</h1>
<div class="subtitle">Instance wide settings for Coolify.</div> <div class="subtitle">Instance wide settings for Coolify.</div>
<nav class="navbar-main"> <div class="navbar-main">
<a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}" <nav class="flex gap-4 overflow-x-scroll items-center">
href="{{ route('settings.index') }}"> <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
<button>Configuration</button> href="{{ route('settings.index') }}">
</a> <button>Configuration</button>
@if (isCloud())
<a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
href="{{ route('settings.license') }}">
<button>Resale License</button>
</a> </a>
@endif @if (isCloud())
<div class="flex-1"></div> <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
</nav> href="{{ route('settings.license') }}">
<button>Resale License</button>
</a>
@endif
<div class="flex-1"></div>
</nav>
</div>
</div> </div>

View File

@ -6,14 +6,16 @@
</x-modal-input> </x-modal-input>
</div> </div>
<div class="subtitle">Team wide configurations.</div> <div class="subtitle">Team wide configurations.</div>
<nav class="navbar-main"> <div class="navbar-main">
<a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}"> <nav class="flex gap-4 overflow-x-scroll items-center">
<button>General</button> <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
</a> <button>General</button>
<a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}" </a>
href="{{ route('team.member.index') }}"> <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
<button>Members</button> href="{{ route('team.member.index') }}">
</a> <button>Members</button>
<div class="flex-1"></div> </a>
</nav> <div class="flex-1"></div>
</nav>
</div>
</div> </div>

View File

@ -116,7 +116,7 @@
@if ($application->build_pack !== 'dockerimage') @if ($application->build_pack !== 'dockerimage')
<h3 class="pt-8">Build</h3> <h3 class="pt-8">Build</h3>
@if ($application->build_pack !== 'dockercompose') @if ($application->build_pack !== 'dockercompose')
<div class="w-96"> <div class="max-w-96">
<x-forms.checkbox <x-forms.checkbox
helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>." helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
instantSave id="application.settings.is_build_server_enabled" instantSave id="application.settings.is_build_server_enabled"

View File

@ -1,23 +1,24 @@
<nav wire:poll.5000ms="check_status"> <nav wire:poll.5000ms="check_status">
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" /> <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
<div class="navbar-main"> <div class="navbar-main">
<a href="{{ route('project.application.configuration', $parameters) }}"> <nav class="flex gap-4 overflow-x-scroll items-center">
Configuration <a href="{{ route('project.application.configuration', $parameters) }}">
</a> Configuration
<a href="{{ route('project.application.deployment.index', $parameters) }}">
<button>Deployments</button>
</a>
<a href="{{ route('project.application.logs', $parameters) }}">
<button>Logs</button>
</a>
@if (!$application->destination->server->isSwarm())
<a href="{{ route('project.application.command', $parameters) }}">
<button>Command</button>
</a> </a>
@endif <a href="{{ route('project.application.deployment.index', $parameters) }}">
<x-applications.links :application="$application" /> <button>Deployments</button>
<div class="flex-1"></div> </a>
<div class="flex items-center gap-2"> <a href="{{ route('project.application.logs', $parameters) }}">
<button>Logs</button>
</a>
@if (!$application->destination->server->isSwarm())
<a href="{{ route('project.application.command', $parameters) }}">
<button>Command</button>
</a>
@endif
<x-applications.links :application="$application" />
</nav>
<div class="flex items-center gap-2 order-first sm:order-last">
@if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)) @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
<div>Please load a Compose file.</div> <div>Please load a Compose file.</div>
@else @else
@ -100,6 +101,7 @@
</div> </div>
@endif @endif
</div> </div>
</div> </div>
@script @script
<script> <script>

View File

@ -7,67 +7,70 @@
</x-slot:content> </x-slot:content>
</x-slide-over> </x-slide-over>
<div class="navbar-main"> <div class="navbar-main">
<a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" <nav class="flex gap-4 overflow-x-scroll items-center">
href="{{ route('project.database.configuration', $parameters) }}"> <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
<button>Configuration</button> href="{{ route('project.database.configuration', $parameters) }}">
</a> <button>Configuration</button>
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.command', $parameters) }}">
<button>Execute Command</button>
</a>
<a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.logs', $parameters) }}">
<button>Logs</button>
</a>
@if (
$database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
$database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
$database->getMorphClass() === 'App\Models\StandaloneMysql' ||
$database->getMorphClass() === 'App\Models\StandaloneMariadb')
<a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.backup.index', $parameters) }}">
<button>Backups</button>
</a> </a>
@endif <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
<div class="flex-1"></div> href="{{ route('project.database.command', $parameters) }}">
@if (!str($database->status)->startsWith('exited')) <button>Execute Command</button>
<x-modal-confirmation @click="$wire.dispatch('stopEvent')"> </a>
<x-slot:button-title> <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" href="{{ route('project.database.logs', $parameters) }}">
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" <button>Logs</button>
</a>
@if (
$database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
$database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
$database->getMorphClass() === 'App\Models\StandaloneMysql' ||
$database->getMorphClass() === 'App\Models\StandaloneMariadb')
<a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.backup.index', $parameters) }}">
<button>Backups</button>
</a>
@endif
</nav>
<div class="flex items-center gap-2 order-first sm:order-last">
@if (!str($database->status)->startsWith('exited'))
<x-modal-confirmation @click="$wire.dispatch('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>
This database will be stopped. <br>Please think again.
</x-modal-confirmation>
@else
<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"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<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 d="M7 4v16l13 -8z" />
</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> </svg>
Stop Start
</x-slot:button-title> </button>
This database will be stopped. <br>Please think again. @endif
</x-modal-confirmation> @script
@else <script>
<button @click="$wire.dispatch('startEvent')" class="gap-2 button"> $wire.$on('startEvent', () => {
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" window.dispatchEvent(new CustomEvent('startdatabase'));
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" $wire.$call('start');
stroke-linejoin="round"> });
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> $wire.$on('stopEvent', () => {
<path d="M7 4v16l13 -8z" /> $wire.$dispatch('info', 'Stopping database.');
</svg> $wire.$call('stop');
Start });
</button> </script>
@endif @endscript
@script </div>
<script>
$wire.$on('startEvent', () => {
window.dispatchEvent(new CustomEvent('startdatabase'));
$wire.$call('start');
});
$wire.$on('stopEvent', () => {
$wire.$dispatch('info', 'Stopping database.');
$wire.$call('stop');
});
</script>
@endscript
</div> </div>
</nav> </nav>

View File

@ -9,13 +9,14 @@
<h1>Configuration</h1> <h1>Configuration</h1>
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" /> <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
<div class="navbar-main" x-data> <div class="navbar-main" x-data>
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" <nav class="flex gap-4 overflow-x-scroll items-center">
href="{{ route('project.service.configuration', $parameters) }}"> <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
<button>Configuration</button> href="{{ route('project.service.configuration', $parameters) }}">
</a> <button>Configuration</button>
<x-services.links :service="$service" /> </a>
<div class="flex-1"></div> <x-services.links :service="$service" />
<div class="flex gap-2"> </nav>
<div class="flex gap-2 order-first sm:order-last">
@if (str($service->status())->contains('running')) @if (str($service->status())->contains('running'))
<button @click="$wire.dispatch('restartEvent')" class="gap-2 button"> <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
<svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">