chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

系统信息显示(2.5/3)

Browse Source 
*明天完成剩下的前端核心代码
This commit is contained in:
Chenx221 2024-04-14 17:25:06 +08:00
parent ac13b56fe6
commit df9292ff94
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
4 changed files with 392 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
controllers/AdminController.php
View File

@ -596,8 +596,8 @@ class AdminController extends Controller
* Get server status * Get server status
* @return void * @return void
*/ */
public function actionGetServerStatus(): void public function actionGetSysinfo(): void
{ {
//TODO: Implement this method
} }
} }

13
utils/SystemInfoHelper.php
View File

@ -568,8 +568,6 @@ class SystemInfoHelper
$sysInfo->detectRam(); $sysInfo->detectRam();
$sysInfo->detectServerTime(); $sysInfo->detectServerTime();
$sysInfo->detectServerUptime(); $sysInfo->detectServerUptime();
$sysInfo->detectCpuUsage(); $sysInfo->detectCpuUsage();
$sysInfo->detectRamUsage(); $sysInfo->detectRamUsage();
$sysInfo->detectDataMountPoint(); $sysInfo->detectDataMountPoint();
@ -593,16 +591,7 @@ class SystemInfoHelper
public static function getSysInfoFre(): SystemInfoHelper public static function getSysInfoFre(): SystemInfoHelper
{ {
$sysInfo = new SystemInfoHelper(); $sysInfo = new SystemInfoHelper();
$sysInfo->detectServerTime(); // TODO: Implement getSysInfoFre() method.
$sysInfo->detectServerUptime();
if ($sysInfo->osType === 1) {
$sysInfo->detectLoad();
} else {
$sysInfo->load = -1;
}
$sysInfo->detectCpuUsage();
$sysInfo->detectRamUsage();
$sysInfo->detectDataMountPoint();
return $sysInfo; return $sysInfo;
} }

459
views/admin/sysinfo.php
View File

