lots of UI fixes

This commit is contained in:
Andras Bacsai
2023-07-14 13:38:24 +02:00
parent 2f613aed26
commit 8b128c1bbe
17 changed files with 188 additions and 145 deletions

View File

@@ -26,11 +26,9 @@
]) }}">
<button>Destinations</button>
</a>
@if ($server->settings->is_reachable)
@if (request()->routeIs('server.proxy'))
<div class="flex-1"></div>
<livewire:server.proxy.deploy :server="$server" />
@endif
@if (request()->routeIs('server.proxy'))
<div class="flex-1"></div>
<livewire:server.proxy.deploy :server="$server" />
@endif
</nav>
</div>

View File

@@ -1,32 +1,36 @@
<div>
<div class="flex items-end gap-2">
<h2>Destinations</h2>
<a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
<x-forms.button>Add a new destination</x-forms.button>
</a>
<x-forms.button wire:click='scan'>Scan destinations on the server</x-forms.button>
</div>
<div class="pt-2 pb-6 ">Destinations are used to segregate resources by network.</div>
<div class="flex gap-2 ">
Available for using:
@forelse ($server->standaloneDockers as $docker)
<a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
<button class="text-white btn-link">{{ data_get($docker, 'network') }} </button>
@if ($server->settings->is_usable)
<div class="flex items-end gap-2">
<h2>Destinations</h2>
<a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
<x-forms.button>Add a new destination</x-forms.button>
</a>
@empty
<div class="">N/A</div>
@endforelse
</div>
<div class="grid gap-2 pt-2">
@if (count($networks) > 0)
<h4>Found Destinations</h4>
@endif
@foreach ($networks as $network)
<a
href="{{ route('destination.new', ['server_id' => $server->id, 'network_name' => data_get($network, 'Name')]) }}">
<x-forms.button>Add<span class="text-warning">{{ data_get($network, 'Name') }}</span>
</x-forms.button>
</a>
@endforeach
</div>
<x-forms.button wire:click='scan'>Scan destinations on the server</x-forms.button>
</div>
<div class="pt-2 pb-6 ">Destinations are used to segregate resources by network.</div>
<div class="flex gap-2 ">
Available for using:
@forelse ($server->standaloneDockers as $docker)
<a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
<button class="text-white btn-link">{{ data_get($docker, 'network') }} </button>
</a>
@empty
<div class="">N/A</div>
@endforelse
</div>
<div class="grid gap-2 pt-2">
@if (count($networks) > 0)
<h4>Found Destinations</h4>
@endif
@foreach ($networks as $network)
<a
href="{{ route('destination.new', ['server_id' => $server->id, 'network_name' => data_get($network, 'Name')]) }}">
<x-forms.button>Add<span class="text-warning">{{ data_get($network, 'Name') }}</span>
</x-forms.button>
</a>
@endforeach
</div>
@else
<div>Server is not validated. Validate first.</div>
@endif
</div>

View File

@@ -1,7 +1,7 @@
<div x-data="{ stopProxy: false }">
<x-naked-modal show="stopProxy" action="stopProxy" title="Stop Proxy"
message='This proxy will be stopped. It is not reversible. <br>All resources will be unavailable. <br>Please think again.' />
@if ($server->settings->is_reachable)
@if ($server->settings->is_usable)
@if ($server->proxy->type)
<div x-init="$wire.checkProxySettingsInSync">
@if ($selectedProxy->value === 'TRAEFIK_V2')
@@ -12,9 +12,7 @@
@if ($server->proxy->status === 'exited')
<x-forms.button wire:click.prevent="switchProxy">Switch Proxy</x-forms.button>
@endif
@if ($server->settings->is_reachable)
<livewire:server.proxy.status :server="$server" />
@endif
<livewire:server.proxy.status :server="$server" />
</div>
<div class="pt-3 pb-4 ">Traefik v2</div>
@@ -66,6 +64,6 @@
</div>
@endif
@else
<div class="">Server is not validated. Validate first.</div>
<div>Server is not validated. Validate first.</div>
@endif
</div>

View File

@@ -1,76 +1,79 @@
<div>
@if ($server->proxy->status === 'running')
<div class="flex gap-4">
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Links
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block ">
<ul tabindex="0"
class="relative text-xs text-white normal-case rounded -ml-28 min-w-max menu bg-coolgray-200">
<li>
@if ($server->name === 'localhost')
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="{{ base_ip() }}:8080">
Traefik Dashboard
<x-external-link />
</a>
@else
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="http://{{ $server->ip }}:8080">
Traefik Dashboard
<x-external-link />
</a>
@endif
</li>
</ul>
@if (data_get($server, 'proxy.type'))
@if (data_get($server, 'proxy.status') === 'running')
<div class="flex gap-4">
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Links
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block ">
<ul tabindex="0"
class="relative text-xs text-white normal-case rounded -ml-28 min-w-max menu bg-coolgray-200">
<li>
@if ($server->name === 'localhost')
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="{{ base_ip() }}:8080">
Traefik Dashboard
<x-external-link />
</a>
@else
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="http://{{ $server->ip }}:8080">
Traefik Dashboard
<x-external-link />
</a>
@endif
</li>
</ul>
</div>
</div>
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Actions
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block ">
<ul tabindex="0"
class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200 -ml-14">
<li>
<div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
<path d="M12 9l0 3" />
<path d="M12 15l.01 0" />
</svg>Restart</div>
</li>
<li>
<div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
<path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
<path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
<path
d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
</svg>Stop</div>
</li>
</ul>
</div>
</div>
</div>
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Actions
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block ">
<ul tabindex="0"
class="relative text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200 -ml-14">
<li>
<div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
<path d="M12 9l0 3" />
<path d="M12 15l.01 0" />
</svg>Restart</div>
</li>
<li>
<div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
<path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
<path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
<path
d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
</svg>Stop</div>
</li>
</ul>
</div>
</div>
</div>
@else
<button wire:click='deploy' class="flex items-center gap-2 cursor-pointer hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 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>Start Proxy
</button>
@else
<button wire:click='deploy' class="flex items-center gap-2 cursor-pointer hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 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>Start Proxy
</button>
@endif
@endif
</div>

View File

@@ -11,13 +11,22 @@
<div class="flex flex-col mx-6">
<div class=" group-hover:text-white">
{{ $server->name }}
@if (!$server->settings->is_reachable)
<span class="text-xs text-error">not validated yet</span>
@endif
</div>
<div class="text-xs group-hover:text-white"
href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}">
{{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable)
<span>Not reachable</span>
@endif
@if (!$server->settings->is_reachable && !$server->settings->is_usable)
&
@endif
@if (!$server->settings->is_usable)
<span>Not usable by Coolify</span>
@endif
</div>
</div>
<div class="flex-1"></div>
</div>