Improved metrics graph tooltip to show usage in a better way and added timestamp to the tooltip

app/Livewire/Project/Shared/Metrics.php

@@ -8,7 +8,7 @@ class Metrics extends Component
 {
     public $resource;
 
-    public $chartId = 'container-cpu';
+    public $chartId = 'metrics';
 
     public $data;
 
@@ -33,6 +33,16 @@ class Metrics extends Component
         try {
             $cpuMetrics = $this->resource->getCpuMetrics($this->interval);
             $memoryMetrics = $this->resource->getMemoryMetrics($this->interval);
+
+            // Debug logging
+            \Log::info('Metrics loadData called', [
+                'chartId' => $this->chartId,
+                'cpuMetrics' => $cpuMetrics,
+                'memoryMetrics' => $memoryMetrics,
+                'cpuEvent' => "refreshChartData-{$this->chartId}-cpu",
+                'memoryEvent' => "refreshChartData-{$this->chartId}-memory"
+            ]);
+
             $this->dispatch("refreshChartData-{$this->chartId}-cpu", [
                 'seriesData' => $cpuMetrics,
             ]);

resources/css/utilities.css

@@ -10,6 +10,23 @@
     @apply hidden!;
 }
 
+@utility apexcharts-tooltip-custom {
+    @apply bg-white dark:bg-coolgray-100 border border-neutral-200 dark:border-coolgray-300 rounded-lg shadow-lg p-3 text-sm;
+    min-width: 160px;
+}
+
+@utility apexcharts-tooltip-custom-value {
+    @apply text-neutral-700 dark:text-neutral-300 mb-1;
+}
+
+@utility apexcharts-tooltip-value-bold {
+    @apply font-bold text-black dark:text-white;
+}
+
+@utility apexcharts-tooltip-custom-title {
+    @apply text-xs text-neutral-500 dark:text-neutral-400 font-medium;
+}
+
 @utility input-sticky {
     @apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300;
 }

resources/views/livewire/project/shared/metrics.blade.php

@@ -1,20 +1,19 @@
 <div>
-    <div class="flex items-center gap-2 ">
+    <div class="flex items-center gap-2">
         <h2>Metrics</h2>
     </div>
     <div class="pb-4">Basic metrics for your container.</div>
+    <div>
         @if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
             <div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
         @elseif(!$resource->destination->server->isMetricsEnabled())
             <div class="alert alert-warning">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
-        <div> Go to <a class="underline dark:text-white"
+            <div>Go to <a class="underline dark:text-white" href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to enable it.</div>
-                href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to
-            enable
-            it.</div>
         @else
             @if (!str($resource->status)->contains('running'))
                 <div class="alert alert-warning">Metrics are only available when this resource is running!</div>
             @else
+                <div>
                 <x-forms.select label="Interval" wire:change="setInterval" id="interval">
                 <option value="5">5 minutes (live)</option>
                 <option value="10">10 minutes (live)</option>
@@ -91,6 +90,21 @@
                              enabled: true,
                              marker: {
                                  show: false,
+                             },
+                             custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                 const value = series[seriesIndex][dataPointIndex];
+                                 const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                 const date = new Date(timestamp);
+                                 const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                     String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                     String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                     date.getUTCFullYear() + '-' +
+                                     String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                     String(date.getUTCDate()).padStart(2, '0');
+                                 return '<div class="apexcharts-tooltip-custom">' +
+                                     '<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                     '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                     '</div>';
                              }
                          },
                          legend: {
@@ -99,7 +113,6 @@
                     }
                      const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`), optionsServerCpu);
                      serverCpuChart.render();
-                    document.addEventListener('livewire:init', () => {
                      Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
                          checkTheme();
                           serverCpuChart.updateOptions({
@@ -133,7 +146,6 @@
                              }
                          });
                      });
-                    });
                 </script>
 
                 <h3>Memory (MB)</h3>
@@ -207,6 +219,21 @@
                              enabled: true,
                              marker: {
                                  show: false,
+                             },
+                             custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                 const value = series[seriesIndex][dataPointIndex];
+                                 const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                 const date = new Date(timestamp);
+                                 const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                     String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                     String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                     date.getUTCFullYear() + '-' +
+                                     String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                     String(date.getUTCDate()).padStart(2, '0');
+                                 return '<div class="apexcharts-tooltip-custom">' +
+                                     '<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + ' MB</span></div>' +
+                                     '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                     '</div>';
                              }
                          },
                          legend: {
@@ -216,7 +243,6 @@
                      const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
                          optionsServerMemory);
                      serverMemoryChart.render();
-                    document.addEventListener('livewire:init', () => {
                      Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
                          checkTheme();
                           serverMemoryChart.updateOptions({
@@ -251,9 +277,10 @@
                              }
                          });
                      });
-                    });
                 </script>
             </div>
+            </div>
         @endif
     @endif
+    </div>
 </div>

resources/views/livewire/server/charts.blade.php

@@ -84,6 +84,21 @@
                                  enabled: true,
                                  marker: {
                                      show: false,
+                                 },
+                                 custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                     const value = series[seriesIndex][dataPointIndex];
+                                     const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                     const date = new Date(timestamp);
+                                     const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                         String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                         String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                         date.getUTCFullYear() + '-' +
+                                         String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                         String(date.getUTCDate()).padStart(2, '0');
+                                     return '<div class="apexcharts-tooltip-custom">' +
+                                         '<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                         '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                         '</div>';
                                  }
                              },
                             legend: {
@@ -202,6 +217,21 @@
                                      enabled: true,
                                      marker: {
                                          show: false,
+                                     },
+                                     custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                         const value = series[seriesIndex][dataPointIndex];
+                                         const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                         const date = new Date(timestamp);
+                                         const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                             String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                             String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                             date.getUTCFullYear() + '-' +
+                                             String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                             String(date.getUTCDate()).padStart(2, '0');
+                                         return '<div class="apexcharts-tooltip-custom">' +
+                                             '<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                             '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                             '</div>';
                                      }
                                  },
                                 legend: {