@ -3,11 +3,15 @@
/* @var $systemInfo SystemInfoHelper */ /* @var $systemInfo SystemInfoHelper */
use app\assets\EChartsAsset;
use app\assets\FontAwesomeAsset; use app\assets\FontAwesomeAsset;
use app\utils\SystemInfoHelper; use app\utils\SystemInfoHelper;
use yii\bootstrap5\Html; use yii\bootstrap5\Html;
use yii\web\JqueryAsset;
use yii\web\View;
FontAwesomeAsset::register($this); FontAwesomeAsset::register($this);
EChartsAsset::register($this);
$this->title = '系统信息'; $this->title = '系统信息';
?> ?>
@ -27,27 +31,27 @@ $this->title = '系统信息';
<div> <div>
<h2> <h2>
<i class="fa-solid fa-server"></i> <i class="fa-solid fa-server"></i>
<?= $systemInfo->hostname ?> <span id="rdata_hostname"><?= $systemInfo->hostname ?></span>
</h2> </h2>
<p> <p>
OS: OS:
<strong><?= $systemInfo->os ?></strong> <strong id="rdata_os"><?= $systemInfo->os ?></strong>
</p> </p>
<p> <p>
CPU: CPU:
<strong><?= $systemInfo->cpu ?></strong> <strong id="rdata_cpu"><?= $systemInfo->cpu ?></strong>
</p> </p>
<p> <p>
RAM: RAM:
<strong><?= $systemInfo->ram ?></strong> <strong id="rdata_ram"><?= $systemInfo->ram ?></strong>
</p> </p>
<p> <p>
Server Time: Server Time:
<strong><?= $systemInfo->serverTime ?></strong> <strong id="rdata_serverTime"><?= $systemInfo->serverTime ?></strong>
</p> </p>
<p> <p>
Server Up Time: Server Up Time:
<strong><?= $systemInfo->serverUpTime ?></strong> <strong id="rdata_serverUpTime"><?= $systemInfo->serverUpTime ?></strong>
</p> </p>
</div> </div>
<hr> <hr>
@ -59,8 +63,10 @@ $this->title = '系统信息';
Load Load
</h2> </h2>
<!-- Load Graph --> <!-- Load Graph -->
<div id="load-graph" style="width: 600px;height:400px;">
</div>
<p> <p>
Load Average: <?= $systemInfo->load ?> (Last 1 min) Load Average: <span id="rdata_load"><?= $systemInfo->load ?></span> (Last 1 min)
</p> </p>
</div> </div>
<?php endif; ?> <?php endif; ?>
@ -70,8 +76,10 @@ $this->title = '系统信息';
CPU CPU
</h2> </h2>
<!-- CPU Graph --> <!-- CPU Graph -->
<div id="cpu-graph" style="width: 600px;height:400px;">
</div>
<p> <p>
CPU Usage: <?= $systemInfo->cpuUsage ?>% CPU Usage: <span id="rdata_cpuUsage"><?= $systemInfo->cpuUsage ?></span>%
</p> </p>
</div> </div>
<div> <div>
@ -80,11 +88,13 @@ $this->title = '系统信息';
Memory Memory
</h2> </h2>
<!-- Memory Graph --> <!-- Memory Graph -->
<div id="memory-graph" style="width: 600px;height:400px;">
</div>
<p> <p>
Memory Usage: <?= $systemInfo->ramUsage ?>% Memory Usage: <span id="rdata_ramUsage"><?= $systemInfo->ramUsage ?></span>%
</p> </p>
<p> <p>
Swap Usage: <?= $systemInfo->swapUsage ?>% Swap Usage: <span id="rdata_swapUsage"><?= $systemInfo->swapUsage ?></span>%
</p> </p>
</div> </div>
</div> </div>
@ -99,143 +109,318 @@ $this->title = '系统信息';
<div> <div>
<div> <div>
<!-- disk chart --> <!-- disk chart -->
</div> <div id="disk-chart" style="width: 600px;height:400px;">
<div> </div>
<h3>Data</h3> <div>
Mount: <h3>Data</h3>
<span><?= $systemInfo->dataMountPoint ?></span> Mount:
<br> <span id="rdata_dataMountPoint"><?= $systemInfo->dataMountPoint ?></span>
File System: <br>
<span><?= $systemInfo->mp_fs ?></span> File System:
<br> <span id="rdata_mp_fs"><?= $systemInfo->mp_fs ?></span>
Size: <br>
<span><?= $systemInfo->mp_size ?></span> Size:
<br> <span id="rdata_mp_size"><?= $systemInfo->mp_size ?></span>
Free: <br>
<span><?= $systemInfo->mp_avail ?></span> Free:
<br> <span id="rdata_mp_avail"><?= $systemInfo->mp_avail ?></span>
Used: <br>
<span><?= $systemInfo->mp_used ?> (<?= $systemInfo->mp_usage ?>%)</span> Used:
<span id="rdata_mp_used"><?= $systemInfo->mp_used ?></span> (<span
id="rdata_mp_usage"><?= $systemInfo->mp_usage ?></span>%)
</div>
</div> </div>
</div> </div>
</div> <hr>
<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>
<div> <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>
<div> <div>
<h3><?= $systemInfo->nic['interfaceName'] ?></h3> <div>
MAC: <h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
<span><?= $systemInfo->nic['mac'] ?></span> 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> <br>
Speed: Memory Limit:
<span><?= $systemInfo->nic['speed'] ?></span> <span id="rdata_memoryLimit"><?= $systemInfo->memoryLimit ?></span>
<br> <br>
IPv4: Max Execution Time:
<span><?= $systemInfo->nic['ipv4'] ?></span> <span id="rdata_maxExecutionTime"><?= $systemInfo->maxExecutionTime ?>s</span>
<br> <br>
IPv6: Upload Max Filesize:
<span><?= $systemInfo->nic['ipv6'] ?></span> <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>
</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>
</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
View 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'));