display tag fro alterts, cleanup udp
This commit is contained in:
@@ -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')) {
|
||||
|
||||
Reference in New Issue
Block a user