display tag fro alterts, cleanup udp

2026-04-01 11:49:55 -04:00
parent dd23d9d163
commit 079e84f729
15 changed files with 277 additions and 540 deletions
@@ -397,6 +397,12 @@
        const level = alert.level.toLowerCase();
        const duration = getDuration(alert.since);
        
+        // Format value with threshold info if available
+        let valueText = `Value: <span class="alert-value">${formatValue(alert.last_value)}</span>`;
+        if (alert.threshold_value !== undefined && alert.threshold_value !== null && alert.operator) {
+          valueText += ` <span class="threshold-info">(threshold: ${alert.operator} ${formatValue(alert.threshold_value)})</span>`;
+        }
+        
        return `
          <div class="alert-item ${level}">
            <div class="alert-main">
@@ -406,7 +412,7 @@
              </div>
              <div class="alert-metric">${alert.metric_path}</div>
              <div class="alert-details">
-                <span>Value: <span class="alert-value">${formatValue(alert.last_value)}</span></span>
+                <span>${valueText}</span>
                <span class="alert-duration">Active for ${duration}</span>
              </div>
            </div>
@@ -300,6 +300,60 @@
      font-weight: bold;
      color: #2196f3;
    }
+
+    /* Simple data table styling (for os_info, cpu_monitor, etc.) */
+    .simple-data-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+      font-size: 0.9em;
+      background: #fff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .simple-data-table thead {
+      background: #2196f3;
+      color: white;
+    }
+
+    .simple-data-table th {
+      padding: 10px 15px;
+      text-align: left;
+      font-weight: 600;
+      text-transform: uppercase;
+      font-size: 0.8em;
+      letter-spacing: 0.5px;
+    }
+
+    .simple-data-table td {
+      padding: 8px 15px;
+      border-top: 1px solid #e0e0e0;
+    }
+
+    .simple-data-table td.name {
+      font-weight: 500;
+      color: #555;
+      width: 40%;
+    }
+
+    .simple-data-table td.value {
+      color: #333;
+      font-family: 'Segoe UI', system-ui, sans-serif;
+    }
+
+    .simple-data-table tbody tr:hover {
+      background: #f5f5f5;
+    }
+
+    .simple-data-table tbody tr:nth-child(even) {
+      background: #fafafa;
+    }
+
+    .simple-data-table tbody tr:nth-child(even):hover {
+      background: #f0f0f0;
+    }
  </style>

  <body>
@@ -406,6 +460,14 @@
      }

      function renderPluginData(data, timestamp) {
+        // Check if this should be rendered as a simple table
+        const pluginName = getCurrentPluginName();
+        const simplePlugins = ['os_info', 'cpu_monitor', 'memory_monitor', 'nagios_runner'];
+        
+        if (simplePlugins.includes(pluginName) && isSimpleKeyValueData(data)) {
+          return renderSimpleDataTable(data, timestamp);
+        }
+        
        let html = '<div class="metric-grid">';
        
        for (const [key, value] of Object.entries(data)) {
@@ -478,6 +540,57 @@
        return html;
      }

+      function getCurrentPluginName() {
+        // Get currently active plugin name from the active plugin content div
+        const activeContent = document.querySelector('.plugin-content.active');
+        if (activeContent) {
+          return activeContent.dataset.plugin;
+        }
+        return '';
+      }
+
+      function isSimpleKeyValueData(data) {
+        // Check if data is simple key-value pairs (no complex nesting)
+        for (const [key, value] of Object.entries(data)) {
+          if (typeof value === 'object' && value !== null) {
+            // Has nested objects - not simple
+            return false;
+          }
+        }
+        return true;
+      }
+
+      function renderSimpleDataTable(data, timestamp) {
+        let html = '<table class="simple-data-table">';
+        
+        // Table header
+        html += '<thead><tr>';
+        html += '<th>Name</th>';
+        html += '<th>Value</th>';
+        html += '</tr></thead>';
+        
+        // Table body
+        html += '<tbody>';
+        for (const [key, value] of Object.entries(data)) {
+          const label = formatLabel(key);
+          const formattedValue = formatValue(key, value);
+          const unit = getUnit(key);
+          
+          html += '<tr>';
+          html += `<td class="name">${label}</td>`;
+          html += `<td class="value">${formattedValue}${unit ? ' ' + unit : ''}</td>`;
+          html += '</tr>';
+        }
+        html += '</tbody>';
+        
+        html += '</table>';
+        
+        const date = new Date(timestamp * 1000);
+        html += `<div class="timestamp">Last updated: ${date.toLocaleString()}</div>`;
+        
+        return html;
+      }
+
      function isInterfaceData(key, value) {
        // Check if this is interface/network stats data (I/O counters)
        if (key.toLowerCase().includes('interface') && !key.toLowerCase().includes('interface_stats')) {