refactor(server-ui): improve layout and messaging in advanced settings and charts views
This commit is contained in:
Andras Bacsai
@@ -11,7 +11,7 @@
|
|||||||
<h2>Advanced</h2>
|
<h2>Advanced</h2>
|
||||||
<x-forms.button type="submit">Save</x-forms.button>
|
<x-forms.button type="submit">Save</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 mb-4">Advanced configuration for your server.</div>
|
<div class="mb-4">Advanced configuration for your server.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Disk Usage</h3>
|
<h3>Disk Usage</h3>
|
||||||
@@ -42,32 +42,24 @@
|
|||||||
<div class="flex flex-col gap-4 pt-8">
|
<div class="flex flex-col gap-4 pt-8">
|
||||||
<h3>CA SSL Certificate</h3>
|
<h3>CA SSL Certificate</h3>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<x-modal-confirmation
|
<x-modal-confirmation title="Confirm changing of CA Certificate?" buttonTitle="Save Certificate"
|
||||||
title="Confirm changing of CA Certificate?"
|
submitAction="saveCaCertificate" :actions="[
|
||||||
buttonTitle="Save Certificate"
|
|
||||||
submitAction="saveCaCertificate"
|
|
||||||
:actions="[
|
|
||||||
'This will overwrite the existing CA certificate at /data/coolify/ssl/coolify-ca.crt with your custom CA certificate.',
|
'This will overwrite the existing CA certificate at /data/coolify/ssl/coolify-ca.crt with your custom CA certificate.',
|
||||||
'This will regenerate all SSL certificates for databases on this server and it will sign them with your custom CA.',
|
'This will regenerate all SSL certificates for databases on this server and it will sign them with your custom CA.',
|
||||||
'You must manually redeploy all your databases on this server so that they use the new SSL certificates singned with your new CA certificate.',
|
'You must manually redeploy all your databases on this server so that they use the new SSL certificates singned with your new CA certificate.',
|
||||||
'Because of caching, you probably also need to redeploy all your resources on this server that are using this CA certificate.'
|
'Because of caching, you probably also need to redeploy all your resources on this server that are using this CA certificate.',
|
||||||
]"
|
]"
|
||||||
confirmationText="/data/coolify/ssl/coolify-ca.crt"
|
confirmationText="/data/coolify/ssl/coolify-ca.crt" shortConfirmationLabel="CA Certificate Path"
|
||||||
shortConfirmationLabel="CA Certificate Path"
|
|
||||||
step3ButtonText="Save Certificate">
|
step3ButtonText="Save Certificate">
|
||||||
</x-modal-confirmation>
|
</x-modal-confirmation>
|
||||||
<x-modal-confirmation
|
<x-modal-confirmation title="Confirm Regenerate Certificate?" buttonTitle="Regenerate Certificate"
|
||||||
title="Confirm Regenerate Certificate?"
|
submitAction="regenerateCaCertificate" :actions="[
|
||||||
buttonTitle="Regenerate Certificate"
|
|
||||||
submitAction="regenerateCaCertificate"
|
|
||||||
:actions="[
|
|
||||||
'This will generate a new CA certificate at /data/coolify/ssl/coolify-ca.crt and replace the existing one.',
|
'This will generate a new CA certificate at /data/coolify/ssl/coolify-ca.crt and replace the existing one.',
|
||||||
'This will regenerate all SSL certificates for databases on this server and it will sign them with the new CA certificate.',
|
'This will regenerate all SSL certificates for databases on this server and it will sign them with the new CA certificate.',
|
||||||
'You must manually redeploy all your databases on this server so that they use the new SSL certificates singned with the new CA certificate.',
|
'You must manually redeploy all your databases on this server so that they use the new SSL certificates singned with the new CA certificate.',
|
||||||
'Because of caching, you probably also need to redeploy all your resources on this server that are using this CA certificate.'
|
'Because of caching, you probably also need to redeploy all your resources on this server that are using this CA certificate.',
|
||||||
]"
|
]"
|
||||||
confirmationText="/data/coolify/ssl/coolify-ca.crt"
|
confirmationText="/data/coolify/ssl/coolify-ca.crt" shortConfirmationLabel="CA Certificate Path"
|
||||||
shortConfirmationLabel="CA Certificate Path"
|
|
||||||
step3ButtonText="Regenerate Certificate">
|
step3ButtonText="Regenerate Certificate">
|
||||||
</x-modal-confirmation>
|
</x-modal-confirmation>
|
||||||
</div>
|
</div>
|
||||||
@@ -75,43 +67,41 @@
|
|||||||
<div class="text-sm">
|
<div class="text-sm">
|
||||||
<p class="font-medium mb-2">Recommended Configuration:</p>
|
<p class="font-medium mb-2">Recommended Configuration:</p>
|
||||||
<ul class="list-disc pl-5 space-y-1">
|
<ul class="list-disc pl-5 space-y-1">
|
||||||
<li>Mount this CA certificate of Coolify into all containers that need to connect to one of your databases over SSL. You can see and copy the bind mount below.</li>
|
<li>Mount this CA certificate of Coolify into all containers that need to connect to one of
|
||||||
<li>Read more when and why this is needed <a class="underline" href="https://coolify.io/docs/databases/ssl" target="_blank">here</a>.</li>
|
your databases over SSL. You can see and copy the bind mount below.</li>
|
||||||
|
<li>Read more when and why this is needed <a class="underline"
|
||||||
|
href="https://coolify.io/docs/databases/ssl" target="_blank">here</a>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<x-forms.copy-button
|
<x-forms.copy-button
|
||||||
text="- /data/coolify/ssl/coolify-ca.crt:/etc/ssl/certs/coolify-ca.crt:ro"
|
text="- /data/coolify/ssl/coolify-ca.crt:/etc/ssl/certs/coolify-ca.crt:ro" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-between mb-2">
|
<div class="flex items-center justify-between mb-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<span class="text-sm">CA Certificate</span>
|
<span class="text-sm">CA Certificate</span>
|
||||||
@if($certificateValidUntil)
|
@if ($certificateValidUntil)
|
||||||
<span class="text-sm">(Valid until:
|
<span class="text-sm">(Valid until:
|
||||||
@if(now()->gt($certificateValidUntil))
|
@if (now()->gt($certificateValidUntil))
|
||||||
<span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired)</span>
|
<span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} -
|
||||||
|
Expired)</span>
|
||||||
@elseif(now()->addDays(30)->gt($certificateValidUntil))
|
@elseif(now()->addDays(30)->gt($certificateValidUntil))
|
||||||
<span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring soon)</span>
|
<span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} -
|
||||||
|
Expiring soon)</span>
|
||||||
@else
|
@else
|
||||||
<span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }})</span>
|
<span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }})</span>
|
||||||
@endif
|
@endif
|
||||||
</span>
|
</span>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<x-forms.button
|
<x-forms.button wire:click="toggleCertificate" type="button" class="py-1! px-2! text-sm">
|
||||||
wire:click="toggleCertificate"
|
|
||||||
type="button"
|
|
||||||
class="py-1! px-2! text-sm">
|
|
||||||
{{ $showCertificate ? 'Hide' : 'Show' }}
|
{{ $showCertificate ? 'Hide' : 'Show' }}
|
||||||
</x-forms.button>
|
</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
@if($showCertificate)
|
@if ($showCertificate)
|
||||||
<textarea
|
<textarea class="w-full h-[370px] input" wire:model="certificateContent"
|
||||||
class="w-full h-[370px] input"
|
|
||||||
wire:model="certificateContent"
|
|
||||||
placeholder="Paste or edit CA certificate content here..."></textarea>
|
placeholder="Paste or edit CA certificate content here..."></textarea>
|
||||||
@else
|
@else
|
||||||
<div class="w-full h-[370px] input">
|
<div class="w-full h-[370px] input">
|
||||||
|
|||||||
@@ -250,7 +250,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div>Metrics are disabled for this server.</div>
|
<div>Metrics are disabled for this server. Enable them in <a class="underline dark:text-white"
|
||||||
|
href="{{ route('server.show', ['server_uuid' => $server->uuid]) }}">General</a> settings.</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -180,7 +180,9 @@
|
|||||||
@if ($server->isFunctional() && !$server->isSwarm() && !$server->isBuildServer())
|
@if ($server->isFunctional() && !$server->isSwarm() && !$server->isBuildServer())
|
||||||
<form wire:submit.prevent='submit'>
|
<form wire:submit.prevent='submit'>
|
||||||
<div class="flex gap-2 items-center pt-4 pb-2">
|
<div class="flex gap-2 items-center pt-4 pb-2">
|
||||||
<h3>Sentinel</h3>
|
<h3>Sentinel
|
||||||
|
</h3>
|
||||||
|
<x-helper helper="Sentinel reports your server's & container's health and collects metrics." />
|
||||||
@if ($server->isSentinelEnabled())
|
@if ($server->isSentinelEnabled())
|
||||||
<div class="flex gap-2 items-center">
|
<div class="flex gap-2 items-center">
|
||||||
@if ($server->isSentinelLive())
|
@if ($server->isSentinelLive())
|
||||||
@@ -197,19 +199,22 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex gap-2">Experimental feature <x-helper
|
|
||||||
helper="Sentinel reports your server's & container's health and collects metrics." />
|
<div class="w-96">
|
||||||
</div>
|
|
||||||
<div class="w-64">
|
|
||||||
<x-forms.checkbox wire:model.live="isSentinelEnabled" label="Enable Sentinel" />
|
<x-forms.checkbox wire:model.live="isSentinelEnabled" label="Enable Sentinel" />
|
||||||
@if ($server->isSentinelEnabled())
|
@if ($server->isSentinelEnabled())
|
||||||
<x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel Debug"
|
@if (isDev())
|
||||||
instantSave />
|
<x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel (with debug)"
|
||||||
|
instantSave />
|
||||||
|
@endif
|
||||||
<x-forms.checkbox instantSave id="isMetricsEnabled" label="Enable Metrics" />
|
<x-forms.checkbox instantSave id="isMetricsEnabled" label="Enable Metrics" />
|
||||||
@else
|
@else
|
||||||
<x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel Debug" disabled
|
@if (isDev())
|
||||||
instantSave />
|
<x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel (with debug)"
|
||||||
<x-forms.checkbox instantSave disabled id="isMetricsEnabled" label="Enable Metrics" />
|
disabled instantSave />
|
||||||
|
@endif
|
||||||
|
<x-forms.checkbox instantSave disabled id="isMetricsEnabled"
|
||||||
|
label="Enable Metrics (enable Sentinel first)" />
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
@if ($server->isSentinelEnabled())
|
@if ($server->isSentinelEnabled())
|
||||||
|
|||||||
Reference in New Issue
Block a user