1.添加treeDetail页面 (b9cb01c4) · Commits · SUMMER2020 / students / proj-2005030

skywalking-webui/demo/treeDetail.html

0 → 100644

+179 −0

Original line number	Diff line number	Diff line
		<!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>
		<style>
		.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">
		<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-10">
		<table class="table table-hover" style="font-size:12px;">
		<thead>
		<tr>
		<th>ViewPoint</th>
		<th>应用</th>
		<th>调用次数</th>
		<th>平均耗时</th>
		<th>错误次数</th>
		</tr>
		</thead>
		<tbody id="dataBody">
		<tr id="a">
		<td>Http://localhost:8080/order/save1</td>
		<td>Order-Application</td>
		<td>100</td>
		<td>20.0ms</td>
		<td>0</td>
		</tr>
		<tr id="b">
		<td>  <a>com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
		<td>Account-Application</td>
		<td>100</td>
		<td>20.0ms</td>
		<td>0</td>
		</tr>
		<tr id="c">
		<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>0</td>
		</tr>
		<tr id="d">
		<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>0</td>
		</tr>
		<tr id="e">
		<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>0</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>0</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() + ",";
		}
		}
		tableShow(showIds);
		});
		})
		});

		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();
		}
		}
		</script>
		</body>

		</html>