Skip to content

S
SkyWalking

apache / SkyWalking
上一次同步 1 年多

通知 302
Star 21345
Fork 6091
S
SkyWalking

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 62bba507 编写于 作者: A ascrutae
浏览文件
操作

完成统计结果详情页面

上级 f24c0155
隐藏空白更改
内联 并排
Showing with 566 addition and 163 deletion
skywalking-webui/demo/searchResult.html
浏览文件 @ 62bba507
<!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>
<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 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>
<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/>
&nbsp;&nbsp;com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;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/>
&nbsp;&nbsp;com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;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/>
&nbsp;&nbsp;com.ai.test.controller.com.ai.test.controllersaveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ai.test.controller.saveOrder()<br/>
&nbsp;&nbsp;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="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/> &nbsp;&nbsp;com.ai.test.controller.com.ai.test.controllersaveOrder()
<br/> &nbsp;&nbsp;&nbsp;&nbsp;com.ai.test.controller.saveOrder()
<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ai.test.controller.saveOrder()
<br/> &nbsp;&nbsp;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="col-md-4">
afafdasd
<div class="row">
<h4><a>http://localhost:8080/ordersave</a></h4>
<p>http://localhost:8080/ordersave
<br/> &nbsp;&nbsp;com.ai.test.controller.com.ai.test.controllersaveOrder()
<br/> &nbsp;&nbsp;&nbsp;&nbsp;com.ai.test.controller.saveOrder()
<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; com.ai.test.controller.saveOrder()
<br/> &nbsp;&nbsp;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-4">
afafdasd
</div>
<hr/>
</div>
<hr/>
</div>
</body>
</html>
skywalking-webui/demo/treeDetail.html
浏览文件 @ 62bba507
......@@ -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>&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
<td>&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
<td rowspan="1">0.2</td>
<td>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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
});
});
})
});
});
function tableShow(ids) {
$("#dataBody tr").each(function() {
$(this).hide();
})
$("a[name='analyTypeDropDownOption'][value='2']").click();
var idarr = ids.split(",")
var length = idarr.length;
for (var i = 0; i < length; i++) {
$("#" + idarr[i]).show();
alert(getPreviousMonth());
});
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>
......
skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/controller/AnalysisResultController.java
浏览文件 @ 62bba507
......@@ -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");
}
......
skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dao/impl/CallChainTreeDao.java
浏览文件 @ 62bba507
......@@ -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;
}
}
skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dto/CallChainTree.java
浏览文件 @ 62bba507
......@@ -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();
}
}
}
skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dto/CallChainTreeNode.java
浏览文件 @ 62bba507
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);
}
}
}
skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/service/impl/AnalysisResultService.java
浏览文件 @ 62bba507
......@@ -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;
}
}
skywalking-webui/src/main/resources/log4j2.xml
浏览文件 @ 62bba507
......@@ -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>
......
skywalking-webui/src/main/webapp/bower_components/skywalking/css/tracelog.css
浏览文件 @ 62bba507
......@@ -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;
}
\ No newline at end of file
skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl
浏览文件 @ 62bba507
<#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>&nbsp;&nbsp;&nbsp;&nbsp;
<span><a href="javascript:void(0);" id="yesterdayBtn">昨天</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
<span><a href="javascript:void(0);" id="currentMonthBtn">本月</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
<span><a href="javascript:void(0);" id="previousMonthBtn">上月</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
</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>
\ No newline at end of file
skywalking-webui/src/main/webapp/pages/anls-result/analysisSearchResult.ftl
浏览文件 @ 62bba507
......@@ -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}}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或