itbaima-study/itbaima-monitor-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成历史数据获取，详细页面监控信息实时变化

Browse Source
This commit is contained in:
柏码の讲师 2023-12-12 22:41:01 +08:00
parent f5a09cede0
commit 901e8c01e9
9 changed files with 114 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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.RuntimeHistoryVO;
import com.example.service.ClientService;
import jakarta.annotation.Resource;
import jakarta.validation.Valid;
@ -40,4 +42,14 @@ public class MonitorController {
public RestBean<ClientDetailsVO> details(int clientId) {
return RestBean.success(service.clientDetails(clientId));
}
@GetMapping("/runtime-history")
public RestBean<RuntimeHistoryVO> runtimeDetailsHistory(int clientId) {
return RestBean.success(service.clientRuntimeDetailsHistory(clientId));
}
@GetMapping("/runtime-now")
public RestBean<RuntimeDetailVO> runtimeDetailsNow(int clientId) {
return RestBean.success(service.clientRuntimeDetailsNow(clientId));
}
}

14
itbaima-monitor-server/src/main/java/com/example/entity/vo/response/RuntimeHistoryVO.java Normal file
View File

@ -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 RuntimeHistoryVO {
double disk;
double memory;
List<JSONObject> list = new LinkedList<>();
}

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

@ -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-now");
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

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

@ -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.RuntimeHistoryVO;
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);
RuntimeHistoryVO clientRuntimeDetailsHistory(int clientId);
RuntimeDetailVO clientRuntimeDetailsNow(int clientId);
}

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

@ -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.RuntimeHistoryVO;
import com.example.mapper.ClientDetailMapper;
import com.example.mapper.ClientMapper;
import com.example.service.ClientService;
@ -126,6 +127,19 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
return vo;
}
@Override
public RuntimeHistoryVO clientRuntimeDetailsHistory(int clientId) {
RuntimeHistoryVO vo = influx.readRuntimeData(clientId);
ClientDetail detail = detailMapper.selectById(clientId);
BeanUtils.copyProperties(detail, vo);
return vo;
}
@Override
public RuntimeDetailVO clientRuntimeDetailsNow(int clientId) {
return currentRuntime.get(clientId);
}
private boolean isOnline(RuntimeDetailVO runtime) {
return runtime != null && System.currentTimeMillis() - runtime.getTimestamp() < 60 * 1000;
}

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

@ -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.RuntimeHistoryVO;
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,29 @@ public class InfluxDbUtils {
WriteApiBlocking writeApi = client.getWriteApiBlocking();
writeApi.writeMeasurement(BUCKET, ORG, WritePrecision.NS, data);
}
public RuntimeHistoryVO readRuntimeData(int clientId) {
RuntimeHistoryVO vo = new RuntimeHistoryVO();
String query = """
from(bucket: "%s")
|> range(start: %s)
|> filter(fn: (r) => r["_measurement"] == "runtime")
|> filter(fn: (r) => r["clientId"] == "%s")
""";
String format = String.format(query, BUCKET, "-1h", clientId);
List<FluxTable> tables = client.getQueryApi().query(format, ORG);
int size = tables.size();
if (size == 0) return vo;
List<FluxRecord> records = tables.get(0).getRecords();
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;
}
}

4
itbaima-monitor-server/src/main/resources/application-dev.yml
View File

@ -36,8 +36,8 @@ spring:
verify:
mail-limit: 60
flow:
period: 3
limit: 50
period: 5
limit: 100
block: 30
cors:
origin: '*'

4
itbaima-monitor-server/src/main/resources/application-prod.yml
View File

@ -40,8 +40,8 @@ spring:
verify:
mail-limit: 60
flow:
period: 3
limit: 10
period: 5
limit: 100
block: 30
cors:
origin: '*'

49
itbaima-monitor-web/src/component/ClientDetails.vue
View File

@ -1,7 +1,7 @@
<script setup>
import {reactive, watch} from "vue";
import {computed, reactive, watch} from "vue";
import {get, post} from "@/net";
import {copyIp, cpuNameToImage, osNameToIcon, rename} from "@/tools";
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
import {ElMessage} from "element-plus";
const locations = [
@ -21,7 +21,9 @@ const props = defineProps({
const details = reactive({
base: {},
runtime: {},
runtime: {
list: []
},
editNode: false
})
const nodeEdit = reactive({
@ -49,10 +51,24 @@ function updateDetails() {
props.update()
init(props.id)
}
setInterval(() => {
if(props.id !== -1 && details.runtime) {
get(`/api/monitor/runtime-now?clientId=${props.id}`, data => {
details.runtime.list.splice(0, 1)
details.runtime.list.push(data)
})
}
}, 10000)
const now = computed(() => details.runtime.list[details.runtime.list.length - 1])
const init = id => {
if(id !== -1) {
details.base = {}
details.runtime = { list: [] }
get(`/api/monitor/details?clientId=${id}`, data => Object.assign(details.base, data))
get(`/api/monitor/runtime-history?clientId=${id}`, data => Object.assign(details.runtime, data))
}
}
watch(() => props.id, init, { immediate: true })
@ -144,26 +160,29 @@ watch(() => props.id, init, { immediate: true })
实时监控
</div>
<el-divider style="margin: 10px 0"/>
<div v-if="details.base.online">
<div style="display: flex">
<el-progress type="dashboard" :width="100" :percentage="20" status="success">
<div v-if="details.base.online" v-loading="!details.runtime.list.length"
style="min-height: 200px">
<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">
<el-progress style="margin-left: 20px" 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>{{` ${fitByUnit(now.networkUpload, 'KB')}/s`}}</span>
<el-divider direction="vertical"/>
<i style="color: dodgerblue" class="fa-solid fa-arrow-down"></i>
<span>{{` 0KB/s`}}</span>
<span>{{` ${fitByUnit(now.networkDownload, 'KB')}/s`}}</span>
</div>
</div>
<div>
@ -172,9 +191,11 @@ watch(() => props.id, init, { immediate: true })
<i class="fa-solid fa-hard-drive"></i>
<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" :show-text="false"
:status="percentageToStatus(now.diskUsage / details.runtime.disk * 100)"
:percentage="now.diskUsage / details.runtime.disk * 100" />
</div>
</div>
</div>