title) ?>

EnableTimeRecords): ?>

Time Records Helper

timeRecords); ?>

hostname ?>

OS: os ?>

CPU: cpu ?>

RAM: ram ?>

Server Time: serverTime ?>

Server Up Time: serverUpTime ?>

osType === 1): ?>

Load

Load Average: load ?> (Last 1 min)

CPU

CPU Usage: cpuUsage ?>%

Memory

Memory Usage: ramUsage ?>%

Swap Usage: swapUsage ?>%

Disk

Data

Mount: dataMountPoint ?>
File System: mp_fs ?>
Size: mp_size ?>
Free: mp_avail ?>
Used: mp_used ?> (mp_usage ?>%)

Network

Hostname: hostname ?>

DNS: dns ?>

Gateway: gateway ?>

nic['interfaceName'] ?>

MAC: nic['mac'] ?>
Speed: nic['speed'] ?>
IPv4: nic['ipv4'] ?>
IPv6: nic['ipv6'] ?>

Active Users

All: users ?>
Active (within 24h): activeUsers ?>

Link: shares ?>

Collection

Link: collections ?>

PHP

Version: phpVersion ?>
Memory Limit: memoryLimit ?>
Max Execution Time: maxExecutionTime ?>s
Upload Max Filesize: uploadMaxFilesize ?>
Post Max Size: postMaxSize ?>
Extension: extensions ?>

Database

Type: dbType ?>
Version: dbVersion ?>
Size: dbSize ?>

serverTime, 11, 8); $mp_free = round(100 - $systemInfo->mp_usage, 2); $script = <<< JS var myChart; var myChart2; var myChart3; // detect dark mode if ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)|| document.documentElement.getAttribute('data-bs-theme')==='dark') { myChart = echarts.init(document.getElementById('cpu-graph'),'dark'); myChart2 = echarts.init(document.getElementById('memory-graph'),'dark'); myChart3 = echarts.init(document.getElementById('disk-chart'),'dark'); }else { myChart = echarts.init(document.getElementById('cpu-graph')); myChart2 = echarts.init(document.getElementById('memory-graph')); myChart3 = echarts.init(document.getElementById('disk-chart')); } // check load-graph is exist var needLoadGraph = document.getElementById('load-graph'); // var var option = { legend: { data: ['CPU'] }, xAxis: { type: 'category', boundaryGap: false, data: ["$dataTime"] }, yAxis: { type: 'value', min: 0, max: 100 }, series: [ { 'name': 'CPU', data: [$systemInfo->cpuUsage], label: { show: true, position: 'top', formatter: '{c}%' }, emphasis: { label: { scale: 1.5 } }, type: 'line', smooth: true, areaStyle: {} } ] }; if(needLoadGraph !== null){ var myChart1; if ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)|| document.documentElement.getAttribute('data-bs-theme')==='dark') { myChart1 = echarts.init(needLoadGraph,'dark'); }else{ myChart1 = echarts.init(needLoadGraph); } var option1 = { legend: { data: ['Load'] }, xAxis: { type: 'category', boundaryGap: false, data: ["$dataTime"] }, yAxis: { type: 'value', min: 0 // max: 100 }, series: [ { 'name': 'Load', data: [$systemInfo->load], label: { show: true, position: 'top', formatter: '{c}' }, emphasis: { label: { scale: 1.5 } }, type: 'line', smooth: true, areaStyle: {} } ] }; myChart1.setOption(option1); } var option2 = { legend: { data: ['RAM', 'SWAP'] }, xAxis: { type: 'category', boundaryGap: false, data: ["$dataTime"] }, yAxis: { type: 'value', min: 0, max: 100 }, series: [ { name: 'RAM', data: [$systemInfo->ramUsage], type: 'line', areaStyle: {}, smooth: true, lineStyle: { color: 'red' }, label: { show: true, position: 'top', formatter: '{c}%', }, emphasis: { label: { scale: 1.5 } } }, { name: 'SWAP', data: [$systemInfo->swapUsage], type: 'line', areaStyle: {}, smooth: true, lineStyle: { color: 'blue' }, label: { show: true, position: 'bottom', formatter: '{c}%' }, emphasis: { label: { scale: 1.5 } }, } ] }; var option3 = { tooltip: { trigger: 'item', formatter: function(params) { return params.name + ': ' + params.value + '%'; } }, legend: { top: '5%', left: 'center' }, series: [ { name: 'Data', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, padAngle: 5, itemStyle: { borderRadius: 10 }, label: { show: false, position: 'center' }, labelLine: { show: false }, data: [ { value: $systemInfo->mp_usage, name: 'Used Space' }, { value: $mp_free, name: 'Free Space' } ] } ] }; myChart.setOption(option); myChart2.setOption(option2); myChart3.setOption(option3); JS; $this->registerJs($script, View::POS_END); $this->registerJsFile('@web/js/sysinfo-core.js', ['depends' => [JqueryAsset::class, EChartsAsset::class], 'position' => View::POS_END]); ?>