fix(ui): update server status display and improve server addition layout

This commit is contained in:
Andras Bacsai
2025-05-26 21:44:25 +02:00
parent be0453d9df
commit be89205d01
2 changed files with 24 additions and 22 deletions

View File

@@ -37,8 +37,7 @@
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" /> d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
</svg> </svg>
</span> </span>
@endif @elseif ($application->server_status == false)
@if ($application->server_status == false)
<span title="The underlying server(s) has problems."> <span title="The underlying server(s) has problems.">
<svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"> <svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" <path fill="currentColor"

View File

@@ -5,7 +5,7 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h3>Primary Server</h3> <h3>Primary Server</h3>
<div <div
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 w-96 dark:border-black"> class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
@if (str($resource->realStatus())->startsWith('running')) @if (str($resource->realStatus())->startsWith('running'))
<div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge "> <div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
</div> </div>
@@ -35,7 +35,8 @@
<h3>Additional Server(s)</h3> <h3>Additional Server(s)</h3>
@foreach ($resource->additional_networks as $destination) @foreach ($resource->additional_networks as $destination)
<div class="flex flex-col gap-2" wire:key="destination-{{ $destination->id }}"> <div class="flex flex-col gap-2" wire:key="destination-{{ $destination->id }}">
<div class="relative flex flex-col w-full box"> <div
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
@if (str(data_get($destination, 'pivot.status'))->startsWith('running')) @if (str(data_get($destination, 'pivot.status'))->startsWith('running'))
<div title="{{ data_get($destination, 'pivot.status') }}" <div title="{{ data_get($destination, 'pivot.status') }}"
class="absolute bg-success -top-1 -left-1 badge "></div> class="absolute bg-success -top-1 -left-1 badge "></div>
@@ -75,25 +76,27 @@
@endif @endif
</div> </div>
@if ($resource->getMorphClass() === 'App\Models\Application' && data_get($resource, 'build_pack') !== 'dockercompose') @if ($resource->getMorphClass() === 'App\Models\Application' && data_get($resource, 'build_pack') !== 'dockercompose')
@if (count($networks) > 0) <div class="flex flex-col gap-2">
<h4>Choose another server</h4> @if (count($networks) > 0)
<div class="grid grid-cols-1 gap-4"> <h3>Add another server</h3>
@foreach ($networks as $network) <div class="grid grid-cols-1 gap-4">
<div wire:click="addServer('{{ $network->id }}','{{ data_get($network, 'server.id') }}')" @foreach ($networks as $network)
class="relative flex flex-col cursor-default dark:text-white box w-96 group"> <div wire:click="addServer('{{ $network->id }}','{{ data_get($network, 'server.id') }}')"
<div> class="relative flex flex-col dark:text-white box group">
<div class="box-title"> <div>
Server: {{ data_get($network, 'server.name') }} <div class="box-title">
</div> Server: {{ data_get($network, 'server.name') }}
<div class="box-description"> </div>
Network: {{ data_get($network, 'name') }} <div class="box-description">
Network: {{ data_get($network, 'name') }}
</div>
</div> </div>
</div> </div>
</div> @endforeach
@endforeach </div>
</div> @else
@else <div>No additional servers available to attach.</div>
<div>No additional servers available to attach.</div> @endif
@endif </div>
@endif @endif
</div> </div>