优化图表

dbsyncer-biz/src/main/java/org/dbsyncer/biz/impl/MonitorServiceImpl.java

@@ -27,7 +27,6 @@ import org.dbsyncer.connector.enums.FilterEnum;
 import org.dbsyncer.monitor.Monitor;
 import org.dbsyncer.monitor.enums.DiskMetricEnum;
 import org.dbsyncer.monitor.enums.MetricEnum;
-import org.dbsyncer.monitor.enums.TaskMetricEnum;
 import org.dbsyncer.monitor.enums.ThreadPoolMetricEnum;
 import org.dbsyncer.monitor.model.AppReportMetric;
 import org.dbsyncer.monitor.model.MetricResponse;
@@ -90,8 +89,6 @@ public class MonitorServiceImpl extends BaseServiceImpl implements MonitorServic
 
     @PostConstruct
     private void init() {
-        metricDetailFormatterMap.putIfAbsent(TaskMetricEnum.STORAGE_ACTIVE.getCode(), new ValueMetricDetailFormatter());
-        metricDetailFormatterMap.putIfAbsent(TaskMetricEnum.STORAGE_REMAINING_CAPACITY.getCode(), new ValueMetricDetailFormatter());
         metricDetailFormatterMap.putIfAbsent(ThreadPoolMetricEnum.CORE_SIZE.getCode(), new ValueMetricDetailFormatter());
         metricDetailFormatterMap.putIfAbsent(ThreadPoolMetricEnum.TASK_SUBMITTED.getCode(), new ValueMetricDetailFormatter());
         metricDetailFormatterMap.putIfAbsent(ThreadPoolMetricEnum.QUEUE_UP.getCode(), new ValueMetricDetailFormatter());

dbsyncer-monitor/src/main/java/org/dbsyncer/monitor/MonitorFactory.java

@@ -11,7 +11,6 @@ import org.dbsyncer.manager.Manager;
 import org.dbsyncer.manager.puller.BufferActuatorRouter;
 import org.dbsyncer.monitor.enums.MetricEnum;
 import org.dbsyncer.monitor.enums.StatisticEnum;
-import org.dbsyncer.monitor.enums.TaskMetricEnum;
 import org.dbsyncer.monitor.enums.ThreadPoolMetricEnum;
 import org.dbsyncer.monitor.model.AppReportMetric;
 import org.dbsyncer.monitor.model.MappingReportMetric;
@@ -180,8 +179,6 @@ public class MonitorFactory implements Monitor, ScheduledTaskJob {
         ThreadPoolExecutor pool = threadTask.getThreadPoolExecutor();
 
         List<MetricResponse> list = new ArrayList<>();
-        list.add(createTaskMetricResponse(TaskMetricEnum.STORAGE_ACTIVE, storageBufferActuator.getQueue().size()));
-        list.add(createTaskMetricResponse(TaskMetricEnum.STORAGE_REMAINING_CAPACITY, storageBufferActuator.getQueueCapacity() - storageBufferActuator.getQueue().size()));
         list.add(createThreadPoolMetricResponse(ThreadPoolMetricEnum.CORE_SIZE, pool.getCorePoolSize()));
         list.add(createThreadPoolMetricResponse(ThreadPoolMetricEnum.TASK_SUBMITTED, pool.getTaskCount()));
         list.add(createThreadPoolMetricResponse(ThreadPoolMetricEnum.QUEUE_UP, pool.getQueue().size()));
@@ -200,10 +197,12 @@ public class MonitorFactory implements Monitor, ScheduledTaskJob {
         report.setInsert(mappingReportMetric.getInsert());
         report.setUpdate(mappingReportMetric.getUpdate());
         report.setDelete(mappingReportMetric.getDelete());
-        // 堆积数据(通用执行器 + 表执行器)
+        // 堆积任务(通用执行器 + 表执行器)
         report.setQueueUp(bufferActuatorRouter.getQueueSize().addAndGet(generalBufferActuator.getQueue().size()));
-        // 容量(通用执行器 + 表执行器)
-        report.setQueueCapacity( bufferActuatorRouter.getQueueCapacity().addAndGet(generalBufferActuator.getQueueCapacity()));
+        report.setQueueCapacity(bufferActuatorRouter.getQueueCapacity().addAndGet(generalBufferActuator.getQueueCapacity()));
+        // 持久化任务
+        report.setStorageQueueUp(storageBufferActuator.getQueue().size());
+        report.setStorageQueueCapacity(storageBufferActuator.getQueueCapacity());
         return report;
     }
 
@@ -287,10 +286,6 @@ public class MonitorFactory implements Monitor, ScheduledTaskJob {
         return new MetricResponse(metricEnum.getCode(), metricEnum.getGroup(), metricEnum.getMetricName(), Arrays.asList(new Sample(StatisticEnum.COUNT.getTagValueRepresentation(), value)));
     }
 
-    private MetricResponse createTaskMetricResponse(TaskMetricEnum metricEnum, Object value) {
-        return new MetricResponse(metricEnum.getCode(), metricEnum.getGroup(), metricEnum.getMetricName(), Arrays.asList(new Sample(StatisticEnum.COUNT.getTagValueRepresentation(), value)));
-    }
-
     private long queryMappingMetricCount(List<Meta> metaAll, QueryMappingOperation operation) {
         AtomicLong total = new AtomicLong(0);
         if (!CollectionUtils.isEmpty(metaAll)) {

dbsyncer-monitor/src/main/java/org/dbsyncer/monitor/enums/TaskMetricEnum.java

@@ -1,43 +0,0 @@
-package org.dbsyncer.monitor.enums;
-
-/**
- * 执行任务指标
- *
- * @author AE86
- * @version 1.0.0
- * @date 2021/07/23 0:19
- */
-public enum TaskMetricEnum {
-
-    /**
-     * 处理中
-     */
-    STORAGE_ACTIVE("parser.storage.buffer.actuator.active", "持久化", "处理中"),
-
-    /**
-     * 空闲队列
-     */
-    STORAGE_REMAINING_CAPACITY("parser.storage.buffer.actuator.capacity", "持久化", "空闲队列");
-
-    private String code;
-    private String group;
-    private String metricName;
-
-    TaskMetricEnum(String code, String group, String metricName) {
-        this.code = code;
-        this.group = group;
-        this.metricName = metricName;
-    }
-
-    public String getCode() {
-        return code;
-    }
-
-    public String getGroup() {
-        return group;
-    }
-
-    public String getMetricName() {
-        return metricName;
-    }
-}

dbsyncer-monitor/src/main/java/org/dbsyncer/monitor/model/AppReportMetric.java

@@ -12,6 +12,16 @@ public class AppReportMetric extends MappingReportMetric{
      */
     private long queueCapacity;
 
+    /**
+     * 持久化待处理数
+     */
+    private long storageQueueUp;
+
+    /**
+     * 持久化队列长度
+     */
+    private long storageQueueCapacity;
+
     public long getQueueUp() {
         return queueUp;
     }
@@ -27,4 +37,20 @@ public class AppReportMetric extends MappingReportMetric{
     public void setQueueCapacity(long queueCapacity) {
         this.queueCapacity = queueCapacity;
     }
+
+    public long getStorageQueueUp() {
+        return storageQueueUp;
+    }
+
+    public void setStorageQueueUp(long storageQueueUp) {
+        this.storageQueueUp = storageQueueUp;
+    }
+
+    public long getStorageQueueCapacity() {
+        return storageQueueCapacity;
+    }
+
+    public void setStorageQueueCapacity(long storageQueueCapacity) {
+        this.storageQueueCapacity = storageQueueCapacity;
+    }
 }

dbsyncer-web/src/main/resources/application.properties

@@ -24,7 +24,7 @@ dbsyncer.parser.general.buffer-writer-count=100
 # [GeneralBufferActuator]每次消费缓存队列的任务数
 dbsyncer.parser.general.buffer-pull-count=1000
 # [GeneralBufferActuator]缓存队列容量
-dbsyncer.parser.general.buffer-queue-capacity=100000
+dbsyncer.parser.general.buffer-queue-capacity=50000
 # [GeneralBufferActuator]定时消费缓存队列间隔(毫秒)
 dbsyncer.parser.general.buffer-period-millisecond=300
 # *********************** 表执行器配置 ***********************

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

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

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

@@ -261,7 +261,7 @@ function showLog($logList, arr, append) {
 
 // 堆积数据
 function showQueueChart(queueUp, queueCapacity) {
-    var option = {
+    let option = {
         title: {
             text: "堆积数据",
             x: 'center',
@@ -306,8 +306,8 @@ function showQueueChart(queueUp, queueCapacity) {
 }
 
 // 事件分类
-function showEventChart(ins, upd, del) {
-    var option = {
+function showEventChart(success, fail, ins, upd, del) {
+    let option = {
         title: {
             text: '事件分类',
             left: 'center'
@@ -341,49 +341,58 @@ function showEventChart(ins, upd, del) {
     };
     echarts.init(document.getElementById('eventChart')).setOption(option);
 
+    $("#totalSpan").html(success + fail);
+    $("#successSpan").html(success);
+    $("#failSpan").html(fail);
     $("#insertSpan").html(ins);
     $("#updateSpan").html(upd);
     $("#deleteSpan").html(del);
 }
 
 // 统计成功失败
-function showTotalChart(success, fail) {
-    var option = {
+function showStorageChart(queueUp, queueCapacity) {
+    let option = {
         title: {
-            text: '已完成数据',
-            left: 'center'
+            text: "持久化",
+            x: 'center',
+            y: 'top'
         },
         tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            orient: 'vertical',
-            left: 'left',
+            formatter: "{a}: {c}",
+            position: 'top'
         },
         series: [
             {
-                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)'
+                name: "待处理",
+                animation: true,
+                type: 'gauge',
+                min: 0,
+                max: queueCapacity,
+                splitNumber: 2,
+                axisLine: {            // 坐标轴线
+                    lineStyle: {       // 属性lineStyle控制线条样式
+                        color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']],
+                        width: 5
                     }
-                }
+                },
+                axisTick: {            // 坐标轴小标记
+                    length: 10,        // 属性length控制线长
+                    lineStyle: {       // 属性lineStyle控制线条样式
+                        color: 'auto'
+                    }
+                },
+                splitLine: {           // 分隔线
+                    length: 10,         // 属性length控制线长
+                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                        color: 'auto'
+                    }
+                },
+                detail: {fontSize: 12, offsetCenter: [0, '65%']},
+                data: [{value: queueUp, name: ''}]
             }
         ]
     };
-    echarts.init(document.getElementById('totalChart')).setOption(option);
-
-    $("#totalSpan").html(success + fail);
-    $("#successSpan").html(success);
-    $("#failSpan").html(fail);
+    echarts.init(document.getElementById('storageChart')).setOption(option);
 }
 
 // CPU历史
@@ -416,7 +425,7 @@ function showCpuChart(cpu) {
 
 // 内存历史
 function showMemoryChart(memory) {
-    var option = {
+    let option = {
         title: {
             show: true,
             text: '内存(MB)',
@@ -446,7 +455,7 @@ function showMemoryChart(memory) {
 
 // 指标列表
 function showMetricTable(metrics) {
-    var html = '';
+    let html = '';
     $.each(metrics, function (i) {
         html += '<tr>';
         html += '   <td style="width:5%;">' + (i + 1) + '</td>';
@@ -461,10 +470,10 @@ function showMetricTable(metrics) {
 function showChartTable() {
     doGetWithoutLoading("/monitor/queryAppReportMetric", {}, function (data) {
         if (data.success == true) {
-            var report = data.resultValue;
-            showTotalChart(report.success, report.fail);
-            showEventChart(report.insert, report.update, report.delete);
+            let report = data.resultValue;
+            showEventChart(report.success, report.fail, report.insert, report.update, report.delete);
             showQueueChart(report.queueUp, report.queueCapacity);
+            showStorageChart(report.storageQueueUp, report.storageQueueCapacity);
             showCpuChart(report.cpu);
             showMemoryChart(report.memory);
             showMetricTable(report.metrics);