kazusa
/
skywalking-java
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善展示功能

This commit is contained in:
ascrutae 2016-05-11 20:20:47 +08:00
parent f8a17db573
commit 8c0e196ec3
4 changed files with 262 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
skywalking-webui/demo/treeDetail.html
View File

@ -133,8 +133,8 @@
<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 valign="middle">0.0</td>
<td>&nbsp;&nbsp;<a id="popBtn" data-toggle="modal" data-target="#myModal">com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
<td>Account-Application</td>
<td>100</td>
<td>100</td>
@ -143,6 +143,7 @@
<td>20.0ms</td>
</tr>
<tr id="c">
<td valign="middle">0.0</td>
<td>&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
<td>Biling-Application</td>
<td>100</td>
@ -152,7 +153,7 @@
<td>20.0ms</td>
</tr>
<tr id="d">
<td rowspan="1">0.2</td>
<td >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>
@ -162,7 +163,7 @@
<td>20.0ms</td>
</tr>
<tr id="e">
<td rowspan="2" valign="middle">0.3</td>
<td 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>
@ -172,6 +173,7 @@
<td>20.0ms</td>
</tr>
<tr id="f">
<td valign="middle">0.0</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>
@ -185,7 +187,109 @@
<hr/>
</div>
</div>
<div>
<!-- 模态框（Modal） -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog " style="width:1000px">
<div class="modal-content">
<div class="modal-header">
典型调用链管理
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-2">
典型调用连列表
</div>
<div class="col-md-10">
<a>典型调用连A</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>典型调用连A</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>典型调用连A</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>典型调用连A</a>
</div>
</div>
<hr/>
<div class="row">
<table class="gridtable" style="margin:10px">
<thead>
<tr>
<th>LevelId</th>
<th>ViewPoint</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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="b">
<td valign="middle">0.0</td>
<td>&nbsp;&nbsp;<a id="popBtn" data-toggle="modal" data-target="#myModal">com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
<td>Account-Application</td>
<td>100</td>
<td>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="c">
<td valign="middle">0.0</td>
<td>&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
<td>Biling-Application</td>
<td>100</td>
<td>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="d">
<td >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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="e">
<td 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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="f">
<td valign="middle">0.0</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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
</tbody>
</table>
<hr/>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
<script>
$(document).ready(function() {
$('#datetimepicker').val();
@ -220,23 +324,26 @@
$("a[name='analyTypeDropDownOption'][value='2']").click();
alert(getPreviousMonth());
//alert(getPreviousMonth());
$("#popBtn").click(function() {
});
});
function 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 == 0) {
year = date.getFullYear() - 1;
month = 12;
}
if (month >= 1 && month <= 9) {
month = "0" + month;
month = "0" + month;
}
return year + seperator1 + month;
}
}
</script>
</body>

193
skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js vendored
View File

