【7.0.1】【monitor】迁移monitor到核心包

pull/3/head
fengshuonan 2021-03-06 10:26:12 +08:00
parent 3d9a0e0d03
commit defb78ba09
12 changed files with 1201 additions and 5 deletions

View File

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

View File

@ -0,0 +1 @@
监控模块的集成针对于beetl模板引擎单体不分离项目

View File

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

View File

@ -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();
}
}
}

View File

@ -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);
}
/**
* prometheussql
*
* @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();
}
/**
* prometheussql
*
* @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();
}
/**
* prometheussql
*
* @param level infowarnerrortracedebug
* @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 prometheussql
* @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字符串去除双引号再转化为JSONArrayJSONArray是echarts时间序列图需要的数据格式
metricMap.put(metricName, valueArray);
}
} else {
// 查询指定的指标
metricMap.put(rateMetric, valueArray);
}
}
}
return metricMap;
}
}

View File

@ -0,0 +1,2 @@
org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
cn.stylefeng.roses.kernel.monitor.integration.config.PrometheusConfiguration

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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