add echarts

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

@@ -19,7 +19,6 @@
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/font-awesome.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/loading-plus/loading-plus.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/select2/select2.min.css}"/>
-    <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/chart/chart.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/css/common.css}">
     <link type="text/css" rel="stylesheet" th:href="@{/css/index/index.css}">
 </head>
@@ -48,7 +47,7 @@
 <script th:src="@{/plugins/js/select2/select2.min.js}"></script>
 <script th:src="@{/plugins/js/formValidate/formValidate.js}"></script>
 <script th:src="@{/plugins/js/sql-formatter/sql-formatter.min.js}"></script>
-<script th:src="@{/plugins/js/chart/chart.min.js}"></script>
+<script th:src="@{/plugins/js/echarts/echarts.min.js}"></script>
 <script th:src="@{/js/common.js}"></script>
 <script th:src="@{/js/index.js}"></script>
 </html>

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

@@ -8,56 +8,54 @@
         <form class="form-horizontal" role="form" method="post">
 
             <!-- 数据 -->
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="form-group">
-                        <div class="col-md-3">
-                            <!-- 驱动下拉 -->
-                            <select id="metaData" name="metaData" class="form-control select-control">
-                                <option th:each="m,s:${meta}" th:value="${m?.id}" th:text="${m?.mappingName} +' (' + ${m?.model} +')'" th:selected="${m?.id eq metaId}"/>
-                            </select>
-                        </div>
-                        <div class="col-sm-4">
-                            <input id="searchDataKeyword" class="form-control" type="text" maxlength="32" placeholder="请输入内容关键字(最多32个字)." />
-                        </div>
-                        <div class="col-md-1">
-                            <button id="queryDataBtn" type="button" class="btn btn-primary">查询数据</button>
-                        </div>
-                        <div class="col-md-4 text-right">
-                            <button th:id="${metaId}" type="button" class="btn btn-default clearDataBtn">清空数据</button>
-                        </div>
+            <div class="col-md-12">
+                <div class="form-group">
+                    <div class="col-md-3">
+                        <!-- 驱动下拉 -->
+                        <select id="metaData" name="metaData" class="form-control select-control">
+                            <option th:each="m,s:${meta}" th:value="${m?.id}" th:text="${m?.mappingName} +' (' + ${m?.model} +')'" th:selected="${m?.id eq metaId}"/>
+                        </select>
                     </div>
+                    <div class="col-sm-4">
+                        <input id="searchDataKeyword" class="form-control" type="text" maxlength="32" placeholder="请输入异常关键字(最多32个字)." />
+                    </div>
+                    <div class="col-md-1">
+                        <button id="queryDataBtn" type="button" class="btn btn-primary">查询数据</button>
+                    </div>
+                    <div class="col-md-4 text-right">
+                        <button th:id="${metaId}" type="button" class="btn btn-default clearDataBtn">清空数据</button>
+                    </div>
+                </div>
 
-                    <table class="table table-hover metaDataList">
-                        <thead>
-                        <tr>
-                            <th style="width:3%;"></th>
-                            <th style="width:5%;">事件</th>
-                            <th style="width:5%;">结果</th>
-                            <th style="width:60%;">异常</th>
-                            <th style="width:17%;">时间</th>
-                            <th style="width:10%;">详情</th>
+                <table class="table table-hover metaDataList">
+                    <thead>
+                    <tr>
+                        <th style="width:3%;"></th>
+                        <th style="width:5%;">事件</th>
+                        <th style="width:5%;">结果</th>
+                        <th style="width:60%;">异常</th>
+                        <th style="width:17%;">时间</th>
+                        <th style="width:10%;">详情</th>
+                    </tr>
+                    </thead>
+                    <tbody id="dataList">
+                        <tr th:each="d,s : ${data}">
+                            <td th:text="${s.index}+1"></td>
+                            <td th:text="${d?.event}"></td>
+                            <td>
+                                <span th:if="${d?.success}" class="label label-success">成功</span>
+                                <span th:if="${not d?.success}" class="label label-warning">失败</span>
+                            </td>
+                            <td th:text="${d?.error}"></td>
+                            <td th:text="${#dates.format(d?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
+                            <td><a th:json="${d?.json}" href="javascript:;" class="label label-info queryData">查看数据</a></td>
                         </tr>
