1. 修改成bower管理
This commit is contained in:
zhang.xin
parent
0381e3875d
commit
d3e1485fb4
|
|
@ -1,7 +1,7 @@
|
|||
<#macro importResources>
|
||||
<link href="${_base}/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="${_base}/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="${_base}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="${_base}/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="${_base}/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="${_base}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</#macro>
|
||||
|
||||
<#macro navbar>
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
<div class="navbar-body">
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-xs-3 col-sm-2 col-lg-2">
|
||||
<img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block">
|
||||
<img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block">
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-5 col-sm-6 col-lg-6">
|
||||
<div class="input-group" style="margin-top:3%">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">搜索</button>
|
||||
</span>
|
||||
<input type="text" class="form-control" value="${key}" id="searchKey">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" id="searchBtn">搜索</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-offset-1 col-xs-4 col-sm-3 col-lg-3 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1">
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
<img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
</div>
|
||||
<div class="input-group col-md-6 col-md-offset-3">
|
||||
<input type="text" class="form-control">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
<#import "./common/commons.ftl" as common>
|
||||
<!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"/>
|
||||
<@common.importResources />
|
||||
<script src="${_base}/bower_components/vue/dist/vue.min.js"></script>
|
||||
<script src="${_base}/bower_components/jquery-ui/jquery-ui.min.js"></script>
|
||||
<link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css"/>
|
||||
<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"/>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
<@common.navbar/>
|
||||
<div class="container">
|
||||
<p id="key" style="display: none">${key}</p>
|
||||
<p id="searchType" style="display: none">${searchType}</p>
|
||||
<div class="row" id="data">
|
||||
<table id="traceTreeTable" >
|
||||
<caption>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 25%" >服务名</th>
|
||||
<th style="width: 5%">类型</th>
|
||||
<th style="width: 5%">状态</th>
|
||||
<th style="width: 20%">服务/方法</th>
|
||||
<th style="width: 15%">主机信息</th>
|
||||
<th style="width: 30%">时间轴</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="treeNode in traceTree.treeNodes">
|
||||
<tr v-if="treeNode.isEntryNode" statusCodeStr="{{treeNode.statusCodeStr}}"
|
||||
data-tt-id='{{treeNode.colId}}'>
|
||||
<td><b>{{treeNode.applicationIdStr}}</b></td>
|
||||
<td>{{treeNode.spanTypeName}}</td>
|
||||
<td>{{treeNode.statusCodeName}}</td>
|
||||
<td>
|
||||
<a href="#" >{{treeNode.viewPointIdSub}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else statusCodeStr="{{treeNode.statusCodeStr}}" data-tt-id='{{treeNode.colId}}'
|
||||
data-tt-parent-id='{{treeNode.parentLevel}}'>
|
||||
<td><b>{{treeNode.applicationIdStr}}</b></td>
|
||||
<td>{{treeNode.spanTypeName}}</td>
|
||||
<td>{{treeNode.statusCodeName}}</td>
|
||||
<td>
|
||||
<a href="#" >{{treeNode.viewPointIdSub}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#data",
|
||||
methods: {
|
||||
changeData: function (data) {
|
||||
this.traceTree.totalTime = data.endTime - data.beginTime;
|
||||
var totalTime = this.traceTree.totalTime;
|
||||
this.traceTree.startTime = data.beginTime;
|
||||
this.traceTree.endTime = data.endTime;
|
||||
var tmpNode;
|
||||
for (var i = 0; i < data.nodes.length; i++) {
|
||||
tmpNode = data.nodes[i];
|
||||
if (tmpNode.colId == "0") {
|
||||
tmpNode.isEntryNode = true;
|
||||
} else {
|
||||
tmpNode.isEntryNode = false;
|
||||
}
|
||||
if (tmpNode.spanTypeName == "") {
|
||||
tmpNode.spanTypeName = "UNKNOWN";
|
||||
}
|
||||
tmpNode.statusCodeName = tmpNode.statusCodeName;
|
||||
if (tmpNode.statusCodeName == "") {
|
||||
tmpNode.statusCodeName = "MISSING";
|
||||
}
|
||||
|
||||
if (tmpNode.timeLineList.length == 1) {
|
||||
tmpNode.case = 1;
|
||||
tmpNode.offset = tmpNode.cost;
|
||||
tmpNode.totalLength = (tmpNode.startTime - this.traceTree.beginTime);
|
||||
}
|
||||
|
||||
if (tmpNode.timeLineList.length == 2) {
|
||||
if (tmpNode.timeLineList[1].startTime < tmpNode.timeLineList[0].startTime) {
|
||||
tmpNode.case = 2;
|
||||
tmpNode.serverLength = tmpNode.timeLineList[1].cost;
|
||||
tmpNode.totalLength = (tmpNode.timeLineList[1].startTime - this.traceTree.beginTime);
|
||||
} else if ((tmpNode.timeLineList[1].startTime >= tmpNode.timeLineList[0].startTime) &&
|
||||
((tmpNode.timeLineList[1].startTime) <= (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost))) {
|
||||
if ((tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost) <= (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost)) {
|
||||
tmpNode.case = 3;
|
||||
tmpNode.totalLength = tmpNode.timeLineList[0].startTime - this.traceTree.beginTime;
|
||||
tmpNode.clientOffset = (tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime);
|
||||
tmpNode.serverOffset = (tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost - tmpNode.timeLineList[1].startTime);
|
||||
tmpNode.serverLength = (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost - tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[1].cost);
|
||||
} else {
|
||||
tmpNode.case = 4;
|
||||
tmpNode.totalLength = (tmpNode.timeLineList[0].startTime - this.traceTree.startTime);
|
||||
tmpNode.clientOffset = tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime;
|
||||
tmpNode.serverLength = tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost - tmpNode.timeLineList[1].startTime;
|
||||
}
|
||||
} else {
|
||||
tmpNode.case = 5;
|
||||
tmpNode.totalLength = (tmpNode.timeLineList[0].startTime - this.traceTree.startTime);
|
||||
tmpNode.warningOffset = tmpNode.timeLineList[0].cost;
|
||||
tmpNode.serverOffset = tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime;
|
||||
tmpNode.serverLength = tmpNode.timeLineList[1].cos;
|
||||
}
|
||||
}
|
||||
|
||||
this.traceTree.treeNodes.push(tmpNode);
|
||||
}
|
||||
}
|
||||
},
|
||||
ready: function () {
|
||||
var self = this;
|
||||
var url = "${_base}/search/traceId/" + $("#key").text();
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (data.code == '200') {
|
||||
self.changeData(jQuery.parseJSON(data.result));
|
||||
self.$nextTick(function () {
|
||||
$("#traceTreeTable").treetable({expandable: true, indent: 10, clickableNodeNames: true});
|
||||
})
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$("#errorMessage").text("Fatal Error, please try it again.");
|
||||
$("#alertMessageBox").show();
|
||||
}
|
||||
});
|
||||
},
|
||||
data: {
|
||||
traceTree: {
|
||||
totalTime: 0,
|
||||
startTime: 0,
|
||||
endTime: 0,
|
||||
treeNodes: []
|
||||
}
|
||||
},
|
||||
filter: {}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<@common.importResources />
|
||||
<link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
<script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.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>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
|
|
|
|||
|
|
@ -6,12 +6,24 @@
|
|||
<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}/node_modules/vue/dist/vue.min.js"></script>
|
||||
<script src="${_base}/bower_components/vue/dist/vue.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
<@common.navbar/>
|
||||
<div class="container">
|
||||
<div class="row" style="display: none;" id="errorMessageAlert">
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<strong>Warning!</strong> <p id="errormessage"></p>
|
||||
</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
|
|
@ -36,7 +48,9 @@
|
|||
href="${_base}/usr/applications/modify/{{application.appId}}">Update</a>
|
||||
<a class="btn btn-danger btn-xs" href="javascript:void(0)"
|
||||
onclick="del('{{application.appId}}')">Delete</a>
|
||||
<a class="btn btn-info btn-xs" href="${_base}/usr/applications/authfile/todownload/{{application.appCode}}">Download auth File</a>
|
||||
<a class="btn btn-info btn-xs"
|
||||
href="${_base}/usr/applications/authfile/todownload/{{application.appCode}}">Download
|
||||
auth File</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -64,12 +78,12 @@
|
|||
loadData();
|
||||
} else {
|
||||
$("#errormessage").text(data.message);
|
||||
$("#errorMessageAlter").show();
|
||||
$("#errorMessageAlert").show();
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$("#errormessage").text("Fatal error");
|
||||
$("#errorMessageAlter").show();
|
||||
$("#errorMessageAlert").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -89,12 +103,13 @@
|
|||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
$("#errormessage").text(data.message);
|
||||
$("#errorMessageAlert").show();
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$("#errormessage").text("Fatal error");
|
||||
$("#errorMessageAlter").show();
|
||||
$("#errorMessageAlert").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<@common.importResources />
|
||||
<link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
<script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.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>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<@common.importResources />
|
||||
<link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
<script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.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>
|
||||
</head>
|
||||
|
||||
<body style="padding-top:80px">
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<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}/node_modules/skywalking/js/jquery-md5.js"></script>
|
||||
<script src="${_base}/bower_components/skywalking/js/jquery-md5.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div clas="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
<img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<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}/node_modules/skywalking/js/jquery-md5.js"></script>
|
||||
<script src="${_base}/bower_components/skywalking/js/jquery-md5.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div clas="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
<img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
Loading…
Reference in New Issue