From e9deaca8cd7c18a79f43e1e73188229f88729cec Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 29 May 2025 11:36:50 +0200
Subject: [PATCH] refactor(server-ui): improve layout and messaging in advanced
 settings and charts views

---
 .../views/livewire/server/advanced.blade.php  | 66 ++++++++-----------
 .../views/livewire/server/charts.blade.php    |  3 +-
 .../views/livewire/server/show.blade.php      | 25 ++++---
 3 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/resources/views/livewire/server/advanced.blade.php b/resources/views/livewire/server/advanced.blade.php
index 4fb2d39f4..c2223a137 100644
--- a/resources/views/livewire/server/advanced.blade.php
+++ b/resources/views/livewire/server/advanced.blade.php
@@ -11,7 +11,7 @@
                     <h2>Advanced</h2>
                     <x-forms.button type="submit">Save</x-forms.button>
                 </div>
-                <div class="mt-3 mb-4">Advanced configuration for your server.</div>
+                <div class="mb-4">Advanced configuration for your server.</div>
             </div>
 
             <h3>Disk Usage</h3>
@@ -38,36 +38,28 @@
                     </div>
                 </div>
             </div>
-            
+
             <div class="flex flex-col gap-4 pt-8">
                 <h3>CA SSL Certificate</h3>
                 <div class="flex gap-2">
-                    <x-modal-confirmation 
-                        title="Confirm changing of CA Certificate?" 
-                        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.', 
+                    <x-modal-confirmation title="Confirm changing of CA Certificate?" 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 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.',
-                            '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"
-                        shortConfirmationLabel="CA Certificate Path"
+                        confirmationText="/data/coolify/ssl/coolify-ca.crt" shortConfirmationLabel="CA Certificate Path"
                         step3ButtonText="Save Certificate">
                     </x-modal-confirmation>
-                    <x-modal-confirmation 
-                        title="Confirm Regenerate Certificate?" 
-                        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.', 
+                    <x-modal-confirmation title="Confirm Regenerate Certificate?" 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 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.',
-                            '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"
-                        shortConfirmationLabel="CA Certificate Path"
+                        confirmationText="/data/coolify/ssl/coolify-ca.crt" shortConfirmationLabel="CA Certificate Path"
                         step3ButtonText="Regenerate Certificate">
                     </x-modal-confirmation>
                 </div>
@@ -75,43 +67,41 @@
                     <div class="text-sm">
                         <p class="font-medium mb-2">Recommended Configuration:</p>
                         <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>Read more when and why this is needed <a class="underline" href="https://coolify.io/docs/databases/ssl" target="_blank">here</a>.</li>
+                            <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>Read more when and why this is needed <a class="underline"
+                                    href="https://coolify.io/docs/databases/ssl" target="_blank">here</a>.</li>
                         </ul>
                     </div>
                     <div class="relative">
-                        <x-forms.copy-button 
-                            text="- /data/coolify/ssl/coolify-ca.crt:/etc/ssl/certs/coolify-ca.crt:ro" 
-                        />
+                        <x-forms.copy-button
+                            text="- /data/coolify/ssl/coolify-ca.crt:/etc/ssl/certs/coolify-ca.crt:ro" />
                     </div>
                 </div>
                 <div>
                     <div class="flex items-center justify-between mb-2">
                         <div class="flex items-center gap-2">
                             <span class="text-sm">CA Certificate</span>
-                            @if($certificateValidUntil)
-                                <span class="text-sm">(Valid until: 
-                                    @if(now()->gt($certificateValidUntil))
-                                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired)</span>
+                            @if ($certificateValidUntil)
+                                <span class="text-sm">(Valid until:
+                                    @if (now()->gt($certificateValidUntil))
+                                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} -
+                                            Expired)</span>
                                     @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
                                         <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }})</span>
                                     @endif
                                 </span>
                             @endif
                         </div>
-                        <x-forms.button 
-                            wire:click="toggleCertificate" 
-                            type="button" 
-                            class="py-1! px-2! text-sm">
+                        <x-forms.button wire:click="toggleCertificate" type="button" class="py-1! px-2! text-sm">
                             {{ $showCertificate ? 'Hide' : 'Show' }}
                         </x-forms.button>
                     </div>
-                    @if($showCertificate)
-                        <textarea 
-                            class="w-full h-[370px] input"
-                            wire:model="certificateContent"
+                    @if ($showCertificate)
+                        <textarea class="w-full h-[370px] input" wire:model="certificateContent"
                             placeholder="Paste or edit CA certificate content here..."></textarea>
                     @else
                         <div class="w-full h-[370px] input">
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index 27ea34af2..d6ac54bff 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -250,7 +250,8 @@
                     </div>
                 </div>
             @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
         </div>
     </div>
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index 4ea8e1f16..072516772 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -180,7 +180,9 @@
             @if ($server->isFunctional() && !$server->isSwarm() && !$server->isBuildServer())
                 <form wire:submit.prevent='submit'>
                     <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())
                             <div class="flex gap-2 items-center">
                                 @if ($server->isSentinelLive())
@@ -197,19 +199,22 @@
                         @endif
                     </div>
                     <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>
-                        <div class="w-64">
+
+                        <div class="w-96">
                             <x-forms.checkbox wire:model.live="isSentinelEnabled" label="Enable Sentinel" />
                             @if ($server->isSentinelEnabled())
-                                <x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel Debug"
-                                    instantSave />
+                                @if (isDev())
+                                    <x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel (with debug)"
+                                        instantSave />
+                                @endif
                                 <x-forms.checkbox instantSave id="isMetricsEnabled" label="Enable Metrics" />
                             @else
-                                <x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel Debug" disabled
-                                    instantSave />
-                                <x-forms.checkbox instantSave disabled id="isMetricsEnabled" label="Enable Metrics" />
+                                @if (isDev())
+                                    <x-forms.checkbox id="isSentinelDebugEnabled" label="Enable Sentinel (with debug)"
+                                        disabled instantSave />
+                                @endif
+                                <x-forms.checkbox instantSave disabled id="isMetricsEnabled"
+                                    label="Enable Metrics (enable Sentinel first)" />
                             @endif
                         </div>
                         @if ($server->isSentinelEnabled())