-                        </thead>
-                        <tbody id="dataList">
-                            <tr th:each="d,s : ${data}">
-                                <td th:text="${s.index}+1"></td>
-                                <td th:text="${d?.event}"></td>
-                                <td>
-                                    <span th:if="${d?.success}" class="label label-success">成功</span>
-                                    <span th:if="${not d?.success}" class="label label-warning">失败</span>
-                                </td>
-                                <td th:text="${d?.error}"></td>
-                                <td th:text="${#dates.format(d?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
-                                <td><a th:json="${d?.json}" href="javascript:;" class="label label-info queryData">查看数据</a></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                    </tbody>
+                </table>
             </div>
 
             <!-- 性能指标 -->
-            <div class="row">
+            <div class="col-md-12">
                 <div class="col-md-6">
                     <table class="table table-hover">
                         <caption>系统性能</caption>
@@ -68,51 +66,22 @@
                             <th style="width:80%;">指标</th>
                         </tr>
                         </thead>
-                        <tbody id="systemList">
-                        <tr>
-                            <td>堆内存</td>
-                            <td><span class="label label-success">UP</span></td>
-                            <td>
-                                <div class="progress" title="总共4096MB,已用2048MB,,空闲2048MB">
-                                    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="min-width: 2em;width: 50%">2048MB</div>
-                                    <div class="progress-bar" style="min-width: 2em;width: 50%">2048MB</div>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>内存</td>
-                            <td><span class="label label-warning">DOWN</span></td>
-                            <td>
-                                <div class="progress" title="总共8192MB,已用7168MB,,空闲1024MB">
-                                    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="min-width: 2em;width: 75%">7168MB</div>
-                                    <div class="progress-bar" style="min-width: 2em;width: 25%">1024MB</div>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>硬盘</td>
-                            <td><span class="label label-success">UP</span></td>
-                            <td>
-                                <div class="progress" title="总共140GB,已用11GB,空闲129GB">
-                                    <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width: 2em;width: 10%">11GB</div>
-                                    <div class="progress-bar progress-bar-default" style="min-width: 2em;width: 90%">129GB</div>
-                                </div>
-                            </td>
-                        </tr>
-                        </tbody>
-
+                        <tbody id="systemList"></tbody>
                     </table>
                 </div>
 
-                <div class="col-md-6">
-                    <canvas id="cpuChart"></canvas>
+                <div class="col-md-3">
+                    <div id="cpuChart" style="height: 260px; max-width: 260px; margin: 0px auto;"></div>
                 </div>
 
+                <div class="col-md-3">
+                    <div id="memChart" style="height: 260px; max-width: 260px; margin: 0px auto;"></div>
+                </div>
             </div>
 
             <!-- 线程任务 -->
-            <div class="row">
-                <div class="col-md-12">
+            <div class="col-md-12">
+                <div class="col-md-6">
                     <table class="table table-hover">
                         <caption>线程任务</caption>
                         <thead>
@@ -132,38 +101,36 @@
             </div>
 
             <!-- 日志 -->
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="form-group">
-                        <div class="col-sm-4">
-                            <input id="searchLogKeyword" class="form-control" type="text" maxlength="32" placeholder="请输入内容关键字(最多32个字)." />
-                        </div>
-                        <div class="col-md-1">
-                            <button id="queryLogBtn" type="button" class="btn btn-primary">查询日志</button>
-                        </div>
-                        <div class="col-md-4"></div>
-                        <div class="col-md-3 text-right">
-                            <button th:id="${metaId}" type="button" class="btn btn-default clearLogBtn">清空日志</button>
-                        </div>
+            <div class="col-md-12">
+                <div class="form-group">
+                    <div class="col-sm-4">
+                        <input id="searchLogKeyword" class="form-control" type="text" maxlength="32" placeholder="请输入内容关键字(最多32个字)." />
+                    </div>
+                    <div class="col-md-1">
+                        <button id="queryLogBtn" type="button" class="btn btn-primary">查询日志</button>
+                    </div>
+                    <div class="col-md-4"></div>
+                    <div class="col-md-3 text-right">
+                        <button th:id="${metaId}" type="button" class="btn btn-default clearLogBtn">清空日志</button>
                     </div>
