root
/
DbSyncer
zrcadlo https://gitee.com/ghi/dbsyncer.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<!-- Monitor -->
<div class="container-fluid">
    <div class="row">
        <form class="form-horizontal" role="form" method="post">
            <!-- 应用性能 -->
            <div class="col-md-12">
                <div class="panel-group">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <u data-toggle="collapse" class="dbsyncer_pointer" href="#systemMetrics">应用性能</u>
                            </h4>
                        </div>
                        <div id="systemMetrics" class="panel-body panel-collapse collapse in">
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-md-4">
                                        <h3><small>总共</small>&nbsp;<span class="label label-info" id="totalSpan">0</span></h3>
                                    </div>
                                    <div class="col-md-4">
                                        <h3><small>成功</small>&nbsp;<span class="label label-success" id="successSpan">0</span></h3>
                                    </div>
                                    <div class="col-md-4">
                                        <h3><small>失败</small>&nbsp;<span class="label label-warning" id="failSpan">0</span></h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <h3><small>新增</small>&nbsp;<span class="label label-default" id="insertSpan">0</span></h3>
                                    </div>
                                    <div class="col-md-4">
                                        <h3><small>修改</small>&nbsp;<span class="label label-default" id="updateSpan">0</span></h3>
                                    </div>
                                    <div class="col-md-4">
                                        <h3><small>删除</small>&nbsp;<span class="label label-default" id="deleteSpan">0</span></h3>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div id="totalChart" style="height: 260px;"></div>
                                    </div>

                                    <div class="col-md-4">
                                        <div id="eventChart" style="height: 260px;"></div>
                                    </div>

                                    <div class="col-md-4">
                                        <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>

                            <div class="col-md-5">
                                <div class="row">
                                    <div class="col-md-12">
                                        <table id="metricTable" class="table table-hover">
                                            <tr th:each="m,s : ${metrics}">
                                                <td style="width:5%;" th:text="${s.index}+1"></td>
                                                <td th:text="${'['+ m?.group + '] ' + m?.metricName}"></td>
                                                <td th:text="${m?.detail}"></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 数据 -->
            <div class="col-md-12" th:if="${meta?.size() gt 0}">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <u data-toggle="collapse" class="dbsyncer_pointer" href="#queryDataPanel">查询数据</u>
                            </h4>
                        </div>
                        <div id="queryDataPanel" class="panel-body panel-collapse collapse in">
                            <div class="form-group">
                                <div class="col-md-3">
                                    <!-- 驱动下拉 -->
                                    <select id="searchMetaData" 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-md-1">
                                    <!-- 是否包含成功 -->
                                    <select id="searchDataSuccess" class="form-control select-control">
                                        <option th:value="${c?.value}" th:text="${c?.message}" th:each="c,state : ${storageDataStatus}" th:selected="${c?.value eq 0}"/>
                                    </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-3 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:5%;">结果</th>
                                    <th style="width:55%;">异常</th>
                                    <th style="width:17%;">时间</th>
                                    <th style="width:10%;">详情</th>
                                </tr>
                                </thead>
                                <tbody id="dataList">
                                <tr th:each="d,s : ${pagingData?.data}">
                                    <td th:text="${s.index}+1" />
                                    <td th:text="${d?.targetTableName}" />
                                    <td th:text="${d?.event}" />
                                    <td>
                                        <span th:if="${d?.success == 1}" class="label label-success">成功</span>
                                        <span th:if="${d?.success == 0}" class="label label-warning">失败</span>
                                    </td>
                                    <td style="max-width:100px;" class="dbsyncer_over_hidden"><a href="javascript:;" class="dbsyncer_pointer queryError">[[${d?.error}]]</a></td>
                                    <td th:text="${#dates.format(d?.createTime, 'yyyy-MM-dd HH:mm:ss')}" />
                                    <td>
                                        <a th:json="${d?.json}" href="javascript:;" class="label label-info queryData">查看数据</a>
                                        <a th:if="${d?.success == 0}" th:id="${d?.id}" href="javascript:;" class="label label-warning retryData">重试</a>
                                        <div class="hidden" th:text="${d?.json}"></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="form-group">
                                <div class="col-md-5">共计: <span id="dataTotal">[[${pagingData?.total}]]</span>条</div>
                                <div class="col-md-7">
                                    <a href="javascript:void(0);" id="queryDataMore" num="1">显示更多<i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 日志 -->
            <div class="col-md-12">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <u data-toggle="collapse" class="dbsyncer_pointer" href="#queryLogPanel">查询日志</u>
                            </h4>
                        </div>
                        <div id="queryLogPanel" class="panel-body panel-collapse collapse in">
                            <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>

                            <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 : ${pagingLog?.data}">
                                    <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 class="form-group">
                                <div class="col-md-5">共计: <span id="logTotal">[[${pagingLog?.total}]]</span>条</div>
                                <div class="col-md-7">
                                    <a href="javascript:void(0);" id="queryLogMore" num="1">显示更多<i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </form>
    </div>
</div>

<script th:src="@{/js/monitor/index.js}"></script>
</html>