完成统计结果详情页面
This commit is contained in:
ascrutae
parent
f24c01556c
commit
62bba50720
|
|
@ -1,89 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<style>
|
||||
.loginIco{
|
||||
width:160px;
|
||||
height:50px;
|
||||
.loginIco {
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row" style="margin-top:10px">
|
||||
<div class="col-md-1 col-xs-6 loginIco">
|
||||
<a href="#">
|
||||
<img src="./image/logo.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
<div class="container-fluid">
|
||||
<div class="row" style="margin-top:10px">
|
||||
<div class="col-md-1 col-xs-6 loginIco">
|
||||
<a href="#">
|
||||
<img src="./image/logo.png" class="img-responsive center-block" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-6" style=" margin-top:8px;">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon btn btn-primary">搜索</span>
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-6" style=" margin-top:8px;">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon btn btn-primary">搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-md-offset-2">
|
||||
<ul class="nav navbar-nav navbar-right hidden-sm">
|
||||
<li>
|
||||
<a onclick="javascript:void(0);" href="./login.html"><ins>sign in</ins></a>
|
||||
</li>
|
||||
<li>
|
||||
<a onclick="javascript:void(0);" href="#"><ins>sign up</ins></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>
|
||||
<span>http://localhost:8080/ordersave</span>
|
||||
<br/>
|
||||
<span style="margin-left:10px">com.ai.test.controller.com.ai.test.<span style="background:#FF0000">controllersaveOrder</span>()</span>
|
||||
<br/>
|
||||
<span style="margin-left:20px">com.ai.test.controller.saveOrder()</span>
|
||||
<br/>
|
||||
<span style="margin-left:10px">com.ai.test.controller.saveOrder()</span>
|
||||
<br/>
|
||||
<span style="margin-left:20px">com.ai.test.controller.saveOrder()</span>
|
||||
<br/>
|
||||
<span>....</span>
|
||||
<br/>
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>http://localhost:8080/ordersave
|
||||
<br/> com.ai.test.controller.com.ai.test.controllersaveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> ....
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>http://localhost:8080/ordersave
|
||||
<br/> com.ai.test.controller.com.ai.test.controllersaveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> com.ai.test.controller.saveOrder()
|
||||
<br/> ....
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li><a href="#">Previous</a></li>
|
||||
<li disabled><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-2 col-md-offset-2">
|
||||
<ul class="nav navbar-nav navbar-right hidden-sm">
|
||||
<li>
|
||||
<a onclick="javascript:void(0);" href="./login.html"><ins>sign in</ins></a>
|
||||
</li>
|
||||
<li>
|
||||
<a onclick="javascript:void(0);" href="#"><ins>sign up</ins></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-md-4">
|
||||
afafdasd
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>http://localhost:8080/ordersave<br/>
|
||||
com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
....
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>http://localhost:8080/ordersave<br/>
|
||||
com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
....
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4><a>http://localhost:8080/ordersave</a></h4>
|
||||
<p>http://localhost:8080/ordersave<br/>
|
||||
com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
com.ai.test.controller.saveOrder()<br/>
|
||||
....
|
||||
</p>
|
||||
<p style="font-color">2016年03月已经被调用100次，成功100次，失败0次 <a class="pull-right"><ins>more</ins></a></p>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
afafdasd
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,42 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="./node_modules/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
|
||||
<link href="./node_modules/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.loginIco {
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
table.gridtable {
|
||||
font-family: verdana, arial, sans-serif;
|
||||
font-size: 0.8em;
|
||||
line-height: 1;
|
||||
color: #333333;
|
||||
border-width: 1px;
|
||||
border-color: #666666;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.gridtable th {
|
||||
border-width: 1px;
|
||||
padding: 0.3em 1em;
|
||||
border-style: solid;
|
||||
border-color: #666666;
|
||||
background-color: #dedede;
|
||||
}
|
||||
|
||||
table.gridtable td {
|
||||
border-width: 1px;
|
||||
padding: 0.3em 1em;
|
||||
border-style: solid;
|
||||
border-color: #666666;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -50,129 +78,165 @@
|
|||
<hr/>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<table class="table table-hover" style="font-size:12px;">
|
||||
<div class="col-md-4 ">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="analyTypeDropDown">Action</span><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="1">时报表</a></li>
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="2">日报表</a></li>
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="3">月报表</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
<input type="text" class="form-control" readonly id="datetimepicker">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<a href="#" class="glyphicon glyphicon-bookmark">
|
||||
</a>
|
||||
<span><a>上个小时报表</a></span>
|
||||
<span><a>昨天报表</a></span>
|
||||
<span><a>本月报表</a></span>
|
||||
<span><a>上月报表</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div>
|
||||
<table class="gridtable" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>LevelId</th>
|
||||
<th>ViewPoint</th>
|
||||
<th>应用</th>
|
||||
<th>调用次数</th>
|
||||
<th>平均耗时</th>
|
||||
<th>正确次数</th>
|
||||
<th>错误次数</th>
|
||||
<th>正确率</th>
|
||||
<th>平均耗时</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dataBody">
|
||||
<tr id="a">
|
||||
<td>0</td>
|
||||
<td>Http://localhost:8080/order/save1</td>
|
||||
<td>Order-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
<tr id="b">
|
||||
<td rowspan="0" valign="middle">0.0</td>
|
||||
<td> <a>com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
|
||||
<td>Account-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
<tr id="c">
|
||||
<td> <a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
|
||||
<td> <a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
|
||||
<td>Biling-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
<tr id="d">
|
||||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||||
<td rowspan="1">0.2</td>
|
||||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||||
<td>Order-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
<tr id="e">
|
||||
<td rowspan="2" valign="middle">0.3</td>
|
||||
<td> <a>com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)</a></td>
|
||||
<td>Order-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
<tr id="f">
|
||||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||||
<td>Order-Application</td>
|
||||
<td>100</td>
|
||||
<td>20.0ms</td>
|
||||
<td>100</td>
|
||||
<td>0</td>
|
||||
<td>100%</td>
|
||||
<td>20.0ms</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table class="table table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox" value="a,b,d" name="showbox" />
|
||||
</td>
|
||||
<td>正常调用链A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox" value="a,b" name="showbox" />
|
||||
</td>
|
||||
<td>正常调用链A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox " value="a,c" name="showbox" />
|
||||
</td>
|
||||
<td>正常调用链A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox " value="a,b,c,d" name="showbox" />
|
||||
</td>
|
||||
<td>正常调用链A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("input[name='showbox']").each(function() {
|
||||
$(this).change(function() {
|
||||
var showIds;
|
||||
$("input[name='showbox']").each(function(){
|
||||
if ($(this).prop("checked")){
|
||||
showIds += $(this).val() + ",";
|
||||
}
|
||||
$('#datetimepicker').val();
|
||||
$('#datetimepicker').datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
startView: 2,
|
||||
minView: 2,
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("a[name='analyTypeDropDownOption']").each(function() {
|
||||
$(this).click(function() {
|
||||
$("#analyTypeDropDown").text($(this).text());
|
||||
var value = $(this).attr("value");
|
||||
var formatStr = 'yyyy-mm-dd';
|
||||
if (value == "1") {
|
||||
formatStr = 'yyyy-mm-dd:hh'
|
||||
} else if (value == "2") {
|
||||
formatStr = 'yyyy-mm-dd'
|
||||
} else if (value == "3") {
|
||||
formatStr = 'yyyy-mm'
|
||||
}
|
||||
tableShow(showIds);
|
||||
$('#datetimepicker').datetimepicker('remove');
|
||||
$('#datetimepicker').datetimepicker({
|
||||
format: formatStr,
|
||||
startView: value,
|
||||
minView: value,
|
||||
autoclose: true
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
$("a[name='analyTypeDropDownOption'][value='2']").click();
|
||||
|
||||
alert(getPreviousMonth());
|
||||
});
|
||||
|
||||
function tableShow(ids) {
|
||||
$("#dataBody tr").each(function() {
|
||||
$(this).hide();
|
||||
})
|
||||
|
||||
var idarr = ids.split(",")
|
||||
var length = idarr.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
$("#" + idarr[i]).show();
|
||||
function getPreviousMonth(){
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var month = date.getMonth();
|
||||
var year = date.getFullYear();
|
||||
if (month == 0){
|
||||
year = date.getFullYear() - 1;
|
||||
month = 12;
|
||||
}
|
||||
}
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
return year + seperator1 + month;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import com.ai.cloud.skywalking.web.dto.CallChainTree;
|
|||
import com.ai.cloud.skywalking.web.dto.LoginUserInfo;
|
||||
import com.ai.cloud.skywalking.web.service.inter.IAnalysisResultService;
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.google.gson.Gson;
|
||||
import com.google.gson.JsonObject;
|
||||
import org.apache.logging.log4j.LogManager;
|
||||
import org.apache.logging.log4j.Logger;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
|
|
@ -18,7 +20,7 @@ import javax.servlet.http.HttpServletRequest;
|
|||
/**
|
||||
* Created by xin on 16-4-5.
|
||||
*/
|
||||
@RequestMapping("/usr/applications")
|
||||
@RequestMapping("/analy")
|
||||
@Controller
|
||||
public class AnalysisResultController extends BaseController {
|
||||
|
||||
|
|
@ -27,8 +29,9 @@ public class AnalysisResultController extends BaseController {
|
|||
@Autowired
|
||||
private IAnalysisResultService analysisResultService;
|
||||
|
||||
@RequestMapping("/anlsResult")
|
||||
public String analysisResult() {
|
||||
@RequestMapping("/mainPage")
|
||||
public String analysisResult(String treeId, HttpServletRequest request) {
|
||||
request.setAttribute("treeId", treeId);
|
||||
return "anls-result/analysisResult";
|
||||
}
|
||||
|
||||
|
|
@ -44,12 +47,18 @@ public class AnalysisResultController extends BaseController {
|
|||
@PathVariable("analyDate") String analyDate) {
|
||||
JSONObject result = new JSONObject();
|
||||
try {
|
||||
LoginUserInfo userInfo = fetchLoginUserInfoFromSession(request);
|
||||
// LoginUserInfo userInfo = fetchLoginUserInfoFromSession(request);
|
||||
CallChainTree callChainTree = analysisResultService.
|
||||
fetchAnalysisResult(treeId, analyType, analyDate);
|
||||
result.put("code", "200");
|
||||
if (callChainTree != null) {
|
||||
result.put("result", new Gson().toJson(callChainTree));
|
||||
}else{
|
||||
result.put("result", "{}");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
logger.error("Failed to load treeId[{}], anlysisType:[{}], anlyDate:[{}]", treeId, analyType, analyDate);
|
||||
logger.error(e);
|
||||
e.printStackTrace();
|
||||
result.put("code", "500");
|
||||
result.put("message", "Fatal error");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import org.springframework.stereotype.Repository;
|
|||
|
||||
import java.io.IOException;
|
||||
import java.util.Calendar;
|
||||
import java.util.Collections;
|
||||
import java.util.Map;
|
||||
|
||||
@Repository
|
||||
|
|
@ -35,7 +36,7 @@ public class CallChainTreeDao implements ICallChainTreeDao {
|
|||
|
||||
@Override
|
||||
public AnlyResult queryEntranceAnlyResult(String entranceColumnName, String treeId) throws IOException {
|
||||
String columnName = null;
|
||||
String columnName = entranceColumnName;
|
||||
if (entranceColumnName.lastIndexOf(":") != -1) {
|
||||
columnName = entranceColumnName.substring(0, entranceColumnName.length() - 1);
|
||||
}
|
||||
|
|
@ -85,6 +86,7 @@ public class CallChainTreeDao implements ICallChainTreeDao {
|
|||
chainTree.addNode(callChainTreeNode);
|
||||
}
|
||||
|
||||
|
||||
return chainTree;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,4 +22,18 @@ public class CallChainTree {
|
|||
public void setTreeId(String treeId) {
|
||||
this.treeId = treeId;
|
||||
}
|
||||
|
||||
public List<CallChainTreeNode> getCallChainTreeNodeList() {
|
||||
return callChainTreeNodeList;
|
||||
}
|
||||
|
||||
public void setCallChainTreeNodeList(List<CallChainTreeNode> callChainTreeNodeList) {
|
||||
this.callChainTreeNodeList = callChainTreeNodeList;
|
||||
}
|
||||
|
||||
public void beautifulViewPointForShow() {
|
||||
for (CallChainTreeNode node : callChainTreeNodeList){
|
||||
node.beautifulViewPoint();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
package com.ai.cloud.skywalking.web.dto;
|
||||
|
||||
import com.ai.cloud.skywalking.web.util.StringUtil;
|
||||
import com.google.gson.Gson;
|
||||
import com.google.gson.JsonObject;
|
||||
import com.google.gson.JsonParser;
|
||||
import com.google.gson.reflect.TypeToken;
|
||||
|
||||
import java.util.Calendar;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
|
|
@ -18,15 +18,16 @@ public class CallChainTreeNode {
|
|||
private AnlyResult anlyResult;
|
||||
|
||||
public CallChainTreeNode(String qualifierStr, String valueStr, String loadKey) {
|
||||
String[] qualifierArray = qualifierStr.split("@");
|
||||
traceLevelId = qualifierArray[0];
|
||||
viewPoint = qualifierArray[1];
|
||||
traceLevelId = qualifierStr.substring(0, qualifierStr.indexOf("@"));
|
||||
viewPoint = qualifierStr.substring(qualifierStr.indexOf("@") + 1);
|
||||
JsonObject jsonObject = (JsonObject) new JsonParser().parse(valueStr);
|
||||
Map<String, AnlyResult> resultMap = new Gson().fromJson(jsonObject.getAsJsonObject("summaryValueMap"),
|
||||
new TypeToken<Map<String, AnlyResult>>() {
|
||||
}.getType());
|
||||
anlyResult = resultMap.get(loadKey);
|
||||
|
||||
if (anlyResult == null){
|
||||
anlyResult = new AnlyResult();
|
||||
}
|
||||
}
|
||||
|
||||
public String getTraceLevelId() {
|
||||
|
|
@ -36,4 +37,11 @@ public class CallChainTreeNode {
|
|||
public String getViewPoint() {
|
||||
return viewPoint;
|
||||
}
|
||||
|
||||
public void beautifulViewPoint() {
|
||||
if (!StringUtil.isBlank(viewPoint) && viewPoint.length() > 80) {
|
||||
viewPoint = viewPoint.substring(0, 50) + "..."
|
||||
+ viewPoint.substring(viewPoint.length() - 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ package com.ai.cloud.skywalking.web.service.impl;
|
|||
|
||||
import com.ai.cloud.skywalking.web.dao.inter.ICallChainTreeDao;
|
||||
import com.ai.cloud.skywalking.web.dto.CallChainTree;
|
||||
import com.ai.cloud.skywalking.web.dto.CallChainTreeNode;
|
||||
import com.ai.cloud.skywalking.web.service.inter.IAnalysisResultService;
|
||||
import org.apache.logging.log4j.LogManager;
|
||||
import org.apache.logging.log4j.Logger;
|
||||
|
|
@ -12,6 +13,8 @@ import java.io.IOException;
|
|||
import java.text.ParseException;
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.Calendar;
|
||||
import java.util.Collections;
|
||||
import java.util.Comparator;
|
||||
import java.util.Date;
|
||||
|
||||
/**
|
||||
|
|
@ -43,8 +46,7 @@ public class AnalysisResultService implements IAnalysisResultService {
|
|||
Date date = format.parse(analyDate);
|
||||
Calendar calendar = Calendar.getInstance();
|
||||
calendar.setTime(date);
|
||||
rowKey = treeId + "/" + calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1)
|
||||
+ "-" + calendar.get(Calendar.DAY_OF_MONTH);
|
||||
rowKey = treeId + "/" + calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1);
|
||||
loadKey = calendar.get(Calendar.DAY_OF_MONTH) + "";
|
||||
tableName = "sw-chain-1day-summary";
|
||||
} else if ("HOUR".equals(analyType)) {
|
||||
|
|
@ -64,7 +66,17 @@ public class AnalysisResultService implements IAnalysisResultService {
|
|||
|
||||
logger.info("fetchAnalysisResult: tableName :{}, rowKey : {}, loadKey:{}", tableName, rowKey, loadKey);
|
||||
CallChainTree callChainTree = callChainTreeDao.queryAnalysisCallTree(tableName, rowKey, loadKey);
|
||||
callChainTree.setTreeId(treeId);
|
||||
if (callChainTree != null) {
|
||||
callChainTree.setTreeId(treeId);
|
||||
Collections.sort(callChainTree.getCallChainTreeNodeList(), new Comparator<CallChainTreeNode>() {
|
||||
@Override
|
||||
public int compare(CallChainTreeNode o1, CallChainTreeNode o2) {
|
||||
return o1.getTraceLevelId().compareTo(o2.getTraceLevelId());
|
||||
}
|
||||
});
|
||||
callChainTree.beautifulViewPointForShow();
|
||||
}
|
||||
|
||||
return callChainTree;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<Configuration status="debug">
|
||||
<Appenders>
|
||||
<Console name="Console" target="SYSTEM_OUT">
|
||||
<PatternLayout pattern="%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n"/>
|
||||
<PatternLayout pattern="%d - %c -%-4r [%t] %-5p %x - %m%n"/>
|
||||
</Console>
|
||||
</Appenders>
|
||||
<Loggers>
|
||||
|
|
|
|||
|
|
@ -34,3 +34,29 @@
|
|||
.highlight-viewpoint {
|
||||
background-color: #baec7e;
|
||||
}
|
||||
|
||||
table.gridtable {
|
||||
font-family: verdana, arial, sans-serif;
|
||||
font-size: 0.8em;
|
||||
line-height: 1;
|
||||
color: #333333;
|
||||
border-width: 1px;
|
||||
border-color: #666666;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.gridtable th {
|
||||
border-width: 1px;
|
||||
padding: 0.3em 1em;
|
||||
border-style: solid;
|
||||
border-color: #666666;
|
||||
background-color: #dedede;
|
||||
}
|
||||
|
||||
table.gridtable td {
|
||||
border-width: 1px;
|
||||
padding: 0.3em 1em;
|
||||
border-style: solid;
|
||||
border-color: #666666;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<#import "../common/commons.ftl" as common>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
|
|
@ -5,22 +6,273 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<@common.importResources />
|
||||
<script src="${_base}/bower_components/jquery-ui/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.theme.default.css"/>
|
||||
<script src="${_base}/bower_components/jquery-treetable/jquery.treetable.js"></script>
|
||||
<link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
|
||||
<link href="${_base}/bower_components/skywalking/css/tracelog.css" rel="stylesheet"/>
|
||||
<script src="${_base}/bower_components/skywalking/js/tracelog.js"></script>
|
||||
<script src="${_base}/bower_components/skywalking/js/application.js"></script>
|
||||
<script src="${_base}/bower_components/skywalking/js/analysisresult.js"></script>
|
||||
<link href="${_base}/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
<script src="${_base}/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
|
||||
<link href="${_base}/bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
|
||||
rel="stylesheet"/>
|
||||
<script src="${_base}/bower_components/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
<body style="padding-top:100px">
|
||||
<@common.navbar/>
|
||||
<div class="container" id="mainPanel">
|
||||
<div class="row">
|
||||
<div class="col-md-4 ">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false"><span id="analyTypeDropDown">Action</span><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="HOUR">时报表</a></li>
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="DAY">日报表</a></li>
|
||||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="MONTH">月报表</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" readonly id="analyDate">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" id="showAnalyResultBtn">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<span><a href="javascript:void(0);" id="previousHourBtn">上个小时</a></span>
|
||||
<span><a href="javascript:void(0);" id="yesterdayBtn">昨天</a></span>
|
||||
<span><a href="javascript:void(0);" id="currentMonthBtn">本月</a></span>
|
||||
<span><a href="javascript:void(0);" id="previousMonthBtn">上月</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div>
|
||||
<input type="hidden" id="treeId" value="${treeId}"/>
|
||||
<input type="hidden" id="analyType" value=""/>
|
||||
<table class="gridtable" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="10%">LevelId</th>
|
||||
<th width="62%">ViewPoint</th>
|
||||
<th width="7%">调用次数</th>
|
||||
<th width="7%">正确次数</th>
|
||||
<th width="5%">正确率</th>
|
||||
<th width="7%">平均耗时</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dataBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/x-jsrender" id="analysisResultTableTmpl">
|
||||
<tr id="a">
|
||||
{{if isPrintLevelId}}
|
||||
<td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
|
||||
{{/if}}
|
||||
<td><a href="#">{{>viewPoint}}<a></td>
|
||||
<td>{{>anlyResult.totalCall}}</td>
|
||||
<td>{{>anlyResult.correctNumber}}</td>
|
||||
<td>
|
||||
<span class="
|
||||
{{if anlyResult.correctRate >= 99.00}}
|
||||
text-success
|
||||
{{else anlyResult.correctRate >= 97}}
|
||||
text-warning
|
||||
{{else}}
|
||||
text-danger
|
||||
{{/if}}
|
||||
">
|
||||
<strong>{{>anlyResult.correctRate}}%</strong></span></td>
|
||||
<td>{{>anlyResult.totalCostTime}}ms</td>
|
||||
</tr>
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#analyDate').datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
startView: 2,
|
||||
minView: 2,
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
|
||||
$("#previousHourBtn").click(function () {
|
||||
var analyType = "HOUR";
|
||||
var analyDate = getPreviousHour();
|
||||
paintAnalysisResult($("#treeId").val(), analyType, analyDate)
|
||||
});
|
||||
|
||||
$("#yesterdayBtn").click(function () {
|
||||
var analyType = "DAY";
|
||||
var analyDate = getYesterday();
|
||||
paintAnalysisResult($("#treeId").val(), analyType, analyDate)
|
||||
});
|
||||
|
||||
$("#currentMonthBtn").click(function () {
|
||||
var analyType = "MONTH";
|
||||
var analyDate = getCurrentMonth();
|
||||
paintAnalysisResult($("#treeId").val(), analyType, analyDate)
|
||||
});
|
||||
|
||||
$("#previousMonthBtn").click(function () {
|
||||
var analyType = "MONTH";
|
||||
var analyDate = getPreviousMonth();
|
||||
paintAnalysisResult($("#treeId").val(), analyType, analyDate)
|
||||
});
|
||||
|
||||
|
||||
$("a[name='analyTypeDropDownOption']").each(function () {
|
||||
$(this).click(function () {
|
||||
$('#analyDate').val("");
|
||||
$("#analyTypeDropDown").text($(this).text());
|
||||
var value = $(this).attr("value");
|
||||
var modelView = 2;
|
||||
var formatStr = 'yyyy-mm-dd';
|
||||
if (value == "HOUR") {
|
||||
formatStr = 'yyyy-mm-dd:hh';
|
||||
modelView = 1;
|
||||
} else if (value == "DAY") {
|
||||
formatStr = 'yyyy-mm-dd';
|
||||
modelView = 2;
|
||||
} else if (value == "MONTH") {
|
||||
formatStr = 'yyyy-mm';
|
||||
modelView = 3;
|
||||
} else {
|
||||
formatStr = 'yyyy-mm-dd';
|
||||
modelView = 2;
|
||||
}
|
||||
$('#analyDate').datetimepicker('remove');
|
||||
$('#analyDate').datetimepicker({
|
||||
format: formatStr,
|
||||
startView: modelView,
|
||||
minView: modelView,
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#analyType").val(value);
|
||||
});
|
||||
});
|
||||
|
||||
$("a[name='analyTypeDropDownOption'][value='DAY']").click();
|
||||
|
||||
$("#showAnalyResultBtn").click(function () {
|
||||
paintAnalysisResult($("#treeId").val(), $("#analyType").val(), $("#analyDate").val())
|
||||
});
|
||||
});
|
||||
|
||||
function paintAnalysisResult(treeId, analyType, analyDate) {
|
||||
var url = "${_base}/analy/load/" + treeId + "/" +
|
||||
analyType + "/" + analyDate;
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function (data) {
|
||||
if (data.code == '200') {
|
||||
var dataResult = convertAnalysisResult(jQuery.parseJSON(data.result));
|
||||
var template = $.templates("#analysisResultTableTmpl");
|
||||
var htmlOutput = template.render(dataResult);
|
||||
$("#dataBody").empty();
|
||||
$("#dataBody").html(htmlOutput);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$("#errorMessage").text("Fatal Error, please try it again.");
|
||||
$("#alertMessageBox").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function convertAnalysisResult(originData) {
|
||||
if (originData == undefined || originData.callChainTreeNodeList == undefined) {
|
||||
return [];
|
||||
}
|
||||
var previousNodeLevelId = "";
|
||||
var index = 0;
|
||||
var count = 1;
|
||||
for (var i = 0; i < originData.callChainTreeNodeList.length; i++) {
|
||||
var node = originData.callChainTreeNodeList[i];
|
||||
if (previousNodeLevelId == node.traceLevelId) {
|
||||
if (count == 1) {
|
||||
index = i - 1;
|
||||
}
|
||||
count++;
|
||||
originData.callChainTreeNodeList[i].isPrintLevelId = false;
|
||||
} else {
|
||||
if (count > 1) {
|
||||
originData.callChainTreeNodeList[index].rowSpanCount = count;
|
||||
} else {
|
||||
originData.callChainTreeNodeList[i].rowSpanCount = count;
|
||||
}
|
||||
count = 1;
|
||||
originData.callChainTreeNodeList[i].isPrintLevelId = true;
|
||||
}
|
||||
if (node.anlyResult.totalCall > 0) {
|
||||
node.anlyResult.correctRate =
|
||||
(parseFloat(node.anlyResult.correctNumber)
|
||||
/ parseFloat(node.anlyResult.totalCall) * 100).toFixed(2);
|
||||
}else{
|
||||
node.anlyResult.correctRate = (0).toFixed(2);
|
||||
}
|
||||
previousNodeLevelId = node.traceLevelId;
|
||||
}
|
||||
|
||||
return originData.callChainTreeNodeList;
|
||||
}
|
||||
|
||||
function getPreviousHour() {
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var seperator2 = ":";
|
||||
var month = date.getMonth() + 1;
|
||||
var strDate = date.getDate();
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (strDate >= 0 && strDate <= 9) {
|
||||
strDate = "0" + strDate;
|
||||
}
|
||||
return date.getFullYear() + seperator1 + month + seperator1 + strDate + seperator2 + (date.getHours() - 1);
|
||||
}
|
||||
|
||||
function getYesterday() {
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var month = date.getMonth() + 1;
|
||||
var strDate = date.getDate() - 1;
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (strDate >= 0 && strDate <= 9) {
|
||||
strDate = "0" + strDate;
|
||||
}
|
||||
return date.getFullYear() + seperator1 + month + seperator1 + strDate;
|
||||
}
|
||||
|
||||
function getCurrentMonth() {
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var month = date.getMonth() + 1;
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
return date.getFullYear() + seperator1 + month;
|
||||
}
|
||||
|
||||
function getPreviousMonth() {
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var month = date.getMonth();
|
||||
var year = date.getFullYear();
|
||||
if (month == 0) {
|
||||
year = date.getFullYear() - 1;
|
||||
month = 12;
|
||||
}
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
return year + seperator1 + month;
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<#macro anlyResultDisplayTmpl>
|
||||
<script type="text/x-jsrender" id="anlyResultDisplayTmpl">
|
||||
<div class="row">
|
||||
<h4><a>{{>entranceViewpoint}}</a></h4>
|
||||
<h4><a href="${_base}/analy/mainPage?treeId={{>treeId}}">{{>entranceViewpoint}}</a></h4>
|
||||
<p>
|
||||
{{for nodes}}
|
||||
{{if isPrintSlipDot}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue