系统信息显示(2.5/3)
*明天完成剩下的前端核心代码
This commit is contained in:
parent
ac13b56fe6
commit
df9292ff94
GPG Key ID:
D7A9EC07024C3021
@ -596,8 +596,8 @@ class AdminController extends Controller
|
||||
* Get server status
|
||||
* @return void
|
||||
*/
|
||||
public function actionGetServerStatus(): void
|
||||
public function actionGetSysinfo(): void
|
||||
{
|
||||
|
||||
//TODO: Implement this method
|
||||
}
|
||||
}
|
||||
|
||||
@ -568,8 +568,6 @@ class SystemInfoHelper
|
||||
$sysInfo->detectRam();
|
||||
$sysInfo->detectServerTime();
|
||||
$sysInfo->detectServerUptime();
|
||||
|
||||
|
||||
$sysInfo->detectCpuUsage();
|
||||
$sysInfo->detectRamUsage();
|
||||
$sysInfo->detectDataMountPoint();
|
||||
@ -593,16 +591,7 @@ class SystemInfoHelper
|
||||
public static function getSysInfoFre(): SystemInfoHelper
|
||||
{
|
||||
$sysInfo = new SystemInfoHelper();
|
||||
$sysInfo->detectServerTime();
|
||||
$sysInfo->detectServerUptime();
|
||||
if ($sysInfo->osType === 1) {
|
||||
$sysInfo->detectLoad();
|
||||
} else {
|
||||
$sysInfo->load = -1;
|
||||
}
|
||||
$sysInfo->detectCpuUsage();
|
||||
$sysInfo->detectRamUsage();
|
||||
$sysInfo->detectDataMountPoint();
|
||||
// TODO: Implement getSysInfoFre() method.
|
||||
return $sysInfo;
|
||||
}
|
||||
|
||||
|
||||
@ -3,11 +3,15 @@
|
||||
|
||||
/* @var $systemInfo SystemInfoHelper */
|
||||
|
||||
use app\assets\EChartsAsset;
|
||||
use app\assets\FontAwesomeAsset;
|
||||
use app\utils\SystemInfoHelper;
|
||||
use yii\bootstrap5\Html;
|
||||
use yii\web\JqueryAsset;
|
||||
use yii\web\View;
|
||||
|
||||
FontAwesomeAsset::register($this);
|
||||
EChartsAsset::register($this);
|
||||
$this->title = '系统信息';
|
||||
?>
|
||||
|
||||
@ -27,27 +31,27 @@ $this->title = '系统信息';
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-server"></i>
|
||||
<?= $systemInfo->hostname ?>
|
||||
<span id="rdata_hostname"><?= $systemInfo->hostname ?></span>
|
||||
</h2>
|
||||
<p>
|
||||
OS:
|
||||
<strong><?= $systemInfo->os ?></strong>
|
||||
<strong id="rdata_os"><?= $systemInfo->os ?></strong>
|
||||
</p>
|
||||
<p>
|
||||
CPU:
|
||||
<strong><?= $systemInfo->cpu ?></strong>
|
||||
<strong id="rdata_cpu"><?= $systemInfo->cpu ?></strong>
|
||||
</p>
|
||||
<p>
|
||||
RAM:
|
||||
<strong><?= $systemInfo->ram ?></strong>
|
||||
<strong id="rdata_ram"><?= $systemInfo->ram ?></strong>
|
||||
</p>
|
||||
<p>
|
||||
Server Time:
|
||||
<strong><?= $systemInfo->serverTime ?></strong>
|
||||
<strong id="rdata_serverTime"><?= $systemInfo->serverTime ?></strong>
|
||||
</p>
|
||||
<p>
|
||||
Server Up Time:
|
||||
<strong><?= $systemInfo->serverUpTime ?></strong>
|
||||
<strong id="rdata_serverUpTime"><?= $systemInfo->serverUpTime ?></strong>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
@ -59,8 +63,10 @@ $this->title = '系统信息';
|
||||
Load
|
||||
</h2>
|
||||
<!-- Load Graph -->
|
||||
<div id="load-graph" style="width: 600px;height:400px;">
|
||||
</div>
|
||||
<p>
|
||||
Load Average: <?= $systemInfo->load ?> (Last 1 min)
|
||||
Load Average: <span id="rdata_load"><?= $systemInfo->load ?></span> (Last 1 min)
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@ -70,8 +76,10 @@ $this->title = '系统信息';
|
||||
CPU
|
||||
</h2>
|
||||
<!-- CPU Graph -->
|
||||
<div id="cpu-graph" style="width: 600px;height:400px;">
|
||||
</div>
|
||||
<p>
|
||||
CPU Usage: <?= $systemInfo->cpuUsage ?>%
|
||||
CPU Usage: <span id="rdata_cpuUsage"><?= $systemInfo->cpuUsage ?></span>%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@ -80,11 +88,13 @@ $this->title = '系统信息';
|
||||
Memory
|
||||
</h2>
|
||||
<!-- Memory Graph -->
|
||||
<div id="memory-graph" style="width: 600px;height:400px;">
|
||||
</div>
|
||||
<p>
|
||||
Memory Usage: <?= $systemInfo->ramUsage ?>%
|
||||
Memory Usage: <span id="rdata_ramUsage"><?= $systemInfo->ramUsage ?></span>%
|
||||
</p>
|
||||
<p>
|
||||
Swap Usage: <?= $systemInfo->swapUsage ?>%
|
||||
Swap Usage: <span id="rdata_swapUsage"><?= $systemInfo->swapUsage ?></span>%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,143 +109,318 @@ $this->title = '系统信息';
|
||||
<div>
|
||||
<div>
|
||||
<!-- disk chart -->
|
||||
</div>
|
||||
<div>
|
||||
<h3>Data</h3>
|
||||
Mount:
|
||||
<span><?= $systemInfo->dataMountPoint ?></span>
|
||||
<br>
|
||||
File System:
|
||||
<span><?= $systemInfo->mp_fs ?></span>
|
||||
<br>
|
||||
Size:
|
||||
<span><?= $systemInfo->mp_size ?></span>
|
||||
<br>
|
||||
Free:
|
||||
<span><?= $systemInfo->mp_avail ?></span>
|
||||
<br>
|
||||
Used:
|
||||
<span><?= $systemInfo->mp_used ?> (<?= $systemInfo->mp_usage ?>%)</span>
|
||||
<div id="disk-chart" style="width: 600px;height:400px;">
|
||||
</div>
|
||||
<div>
|
||||
<h3>Data</h3>
|
||||
Mount:
|
||||
<span id="rdata_dataMountPoint"><?= $systemInfo->dataMountPoint ?></span>
|
||||
<br>
|
||||
File System:
|
||||
<span id="rdata_mp_fs"><?= $systemInfo->mp_fs ?></span>
|
||||
<br>
|
||||
Size:
|
||||
<span id="rdata_mp_size"><?= $systemInfo->mp_size ?></span>
|
||||
<br>
|
||||
Free:
|
||||
<span id="rdata_mp_avail"><?= $systemInfo->mp_avail ?></span>
|
||||
<br>
|
||||
Used:
|
||||
<span id="rdata_mp_used"><?= $systemInfo->mp_used ?></span> (<span
|
||||
id="rdata_mp_usage"><?= $systemInfo->mp_usage ?></span>%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-ethernet"></i>
|
||||
Network
|
||||
</h2>
|
||||
<p>
|
||||
Hostname:
|
||||
<?= $systemInfo->hostname ?>
|
||||
</p>
|
||||
<p>
|
||||
DNS:
|
||||
<?= $systemInfo->dns ?>
|
||||
</p>
|
||||
<p>
|
||||
Gateway:
|
||||
<?= $systemInfo->gateway ?>
|
||||
</p>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-ethernet"></i>
|
||||
Network
|
||||
</h2>
|
||||
<p>
|
||||
Hostname:
|
||||
<span id="rdata_hostname2"><?= $systemInfo->hostname ?></span>
|
||||
</p>
|
||||
<p>
|
||||
DNS:
|
||||
<span id="rdata_dns"><?= $systemInfo->dns ?></span>
|
||||
</p>
|
||||
<p>
|
||||
Gateway:
|
||||
<span id="rdata_gateway"><?= $systemInfo->gateway ?></span>
|
||||
</p>
|
||||
<div>
|
||||
<div>
|
||||
<h3><?= $systemInfo->nic['interfaceName'] ?></h3>
|
||||
MAC:
|
||||
<span><?= $systemInfo->nic['mac'] ?></span>
|
||||
<div>
|
||||
<h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
|
||||
MAC:
|
||||
<span id="rdata_mac"><?= $systemInfo->nic['mac'] ?></span>
|
||||
<br>
|
||||
Speed:
|
||||
<span id="rdata_speed"><?= $systemInfo->nic['speed'] ?></span>
|
||||
<br>
|
||||
IPv4:
|
||||
<span id="rdata_ipv4"><?= $systemInfo->nic['ipv4'] ?></span>
|
||||
<br>
|
||||
IPv6:
|
||||
<span id="rdata_ipv6"><?= $systemInfo->nic['ipv6'] ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-users"></i>
|
||||
Active Users
|
||||
</h2>
|
||||
<div>
|
||||
All:
|
||||
<span id="rdata_users"><?= $systemInfo->users ?></span>
|
||||
<br>
|
||||
Active (within 24h):
|
||||
<span id="rdata_activeUsers"><?= $systemInfo->activeUsers ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-share-nodes"></i>
|
||||
Share
|
||||
</h2>
|
||||
<div>
|
||||
Link:
|
||||
<span id="rdata_shares"><?= $systemInfo->shares ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-paper-plane"></i>
|
||||
Collection
|
||||
</h2>
|
||||
<div>
|
||||
Collection:
|
||||
<span id="rdata_collections"><?= $systemInfo->collections ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-brands fa-php"></i>
|
||||
PHP
|
||||
</h2>
|
||||
<div>
|
||||
Version:
|
||||
<span id="rdata_phpVersion"><?= $systemInfo->phpVersion ?></span>
|
||||
<br>
|
||||
Speed:
|
||||
<span><?= $systemInfo->nic['speed'] ?></span>
|
||||
Memory Limit:
|
||||
<span id="rdata_memoryLimit"><?= $systemInfo->memoryLimit ?></span>
|
||||
<br>
|
||||
IPv4:
|
||||
<span><?= $systemInfo->nic['ipv4'] ?></span>
|
||||
Max Execution Time:
|
||||
<span id="rdata_maxExecutionTime"><?= $systemInfo->maxExecutionTime ?>s</span>
|
||||
<br>
|
||||
IPv6:
|
||||
<span><?= $systemInfo->nic['ipv6'] ?></span>
|
||||
Upload Max Filesize:
|
||||
<span id="rdata_uploadMaxFilesize"><?= $systemInfo->uploadMaxFilesize ?></span>
|
||||
<br>
|
||||
Post Max Size:
|
||||
<span id="rdata_postMaxSize"><?= $systemInfo->postMaxSize ?></span>
|
||||
<br>
|
||||
Extension:
|
||||
<span id="rdata_extensions"><?= $systemInfo->extensions ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-database"></i>
|
||||
Database
|
||||
</h2>
|
||||
<div>
|
||||
Type:
|
||||
<span id="rdata_dbType"><?= $systemInfo->dbType ?></span>
|
||||
<br>
|
||||
Version:
|
||||
<span id="rdata_dbVersion"><?= $systemInfo->dbVersion ?></span>
|
||||
<br>
|
||||
Size:
|
||||
<span id="rdata_dbSize"><?= $systemInfo->dbSize ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-users"></i>
|
||||
Active Users
|
||||
</h2>
|
||||
<div>
|
||||
All:
|
||||
<span><?= $systemInfo->users ?></span>
|
||||
<br>
|
||||
Active (within 24h):
|
||||
<span><?= $systemInfo->activeUsers ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-share-nodes"></i>
|
||||
Share
|
||||
</h2>
|
||||
<div>
|
||||
Link:
|
||||
<span><?= $systemInfo->shares ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-paper-plane"></i>
|
||||
Collection
|
||||
</h2>
|
||||
<div>
|
||||
Collection:
|
||||
<span><?= $systemInfo->collections ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-brands fa-php"></i>
|
||||
PHP
|
||||
</h2>
|
||||
<div>
|
||||
Version:
|
||||
<span><?= $systemInfo->phpVersion ?></span>
|
||||
<br>
|
||||
Memory Limit:
|
||||
<span><?= $systemInfo->memoryLimit ?></span>
|
||||
<br>
|
||||
Max Execution Time:
|
||||
<span><?= $systemInfo->maxExecutionTime ?>s</span>
|
||||
<br>
|
||||
Upload Max Filesize:
|
||||
<span><?= $systemInfo->uploadMaxFilesize ?></span>
|
||||
<br>
|
||||
Post Max Size:
|
||||
<span><?= $systemInfo->postMaxSize ?></span>
|
||||
<br>
|
||||
Extension:
|
||||
<span><?= $systemInfo->extensions ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-database"></i>
|
||||
Database
|
||||
</h2>
|
||||
<div>
|
||||
Type:
|
||||
<span><?= $systemInfo->dbType ?></span>
|
||||
<br>
|
||||
Version:
|
||||
<span><?= $systemInfo->dbVersion ?></span>
|
||||
<br>
|
||||
Size:
|
||||
<span><?= $systemInfo->dbSize ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$dataTime = substr($systemInfo->serverTime, 11, 8);
|
||||
$mp_free = round(100 - $systemInfo->mp_usage, 2);
|
||||
$script = <<< JS
|
||||
var myChart = echarts.init(document.getElementById('cpu-graph'));
|
||||
var myChart2 = echarts.init(document.getElementById('memory-graph'));
|
||||
var 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","16:51:49"]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
'name': 'CPU',
|
||||
data: [$systemInfo->cpuUsage,50],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
emphasis: {
|
||||
scale: 1.5
|
||||
}
|
||||
},
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
if(needLoadGraph !== null){
|
||||
var myChart1 = echarts.init(needLoadGraph);
|
||||
var option1 = {
|
||||
legend: {
|
||||
data: ['Load']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ["$dataTime","16:51:49"]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
'name': 'Load',
|
||||
data: [$systemInfo->load,50],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
emphasis: {
|
||||
scale: 1.5
|
||||
}
|
||||
},
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart1.setOption(option1);
|
||||
}
|
||||
var option2 = {
|
||||
legend: {
|
||||
data: ['RAM', 'SWAP']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ["$dataTime","16:51:49"]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'RAM',
|
||||
data: [$systemInfo->ramUsage,50],
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'red'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
emphasis: {
|
||||
scale: 1.5
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SWAP',
|
||||
data: [$systemInfo->swapUsage,90],
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'blue'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
formatter: '{c}%',
|
||||
emphasis: {
|
||||
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]);
|
||||
?>
|
||||
|
||||
67
web/js/sysinfo-core.js
Normal file
67
web/js/sysinfo-core.js
Normal file
@ -0,0 +1,67 @@
|
||||
//dynamic fetch of system information & display
|
||||
//every 5 seconds ajax request to fetch system information
|
||||
//backport: admin/get-sysinfo
|
||||
//return json object with system information
|
||||
|
||||
var sysinfo = {
|
||||
init: function () {
|
||||
setInterval(sysinfo.fetch, 5000);
|
||||
},
|
||||
fetch: function () {
|
||||
$.ajax({
|
||||
url: '/admin/get-sysinfo',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
sysinfo.display(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
display: function (data) {
|
||||
//TODO: display system information
|
||||
}
|
||||
}
|
||||
|
||||
// *Some data need to display
|
||||
// rdata_hostname: hostname
|
||||
// rdata_os: os
|
||||
// rdata_cpu: cpu
|
||||
// rdata_ram: ram
|
||||
// rdata_serverTime: serverTime
|
||||
// rdata_serverUpTime: serverUpTime
|
||||
// (osType ==2) rdata_load: load
|
||||
// rdata_cpuUsage: cpuUsage
|
||||
// rdata_ramUsage: ramUsage
|
||||
// rdata_swapUsage: swapUsage
|
||||
// rdata_dataMountPoint: dataMountPoint
|
||||
// rdata_mp_fs: mp_fs
|
||||
// rdata_mp_size: mp_size
|
||||
// rdata_mp_avail: mp_avail
|
||||
// rdata_mp_used: mp_used
|
||||
// rdata_mp_usage: mp_usage
|
||||
// rdata_hostname2: hostname
|
||||
// rdata_dns: dns
|
||||
// rdata_gateway: gateway
|
||||
// rdata_interfaceName: nic[interfaceName]
|
||||
// rdata_mac: nic[mac]
|
||||
// rdata_speed: nic[speed]
|
||||
// rdata_ipv4: nic[ipv4]
|
||||
// rdata_ipv6: nic[ipv6]
|
||||
// rdata_users: users
|
||||
// rdata_activeUsers: activeUsers
|
||||
// rdata_shares: shares
|
||||
// rdata_collections: collections
|
||||
// rdata_phpVersion: phpVersion
|
||||
// rdata_memoryLimit: memoryLimit
|
||||
// rdata_maxExecutionTime: maxExecutionTime
|
||||
// rdata_uploadMaxFilesize: uploadMaxFilesize
|
||||
// rdata_postMaxSize: postMaxSize
|
||||
// rdata_extensions: extensions
|
||||
// rdata_dbType: dbType
|
||||
// rdata_dbVersion: dbVersion
|
||||
// rdata_dbSize: dbSize
|
||||
|
||||
// var myChart = echarts.init(document.getElementById('cpu-graph'));
|
||||
// var myChart1 = echarts.init(document.getElementById('load-graph'));
|
||||
// var myChart2 = echarts.init(document.getElementById('memory-graph'));
|
||||
// var myChart3 = echarts.init(document.getElementById('disk-chart'));
|
||||
Loading…
Reference in New Issue
Block a user