添加历史数据获取接口，实装服务器详细面板实时监控变化

itbaima-monitor-server/src/main/java/com/example/controller/MonitorController.java

@@ -3,8 +3,10 @@ package com.example.controller;
 import com.example.entity.RestBean;
 import com.example.entity.vo.request.RenameClientVO;
 import com.example.entity.vo.request.RenameNodeVO;
+import com.example.entity.vo.request.RuntimeDetailVO;
 import com.example.entity.vo.response.ClientDetailsVO;
 import com.example.entity.vo.response.ClientPreviewVO;
+import com.example.entity.vo.response.RuntimeDetailsVO;
 import com.example.service.ClientService;
 import jakarta.annotation.Resource;
 import jakarta.validation.Valid;
@@ -40,4 +42,14 @@ public class MonitorController {
     public RestBean<ClientDetailsVO> clientDetails(int clientId) {
         return RestBean.success(service.clientDetails(clientId));
     }
+
+    @GetMapping("/runtime-history")
+    public RestBean<RuntimeDetailsVO> runtimeDetailsHistory(int clientId) {
+        return RestBean.success(service.clientRuntimeDetailsHistory(clientId));
+    }
+
+    @GetMapping("/runtime-now")
+    public RestBean<RuntimeDetailVO> runtimeDetailsNow(int clientId) {
+        return RestBean.success(service.clientRuntimeDetailsNow(clientId));
+    }
 }

itbaima-monitor-server/src/main/java/com/example/entity/vo/response/RuntimeDetailsVO.java

@@ -0,0 +1,14 @@
+package com.example.entity.vo.response;
+
+import com.alibaba.fastjson2.JSONObject;
+import lombok.Data;
+
+import java.util.LinkedList;
+import java.util.List;
+
+@Data
+public class RuntimeDetailsVO {
+    double memory;
+    double disk;
+    List<JSONObject> list = new LinkedList<>();
+}

itbaima-monitor-server/src/main/java/com/example/filter/RequestLogFilter.java

@@ -29,7 +29,8 @@ public class RequestLogFilter extends OncePerRequestFilter {
     @Resource
     SnowflakeIdGenerator generator;
 
-    private final Set<String> ignores = Set.of("/swagger-ui", "/v3/api-docs", "/monitor/runtime", "/api/monitor/list");
+    private final Set<String> ignores = Set.of("/swagger-ui", "/v3/api-docs",
+            "/monitor/runtime", "/api/monitor/list", "/api/monitor/runtime");
 
     @Override
     protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

itbaima-monitor-server/src/main/java/com/example/service/ClientService.java

@@ -8,6 +8,7 @@ import com.example.entity.vo.request.RenameNodeVO;
 import com.example.entity.vo.request.RuntimeDetailVO;
 import com.example.entity.vo.response.ClientDetailsVO;
 import com.example.entity.vo.response.ClientPreviewVO;
+import com.example.entity.vo.response.RuntimeDetailsVO;
 
 import java.util.List;
 
@@ -22,4 +23,6 @@ public interface ClientService extends IService<Client> {
     void renameClient(RenameClientVO vo);
     void renameNode(RenameNodeVO vo);
     ClientDetailsVO clientDetails(int clientId);
+    RuntimeDetailsVO clientRuntimeDetailsHistory(int clientId);
+    RuntimeDetailVO clientRuntimeDetailsNow(int clientId);
 }

itbaima-monitor-server/src/main/java/com/example/service/impl/ClientServiceImpl.java

@@ -10,6 +10,7 @@ import com.example.entity.vo.request.RenameNodeVO;
 import com.example.entity.vo.request.RuntimeDetailVO;
 import com.example.entity.vo.response.ClientDetailsVO;
 import com.example.entity.vo.response.ClientPreviewVO;
+import com.example.entity.vo.response.RuntimeDetailsVO;
 import com.example.mapper.ClientDetailMapper;
 import com.example.mapper.ClientMapper;
 import com.example.service.ClientService;
@@ -129,6 +130,19 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
         return vo;
     }
 
