系统信息显示(2.5/3)

*明天完成剩下的前端核心代码

controllers/AdminController.php

@@ -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
     }
 }

utils/SystemInfoHelper.php

@@ -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();
+        // TODO: Implement getSysInfoFre() method.
-        $sysInfo->detectServerUptime();
-        if ($sysInfo->osType === 1) {
-            $sysInfo->detectLoad();
-        } else {
-            $sysInfo->load = -1;
-        }
-        $sysInfo->detectCpuUsage();
-        $sysInfo->detectRamUsage();
-        $sysInfo->detectDataMountPoint();
         return $sysInfo;
     }
 

views/admin/sysinfo.php

@@ -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,23 +109,25 @@ $this->title = '系统信息';
             <div>
                 <div>
                     <!-- disk chart -->
+                    <div id="disk-chart" style="width: 600px;height:400px;">
                     </div>
                     <div>
                         <h3>Data</h3>
                         Mount:
-                    <span><?= $systemInfo->dataMountPoint ?></span>
+                        <span id="rdata_dataMountPoint"><?= $systemInfo->dataMountPoint ?></span>
                         <br>
                         File System:
-                    <span><?= $systemInfo->mp_fs ?></span>
+                        <span id="rdata_mp_fs"><?= $systemInfo->mp_fs ?></span>
                         <br>
                         Size:
-                    <span><?= $systemInfo->mp_size ?></span>
+                        <span id="rdata_mp_size"><?= $systemInfo->mp_size ?></span>
                         <br>
                         Free:
-                    <span><?= $systemInfo->mp_avail ?></span>
+                        <span id="rdata_mp_avail"><?= $systemInfo->mp_avail ?></span>
                         <br>
                         Used:
-                    <span><?= $systemInfo->mp_used ?> (<?= $systemInfo->mp_usage ?>%)</span>
+                        <span id="rdata_mp_used"><?= $systemInfo->mp_used ?></span> (<span
+                                id="rdata_mp_usage"><?= $systemInfo->mp_usage ?></span>%)
                     </div>
                 </div>
             </div>
@@ -127,31 +139,31 @@ $this->title = '系统信息';
                 </h2>
                 <p>
                     Hostname:
-                <?= $systemInfo->hostname ?>
+                    <span id="rdata_hostname2"><?= $systemInfo->hostname ?></span>
                 </p>
                 <p>
                     DNS:
-                <?= $systemInfo->dns ?>
+                    <span id="rdata_dns"><?= $systemInfo->dns ?></span>
                 </p>
                 <p>
                     Gateway:
-                <?= $systemInfo->gateway ?>
+                    <span id="rdata_gateway"><?= $systemInfo->gateway ?></span>
                 </p>
                 <div>
                     <div>
                         <div>
-                        <h3><?= $systemInfo->nic['interfaceName'] ?></h3>
+                            <h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
                             MAC:
-                        <span><?= $systemInfo->nic['mac'] ?></span>
+                            <span id="rdata_mac"><?= $systemInfo->nic['mac'] ?></span>
                             <br>
                             Speed:
-                        <span><?= $systemInfo->nic['speed'] ?></span>
+                            <span id="rdata_speed"><?= $systemInfo->nic['speed'] ?></span>
                             <br>
                             IPv4:
-                        <span><?= $systemInfo->nic['ipv4'] ?></span>
+                            <span id="rdata_ipv4"><?= $systemInfo->nic['ipv4'] ?></span>
                             <br>
                             IPv6:
-                        <span><?= $systemInfo->nic['ipv6'] ?></span>
+                            <span id="rdata_ipv6"><?= $systemInfo->nic['ipv6'] ?></span>
                         </div>
                     </div>
                 </div>
@@ -164,10 +176,10 @@ $this->title = '系统信息';
                 </h2>
                 <div>
                     All:
-                <span><?= $systemInfo->users ?></span>
+                    <span id="rdata_users"><?= $systemInfo->users ?></span>
                     <br>
                     Active (within 24h):
-                <span><?= $systemInfo->activeUsers ?></span>
+                    <span id="rdata_activeUsers"><?= $systemInfo->activeUsers ?></span>
                 </div>
             </div>
             <hr>
@@ -179,7 +191,7 @@ $this->title = '系统信息';
                     </h2>
                     <div>
                         Link:
-                    <span><?= $systemInfo->shares ?></span>
+                        <span id="rdata_shares"><?= $systemInfo->shares ?></span>
                     </div>
                 </div>
                 <div>
@@ -189,7 +201,7 @@ $this->title = '系统信息';
                     </h2>
                     <div>
                         Collection:
-                    <span><?= $systemInfo->collections ?></span>
+                        <span id="rdata_collections"><?= $systemInfo->collections ?></span>
                     </div>
                 </div>
             </div>
@@ -202,22 +214,22 @@ $this->title = '系统信息';
                     </h2>
                     <div>
                         Version:
-                    <span><?= $systemInfo->phpVersion ?></span>
+                        <span id="rdata_phpVersion"><?= $systemInfo->phpVersion ?></span>
                         <br>
                         Memory Limit:
-                    <span><?= $systemInfo->memoryLimit ?></span>
+                        <span id="rdata_memoryLimit"><?= $systemInfo->memoryLimit ?></span>
                         <br>
                         Max Execution Time:
-                    <span><?= $systemInfo->maxExecutionTime ?>s</span>
+                        <span id="rdata_maxExecutionTime"><?= $systemInfo->maxExecutionTime ?>s</span>
                         <br>
                         Upload Max Filesize:
-                    <span><?= $systemInfo->uploadMaxFilesize ?></span>
+                        <span id="rdata_uploadMaxFilesize"><?= $systemInfo->uploadMaxFilesize ?></span>
                         <br>
                         Post Max Size:
-                    <span><?= $systemInfo->postMaxSize ?></span>
+                        <span id="rdata_postMaxSize"><?= $systemInfo->postMaxSize ?></span>
                         <br>
                         Extension:
-                    <span><?= $systemInfo->extensions ?></span>
+                        <span id="rdata_extensions"><?= $systemInfo->extensions ?></span>
                     </div>
                 </div>
                 <div>
@@ -227,15 +239,188 @@ $this->title = '系统信息';
                     </h2>
                     <div>
                         Type:
-                    <span><?= $systemInfo->dbType ?></span>
+                        <span id="rdata_dbType"><?= $systemInfo->dbType ?></span>
                         <br>
                         Version:
-                    <span><?= $systemInfo->dbVersion ?></span>
+                        <span id="rdata_dbVersion"><?= $systemInfo->dbVersion ?></span>
                         <br>
                         Size:
-                    <span><?= $systemInfo->dbSize ?></span>
+                        <span id="rdata_dbSize"><?= $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]);
+    ?>

web/js/sysinfo-core.js

@@ -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'));