mirror of https://gitee.com/stylefeng/roses
【7.0.1】【monitor】迁移monitor到核心包
parent
3d9a0e0d03
commit
defb78ba09
|
@ -23,11 +23,6 @@ public interface MonitorConstants {
|
|||
*/
|
||||
String MONITOR_PROMETHEUS_QUERY = "query";
|
||||
|
||||
/**
|
||||
* prometheus查询区间向量命令
|
||||
*/
|
||||
String MONITOR_PROMETHEUS_QUERY_RANGE = "query_range";
|
||||
|
||||
/**
|
||||
* prometheus查询开始时间
|
||||
*/
|
||||
|
@ -42,4 +37,10 @@ public interface MonitorConstants {
|
|||
* prometheus查询步长
|
||||
*/
|
||||
String MONITOR_PROMETHEUS_STEP = "step";
|
||||
|
||||
/**
|
||||
* prometheus查询区间向量命令
|
||||
*/
|
||||
String PROMETHEUS_QUERY_RANGE = "query_range";
|
||||
|
||||
}
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
监控模块的集成,针对于beetl模板引擎单体不分离项目
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
<parent>
|
||||
<groupId>cn.stylefeng.roses</groupId>
|
||||
<artifactId>kernel-o-monitor</artifactId>
|
||||
<version>7.0.1</version>
|
||||
<relativePath>../pom.xml</relativePath>
|
||||
</parent>
|
||||
|
||||
<artifactId>monitor-integration-beetl</artifactId>
|
||||
|
||||
<packaging>jar</packaging>
|
||||
|
||||
<dependencies>
|
||||
|
||||
<!--监控的自动配置-->
|
||||
<dependency>
|
||||
<groupId>cn.stylefeng.roses</groupId>
|
||||
<artifactId>monitor-spring-boot-starter</artifactId>
|
||||
<version>7.0.1</version>
|
||||
</dependency>
|
||||
|
||||
<!--资源api模块-->
|
||||
<!--用在资源控制器,资源扫描上-->
|
||||
<dependency>
|
||||
<groupId>cn.stylefeng.roses</groupId>
|
||||
<artifactId>scanner-api</artifactId>
|
||||
<version>7.0.1</version>
|
||||
</dependency>
|
||||
|
||||
<!--web模块-->
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
</project>
|
|
@ -0,0 +1,42 @@
|
|||
package cn.stylefeng.roses.kernel.monitor.integration.config;
|
||||
|
||||
import cn.stylefeng.roses.kernel.monitor.api.PrometheusApi;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
|
||||
/**
|
||||
* 是否显示prometheus菜单
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/3/3 17:14
|
||||
*/
|
||||
@Configuration
|
||||
@Slf4j
|
||||
public class PrometheusConfiguration {
|
||||
|
||||
@Value("${prometheus.enabled}")
|
||||
private boolean prometheusEnabled;
|
||||
|
||||
@Resource
|
||||
private PrometheusApi prometheusApi;
|
||||
|
||||
/***
|
||||
* 配置是否开启prometheus相关菜单
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/3/3 17:14
|
||||
*/
|
||||
@Bean
|
||||
public void configPrometheusMenu() {
|
||||
if (prometheusEnabled) {
|
||||
prometheusApi.displayPrometheusMenu();
|
||||
} else {
|
||||
prometheusApi.closePrometheusMenu();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,297 @@
|
|||
package cn.stylefeng.roses.kernel.monitor.integration.controller;
|
||||
|
||||
import cn.hutool.core.util.StrUtil;
|
||||
import cn.stylefeng.roses.kernel.monitor.api.PrometheusApi;
|
||||
import cn.stylefeng.roses.kernel.monitor.api.constants.MonitorConstants;
|
||||
import cn.stylefeng.roses.kernel.monitor.api.pojo.prometheus.PromResultInfo;
|
||||
import cn.stylefeng.roses.kernel.monitor.system.holder.SystemHardwareInfoHolder;
|
||||
import cn.stylefeng.roses.kernel.scanner.api.annotation.ApiResource;
|
||||
import cn.stylefeng.roses.kernel.scanner.api.annotation.GetResource;
|
||||
import com.alibaba.fastjson.JSON;
|
||||
import com.alibaba.fastjson.JSONArray;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Objects;
|
||||
|
||||
/**
|
||||
* 项目监控
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2020/12/30 16:40
|
||||
*/
|
||||
@Controller
|
||||
@ApiResource(name = "项目监控")
|
||||
public class MonitorController {
|
||||
|
||||
@Resource
|
||||
private SystemHardwareInfoHolder systemHardwareInfoHolder;
|
||||
|
||||
@Value("${spring.application.name}")
|
||||
private String name;
|
||||
|
||||
@Value("${prometheus.url}")
|
||||
private String prometheusUrl;
|
||||
|
||||
@Value("${prometheus.instance}")
|
||||
private String prometheusInstance;
|
||||
|
||||
@Resource
|
||||
private PrometheusApi service;
|
||||
|
||||
/**
|
||||
* 系统硬件信息页面
|
||||
*
|
||||
* @author fengshuonan
|
||||
* @date 2018/12/24 22:43
|
||||
*/
|
||||
@GetResource(name = "服务器监控", path = "/view/monitor/systemInfo")
|
||||
public String systemInfo(Model model) {
|
||||
model.addAttribute("server", systemHardwareInfoHolder.getSystemHardwareInfo());
|
||||
return "/modular/system/monitor/systemInfo.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* druid sql监控页面
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "SQL监控", path = "/view/monitor/druid")
|
||||
public String druidInfo() {
|
||||
return "/modular/system/monitor/druid.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* tomcat监控页面
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "tomcat监控首页", path = "/view/monitor/tomcatInfo")
|
||||
public String tomcatIndex() {
|
||||
return "/modular/system/monitor/tomcatInfo.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* tomcat监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "tomcat监控数据", path = "/view/monitor/getTomcatInfo")
|
||||
@ResponseBody
|
||||
public String tomcatInfo() {
|
||||
Map<String, Object> metricMap = getMetricInfos(getPromQl(), "tomcat_", "", "");
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* jvm监控页面
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "jvm监控页面", path = "/view/monitor/jvmInfo")
|
||||
public String jvmIndex() {
|
||||
return "/modular/system/monitor/jvmInfo.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* jvm监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "jvm监控数据", path = "/view/monitor/getJvmInfo")
|
||||
@ResponseBody
|
||||
public String jvmInfo(@RequestParam("id") String id, @RequestParam("area") String area) {
|
||||
Map<String, Object> metricMap = getMetricInfos(getPromQl(id, area), "jvm_", "", "");
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* 性能监控页面
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "性能监控页面", path = "/view/monitor/performanceInfo")
|
||||
public String performanceIndex() {
|
||||
return "/modular/system/monitor/performanceInfo.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* 性能监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "CPU监控数据", path = "/view/monitor/getCpuInfo")
|
||||
@ResponseBody
|
||||
public String cpuInfo() {
|
||||
Map<String, Object> metricMap = getMetricInfos(getPromQl(), "cpu_", "", "");
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* 服务器负载监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "服务器负载监控数据", path = "/view/monitor/getLoadInfo")
|
||||
@ResponseBody
|
||||
public String loadInfo() {
|
||||
Map<String, Object> metricMap = getMetricInfos(getPromQl(), "system_", "", "");
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* 进程监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "进程监控数据", path = "/view/monitor/getProcessInfo")
|
||||
@ResponseBody
|
||||
public String processInfo() {
|
||||
Map<String, Object> metricMap = getMetricInfos(getPromQl(), "process_", "", "");
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* 日志监控页面
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "日志监控页面", path = "/view/monitor/logbackInfo")
|
||||
public String logbackIndex() {
|
||||
return "/modular/system/monitor/logbackInfo.html";
|
||||
}
|
||||
|
||||
/**
|
||||
* 日志监控数据
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
@GetResource(name = "日志监控数据", path = "/view/monitor/getLogbackInfo")
|
||||
@ResponseBody
|
||||
public String logbackInfo(@RequestParam("level") String level, @RequestParam("timeInterval") String timeInterval, @RequestParam("isRate") String isRate, @RequestParam("rateMetric") String rateMetric) {
|
||||
if (StrUtil.isEmpty(timeInterval)) {
|
||||
timeInterval = "[5m]";
|
||||
}
|
||||
Map<String, Object> metricMap = getMetricInfos(getIratePromQl(level, timeInterval), "logback_", isRate, rateMetric);
|
||||
return JSON.toJSONString(metricMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* 组装prometheus查询sql
|
||||
*
|
||||
* @param id 同一指标不同分类的id号
|
||||
* @param area 查询区域jvm常用
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
private String getPromQl(String id, String area) {
|
||||
StringBuilder promql = new StringBuilder("{application=\"");
|
||||
promql.append(name);
|
||||
if (!StrUtil.isEmpty(id)) {
|
||||
promql.append("\",id=\"");
|
||||
promql.append(id);
|
||||
}
|
||||
if (!StrUtil.isEmpty(area)) {
|
||||
promql.append("\",area=\"");
|
||||
promql.append(area);
|
||||
}
|
||||
if (!StrUtil.isEmpty(prometheusInstance)) {
|
||||
promql.append("\",instance=\"");
|
||||
promql.append(prometheusInstance);
|
||||
}
|
||||
promql.append("\"}");
|
||||
return promql.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 组装prometheus查询sql方法重写不带参数
|
||||
*
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
private String getPromQl() {
|
||||
StringBuilder promql = new StringBuilder("{application=\"");
|
||||
promql.append(name);
|
||||
if (!StrUtil.isEmpty(prometheusInstance)) {
|
||||
promql.append("\",instance=\"");
|
||||
promql.append(prometheusInstance);
|
||||
}
|
||||
promql.append("\"}");
|
||||
return promql.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 组装prometheus平均值查询sql方法重写不带参数
|
||||
*
|
||||
* @param level 日志统计查询参数,info、warn、error、trace、debug
|
||||
* @param timeInterval 统计时间区间单位通常为分钟(m)
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
private String getIratePromQl(String level, String timeInterval) {
|
||||
StringBuilder promql = new StringBuilder("{application=\"");
|
||||
promql.append(name);
|
||||
if (!StrUtil.isEmpty(prometheusInstance)) {
|
||||
promql.append("\",instance=\"");
|
||||
promql.append(prometheusInstance);
|
||||
}
|
||||
if (!StrUtil.isEmpty(level)) {
|
||||
promql.append("\",level=\"");
|
||||
promql.append(level);
|
||||
}
|
||||
promql.append("\"}");
|
||||
promql.append(timeInterval);
|
||||
return promql.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 分别输出监控名称以及对应的值
|
||||
*
|
||||
* @param promQL prometheus查询sql
|
||||
* @param metric prometheus指标前缀,比如:"jvm_"
|
||||
* @param isRate prometheus计算函数,不需要计算周期内值就直接为"",需要计算则写计算函数以及对应的指标
|
||||
* @author chenli
|
||||
* @date 2021/1/4 16:32
|
||||
*/
|
||||
private Map<String, Object> getMetricInfos(String promQL, String metric, String isRate, String rateMetric) {
|
||||
Map<String, Object> metricMap = new HashMap<>();
|
||||
if (!StrUtil.isEmpty(prometheusUrl)) {
|
||||
List<PromResultInfo> promResultInfos = service.getMetricInfo(prometheusUrl.concat(MonitorConstants.PROMETHEUS_QUERY_RANGE), promQL, isRate, rateMetric);
|
||||
if (Objects.isNull(promResultInfos)) {
|
||||
return metricMap;
|
||||
}
|
||||
for (PromResultInfo promResultInfo : promResultInfos) {
|
||||
String metricName = promResultInfo.getMetric().get__name__();
|
||||
JSONArray valueArray = JSONArray.parseArray(JSON.toJSONString(promResultInfo.getValues()).replaceAll("\\\\", "").replace("\"", ""));
|
||||
if (!StrUtil.isEmpty(metricName)) {
|
||||
if (metricName.contains(metric)) {
|
||||
// 得到的数据为数组,需要转为json字符串去除双引号再转化为JSONArray,JSONArray是echarts时间序列图需要的数据格式
|
||||
metricMap.put(metricName, valueArray);
|
||||
}
|
||||
} else {
|
||||
// 查询指定的指标
|
||||
metricMap.put(rateMetric, valueArray);
|
||||
}
|
||||
}
|
||||
}
|
||||
return metricMap;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,2 @@
|
|||
org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
|
||||
cn.stylefeng.roses.kernel.monitor.integration.config.PrometheusConfiguration
|
|
@ -0,0 +1,171 @@
|
|||
function initGraph(params){
|
||||
const paramsId = echarts.init(document.getElementById(params.id), myEchartsTheme);
|
||||
let metricData = params.metric;
|
||||
const option = {
|
||||
title: {
|
||||
text: params.id,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (params.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + params.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: params.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (params.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name : params.id,
|
||||
data: metricData,
|
||||
areaStyle: { // 折现下是否填充
|
||||
color: this.color,
|
||||
opacity: 0.6
|
||||
},
|
||||
showSymbol: false}],
|
||||
};
|
||||
paramsId.setOption(option);
|
||||
}
|
||||
|
||||
// 初始化三个数据指标
|
||||
function initMultiGraph(multiParams){
|
||||
const multiParamsId = echarts.init(document.getElementById(multiParams.id), myEchartsTheme);
|
||||
let metricData = multiParams.metric;
|
||||
const option = {
|
||||
title: { text: multiParams.title, x: 'center' },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (multiParams.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + multiParams.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:"8%",
|
||||
formatter: function (name) {
|
||||
return name;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: multiParams.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (multiParams.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#63BAC9',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric1.name,
|
||||
data: metricData.metric1.value,
|
||||
areaStyle: {
|
||||
color: '#1D292D',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false},
|
||||
{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#B29943',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric2.name,
|
||||
data: metricData.metric2.value,
|
||||
areaStyle: {
|
||||
color: '#313830',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false},
|
||||
{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#7CA76D',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric3.name,
|
||||
data: metricData.metric3.value,
|
||||
areaStyle: {
|
||||
color: '#394437',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false}]
|
||||
};
|
||||
multiParamsId.setOption(option);
|
||||
}
|
|
@ -0,0 +1,223 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Eden Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Old Gen" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Survivor Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Code Cache" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Compressed Class Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Metaspace" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Classes Loaded" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="mapped" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="direct" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Threads" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const ids = ["PS Eden Space","PS Old Gen","PS Survivor Space","Code Cache","Compressed Class Space","Metaspace"]
|
||||
const baseUrl = "/view/monitor/getJvmInfo";
|
||||
// heap&nonheap echarts series
|
||||
for (let i=0;i<ids.length;i++){
|
||||
let id = ids[i];
|
||||
let heapParams;
|
||||
if (i>2) {
|
||||
heapParams = {
|
||||
dataObj: {
|
||||
'id':id,
|
||||
'area': 'nonheap'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
heapParams = {
|
||||
dataObj: {
|
||||
'id':id,
|
||||
'area': 'heap'
|
||||
}
|
||||
}
|
||||
}
|
||||
let request = new HttpRequest(baseUrl, 'get',function (data){
|
||||
let echartsParams={
|
||||
id : id,
|
||||
title : id,
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Used',
|
||||
value: data.jvm_memory_used_bytes
|
||||
},
|
||||
metric2: {
|
||||
name: 'Committed',
|
||||
value: data.jvm_memory_committed_bytes
|
||||
},
|
||||
metric3: {
|
||||
name: 'Max',
|
||||
value: data.jvm_memory_max_bytes
|
||||
}
|
||||
},
|
||||
unit: 'MB'
|
||||
}
|
||||
initMultiGraph(echartsParams);
|
||||
})
|
||||
request.dataObject = heapParams.dataObj;
|
||||
request.setAsync(true);
|
||||
request.start();
|
||||
}
|
||||
let clazzLoadRequest = new HttpRequest(baseUrl, 'get',function (clazzLoadData) {
|
||||
let clazzLoadParams = {
|
||||
id: 'Classes Loaded',
|
||||
metric: clazzLoadData.jvm_classes_loaded_classes
|
||||
}
|
||||
initGraph(clazzLoadParams);
|
||||
})
|
||||
clazzLoadRequest.setAsync(true);
|
||||
clazzLoadRequest.start();
|
||||
const bfIds = ['mapped','direct'];
|
||||
for (let i=0;i<bfIds.length;i++){
|
||||
let id = bfIds[i];
|
||||
let bfRequest = new HttpRequest(baseUrl, 'get',function (bfData) {
|
||||
let bfParams = {
|
||||
id: id,
|
||||
title: id+' Buffers',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Used Bytes',
|
||||
value: bfData.jvm_buffer_memory_used_bytes
|
||||
},
|
||||
metric2: {
|
||||
name: 'Capacity Bytes',
|
||||
value: bfData.jvm_buffer_total_capacity_bytes
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
},
|
||||
unit: 'MB'
|
||||
}
|
||||
}
|
||||
initMultiGraph(bfParams);
|
||||
})
|
||||
bfRequest.dataObject = {
|
||||
'id': id
|
||||
};
|
||||
bfRequest.setAsync(true);
|
||||
bfRequest.start();
|
||||
}
|
||||
let threadRequest = new HttpRequest(baseUrl, 'get',function (threadData) {
|
||||
let threadParams = {
|
||||
id: 'Threads',
|
||||
title: 'Threads',
|
||||
metric: {
|
||||
metric1: {
|
||||
name: 'Daemon',
|
||||
value: threadData.jvm_threads_daemon_threads
|
||||
},
|
||||
metric2: {
|
||||
name: 'Live',
|
||||
value: threadData.jvm_threads_live_threads
|
||||
},
|
||||
metric3: {
|
||||
name: 'Peak',
|
||||
value: threadData.jvm_threads_peak_threads
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(threadParams)
|
||||
})
|
||||
threadRequest.setAsync(true);
|
||||
threadRequest.start();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="info logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="error logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="warn logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="debug logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="trace logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const levels = ["info","error","warn","debug","trace"]
|
||||
const logbackUrl = "/view/monitor/getLogbackInfo";
|
||||
for (let i=0;i<levels.length;i++){
|
||||
let level = levels[i];
|
||||
let request = new HttpRequest(logbackUrl, 'get',function (data){
|
||||
console.log(data)
|
||||
let echartsParams = {
|
||||
id: level+" logs",
|
||||
metric: data.logback_events_total
|
||||
}
|
||||
initGraph(echartsParams);
|
||||
})
|
||||
request.dataObject = {
|
||||
level: level,
|
||||
isRate: 'irate',
|
||||
rateMetric: 'logback_events_total'
|
||||
};
|
||||
request.setAsync(true);
|
||||
request.start();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Process Open Files" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="CPU Usage" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Load Average" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const cpuUrl = "/view/monitor/getCpuInfo";
|
||||
let cpuRequest = new HttpRequest(cpuUrl, 'get',function (cpuData) {
|
||||
let cpuParams = {
|
||||
id: 'CPU Usage',
|
||||
title: 'CPU Usage',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'System CPU Usage',
|
||||
value: cpuData.system_cpu_usage
|
||||
},
|
||||
metric2: {
|
||||
name: 'Process CPU Usage',
|
||||
value: cpuData.process_cpu_usage
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(cpuParams);
|
||||
})
|
||||
cpuRequest.setAsync(true);
|
||||
cpuRequest.start();
|
||||
|
||||
const loadUrl = "/view/monitor/getLoadInfo";
|
||||
let loadRequest = new HttpRequest(loadUrl, 'get',function (loadData) {
|
||||
let loadParams = {
|
||||
id: 'Load Average',
|
||||
title: 'Load Average',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Load Average [1m]',
|
||||
value: loadData.system_load_average_1m
|
||||
},
|
||||
metric2: {
|
||||
name: 'CPU Core Size',
|
||||
value: loadData.system_cpu_count
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(loadParams);
|
||||
})
|
||||
loadRequest.setAsync(true);
|
||||
loadRequest.start();
|
||||
|
||||
const processUrl = "/view/monitor/getProcessInfo";
|
||||
let processRequest = new HttpRequest(processUrl, 'get',function (processData) {
|
||||
let processParams = {
|
||||
id: 'Process Open Files',
|
||||
title: 'Process Open Files',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Open Files',
|
||||
value: processData.process_files_open_files
|
||||
},
|
||||
metric2: {
|
||||
name: 'Max Files',
|
||||
value: processData.process_files_max_files
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(processParams);
|
||||
})
|
||||
processRequest.setAsync(true);
|
||||
processRequest.start();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,187 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="currentSession" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="maxSession" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="maxSeconds" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="createTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="rejectTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="expiredTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const tomcatBaseUrl = "/view/monitor/getTomcatInfo";
|
||||
let tomcatRequest = new HttpRequest(tomcatBaseUrl, 'get',function (data) {
|
||||
console.log(data)
|
||||
let currentParams = {
|
||||
id: 'currentSession',
|
||||
title : 'Current Sessions',
|
||||
metric: data.tomcat_sessions_active_current_sessions
|
||||
}
|
||||
initGraph1(currentParams);
|
||||
let maxParams = {
|
||||
id: 'maxSession',
|
||||
title : 'Max Sessions',
|
||||
metric: data.tomcat_sessions_active_max_sessions
|
||||
}
|
||||
initGraph1(maxParams);
|
||||
let msParams = {
|
||||
id: 'maxSeconds',
|
||||
title : 'Max Seconds',
|
||||
metric: data.tomcat_sessions_alive_max_seconds
|
||||
}
|
||||
initGraph1(msParams);
|
||||
let ctParams = {
|
||||
id: 'createTotal',
|
||||
title : 'Total Create',
|
||||
metric: data.tomcat_sessions_created_sessions_total
|
||||
}
|
||||
initGraph1(ctParams);
|
||||
let rtParams = {
|
||||
id: 'rejectTotal',
|
||||
title : 'Total Reject',
|
||||
metric: data.tomcat_sessions_rejected_sessions_total
|
||||
}
|
||||
initGraph1(rtParams);
|
||||
let exParams = {
|
||||
id: 'expiredTotal',
|
||||
title : 'Total Expired',
|
||||
metric: data.tomcat_sessions_expired_sessions_total
|
||||
}
|
||||
initGraph1(exParams);
|
||||
})
|
||||
tomcatRequest.setAsync(true);
|
||||
tomcatRequest.start();
|
||||
|
||||
function initGraph1(params) {
|
||||
const paramsId = echarts.init(document.getElementById(params.id), myEchartsTheme);
|
||||
let metricData = params.metric;
|
||||
const option = {
|
||||
title: {
|
||||
text: params.id,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (params.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + params.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: params.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (params.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name : params.id,
|
||||
data: metricData,
|
||||
areaStyle: { // 折现下是否填充
|
||||
color: this.color,
|
||||
opacity: 0.6
|
||||
},
|
||||
showSymbol: false}],
|
||||
};
|
||||
paramsId.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
<modules>
|
||||
<module>monitor-api</module>
|
||||
<module>monitor-integration-beetl</module>
|
||||
<module>monitor-sdk-system-info</module>
|
||||
<module>monitor-spring-boot-starter</module>
|
||||
<module>monitor-sdk-prometheus</module>
|
||||
|
|
Loading…
Reference in New Issue