添加历史数据获取接口,实装服务器详细面板实时监控变化
This commit is contained in:
parent
6881357ff5
commit
eeb6446c6c
@ -3,8 +3,10 @@ package com.example.controller;
|
|||||||
import com.example.entity.RestBean;
|
import com.example.entity.RestBean;
|
||||||
import com.example.entity.vo.request.RenameClientVO;
|
import com.example.entity.vo.request.RenameClientVO;
|
||||||
import com.example.entity.vo.request.RenameNodeVO;
|
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.ClientDetailsVO;
|
||||||
import com.example.entity.vo.response.ClientPreviewVO;
|
import com.example.entity.vo.response.ClientPreviewVO;
|
||||||
|
import com.example.entity.vo.response.RuntimeDetailsVO;
|
||||||
import com.example.service.ClientService;
|
import com.example.service.ClientService;
|
||||||
import jakarta.annotation.Resource;
|
import jakarta.annotation.Resource;
|
||||||
import jakarta.validation.Valid;
|
import jakarta.validation.Valid;
|
||||||
@ -40,4 +42,14 @@ public class MonitorController {
|
|||||||
public RestBean<ClientDetailsVO> clientDetails(int clientId) {
|
public RestBean<ClientDetailsVO> clientDetails(int clientId) {
|
||||||
return RestBean.success(service.clientDetails(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));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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<>();
|
||||||
|
}
|
@ -29,7 +29,8 @@ public class RequestLogFilter extends OncePerRequestFilter {
|
|||||||
@Resource
|
@Resource
|
||||||
SnowflakeIdGenerator generator;
|
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
|
@Override
|
||||||
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
|
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
|
||||||
|
@ -8,6 +8,7 @@ import com.example.entity.vo.request.RenameNodeVO;
|
|||||||
import com.example.entity.vo.request.RuntimeDetailVO;
|
import com.example.entity.vo.request.RuntimeDetailVO;
|
||||||
import com.example.entity.vo.response.ClientDetailsVO;
|
import com.example.entity.vo.response.ClientDetailsVO;
|
||||||
import com.example.entity.vo.response.ClientPreviewVO;
|
import com.example.entity.vo.response.ClientPreviewVO;
|
||||||
|
import com.example.entity.vo.response.RuntimeDetailsVO;
|
||||||
|
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
|
||||||
@ -22,4 +23,6 @@ public interface ClientService extends IService<Client> {
|
|||||||
void renameClient(RenameClientVO vo);
|
void renameClient(RenameClientVO vo);
|
||||||
void renameNode(RenameNodeVO vo);
|
void renameNode(RenameNodeVO vo);
|
||||||
ClientDetailsVO clientDetails(int clientId);
|
ClientDetailsVO clientDetails(int clientId);
|
||||||
|
RuntimeDetailsVO clientRuntimeDetailsHistory(int clientId);
|
||||||
|
RuntimeDetailVO clientRuntimeDetailsNow(int clientId);
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ import com.example.entity.vo.request.RenameNodeVO;
|
|||||||
import com.example.entity.vo.request.RuntimeDetailVO;
|
import com.example.entity.vo.request.RuntimeDetailVO;
|
||||||
import com.example.entity.vo.response.ClientDetailsVO;
|
import com.example.entity.vo.response.ClientDetailsVO;
|
||||||
import com.example.entity.vo.response.ClientPreviewVO;
|
import com.example.entity.vo.response.ClientPreviewVO;
|
||||||
|
import com.example.entity.vo.response.RuntimeDetailsVO;
|
||||||
import com.example.mapper.ClientDetailMapper;
|
import com.example.mapper.ClientDetailMapper;
|
||||||
import com.example.mapper.ClientMapper;
|
import com.example.mapper.ClientMapper;
|
||||||
import com.example.service.ClientService;
|
import com.example.service.ClientService;
|
||||||
@ -129,6 +130,19 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
|
|||||||
return vo;
|
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) {
|
private boolean isOnline(RuntimeDetailVO runtime) {
|
||||||
return runtime != null && System.currentTimeMillis() - runtime.getTimestamp() < 60 * 1000;
|
return runtime != null && System.currentTimeMillis() - runtime.getTimestamp() < 60 * 1000;
|
||||||
}
|
}
|
||||||
|
@ -1,17 +1,22 @@
|
|||||||
package com.example.utils;
|
package com.example.utils;
|
||||||
|
|
||||||
|
import com.alibaba.fastjson2.JSONObject;
|
||||||
import com.example.entity.dto.RuntimeData;
|
import com.example.entity.dto.RuntimeData;
|
||||||
import com.example.entity.vo.request.RuntimeDetailVO;
|
import com.example.entity.vo.request.RuntimeDetailVO;
|
||||||
|
import com.example.entity.vo.response.RuntimeDetailsVO;
|
||||||
import com.influxdb.client.InfluxDBClient;
|
import com.influxdb.client.InfluxDBClient;
|
||||||
import com.influxdb.client.InfluxDBClientFactory;
|
import com.influxdb.client.InfluxDBClientFactory;
|
||||||
import com.influxdb.client.WriteApiBlocking;
|
import com.influxdb.client.WriteApiBlocking;
|
||||||
import com.influxdb.client.domain.WritePrecision;
|
import com.influxdb.client.domain.WritePrecision;
|
||||||
|
import com.influxdb.query.FluxRecord;
|
||||||
|
import com.influxdb.query.FluxTable;
|
||||||
import jakarta.annotation.PostConstruct;
|
import jakarta.annotation.PostConstruct;
|
||||||
import org.springframework.beans.BeanUtils;
|
import org.springframework.beans.BeanUtils;
|
||||||
import org.springframework.beans.factory.annotation.Value;
|
import org.springframework.beans.factory.annotation.Value;
|
||||||
import org.springframework.stereotype.Component;
|
import org.springframework.stereotype.Component;
|
||||||
|
|
||||||
import java.util.Date;
|
import java.util.Date;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
@Component
|
@Component
|
||||||
public class InfluxDbUtils {
|
public class InfluxDbUtils {
|
||||||
@ -41,4 +46,27 @@ public class InfluxDbUtils {
|
|||||||
WriteApiBlocking writeApi = client.getWriteApiBlocking();
|
WriteApiBlocking writeApi = client.getWriteApiBlocking();
|
||||||
writeApi.writeMeasurement(BUCKET, ORG, WritePrecision.NS, data);
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {reactive, watch} from "vue";
|
import {computed, reactive, watch} from "vue";
|
||||||
import {get, post} from "@/net";
|
import {get, post} from "@/net";
|
||||||
import {useClipboard} from "@vueuse/core";
|
import {useClipboard} from "@vueuse/core";
|
||||||
import {ElMessage} from "element-plus";
|
import {ElMessage} from "element-plus";
|
||||||
import {cpuNameToImage, osNameToIcon, rename} from "@/tools";
|
import {cpuNameToImage, fitToRightByteUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
|
||||||
|
|
||||||
const locations = [
|
const locations = [
|
||||||
{name: 'cn', desc: '中国大陆'},
|
{name: 'cn', desc: '中国大陆'},
|
||||||
@ -17,12 +17,15 @@ const locations = [
|
|||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: Number,
|
id: Number,
|
||||||
update: Function
|
update: Function,
|
||||||
|
show: Boolean
|
||||||
})
|
})
|
||||||
|
|
||||||
const details = reactive({
|
const details = reactive({
|
||||||
base: {},
|
base: {},
|
||||||
runtime: {},
|
runtime: {
|
||||||
|
list: []
|
||||||
|
},
|
||||||
editNode: false
|
editNode: false
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -57,9 +60,24 @@ function updateDetails() {
|
|||||||
init(props.id)
|
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 => {
|
const init = id => {
|
||||||
|
if(id < 0) return
|
||||||
details.base = {}
|
details.base = {}
|
||||||
|
details.runtime = { list: [] }
|
||||||
get(`/api/monitor/details?clientId=${id}`, data => Object.assign(details.base, data))
|
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 })
|
watch(() => props.id, init, { immediate: true })
|
||||||
</script>
|
</script>
|
||||||
@ -151,37 +169,41 @@ watch(() => props.id, init, { immediate: true })
|
|||||||
实时监控
|
实时监控
|
||||||
</div>
|
</div>
|
||||||
<el-divider style="margin: 10px 0"/>
|
<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: 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>
|
||||||
<el-progress style="margin-left: 20px"
|
<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: 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>
|
</el-progress>
|
||||||
<div style="flex: 1;margin-left: 30px;display: flex;flex-direction: column;height: 80px">
|
<div style="flex: 1;margin-left: 30px;display: flex;flex-direction: column;height: 80px">
|
||||||
<div style="flex: 1;font-size: 14px">
|
<div style="flex: 1;font-size: 14px">
|
||||||
<div>实时网络速度</div>
|
<div>实时网络速度</div>
|
||||||
<div>
|
<div>
|
||||||
<i style="color: orange" class="fa-solid fa-arrow-up"></i>
|
<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"/>
|
<el-divider style="margin: 0 20px" direction="vertical"/>
|
||||||
<i style="color: dodgerblue" class="fa-solid fa-arrow-down"></i>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<div style="font-size: 13px;display: flex;justify-content: space-between">
|
<div style="font-size: 13px;display: flex;justify-content: space-between">
|
||||||
<div>
|
<div>
|
||||||
<i class="fa-solid fa-hard-drive"></i>
|
<i class="fa-solid fa-hard-drive"></i>
|
||||||
<span> 磁盘总容量</span>
|
<span> 磁盘</span>
|
||||||
</div>
|
</div>
|
||||||
<div>6.6 GB / 40.0 GB</div>
|
<div>{{now.diskUsage.toFixed(1)}} GB / {{details.runtime.disk.toFixed(1)}} GB</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,9 +10,9 @@ const detail = reactive({
|
|||||||
show: false,
|
show: false,
|
||||||
id: -1
|
id: -1
|
||||||
})
|
})
|
||||||
const displayClientDetails = (id) => {
|
const displayClientDetails = id => {
|
||||||
detail.show = true
|
|
||||||
detail.id = id
|
detail.id = id
|
||||||
|
detail.show = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateList = () => get('/api/monitor/list', data => list.value = data)
|
const updateList = () => get('/api/monitor/list', data => list.value = data)
|
||||||
@ -30,8 +30,8 @@ updateList()
|
|||||||
@click="displayClientDetails(item.id)"/>
|
@click="displayClientDetails(item.id)"/>
|
||||||
</div>
|
</div>
|
||||||
<el-drawer size="520" :show-close="false" v-model="detail.show"
|
<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>
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user