From 46c218d773230aaf1d2ca78299c05cc266143be8 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Sun, 3 Nov 2024 15:07:16 +0100
Subject: [PATCH] fix ui

---
 .../views/livewire/server/advanced.blade.php  |   3 +
 .../views/livewire/server/charts.blade.php    | 284 +++++++++---------
 .../server/destination/show.blade.php         |   2 +-
 .../livewire/server/log-drains.blade.php      |   2 +-
 .../server/private-key/show.blade.php         |   2 +-
 .../views/livewire/server/show.blade.php      |   2 +-
 6 files changed, 151 insertions(+), 144 deletions(-)

diff --git a/resources/views/livewire/server/advanced.blade.php b/resources/views/livewire/server/advanced.blade.php
index fc1be78d8..4d32d711c 100644
--- a/resources/views/livewire/server/advanced.blade.php
+++ b/resources/views/livewire/server/advanced.blade.php
@@ -1,4 +1,7 @@
 <div>
+    <x-slot:title>
+        {{ data_get_str($server, 'name')->limit(10) }} > Advanced | Coolify
+    </x-slot>
     <x-server.navbar :server="$server" />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
         <x-server.sidebar :server="$server" activeMenu="advanced" />
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index 64a5b5fbb..27ea34af2 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -1,6 +1,6 @@
 <div>
     <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Server Destinations | Coolify
+        {{ data_get_str($server, 'name')->limit(10) }} > Metrics | Coolify
     </x-slot>
     <x-server.navbar :server="$server" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">
@@ -8,139 +8,29 @@
         <div class="w-full">
             <h2>Metrics</h2>
             <div class="pb-4">Basic metrics for your container.</div>
-            <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
-                <x-forms.select label="Interval" wire:change="setInterval" id="interval">
-                    <option value="5">5 minutes (live)</option>
-                    <option value="10">10 minutes (live)</option>
-                    <option value="30">30 minutes</option>
-                    <option value="60">1 hour</option>
-                    <option value="720">12 hours</option>
-                    <option value="10080">1 week</option>
-                    <option value="43200">30 days</option>
-                </x-forms.select>
-                <h4 class="pt-4">CPU (%)</h4>
-                <div wire:ignore id="{!! $chartId !!}-cpu"></div>
-
-                <script>
-                    checkTheme();
-                    const optionsServerCpu = {
-                        stroke: {
-                            curve: 'straight',
-                        },
-                        chart: {
-                            height: '150px',
-                            id: '{!! $chartId !!}-cpu',
-                            type: 'area',
-                            toolbar: {
-                                show: true,
-                                tools: {
-                                    download: false,
-                                    selection: false,
-                                    zoom: true,
-                                    zoomin: false,
-                                    zoomout: false,
-                                    pan: false,
-                                    reset: true
-                                },
-                            },
-                            animations: {
-                                enabled: false,
-                            },
-                        },
-                        fill: {
-                            type: 'gradient',
-                        },
-                        dataLabels: {
-                            enabled: false,
-                            offsetY: -10,
-                            style: {
-                                colors: ['#FCD452'],
-                            },
-                            background: {
-                                enabled: false,
-                            }
-                        },
-                        grid: {
-                            show: true,
-                            borderColor: '',
-                        },
-                        colors: [baseColor],
-                        xaxis: {
-                            type: 'datetime',
-                        },
-                        series: [{
-                            name: 'CPU %',
-                            data: []
-                        }],
-                        noData: {
-                            text: 'Loading...',
-                            style: {
-                                color: textColor,
-                            }
-                        },
-                        tooltip: {
-                            enabled: true,
-                            marker: {
-                                show: false,
-                            }
-                        },
-                        legend: {
-                            show: false
-                        }
-                    }
-                    const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
-                        optionsServerCpu);
-                    serverCpuChart.render();
-                    document.addEventListener('livewire:init', () => {
-                        Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
-                            checkTheme();
-                            serverCpuChart.updateOptions({
-                                series: [{
-                                    data: chartData[0].seriesData,
-                                }],
-                                colors: [baseColor],
-                                xaxis: {
-                                    type: 'datetime',
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                yaxis: {
-                                    show: true,
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                noData: {
-                                    text: 'Loading...',
-                                    style: {
-                                        color: textColor,
-                                    }
-                                }
-                            });
-                        });
-                    });
-                </script>
-
-                <div>
-                    <h4>Memory (%)</h4>
-                    <div wire:ignore id="{!! $chartId !!}-memory"></div>
+            @if ($server->isMetricsEnabled())
+                <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
+                    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
+                        <option value="5">5 minutes (live)</option>
+                        <option value="10">10 minutes (live)</option>
+                        <option value="30">30 minutes</option>
+                        <option value="60">1 hour</option>
+                        <option value="720">12 hours</option>
+                        <option value="10080">1 week</option>
+                        <option value="43200">30 days</option>
+                    </x-forms.select>
+                    <h4 class="pt-4">CPU (%)</h4>
+                    <div wire:ignore id="{!! $chartId !!}-cpu"></div>
 
                     <script>
                         checkTheme();