+    @Override
+    public RuntimeDetailsVO clientRuntimeDetailsHistory(int clientId) {
+        RuntimeDetailsVO vo = influx.readRuntimeData();
+        ClientDetail client = detailMapper.selectById(clientId);
+        BeanUtils.copyProperties(client, vo);
+        return vo;
+    }
+
+    @Override
+    public RuntimeDetailVO clientRuntimeDetailsNow(int clientId) {
+        return lastRuntime.get(clientId);
+    }
+
     private boolean isOnline(RuntimeDetailVO runtime) {
         return runtime != null && System.currentTimeMillis() - runtime.getTimestamp() < 60 * 1000;
     }

itbaima-monitor-server/src/main/java/com/example/utils/InfluxDbUtils.java

@@ -1,17 +1,22 @@
 package com.example.utils;
 
+import com.alibaba.fastjson2.JSONObject;
 import com.example.entity.dto.RuntimeData;
 import com.example.entity.vo.request.RuntimeDetailVO;
+import com.example.entity.vo.response.RuntimeDetailsVO;
 import com.influxdb.client.InfluxDBClient;
 import com.influxdb.client.InfluxDBClientFactory;
 import com.influxdb.client.WriteApiBlocking;
 import com.influxdb.client.domain.WritePrecision;
+import com.influxdb.query.FluxRecord;
+import com.influxdb.query.FluxTable;
 import jakarta.annotation.PostConstruct;
 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Component;
 
 import java.util.Date;
+import java.util.List;
 
 @Component
 public class InfluxDbUtils {
@@ -41,4 +46,27 @@ public class InfluxDbUtils {
         WriteApiBlocking writeApi = client.getWriteApiBlocking();
         writeApi.writeMeasurement(BUCKET, ORG, WritePrecision.NS, data);
     }
+
+    public RuntimeDetailsVO readRuntimeData() {
+        String query = """
+                from(bucket: "%s")
+                |> range(start: %s)
+                |> filter(fn: (r) => r["_measurement"] == "runtime")
+                """;
+        String format = String.format(query, BUCKET, "-1h");
+        List<FluxTable> tables = client.getQueryApi().query(format, ORG);
+        int size = tables.size();
+        List<FluxRecord> records = tables.get(0).getRecords();
+        RuntimeDetailsVO vo = new RuntimeDetailsVO();
+        for (int i = 0; i < records.size(); i++) {
+            JSONObject object = new JSONObject();
+            object.put("timestamp", records.get(i).getTime());
+            for (int j = 0; j < size; j++) {
+                FluxRecord record = tables.get(j).getRecords().get(i);
+                object.put(record.getField(), record.getValue());
+            }
+            vo.getList().add(object);
+        }
+        return vo;
+    }
 }

itbaima-monitor-web/src/component/ClientDetails.vue

@@ -1,9 +1,9 @@
 <script setup>
-import {reactive, watch} from "vue";
+import {computed, reactive, watch} from "vue";
 import {get, post} from "@/net";
 import {useClipboard} from "@vueuse/core";
 import {ElMessage} from "element-plus";
-import {cpuNameToImage, osNameToIcon, rename} from "@/tools";
+import {cpuNameToImage, fitToRightByteUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
 
 const locations = [
   {name: 'cn', desc: '中国大陆'},
@@ -17,12 +17,15 @@ const locations = [
 
 const props = defineProps({
   id: Number,
-  update: Function
+  update: Function,
+  show: Boolean
 })
 
 const details = reactive({
   base: {},
-  runtime: {},
+  runtime: {
+    list: []
+  },
   editNode: false
 })
 
@@ -57,9 +60,24 @@ function updateDetails() {
   init(props.id)
 }
 
+setInterval(() => {
+  if(props.show && details.runtime) {
+    get(`/api/monitor/runtime-now?clientId=${props.id}`, data => {
+      details.runtime.list.splice(details.runtime.list.length - 1)
+      details.runtime.list.unshift(data)
+    })
+  }
+}, 10000)
+
+const now = computed(() => details.runtime.list[0])
+
 const init = id => {
+  if(id < 0) return
   details.base = {}
+  details.runtime = { list: [] }
   get(`/api/monitor/details?clientId=${id}`, data => Object.assign(details.base, data))
+  get(`/api/monitor/runtime-history?clientId=${props.id}`,
+      data => Object.assign(details.runtime, data))
 }
 watch(() => props.id, init, { immediate: true })
 </script>
@@ -151,37 +169,41 @@ watch(() => props.id, init, { immediate: true })
         实时监控
       </div>
       <el-divider style="margin: 10px 0"/>
-      <div v-if="details.base.online">
+      <div v-if="details.base.online" v-loading="!details.runtime.list.length"
-        <div style="display: flex">
+           style="min-height: 200px">
-          <el-progress type="dashboard" :width="100" :percentage="20" status="success">
+        <div style="display: flex" v-if="details.runtime.list.length">
+          <el-progress type="dashboard" :width="100" :percentage="now.cpuUsage * 100"
+                       :status="percentageToStatus(now.cpuUsage * 100)">
             <div style="font-size: 17px;font-weight: bold;color: initial">CPU</div>
-            <div style="font-size: 13px;color: grey;margin-top: 5px">20%</div>
+            <div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.cpuUsage * 100).toFixed(1) }}%</div>
           </el-progress>
           <el-progress style="margin-left: 20px"
