CyberMind-FR
8b0d75a8d9
- Changed from 'require netdata-dashboard.api as api' to 'require netdata-dashboard/api as API' - Updated all api. references to API. in realtime.js, system.js, network.js, and processes.js - Resolves "api.getAllData is not a function" and "api.getCpu is not a function" errors The dot notation (netdata-dashboard.api) doesn't work with LuCI's module loader. The correct syntax uses slash (netdata-dashboard/api) and follows the convention of uppercase API for consistency with other modules. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
237 lines
8.4 KiB
JavaScript
237 lines
8.4 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require secubox-theme/theme as Theme';
|
|
'require poll';
|
|
'require dom';
|
|
'require ui';
|
|
'require netdata-dashboard/api as API';
|
|
|
|
return view.extend({
|
|
title: _('System'),
|
|
|
|
load: function() {
|
|
return Promise.all([
|
|
API.getSystem(),
|
|
API.getCpu(),
|
|
API.getMemory(),
|
|
API.getSensors()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var system = data[0] || {};
|
|
var cpu = data[1] || {};
|
|
var memory = data[2] || {};
|
|
var sensors = data[3] || {};
|
|
|
|
var uptime = system.uptime_seconds || 0;
|
|
var days = Math.floor(uptime / 86400);
|
|
var hours = Math.floor((uptime % 86400) / 3600);
|
|
var minutes = Math.floor((uptime % 3600) / 60);
|
|
var seconds = uptime % 60;
|
|
|
|
var view = E('div', { 'class': 'netdata-dashboard' }, [
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
|
// Header
|
|
E('div', { 'class': 'nd-header' }, [
|
|
E('div', { 'class': 'nd-logo' }, [
|
|
E('div', { 'class': 'nd-logo-icon' }, '🖥️'),
|
|
E('div', { 'class': 'nd-logo-text' }, ['System ', E('span', {}, 'Info')])
|
|
]),
|
|
E('div', { 'class': 'nd-header-info' }, [
|
|
E('div', { 'class': 'nd-hostname' }, system.hostname || 'OpenWrt'),
|
|
E('div', { 'class': 'nd-live-badge' }, [
|
|
E('span', { 'class': 'nd-live-dot' }),
|
|
'Live'
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Uptime Display
|
|
E('div', { 'class': 'nd-chart-card' }, [
|
|
E('div', { 'class': 'nd-chart-header' }, [
|
|
E('div', { 'class': 'nd-chart-title' }, [
|
|
E('span', { 'class': 'nd-chart-title-icon' }, '⏱️'),
|
|
'System Uptime'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nd-chart-body' }, [
|
|
E('div', { 'class': 'nd-uptime' }, [
|
|
E('div', { 'class': 'nd-uptime-block' }, [
|
|
E('div', { 'class': 'nd-uptime-value' }, days),
|
|
E('div', { 'class': 'nd-uptime-label' }, 'Days')
|
|
]),
|
|
E('div', { 'class': 'nd-uptime-block' }, [
|
|
E('div', { 'class': 'nd-uptime-value' }, hours),
|
|
E('div', { 'class': 'nd-uptime-label' }, 'Hours')
|
|
]),
|
|
E('div', { 'class': 'nd-uptime-block' }, [
|
|
E('div', { 'class': 'nd-uptime-value' }, minutes),
|
|
E('div', { 'class': 'nd-uptime-label' }, 'Minutes')
|
|
]),
|
|
E('div', { 'class': 'nd-uptime-block' }, [
|
|
E('div', { 'class': 'nd-uptime-value' }, seconds),
|
|
E('div', { 'class': 'nd-uptime-label' }, 'Seconds')
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Grid
|
|
E('div', { 'class': 'nd-charts-grid', 'style': 'margin-top:16px' }, [
|
|
// System Details
|
|
E('div', { 'class': 'nd-chart-card' }, [
|
|
E('div', { 'class': 'nd-chart-header' }, [
|
|
E('div', { 'class': 'nd-chart-title' }, [
|
|
E('span', { 'class': 'nd-chart-title-icon' }, '📋'),
|
|
'System Details'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nd-chart-body' }, [
|
|
E('div', { 'class': 'nd-info-grid' }, [
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Hostname'),
|
|
E('div', { 'class': 'nd-info-value' }, system.hostname || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Model'),
|
|
E('div', { 'class': 'nd-info-value' }, system.model || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Distribution'),
|
|
E('div', { 'class': 'nd-info-value' }, system.distro || 'OpenWrt')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Version'),
|
|
E('div', { 'class': 'nd-info-value' }, system.version || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Target'),
|
|
E('div', { 'class': 'nd-info-value' }, system.target || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Kernel'),
|
|
E('div', { 'class': 'nd-info-value' }, system.kernel || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Architecture'),
|
|
E('div', { 'class': 'nd-info-value' }, system.arch || 'N/A')
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// CPU Info
|
|
E('div', { 'class': 'nd-chart-card' }, [
|
|
E('div', { 'class': 'nd-chart-header' }, [
|
|
E('div', { 'class': 'nd-chart-title' }, [
|
|
E('span', { 'class': 'nd-chart-title-icon' }, '⚡'),
|
|
'CPU Information'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nd-chart-body' }, [
|
|
E('div', { 'class': 'nd-info-grid' }, [
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Cores'),
|
|
E('div', { 'class': 'nd-info-value' }, cpu.cores || 1)
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Frequency'),
|
|
E('div', { 'class': 'nd-info-value' }, cpu.frequency ? Math.round(cpu.frequency / 1000) + ' MHz' : 'N/A')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Load (1m)'),
|
|
E('div', { 'class': 'nd-info-value' }, cpu.load1 || '0.00')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Load (5m)'),
|
|
E('div', { 'class': 'nd-info-value' }, cpu.load5 || '0.00')
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Load (15m)'),
|
|
E('div', { 'class': 'nd-info-value' }, cpu.load15 || '0.00')
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Memory Details
|
|
E('div', { 'class': 'nd-chart-card' }, [
|
|
E('div', { 'class': 'nd-chart-header' }, [
|
|
E('div', { 'class': 'nd-chart-title' }, [
|
|
E('span', { 'class': 'nd-chart-title-icon' }, '🧠'),
|
|
'Memory Details'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nd-chart-body' }, [
|
|
E('div', { 'class': 'nd-info-grid' }, [
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Total'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.total || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Used'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.used || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Free'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.free || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Available'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.available || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Buffers'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.buffers || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Cached'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.cached || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Swap Total'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.swap_total || 0))
|
|
]),
|
|
E('div', { 'class': 'nd-info-item' }, [
|
|
E('div', { 'class': 'nd-info-label' }, 'Swap Used'),
|
|
E('div', { 'class': 'nd-info-value' }, API.formatKB(memory.swap_used || 0))
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Temperatures
|
|
E('div', { 'class': 'nd-chart-card' }, [
|
|
E('div', { 'class': 'nd-chart-header' }, [
|
|
E('div', { 'class': 'nd-chart-title' }, [
|
|
E('span', { 'class': 'nd-chart-title-icon' }, '🌡️'),
|
|
'Temperature Sensors'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nd-chart-body' },
|
|
(sensors.temperatures && sensors.temperatures.length > 0) ?
|
|
sensors.temperatures.map(function(s) {
|
|
var tempClass = API.getTempClass(s.temp_c);
|
|
return E('div', { 'style': 'display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #30363d' }, [
|
|
E('span', {}, s.sensor),
|
|
E('span', { 'class': 'nd-temp-value ' + tempClass, 'style': 'font-size:18px' }, s.temp_c + '°C')
|
|
]);
|
|
}) :
|
|
E('div', { 'class': 'nd-empty' }, 'No temperature sensors detected')
|
|
)
|
|
])
|
|
])
|
|
]);
|
|
|
|
var cssLink = E('link', { 'rel': 'stylesheet', 'href': L.resource('netdata-dashboard/dashboard.css') });
|
|
document.head.appendChild(cssLink);
|
|
|
|
return view;
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|