-                        const optionsServerMemory = {
+                        const optionsServerCpu = {
                             stroke: {
                                 curve: 'straight',
                             },
                             chart: {
                                 height: '150px',
-                                id: '{!! $chartId !!}-memory',
+                                id: '{!! $chartId !!}-cpu',
                                 type: 'area',
                                 toolbar: {
                                     show: true,
@@ -178,15 +68,9 @@
                             colors: [baseColor],
                             xaxis: {
                                 type: 'datetime',
-                                labels: {
-                                    show: true,
-                                    style: {
-                                        colors: textColor,
-                                    }
-                                }
                             },
                             series: [{
-                                name: "Memory (%)",
+                                name: 'CPU %',
                                 data: []
                             }],
                             noData: {
@@ -205,13 +89,13 @@
                                 show: false
                             }
                         }
-                        const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
-                            optionsServerMemory);
-                        serverMemoryChart.render();
+                        const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
+                            optionsServerCpu);
+                        serverCpuChart.render();
                         document.addEventListener('livewire:init', () => {
-                            Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
+                            Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
                                 checkTheme();
-                                serverMemoryChart.updateOptions({
+                                serverCpuChart.updateOptions({
                                     series: [{
                                         data: chartData[0].seriesData,
                                     }],
@@ -226,7 +110,6 @@
                                         }
                                     },
                                     yaxis: {
-                                        min: 0,
                                         show: true,
                                         labels: {
                                             show: true,
@@ -246,8 +129,129 @@
                         });
                     </script>
 
+                    <div>
+                        <h4>Memory (%)</h4>
+                        <div wire:ignore id="{!! $chartId !!}-memory"></div>
+
+                        <script>
+                            checkTheme();
+                            const optionsServerMemory = {
+                                stroke: {
+                                    curve: 'straight',
+                                },
+                                chart: {
+                                    height: '150px',
+                                    id: '{!! $chartId !!}-memory',
+                                    type: 'area',
+                                    toolbar: {
+                                        show: true,
+                                        tools: {
+                                            download: false,
+                                            selection: false,
+                                            zoom: true,
+                                            zoomin: false,
+                                            zoomout: false,
+                                            pan: false,
+                                            reset: true
+                                        },
+                                    },
+                                    animations: {
+                                        enabled: false,
+                                    },
+                                },
+                                fill: {
+                                    type: 'gradient',
+                                },
+                                dataLabels: {
+                                    enabled: false,
+                                    offsetY: -10,
+                                    style: {
+                                        colors: ['#FCD452'],
+                                    },
+                                    background: {
+                                        enabled: false,
+                                    }
+                                },
+                                grid: {
+                                    show: true,
+                                    borderColor: '',
+                                },
+                                colors: [baseColor],
+                                xaxis: {
+                                    type: 'datetime',
+                                    labels: {
+                                        show: true,
+                                        style: {
+                                            colors: textColor,
+                                        }
+                                    }
+                                },
+                                series: [{
+                                    name: "Memory (%)",
+                                    data: []
+                                }],
+                                noData: {
+                                    text: 'Loading...',
+                                    style: {
+                                        color: textColor,
+                                    }
+                                },
+                                tooltip: {
+                                    enabled: true,
+                                    marker: {
+                                        show: false,
+                                    }
+                                },
+                                legend: {
+                                    show: false
+                                }
+                            }
+                            const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
+                                optionsServerMemory);
+                            serverMemoryChart.render();
+                            document.addEventListener('livewire:init', () => {
+                                Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
+                                    checkTheme();
+                                    serverMemoryChart.updateOptions({
+                                        series: [{
+                                            data: chartData[0].seriesData,
+                                        }],
+                                        colors: [baseColor],
+                                        xaxis: {
+                                            type: 'datetime',
+                                            labels: {
+                                                show: true,
+                                                style: {
+                                                    colors: textColor,
+                                                }
+                                            }
+                                        },
+                                        yaxis: {
+                                            min: 0,
+                                            show: true,
+                                            labels: {
+                                                show: true,
+                                                style: {
+                                                    colors: textColor,
+                                                }
+                                            }
+                                        },
+                                        noData: {
+                                            text: 'Loading...',
+                                            style: {
+                                                color: textColor,
+                                            }
+                                        }
+                                    });
+                                });
+                            });
+                        </script>
+
+                    </div>
                 </div>
-            </div>
+            @else
+                <div>Metrics are disabled for this server.</div>
+            @endif
         </div>
     </div>
 </div>
diff --git a/resources/views/livewire/server/destination/show.blade.php b/resources/views/livewire/server/destination/show.blade.php
index 9dba9c0d6..88503f62d 100644
--- a/resources/views/livewire/server/destination/show.blade.php
+++ b/resources/views/livewire/server/destination/show.blade.php
@@ -1,6 +1,6 @@
 <div>
     <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Server Destinations | Coolify
+        {{ data_get_str($server, 'name')->limit(10) }} > Destinations | Coolify
     </x-slot>
     <x-server.navbar :server="$server" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">
diff --git a/resources/views/livewire/server/log-drains.blade.php b/resources/views/livewire/server/log-drains.blade.php
index 2ababba93..19c33ef5d 100644
--- a/resources/views/livewire/server/log-drains.blade.php
+++ b/resources/views/livewire/server/log-drains.blade.php
@@ -1,6 +1,6 @@
 <div>
     <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Server Log Drains | Coolify
+        {{ data_get_str($server, 'name')->limit(10) }} > Log Drains | Coolify
     </x-slot>
     <x-server.navbar :server="$server" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">
diff --git a/resources/views/livewire/server/private-key/show.blade.php b/resources/views/livewire/server/private-key/show.blade.php
index 725d10f8e..53e9ed002 100644
--- a/resources/views/livewire/server/private-key/show.blade.php
+++ b/resources/views/livewire/server/private-key/show.blade.php
@@ -1,6 +1,6 @@
 <div>
     <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Server Connection | Coolify
+        {{ data_get_str($server, 'name')->limit(10) }} > Private Key | Coolify
     </x-slot>
     <x-server.navbar :server="$server" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index 8861d12bc..de12d0e5b 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -1,6 +1,6 @@
 <div>
     <x-slot:title>
-        {{ data_get_str($server, 'name')->limit(10) }} > Server Configurations | Coolify
+        {{ data_get_str($server, 'name')->limit(10) }} > General | Coolify
     </x-slot>
     <x-server.navbar :server="$server" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">