gitee
/
guns
mirror of https://gitee.com/stylefeng/guns
1
0
Fork 0
Code Issues Releases Wiki Activity

prometheus监控

pull/65/head
陈立 2021-03-05 17:47:41 +08:00
parent de6b6e472c
commit 392179ed31
9 changed files with 1003 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pom.xml
View File

@ -12,7 +12,7 @@
<groupId>cn.stylefeng</groupId>
<artifactId>guns</artifactId>
<version>7.0.0</version>
<version>7.0.1</version>
<name>guns</name>
<description>单体前后端不分离，基于beetl模板引擎</description>
@ -192,6 +192,10 @@
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-autoconfigure</artifactId>
</dependency>
</dependencies>

42
src/main/java/cn/stylefeng/guns/config/web/PrometheusConfiguration.java Normal file
View File

@ -0,0 +1,42 @@
package cn.stylefeng.guns.config.web;
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();
}
}
}

253
src/main/java/cn/stylefeng/guns/modular/system/monitor/MonitorController.java
View File

@ -1,12 +1,26 @@
package cn.stylefeng.guns.modular.system.monitor;
import cn.hutool.core.util.StrUtil;
import cn.stylefeng.guns.core.consts.ProjectConstants;
import cn.stylefeng.roses.kernel.monitor.api.PrometheusApi;
import cn.stylefeng.roses.kernel.monitor.api.pojo.prometheus.PromResultInfo;
import cn.stylefeng.roses.kernel.monitor.prometheus.service.PrometheusService;
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.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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;
/**
* 项目监控
@ -21,6 +35,21 @@ public class MonitorController {
@Resource
private SystemHardwareInfoHolder systemHardwareInfoHolder;
@Value("${server.port}")
private String port;
@Value("${spring.application.name}")
private String name;
@Value("${prometheus.url}")
private String prometheusUrl;
@Value("${prometheus.instance}")
private String prometheusInstance;
@Resource
private PrometheusApi service;
/**
* 系统硬件信息页面
*
@ -44,4 +73,228 @@ public class MonitorController {
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(@Param("id") String id, @Param("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(@Param("level") String level, @Param("timeInterval") String timeInterval, @Param("isRate") String isRate, @Param("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(ProjectConstants.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;
}
}

20
src/main/resources/application.yml
View File

@ -53,3 +53,23 @@ mybatis-plus:
# 是否开启websocket推送消息
web-socket:
open: true
# prometheus监控
management:
endpoints:
web:
exposure:
include: "*"
metrics:
tags:
application: ${spring.application.name}
export:
prometheus:
enabled: true
jmx:
enabled: true
prometheus:
enabled: false
url: http://localhost:9090/api/v1/
# 非必须配置项
instance:

171
src/main/webapp/assets/common/js/echartInit.js Normal file
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);
}

203
src/main/webapp/pages/modular/system/monitor/jvmInfo.html
View File

@ -12,10 +12,79 @@
<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-col-lg4">
<div class="layui-card">
<div class="layui-card-body">
<div id="edenSpace" style="width: 100%;min-height:300px"></div>
<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>
@ -33,27 +102,121 @@
<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'], function () {
layui.use(['layer','HttpRequest'], function () {
const $ = layui.jquery;
initEdenSpace();
function initEdenSpace(){
const edenSpace = echarts.init(document.getElementById('edenSpace'), myEchartsTheme);
let edenSpaceData = ${jvm_memory_used_bytes};
const option = {
title: { text: 'Eden SpaceData', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Eden SpaceData', data: edenSpaceData, showSymbol: true}]
};
edenSpace.setOption(option);
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>

94
src/main/webapp/pages/modular/system/monitor/logbackInfo.html Normal file
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>

134
src/main/webapp/pages/modular/system/monitor/performanceInfo.html Normal file
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>

202
src/main/webapp/pages/modular/system/monitor/tomcatInfo.html
View File

@ -70,116 +70,116 @@
<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'], function () {
layui.use(['layer','HttpRequest'], function () {
const $ = layui.jquery;
initCurrentSession();
initMaxSession();
initMaxSeconds();
initCreateTotal();
initRejectTotal();
initExpiredTotal();
function initCurrentSession(){
const currentSession = echarts.init(document.getElementById('currentSession'), myEchartsTheme);
let currentSessionData = ${tomcat_sessions_active_current_sessions};
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: 'Current Sessions', x: 'center' },
tooltip: { trigger: 'axis' },
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'
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
scale: true,
axisLabel: {
formatter: function(value,index){
if (params.unit == 'MB' && value>0){
return value/1000/1000
} else {
return value
}
}
}
},
series: [{type : 'line', name : 'Current Sessions', data: currentSessionData, showSymbol: true}]
series: [{type : 'line',
smooth: true,
animationDuration: 2000,
animationEasing: 'quadraticOut',
name : params.id,
data: metricData,
areaStyle: { // 折现下是否填充
color: this.color,
opacity: 0.6
},
showSymbol: false}],
};
currentSession.setOption(option);
}
function initMaxSession(){
const maxSession = echarts.init(document.getElementById('maxSession'), myEchartsTheme);
let maxSessionData = ${tomcat_sessions_active_max_sessions};
const option = {
title: { text: 'Max Sessions', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Max Sessions', data: maxSessionData, showSymbol: true}]
};
maxSession.setOption(option);
}
function initMaxSeconds(){
const maxSeconds = echarts.init(document.getElementById('maxSeconds'), myEchartsTheme);
const maxSecondsData = ${tomcat_sessions_alive_max_seconds};
const option = {
title: { text: 'Max Seconds', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Max Seconds', data: maxSecondsData, showSymbol: true}]
};
maxSeconds.setOption(option);
}
function initCreateTotal(){
const createTotal = echarts.init(document.getElementById('createTotal'), myEchartsTheme);
const createTotalData = ${tomcat_sessions_created_sessions_total};
const option = {
title: { text: 'Total Create', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Total Create', data: createTotalData, showSymbol: true}]
};
createTotal.setOption(option);
}
function initRejectTotal(){
const rejectTotal = echarts.init(document.getElementById('rejectTotal'), myEchartsTheme);
const rejectTotalData = ${tomcat_sessions_rejected_sessions_total};
const option = {
title: { text: 'Total Reject', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Total Reject', data: rejectTotalData, showSymbol: true}]
};
rejectTotal.setOption(option);
}
function initExpiredTotal(){
const expiredTotal = echarts.init(document.getElementById('expiredTotal'), myEchartsTheme);
const expiredTotalData = ${tomcat_sessions_expired_sessions_total};
const option = {
title: { text: 'Total Expired', x: 'center' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
scale: true
},
series: [{type : 'line', name : 'Total Expired', data: expiredTotalData, showSymbol: true}]
};
expiredTotal.setOption(option);
paramsId.setOption(option);
}
});
</script>