-                       type="dashboard" :width="100" :percentage="60" status="success">
+                       type="dashboard" :width="100" :percentage="now.memoryUsage / details.runtime.memory * 100"
+                       :status="percentageToStatus(now.memoryUsage / details.runtime.memory * 100)">
             <div style="font-size: 16px;font-weight: bold;color: initial">内存</div>
-            <div style="font-size: 13px;color: grey;margin-top: 5px">28.6 GB</div>
+            <div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.memoryUsage).toFixed(1) }} GB</div>
           </el-progress>
           <div style="flex: 1;margin-left: 30px;display: flex;flex-direction: column;height: 80px">
             <div style="flex: 1;font-size: 14px">
               <div>实时网络速度</div>
               <div>
                 <i style="color: orange" class="fa-solid fa-arrow-up"></i>
-                <span>{{` 20KB/s`}}</span>
+                <span>{{` ${fitToRightByteUnit(now.networkUpload, 'KB')}/s`}}</span>
                 <el-divider style="margin: 0 20px" direction="vertical"/>
                 <i style="color: dodgerblue" class="fa-solid fa-arrow-down"></i>
-                <span>{{` 0KB/s`}}</span>
+                <span>{{` ${fitToRightByteUnit(now.networkDownload, 'KB')}/s`}}</span>
               </div>
             </div>
             <div>
               <div style="font-size: 13px;display: flex;justify-content: space-between">
                 <div>
                   <i class="fa-solid fa-hard-drive"></i>
-                  <span> 磁盘总容量</span>
+                  <span> 磁盘</span>
                 </div>
-                <div>6.6 GB / 40.0 GB</div>
+                <div>{{now.diskUsage.toFixed(1)}} GB / {{details.runtime.disk.toFixed(1)}} GB</div>
               </div>
-              <el-progress type="line" status="success" :percentage="24" :show-text="false"/>
+              <el-progress type="line" :status="percentageToStatus(now.diskUsage / details.runtime.disk * 100)"
+                           :percentage="now.diskUsage / details.runtime.disk * 100" :show-text="false"/>
             </div>
           </div>
         </div>

itbaima-monitor-web/src/views/main/Manage.vue

@@ -10,9 +10,9 @@ const detail = reactive({
   show: false,
   id: -1
 })
-const displayClientDetails = (id) => {
+const displayClientDetails = id => {
-  detail.show = true
   detail.id = id
+  detail.show = true
 }
 
 const updateList = () => get('/api/monitor/list', data => list.value = data)
@@ -30,8 +30,8 @@ updateList()
                     @click="displayClientDetails(item.id)"/>
     </div>
     <el-drawer size="520" :show-close="false" v-model="detail.show"
-               :with-header="false" v-if="list.length">
+               :with-header="false" v-if="list.length" @close="detail.id = -1">
-      <client-details :id="detail.id" :update="updateList"/>
+      <client-details :id="detail.id" :update="updateList" :show="detail.show"/>
     </el-drawer>
   </div>
 </template>