prometheus监控

pom.xml

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

src/main/java/cn/stylefeng/guns/config/web/PrometheusConfiguration.java

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

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

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

src/main/resources/application.yml

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

src/main/webapp/assets/common/js/echartInit.js

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

src/main/webapp/pages/modular/system/monitor/jvmInfo.html

@@ -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}]
+        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
             };
-            edenSpace.setOption(option);
+            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>

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

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

src/main/webapp/pages/modular/system/monitor/tomcatInfo.html

@@ -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' },
-                    xAxis: {
-                        type: 'time'
-                    },
-                    yAxis: {
-                        type: 'value',
-                        scale: true
-                    },
-                    series: [{type : 'line', name : 'Current Sessions', data: currentSessionData, showSymbol: true}]
-                };
-                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'
+                    title: {
+                        text: params.id,
+                        x: 'center'
                     },
-                    yAxis: {
-                        type: 'value',
-                        scale: true
+                    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;
+                        }
                     },
-                    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'
+                        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 : 'Total Expired', data: expiredTotalData, 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}],
                 };
-                expiredTotal.setOption(option);
+                paramsId.setOption(option);
             }
         });
     </script>