skywalking-java/skywalking-webui/demo/treeDetail.html

244 lines
8.4 KiB
HTML

<!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" />
<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>
<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">
<div class="row" style="margin-top:10px">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Xin
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">新增应用</a></li>
<li class="disabled"><a href="#">新增应用</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">新增应用</a></li>
<li><a href="#">新增应用</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr/>
<div class="container">
<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="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>
</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 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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
<tr id="c">
<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 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>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>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>100</td>
<td>0</td>
<td>100%</td>
<td>20.0ms</td>
</tr>
</tbody>
</table>
<hr/>
</div>
</div>
<div>
<script>
$(document).ready(function() {
$('#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'
}
$('#datetimepicker').datetimepicker('remove');
$('#datetimepicker').datetimepicker({
format: formatStr,
startView: value,
minView: value,
autoclose: true
});
});
});
$("a[name='analyTypeDropDownOption'][value='2']").click();
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>
</html>