-
-                    <table class="table table-hover">
-                        <thead>
-                        <tr>
-                            <th style="width:3%;"></th>
-                            <th style="width:70%;">内容</th>
-                            <th style="width:27%;">时间</th>
-                        </tr>
-                        </thead>
-                        <tbody id="logList">
-                            <tr th:each="l,s : ${log}">
-                                <td th:text="${s.index}+1"></td>
-                                <td th:text="${l?.json}"></td>
-                                <td th:text="${#dates.format(l?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
-                            </tr>
-                        </tbody>
-                    </table>
                 </div>
+
+                <table class="table table-hover">
+                    <thead>
+                    <tr>
+                        <th style="width:3%;"></th>
+                        <th style="width:70%;">内容</th>
+                        <th style="width:27%;">时间</th>
+                    </tr>
+                    </thead>
+                    <tbody id="logList">
+                    <tr th:each="l,s : ${log}">
+                        <td th:text="${s.index}+1"></td>
+                        <td th:text="${l?.json}"></td>
+                        <td th:text="${#dates.format(l?.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
+                    </tr>
+                    </tbody>
+                </table>
             </div>
 
         </form>

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

@@ -137,51 +137,128 @@ function showLogList(arr){
 function showSystemInfo(){
     $.getJSON("/app/health", function (data) {
         var details = data.details;
-        var html = '';
-        html += showPoint("硬盘", details.diskSpace);
-        $("#systemList").html(html);
+        var html = showPoint("硬盘", details.diskSpace);
+
+        $.getJSON("/app/metrics/jvm.threads.live", function (data) {
+            html += showSystemItem("线程活跃", data.measurements[0].value);
+            $.getJSON("/app/metrics/jvm.threads.peak", function (data) {
+                html += showSystemItem("线程峰值", data.measurements[0].value);
+                $.getJSON("/app/metrics/jvm.gc.pause", function (data) {
+                    var count =  data.measurements[0].value;
+                    var time =  data.measurements[1].value;
+                    time = time.toFixed(2);
+                    var text = count+"次";
+                    text += "，耗时:"+time + "秒";
+                    html += showSystemItem("GC", text);
+                    $("#systemList").html(html);
+                });
+            });
+        });
+    });
+
+}
+
+// CPU
+function showCpu(){
+    $.getJSON("/app/metrics/system.cpu.usage", function (data) {
+        var value = data.measurements[0].value * 100;
+        value = value.toFixed(2);
+        var option={
+            title:{
+                text:"CPU",
+                x:'center',
+                y: 'top'
+            },
+            tooltip : {
+                formatter: "{a}: {c}%",
+                position: 'top'
+            },
+            series: [
+                {
+                    name: "已用",
+                    animation: true,
+                    type: 'gauge',
+                    min: 0,
+                    max: 100,
+                    splitNumber: 4,
+                    axisLine: {            // 坐标轴线
+                        lineStyle: {       // 属性lineStyle控制线条样式
+                            color: [[0.1, '#d9534f'], [0.3, '#f0ad4e'],[0.8, '#5bc0de'],[1, '#5cb85c']],
+                            width: 10
+                        }
+                    },
+                    axisTick: {            // 坐标轴小标记
+                        length: 15,        // 属性length控制线长
+                        lineStyle: {       // 属性lineStyle控制线条样式
+                            color: 'auto'
+                        }
+                    },
+                    splitLine: {           // 分隔线
+                        length: 20,         // 属性length控制线长
+                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                            color: 'auto'
+                        }
+                    },
+                    detail: {formatter:'{value}%', fontSize:12, offsetCenter:[0,'65%']},
+                    data: [{value: value, name: ''}]
+                }
+            ]
+        };
+        echarts.init(document.getElementById('cpuChart')).setOption(option);
+
     });
 }
 
 // 内存
 function showMem(){
-    // 最大内存
-    // jvm.memory.max
-    // 已用内存
-    // jvm.memory.used
-    // 剩余内存
-    // jvm.memory.committed
     $.getJSON("/app/metrics/jvm.memory.max", function (data) {
         var max = data.measurements[0].value;
+        max = (max / 1024 / 1024 / 1024).toFixed(2);
         $.getJSON("/app/metrics/jvm.memory.used", function (data) {
             var used = data.measurements[0].value;
+            used = (used / 1024 / 1024 / 1024).toFixed(2);
             $.getJSON("/app/metrics/jvm.memory.committed", function (data) {
                 var committed = data.measurements[0].value;
-                new Chart($("#cpuChart"),{
-                    type: 'doughnut',//doughnut是甜甜圈,pie是饼状图
-                    data: {
-                        labels: ["最大%sGB", "已用", "空闲"],
-                        datasets: [
-                            {
-                                backgroundColor: ["rgba(51,122,183, 0.8)","rgba(220,20,60, 0.8)","rgba(255,130,71,0.8)"],
-                                data: [max, used, committed]
-                            }
-                        ]
+                committed = (committed / 1024 / 1024 / 1024).toFixed(2);
+
+                var option = {
+                    title : {
+                        show:true,
+                        text: '内存'+ max +'GB',
+                        x:'center',
+                        y: 'top'
                     },
-                    options: {
-                        title: {
-                            display: true,
-                            text: '内存使用情况'
-                        },
-                        legend: {
-                            display: true,
-                            position: 'bottom',
-                            labels: {
-                                fontColor: 'rgb(255, 99, 132)'
-                            }
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{b} : {c} GB"
+                    },
+                    series : [
+                        {
+                            name:'内存',
+                            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:[
+                                {value:max,name:'总共'},
+                                {value:used,name:'已用'},
+                                {value:committed,name:'空闲'}
+                            ]
                         }
-                    }
-                });
+                    ]
+                };
+                echarts.init(document.getElementById('memChart')).setOption(option);
 
             });
         });
@@ -200,7 +277,7 @@ function showPoint(title, point){
     var statusColor = status == 'UP' ? 'success' : 'danger';
 
     // more than 63%/78% waring/danger
-    var precent = Math.round(threshold / total);
+    var precent = (threshold / total).toFixed(2);
     var barColor = precent >= 63 ? 'waring' : 'success';
     barColor = precent >= 78 ? 'danger' : barColor;
 
@@ -218,6 +295,16 @@ function showPoint(title, point){
     return html;
 }
 
+function showSystemItem(title, value){
+    var html = "";
+    html += "<tr>";
+    html += "   <td>" + title + "</td>";
+    html += "   <td><span class='label label-success'>UP</span></td>";
+    html += "   <td>"+value+"</td>";
+    html += "</tr>";
+    return html;
+}
+
 $(function () {
     // 初始化select2插件
     $(".select-control").select2({
@@ -237,22 +324,20 @@ $(function () {
     bindClearEvent($(".clearDataBtn"), "确认清空数据？", "清空数据成功!", "/monitor/clearData");
     bindClearEvent($(".clearLogBtn"), "确认清空日志？", "清空日志成功!", "/monitor/clearLog");
 
+    showCpu();
     showMem();
     showSystemInfo();
 
-
-    // 系统CPU
-    // system.cpu.usage
-    // 程序CPU
-    // process.cpu.usage
-
-    // 守护线程数
-    // jvm.threads.daemon
-    // 活跃线程数
-    // jvm.threads.live
-    // 峰值线程数
-    // jvm.threads.peak
-    // GC 耗时
-    // jvm.gc.pause
+    // 绑定回车事件
+    $("#searchDataKeyword").keydown(function (e) {
+        if (e.which == 13) {
+            $("#queryDataBtn").trigger("click");
+        }
+    });
+    $("#searchLogKeyword").keydown(function (e) {
+        if (e.which == 13) {
+            $("#queryLogBtn").trigger("click");
+        }
+    });
 
 });

dbsyncer-web/src/main/resources/static/plugins/css/chart/chart.min.css

@@ -1 +0,0 @@
-@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}