新增埋点 & 升级图表版本

dbsyncer-biz/src/main/java/org/dbsyncer/biz/vo/AppReportMetricVo.java

@@ -10,7 +10,7 @@ public class AppReportMetricVo extends AppReportMetric {
 
     private HistoryStackVo cpu;
 
-    private HistoryStackVo memery;
+    private HistoryStackVo memory;
 
     public List<MetricResponseVo> getMetrics() {
         return metrics;
@@ -28,11 +28,11 @@ public class AppReportMetricVo extends AppReportMetric {
         this.cpu = cpu;
     }
 
-    public HistoryStackVo getMemery() {
-        return memery;
+    public HistoryStackVo getMemory() {
+        return memory;
     }
 
-    public void setMemery(HistoryStackVo memery) {
-        this.memery = memery;
+    public void setMemory(HistoryStackVo memory) {
+        this.memory = memory;
     }
 }

dbsyncer-biz/src/main/java/org/dbsyncer/biz/vo/HistoryStackVo.java

@@ -1,11 +1,27 @@
 package org.dbsyncer.biz.vo;
 
+import java.util.LinkedList;
 import java.util.List;
 
 public class HistoryStackVo {
 
+    private List<Object> name;
+
     private List<Object> value;
 
+    public HistoryStackVo() {
+        this.name = new LinkedList<>();
+        this.value = new LinkedList<>();
+    }
+
+    public List<Object> getName() {
+        return name;
+    }
+
+    public void setName(List<Object> name) {
+        this.name = name;
+    }
+
     public List<Object> getValue() {
         return value;
     }

dbsyncer-common/src/main/java/org/dbsyncer/common/util/DateFormatUtil.java

@@ -9,20 +9,19 @@ import java.util.Date;
 
 public abstract class DateFormatUtil {
 
-    private static final DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
     private static final DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
+    private static final DateTimeFormatter timeFormatter = DateTimeFormatter.ofPattern("HH:mm:ss");
     private static ZoneId zoneId = ZoneId.systemDefault();
 
     public DateFormatUtil() {
     }
 
-    public static String getCurrentDateTime() {
-        return LocalDateTime.now().format(dateTimeFormatter);
+    public static String getCurrentTime() {
+        return LocalDateTime.now().format(timeFormatter);
     }
 
     public static String dateToString(Date date){
-        String format = date.toInstant().atZone(zoneId).toLocalDate().format(dateFormatter);
-        return format;
+        return date.toInstant().atZone(zoneId).toLocalDate().format(dateFormatter);
     }
 
     public static Date stringToDate(String s){

dbsyncer-web/src/main/java/org/dbsyncer/web/controller/monitor/HistoryStackValueFormatter.java

@@ -0,0 +1,7 @@
+package org.dbsyncer.web.controller.monitor;
+
+public interface HistoryStackValueFormatter {
+
+    Object formatValue(Object value);
+
+}

dbsyncer-web/src/main/java/org/dbsyncer/web/controller/monitor/MonitorController.java

@@ -1,8 +1,11 @@
 package org.dbsyncer.web.controller.monitor;
 
 import org.dbsyncer.biz.MonitorService;
+import org.dbsyncer.biz.vo.AppReportMetricVo;
+import org.dbsyncer.biz.vo.HistoryStackVo;
 import org.dbsyncer.biz.vo.RestResult;
 import org.dbsyncer.common.util.CollectionUtils;
+import org.dbsyncer.common.util.DateFormatUtil;
 import org.dbsyncer.monitor.enums.DiskMetricEnum;
 import org.dbsyncer.monitor.enums.MetricEnum;
 import org.dbsyncer.monitor.enums.StatisticEnum;
@@ -32,6 +35,10 @@ public class MonitorController extends BaseController {
 
     private final Logger logger = LoggerFactory.getLogger(getClass());
 
+    private final static int COUNT = 24;
+    private HistoryStackVo cpu = new HistoryStackVo();
+    private HistoryStackVo memory = new HistoryStackVo();
+
     @Autowired
     private MonitorService monitorService;
 
@@ -41,6 +48,12 @@ public class MonitorController extends BaseController {
     @Autowired
     private HealthEndpoint healthEndpoint;
 
+    @Autowired
+    private HistoryStackValueFormatter cpuHistoryStackValueFormatterImpl;
+
+    @Autowired
+    private HistoryStackValueFormatter memoryHistoryStackValueFormatterImpl;
+
     @RequestMapping("")
     public String index(HttpServletRequest request, ModelMap model) {
         Map<String, String> params = getParams(request);
@@ -52,13 +65,10 @@ public class MonitorController extends BaseController {
         return "monitor/monitor.html";
     }
 
-    private final static int COUNT = 3;
-    private Deque<Double> cpu = new ArrayDeque<>(COUNT);
-    private Deque<Double> memory = new ArrayDeque<>(COUNT);
-
     @Scheduled(fixedRate = 5000)
-    public void recordHistoryStackMertic() {
-        // TODO 统计最近记录
+    public void recordHistoryStackMetric() {
+        recordHistoryStackMetric(MetricEnum.CPU_USAGE, cpu, cpuHistoryStackValueFormatterImpl);
+        recordHistoryStackMetric(MetricEnum.MEMORY_USED, memory, memoryHistoryStackValueFormatterImpl);
     }
 
     @GetMapping("/queryData")
@@ -117,7 +127,10 @@ public class MonitorController extends BaseController {
                 metricEnumList.forEach(m -> list.add(getMetricResponse(m.getCode())));
             }
             list.addAll(getDiskHealth());
-            return RestResult.restSuccess(monitorService.queryAppReportMetric(list));
+            AppReportMetricVo reportMetric = monitorService.queryAppReportMetric(list);
+            reportMetric.setCpu(cpu);
+            reportMetric.setMemory(memory);
+            return RestResult.restSuccess(reportMetric);
         } catch (Exception e) {
             logger.error(e.getLocalizedMessage(), e.getClass());
             return RestResult.restFail(e.getMessage());
@@ -161,4 +174,20 @@ public class MonitorController extends BaseController {
         return metricResponse;
     }
 
+    private void recordHistoryStackMetric(MetricEnum metricEnum, HistoryStackVo stackVo, HistoryStackValueFormatter formatter) {
+        MetricResponse metricResponse = getMetricResponse(metricEnum.getCode());
+        List<Sample> measurements = metricResponse.getMeasurements();
+        if (!CollectionUtils.isEmpty(measurements)) {
+            addHistoryStack(stackVo.getValue(), formatter.formatValue(measurements.get(0).getValue()));
+            addHistoryStack(stackVo.getName(), DateFormatUtil.getCurrentTime());
+        }
+    }
+
+    private void addHistoryStack(List<Object> stack, Object value) {
+        if (stack.size() >= COUNT) {
+            stack.remove(0);
+        }
+        stack.add(value);
+    }
+
 }

dbsyncer-web/src/main/java/org/dbsyncer/web/controller/monitor/impl/CpuHistoryStackValueFormatterImpl.java

@@ -0,0 +1,17 @@
+package org.dbsyncer.web.controller.monitor.impl;
+
+import org.dbsyncer.web.controller.monitor.HistoryStackValueFormatter;
+import org.springframework.stereotype.Service;
+
+@Service
+public class CpuHistoryStackValueFormatterImpl implements HistoryStackValueFormatter {
+
+    @Override
+    public Object formatValue(Object value) {
+        Double val = (Double) value;
+        val *= 100;
+        String percent = String.format("%.2f", val);
+        return percent;
+    }
+
+}

dbsyncer-web/src/main/java/org/dbsyncer/web/controller/monitor/impl/MemoryHistoryStackValueFormatterImpl.java

@@ -0,0 +1,22 @@
+package org.dbsyncer.web.controller.monitor.impl;
+
+import org.dbsyncer.web.controller.monitor.HistoryStackValueFormatter;
+import org.springframework.stereotype.Service;
+
+import java.math.BigDecimal;
+
+@Service
+public class MemoryHistoryStackValueFormatterImpl implements HistoryStackValueFormatter {
+
+    @Override
+    public Object formatValue(Object value) {
+        BigDecimal decimal = new BigDecimal(String.valueOf(value));
+        BigDecimal bt = divide(decimal,0);
+        BigDecimal mb = divide(bt,2);
+        return mb;
+    }
+
+    private BigDecimal divide(BigDecimal d1, int scale) {
+        return d1.divide(new BigDecimal("1024"), scale, BigDecimal.ROUND_HALF_UP);
+    }
+}

dbsyncer-web/src/main/resources/public/monitor/monitor.html

@@ -42,15 +42,24 @@
                                 <hr>
                                 <div class="row">
                                     <div class="col-md-4">
-                                        <div id="totalChart" style="height: 260px; max-width: 260px;"></div>
+                                        <div id="totalChart" style="height: 260px;"></div>
                                     </div>
 
                                     <div class="col-md-4">
-                                        <div id="eventChart" style="height: 260px; max-width: 260px;"></div>
+                                        <div id="eventChart" style="height: 260px;"></div>
                                     </div>
 
                                     <div class="col-md-4">
-                                        <div id="queueChart" style="height: 260px; max-width: 260px;"></div>
+                                        <div id="queueChart" style="height: 260px;"></div>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div id="cpuChart" style="height: 260px; "></div>
+                                    </div>
+
+                                    <div class="col-md-6">
+                                        <div id="memoryChart" style="height: 260px;"></div>
                                     </div>
                                 </div>
                             </div>

dbsyncer-web/src/main/resources/static/js/monitor/index.js

@@ -259,38 +259,34 @@ function showQueueChart(queueUp, queueCapacity){
 // 事件分类
 function showEventChart(ins, upd, del){
     var option = {
-        title : {
-            show:true,
+        title: {
             text: '事件分类',
-            x:'center',
-            y: 'top'
+            left: 'center'
         },
-        tooltip : {
-            trigger: 'item',
-            formatter: "{b} : {c}"
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
         },
-        series : [
+        series: [
             {
-                type:'pie',
-                color: function(params) {
-                    // build a color map as your need.
-                    var colorList = [
-                        '#60C0DD','#F0805A','#89DFAA'
-                    ];
-                    return colorList[params.dataIndex]
-                },
-                label:{
-                    normal:{
-                        show:true,
-                        position:'inner',
-                        formatter:'{d}%'
-                    }
-                },
-                data:[
+                name: '事件',
+                type: 'pie',
+                radius: '50%',
+                data: [
                     {value:upd, name:'更新'},
-                    {value:del, name:'删除'},
-                    {value:ins, name:'插入'}
-                ]
+                    {value:ins, name:'插入'},
+                    {value:del, name:'删除'}
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
             }
         ]
     };
@@ -303,37 +299,33 @@ function showEventChart(ins, upd, del){
 // 统计成功失败
 function showTotalChart(success, fail){
     var option = {
-        title : {
-            show:true,
+        title: {
             text: '已完成数据',
-            x:'center',
-            y: 'top'
+            left: 'center'
         },
-        tooltip : {
-            trigger: 'item',
-            formatter: "{b} : {c}"
+        tooltip: {
+            trigger: 'item'
         },
-        series : [
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+        },
+        series: [
             {
-                type:'pie',
-                color: function(params) {
-                    // build a color map as your need.
-                    var colorList = [
-                        '#60C0DD','#F0805A'
-                    ];
-                    return colorList[params.dataIndex]
-                },
-                label:{
-                    normal:{
-                        show:true,
-                        position:'inner',
-                        formatter:'{d}%'
-                    }
-                },
-                data:[
+                name: '已完成',
+                type: 'pie',
+                radius: '50%',
+                data: [
                     {value:success, name:'成功'},
                     {value:fail, name:'失败'}
-                ]
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
             }
         ]
     };
@@ -343,12 +335,68 @@ function showTotalChart(success, fail){
     $("#successSpan").html(success);
     $("#failSpan").html(fail);
 }
+// CPU历史
+function showCpuChart(cpu){
+    var option = {
+        title : {
+            show:true,
+            text: 'CPU(%)',
+            x:'center',
+            y: 'bottom'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{b} : {c}%"
+        },
+        xAxis: {
+            type: 'category',
+            data: cpu.name
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [{
+            data: cpu.value,
+            type: 'line'
+        }]
+    };
+    echarts.init(document.getElementById('cpuChart')).setOption(option);
+}
+// 内存历史
+function showMemoryChart(memory){
+    var option = {
+        title : {
+            show:true,
+            text: '内存(MB)',
+            x:'center',
+            y: 'bottom'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{b} : {c}MB"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: memory.name
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [{
+            data: memory.value,
+            type: 'line',
+            areaStyle: {}
+        }]
+    };
+    echarts.init(document.getElementById('memoryChart')).setOption(option);
+}
 // 指标列表
 function showMetricTable(metrics){
     var html = '';
     $.each(metrics, function(i) {
         html += '<tr>';
-        html += '   <td style="width:5%;">'+ i +'</td>';
+        html += '   <td style="width:5%;">'+ (i + 1) +'</td>';
         html += '   <td>'+ metrics[i].metricName +'</td>';
         html += '   <td>'+ metrics[i].detail +'</td>';
         html += '</tr>';
@@ -363,6 +411,8 @@ function showChartTable(){
             showTotalChart(report.success, report.fail);
             showEventChart(report.insert, report.update, report.delete);
             showQueueChart(report.queueUp, report.queueCapacity);
+            showCpuChart(report.cpu);
+            showMemoryChart(report.memory);
             showMetricTable(report.metrics);
         } else {
             bootGrowl(data.resultValue, "danger");