@ -1,7 +1,50 @@
function AnalysisResultViewResolver(param) {
AnalysisResultViewResolver.prototype.baseUrl = param.baseUrl;
AnalysisResultViewResolver.prototype.treeId = param.treeId;
this.changetAnalyCondition("MONTH", this.getCurrentMonth());
}
AnalysisResultViewResolver.prototype.callChainTreeData = [];
AnalysisResultViewResolver.prototype.callEntrance = {};
AnalysisResultViewResolver.prototype.typicCallChainData = [];
AnalysisResultViewResolver.prototype.analyType = "MONTH";
AnalysisResultViewResolver.prototype.analyDate = "";
AnalysisResultViewResolver.prototype.currentTypicalTreeNodes = {callChainTreeNodeList: []};
AnalysisResultViewResolver.prototype.currentTypicalTreeNodeMapping = {typicalTreeIds: []};
AnalysisResultViewResolver.prototype.paintChainTreeMainPage = function () {
var template = $.templates("#analysisResultPanelTmpl");
var htmlOutput = template.render({treeId: this.treeId});
$("#mainPanel").empty();
$("#mainPanel").html(htmlOutput);
}
AnalysisResultViewResolver.prototype.loadMainPage = function () {
this.paintChainTreeMainPage();
this.bindEvent();
$("a[name='analyTypeDropDownOption'][value='" + this.analyType + "']").click();
$("#analyDate").val(this.analyDate);
$("#showAnalyResultBtn").click();
}
AnalysisResultViewResolver.prototype.reloadMainPage = function () {
this.paintChainTreeMainPage();
this.bindEvent();
$("a[name='analyTypeDropDownOption'][value='" + this.analyType + "']").click();
$("#analyDate").val(this.analyDate);
this.paintChainTreeDataTable();
this.bindGotoTypicalPageEvent();
}
AnalysisResultViewResolver.prototype.changetAnalyCondition = function (type, date) {
this.analyDate = date;
this.analyType = type;
}
AnalysisResultViewResolver.prototype.bindEvent = function () {
@ -16,24 +59,14 @@ AnalysisResultViewResolver.prototype.bindEvent = function () {
this.bindHotSearchLink();
this.bindEventForSearchDateInput();
$("a[name='analyTypeDropDownOption'][value='MONTH']").click();
$("#analyDate").val(this.getCurrentMonth());
$("#showAnalyResultBtn").click(function () {
self.loadData($("#analyType").val(), $("#analyDate").val());
});
$("#showAnalyResultBtn").click();
}
AnalysisResultViewResolver.prototype.callChainTreeData = [];
AnalysisResultViewResolver.prototype.callEntrance = {};
AnalysisResultViewResolver.prototype.typicCallChainData = [];
AnalysisResultViewResolver.prototype.currentTypicalTreeNodes = {callChainTreeNodeList:[]};
AnalysisResultViewResolver.prototype.currentTypicalTreeNodeMapping={typicalTreeIds:[]};
AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken) {
this.currentTypicalTreeNodes = {callChainTreeNodeList: []};
this.currentTypicalTreeNodeMapping = {typicalTreeIds: []};
for (var i = 0; i < this.typicCallChainData.length; i++) {
var node = this.typicCallChainData[i];
var tmpInfo = node.treeNodes[nodeToken];
@ -45,14 +78,21 @@ AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken)
for (var key in node.treeNodes) {
var tmpNode = node.treeNodes[key];
tmpNode.anlyResult = JSON.parse($("#" + key).text());
tmpTypicalCallChain.push(key);
tmpTypicalCallChain.push(tmpNode);
this.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNode);
}
this.currentTypicalTreeNodeMapping[node.callTreeId] = tmpTypicalCallChain;
this.currentTypicalTreeNodeMapping.typicalTreeIds.push(node.callTreeId);
this.currentTypicalTreeNodeMapping.typicalTreeIds.push({"callTreeToken": node.callTreeId});
}
}
AnalysisResultViewResolver.prototype.paintChainTreeDataTable = function () {
var template = $.templates("#analysisResultTableTmpl");
var htmlOutput = template.render(this.callChainTreeData);
$("#dataBody").empty();
$("#dataBody").html(htmlOutput);
}
AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate) {
var self = this;
var analysisResultUrl = this.baseUrl + "/analy/load/" + this.treeId + "/" +
@ -65,43 +105,16 @@ AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate)
success: function (data) {
if (data.code == '200') {
self.callChainTreeData = self.convertAnalysisResult(jQuery.parseJSON(data.result));
var template = $.templates("#analysisResultTableTmpl");
var htmlOutput = template.render(self.callChainTreeData);
$("#dataBody").empty();
$("#dataBody").html(htmlOutput);
for (var i = 0; i < self.callChainTreeData.length; i++) {
var node = self.callChainTreeData[i];
if (node.traceLevelId == "0") {
self.callEntrance = node.viewPoint;
break;
}
}
$("button[name='showTypicalCallTreeBtn']").each(function () {
$(this).click(function () {
var treeNode = $(this).attr("value");
$(".modal-backdrop").remove();
self.showTypicalCallTree(treeNode);
var template = $.templates("#typicalCallChainTreesTmpl");
var htmlOutput = template.render({});
$("#mainPanel").empty();
$("#mainPanel").html(htmlOutput);
template = $.templates("#typicalTreeCheckBoxTmpl");
htmlOutput = template.render({"typicalTreeIds": self.currentTypicalTreeNodeMapping.typicalTreeIds});
alert(htmlOutput);
$("#typicalCheckBoxDiv").empty();
$("#typicalCheckBoxDiv").html(htmlOutput);
$("input[name='typicalTreeCheckBox']").each(function(){
$(this).change(function(){
var treeIds = new Array();
$("input[name='typicalTreeCheckBox']").each(function(){
});
});
});
template = $.templates("#typicalTreeTableTmpl");
var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
$("#typicalTreeTableDataBody").empty();
$("#typicalTreeTableDataBody").html(htmlOutput);
})
});
self.paintChainTreeDataTable();
self.bindGotoTypicalPageEvent();
}
},
error: function () {
@ -128,6 +141,64 @@ AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate)
})
}
AnalysisResultViewResolver.prototype.bindGotoTypicalPageEvent = function () {
var self = this;
$("button[name='showTypicalCallTreeBtn']").each(function () {
$(this).click(function () {
var treeNodeToken = $(this).attr("value");
$(".modal-backdrop").remove();
self.showTypicalCallTree(treeNodeToken);
var template = $.templates("#typicalCallChainTreesTmpl");
var htmlOutput = template.render({
"entryViewPoint": self.callEntrance,
"currentViewPoint": $("#" + treeNodeToken + "ViewPoint").text()
});
$("#mainPanel").empty();
$("#mainPanel").html(htmlOutput);
template = $.templates("#typicalTreeCheckBoxTmpl");
htmlOutput = template.render({"typicalTreeIds": self.currentTypicalTreeNodeMapping.typicalTreeIds});
$("#typicalCheckBoxDiv").empty();
$("#typicalCheckBoxDiv").html(htmlOutput);
$("input[name='typicalTreeCheckBox']").each(function () {
$(this).change(function () {
var treeIds = new Array();
$("input[name='typicalTreeCheckBox']").each(function () {
if ($(this).prop("checked")) {
treeIds.push($(this).attr("value"));
}
});
self.currentTypicalTreeNodes.callChainTreeNodeList = [];
for (var i = 0; i < treeIds.length; i++) {
var tmpNodes = self.currentTypicalTreeNodeMapping[treeIds[i]];
for (var j = 0; j < tmpNodes.length; j++) {
self.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNodes[j]);
}
}
template = $.templates("#typicalTreeTableTmpl");
var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
$("#typicalTreeTableDataBody").empty();
$("#typicalTreeTableDataBody").html(htmlOutput);
});
});
template = $.templates("#typicalTreeTableTmpl");
var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
$("#typicalTreeTableDataBody").empty();
$("#typicalTreeTableDataBody").html(htmlOutput);
$("#rebackCallChainTreeBtn").click(function () {
self.reloadMainPage();
});
})
});
}
AnalysisResultViewResolver.prototype.convertAnalysisResult = function (originData) {
if (originData == undefined || originData.callChainTreeNodeList == undefined) {
return [];
@ -175,7 +246,6 @@ AnalysisResultViewResolver.prototype.convertAnalysisResult = function (originDat
return originData.callChainTreeNodeList;
}
AnalysisResultViewResolver.prototype.getPreviousHour = function () {
var date = new Date();
var seperator1 = "-";
@ -230,7 +300,6 @@ AnalysisResultViewResolver.prototype.getPreviousMonth = function () {
return year + seperator1 + month;
}
AnalysisResultViewResolver.prototype.bindEventForSearchDateInput = function () {
$("a[name='analyTypeDropDownOption']").each(function () {
$(this).click(function () {
@ -268,18 +337,30 @@ AnalysisResultViewResolver.prototype.bindEventForSearchDateInput = function () {
AnalysisResultViewResolver.prototype.bindHotSearchLink = function () {
var self = this;
$("#previousHourBtn").click(function () {
self.loadData("HOUR", self.getPreviousHour())
$("a[name='analyTypeDropDownOption'][value='HOUR']").click();
$("#analyDate").val(self.getPreviousHour());
self.changetAnalyCondition("HOUR", self.getPreviousHour());
$("#showAnalyResultBtn").click();
});
$("#yesterdayBtn").click(function () {
self.loadData("DAY", self.getYesterday())
$("a[name='analyTypeDropDownOption'][value='DAY']").click();
$("#analyDate").val(self.getYesterday());
self.changetAnalyCondition("DAY", self.getYesterday());
$("#showAnalyResultBtn").click();
});
$("#currentMonthBtn").click(function () {
self.loadData("MONTH", self.getCurrentMonth())
$("a[name='analyTypeDropDownOption'][value='MONTH']").click();
$("#analyDate").val(self.getCurrentMonth());
self.changetAnalyCondition("MONTH", self.getCurrentMonth());
$("#showAnalyResultBtn").click();
});
$("#previousMonthBtn").click(function () {
self.loadData("MONTH", self.getPreviousMonth())
$("a[name='analyTypeDropDownOption'][value='MONTH']").click();
$("#analyDate").val(self.getPreviousMonth());
self.changetAnalyCondition("MONTH", self.getPreviousMonth());
$("#showAnalyResultBtn").click();
});
}

9
skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl
View File

@ -58,6 +58,7 @@
{{/if}}
<td>
<a href="javascript:void(0);" data-toggle="modal" data-target="#modal{{>nodeToken}}">{{>viewPoint}}</a>
<span style="display:none" id="{{>nodeToken}}ViewPoint">{{>viewPoint}}</span>
<div class="modal fade" id="modal{{>nodeToken}}" tabindex="-1" role="dialog" aria-labelledby="modal{{>modalId}}Label">
<div class="modal-dialog" role="document">
<div class="modal-dialog">
@ -106,11 +107,11 @@
<#macro typicalCallChainTrees>
<script type="text/x-jsrender" id="typicalCallChainTreesTmpl">
<br/>
<br/>
<div class="row">
<small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>http://aisse-mobile-web/Aisse-Mobile-Web/aisseWorkPage/backOvertimeInit</a> </small>
<small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" id="rebackCallChainTreeBtn">{{>entryViewPoint}}</a> </small>
<br/>
<small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;com.ai.aisse.controller.overtimeexpense.Ov...t(HttpServletRequest,HttpServletResponse,ModelMap)</small>
<small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{>currentViewPoint}}</small>
</div>
<br/>
@ -143,7 +144,7 @@
<script type="text/x-jsrender" id="typicalTreeCheckBoxTmpl">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;归属该节点下所有的典型调用链：</span>
{{for typicalTreeIds}}
<input name="typicalTreeCheckBox" type="checkbox" checked/>典型调用链{{: #index}}&nbsp;
<input name="typicalTreeCheckBox" type="checkbox" checked value="{{>callTreeToken}}"/>典型调用链{{: #index}}&nbsp;
{{/for}}
</script>
</#macro>

8
skywalking-webui/src/main/webapp/pages/main.ftl
View File

@ -100,12 +100,8 @@
if (index != -1) {
searchKey = searchKey.substr(index + 1);
}
var template = $.templates("#analysisResultPanelTmpl");
var htmlOutput = template.render({treeId: searchKey});
$("#mainPanel").empty();
$("#mainPanel").html(htmlOutput);
viewResolver = new AnalysisResultViewResolver({baseUrl: "${_base}", treeId: searchKey})
viewResolver = new AnalysisResultViewResolver({baseUrl: "${_base}", treeId: searchKey});
viewResolver.loadMainPage();
return;
}