From f3ddb65fcda0b03590ad304dc747f15038f6bad7 Mon Sep 17 00:00:00 2001
From: mirivlad <mirivlad@gmail.com>
Date: Mon, 13 Apr 2026 13:23:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20doughnut=20=D0=B3=D1=80=D0=B0=D1=84?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B8=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=B4=D0=B8=D1=81=D0=BA=D0=BE=D0=B2,=20timezone=20fix?=
 =?UTF-8?q?,=20crosshair=20removal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Добавлены doughnut графики для disk_used_root/home/boot/mnt_data
- Удалён общий disk_used line chart (заменён doughnut)
- Исключён crosshair плагин (конфликт с Chart.js)
- Установлена timezone Asia/Irkutsk (+8) для корректных запросов
- cmdline в тултипах процессов

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 public/index.php              |  1 +
 templates/servers/detail.twig | 93 ++++++++++++++++++++++++++++-------
 2 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/public/index.php b/public/index.php
index 507980c..42fc4e6 100755
--- a/public/index.php
+++ b/public/index.php
@@ -1,5 +1,6 @@
 <?php
 // public/index.php
+date_default_timezone_set("Asia/Irkutsk");
 
 use App\Controllers\AgentController;
 use App\Controllers\AdminController;
diff --git a/templates/servers/detail.twig b/templates/servers/detail.twig
index 6135c17..4df1bdc 100755
--- a/templates/servers/detail.twig
+++ b/templates/servers/detail.twig
@@ -119,9 +119,35 @@
                             </div>
                         </div>
 
+
+                        <!-- Диски: Doughnut графики -->
+                        <div class="row mb-3">
+                            {% for metricName, metricData in metrics %}
+                                {% if metricName starts with 'disk_used_' and metricName != 'disk_used' %}
+                                <div class="col-md-4 mb-3">
+                                    <div class="card h-100">
+                                        <div class="card-body text-center">
+                                            <h6 class="card-title">
+                                                {% if metricName == 'disk_used_root' %}/ (корень)
+                                                {% elseif metricName == 'disk_used_home' %}/home
+                                                {% elseif metricName == 'disk_used_boot' %}/boot
+                                                {% elseif metricName == 'disk_used_mnt_data' %}/mnt/data
+                                                {% else %}{{ metricName|replace({'disk_used_': '', '_': ' '})|title }}
+                                                {% endif %}
+                                            </h6>
+                                            <h3>{{ metricData[0].value }}{{ metricData[0].unit|default('%') }}</h3>
+                                            <p class="text-muted small">{{ metricData[0].created_at|date('d.m.Y H:i') }}</p>
+                                            <div style="max-width: 150px; margin: 0 auto;"><canvas id="chart-{{ metricName }}"></canvas></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+
                         <div class="row">
                             {% for metricName, metricData in metrics %}
-                                {% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" %}
+                                {% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" and not (metricName starts with "disk_used_") and metricName != "disk_used" %}
                                 <div class="col-12 mb-4">
                                     <div class="card">
                                         <div class="card-header">
@@ -398,7 +424,6 @@
 
 <!-- Chart.js -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src="/chartjs-plugin-crosshair.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
 <script src="/chartjs-plugin-zoom.min.js"></script>
 <script>
@@ -482,7 +507,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 // Графики метрик
 {% for metricName, metricData in metrics %}
-{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" %}
+{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" and not (metricName starts with "disk_used_") and metricName != "disk_used" %}
 const ctx{{ metricName|replace({'-': '_', '.': '_'}) }} = document.getElementById('chart-{{ metricName }}').getContext('2d');
 
 // Подготовка данных для графика
@@ -509,19 +534,6 @@ const chart{{ metricName|replace({'-': '_', '.': '_'}) }} = new Chart(ctx{{ metr
         }]
     },
     options: {
-                crosshair: {
-                    line: {
-                        color: "rgba(100, 150, 255, 0.4)",
-                        width: 1,
-                        dashPattern: []
-                    },
-                    sync: {
-                        enabled: false
-                    },
-                    zoom: {
-                        enabled: false
-                    }
-                },
         responsive: true,
         maintainAspectRatio: false,
         scales: {
@@ -650,10 +662,10 @@ chart{{ metricName|replace({'-': '_', '.': '_'}) }}.canvas.addEventListener('mou
 {% endfor %}
 
 // Глобальный обработчик mousemove для скрытия тултипов при уходе курсора за пределы canvas
-// (нужен т.к. crosshair плагин создаёт overlay canvas и перехватывает mouseleave)
+// Глобальный обработчик для скрытия тултипов при уходе курсора за пределы canvas
 document.addEventListener('mousemove', function(e) {
 {% for metricName, metricData in metrics %}
-{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" %}
+{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" and not (metricName starts with "disk_used_") and metricName != "disk_used" %}
     (function() {
         var canvas = chart{{ metricName|replace({'-': '_', '.': '_'}) }}.canvas;
         var rect = canvas.getBoundingClientRect();
@@ -673,10 +685,53 @@ document.addEventListener('mousemove', function(e) {
 });
 
 
+
+// Doughnut графики для разделов дисков
+{% for metricName, metricData in metrics %}
+{% if metricName starts with 'disk_used_' and metricName != 'disk_used' %}
+{% if metricData %}
+(function() {
+    var ctx = document.getElementById('chart-{{ metricName }}');
+    if (ctx) {
+        var value = {{ metricData[0].value }};
+        var color = value > 80 ? 'rgba(220, 53, 69, 0.8)' : value > 60 ? 'rgba(255, 193, 7, 0.8)' : 'rgba(25, 135, 84, 0.8)';
+        var colorBorder = value > 80 ? 'rgba(220, 53, 69, 1)' : value > 60 ? 'rgba(255, 193, 7, 1)' : 'rgba(25, 135, 84, 1)';
+        new Chart(ctx.getContext('2d'), {
+            type: 'doughnut',
+            data: {
+                labels: ['Использовано', 'Свободно'],
+                datasets: [{
+                    data: [value, 100 - value],
+                    backgroundColor: [color, 'rgba(200, 200, 200, 0.3)'],
+                    borderColor: [colorBorder, 'rgba(200, 200, 200, 0.5)'],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                cutout: '65%',
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return context.label + ': ' + context.parsed.toFixed(1) + '%';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+})();
+{% endif %}
+{% endif %}
+{% endfor %}
+
 // Сбросить зум на всех графиках
 function resetAllZoom() {
 {% for metricName, metricData in metrics %}
-{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" %}
+{% if metricName!="top_cpu_proc" and metricName!="top_ram_proc" and not (metricName starts with "disk_used_") and metricName != "disk_used" %}
     if (typeof chart{{ metricName|replace({'-': '_', '.': '_'}) }} !== 'undefined') {
         chart{{ metricName|replace({'-': '_', '.': '_'}) }}.resetZoom();
     }