|
...
|
...
|
@@ -16,29 +16,93 @@ |
|
|
|
</div>
|
|
|
|
<!-- pageheader -->
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.form-item {
|
|
|
|
margin-right: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="contentpanel page-servers">
|
|
|
|
<div class="panel panel-primary-head">
|
|
|
|
<div class="panel panel-default">
|
|
|
|
<div class="panel-heading" style="overflow: hidden">
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">主机</label>
|
|
|
|
<select id="selectedHost" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each hostName}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">应用</label>
|
|
|
|
<select id="selectedApp" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each app}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">类型</label>
|
|
|
|
<select id="selectedType" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each type}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">时间</label>
|
|
|
|
<div id="reportrange" style="display: inline-block; background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc; width: 210px; color: black;">
|
|
|
|
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
|
|
|
|
<span></span> <b class="caret"></b>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">错误编码</label>
|
|
|
|
<select id="selectedCode" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each code}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">路由</label>
|
|
|
|
<select id="selectedRoute" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each route}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block form-item">
|
|
|
|
<label for="appName" class="control-label">api</label>
|
|
|
|
<select id="selectedApi" class="form-control" >
|
|
|
|
<option value="">全部</option>
|
|
|
|
{{#each api}}
|
|
|
|
<option value="{{this}}">{{this}}</option>
|
|
|
|
{{/each}}
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block">
|
|
|
|
<button id="search" class="btn btn-info" style="margin-left: 20px;">查询</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-inline inline-block">
|
|
|
|
<button id="clear" class="btn btn-info" style="margin-left: 20px;">清除</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
<select id="selectedServer" class="selectpicker show-menu-arrow form-control"
|
|
|
|
style="margin-left: 10px;">
|
|
|
|
<option value="aws" selected>aws</option>
|
|
|
|
<option value="qcloud">qcloud</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
<select id="selectedApp" class="selectpicker show-menu-arrow form-control" style="margin-left: 10px;">
|
|
|
|
<option value="default">全部</option>
|
|
|
|
<option value="pc">PC</option>
|
|
|
|
<option value="h5">H5</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
<button id="search" class="btn btn-info" style="margin-left: 20px;">查询</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- panel-heading -->
|
|
|
|
|
|
...
|
...
|
@@ -51,12 +115,14 @@ |
|
|
|
<th>请求ID</th>
|
|
|
|
<td>用户ID</td>
|
|
|
|
<td>访客ID</td>
|
|
|
|
<td>路由</td>
|
|
|
|
<td>接口名</td>
|
|
|
|
<td>错误状态码</td>
|
|
|
|
<td>错误信息</td>
|
|
|
|
<td>出错文件</td>
|
|
|
|
<td>行号</td>
|
|
|
|
<td>列数</td>
|
|
|
|
<td>错误堆栈</td>
|
|
|
|
<!--<td>错误信息</td>-->
|
|
|
|
<!--<td>出错文件</td>-->
|
|
|
|
<!--<td>行号</td>-->
|
|
|
|
<!--<td>列数</td>-->
|
|
|
|
<!--<td>错误堆栈</td>-->
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
|
|
...
|
...
|
@@ -69,107 +135,44 @@ |
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
// var selectedServer, selectedApp;
|
|
|
|
// var data_end_point = '/profile/error.json';
|
|
|
|
// var dataTable = null;
|
|
|
|
//
|
|
|
|
// function ajaxUrl() {
|
|
|
|
// let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
|
|
|
|
// return url
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// $(function() {
|
|
|
|
// init();
|
|
|
|
// initTable();
|
|
|
|
// initSelect();
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// function init() {
|
|
|
|
// selectedServer = 'aws';
|
|
|
|
// selectedApp = 'default';
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// function initTable() {
|
|
|
|
// dataTable = $("#table-servers").DataTable({
|
|
|
|
// pageLength: 20,
|
|
|
|
// serverSide: true,
|
|
|
|
// retrieve: true,
|
|
|
|
// searching: false,
|
|
|
|
// ajax: ajaxUrl(),
|
|
|
|
// dataSrc: 'data',
|
|
|
|
// pageLength: 25,
|
|
|
|
// columns: [
|
|
|
|
// {data: 'time'},
|
|
|
|
// {data: 'app'},
|
|
|
|
// {data: 'type'},
|
|
|
|
// {data: 'reqID'},
|
|
|
|
// {data: 'uid'},
|
|
|
|
// {data: 'udid'},
|
|
|
|
// {data: 'code', defaultContent: '无'},
|
|
|
|
// {data: 'message', defaultContent: '无'},
|
|
|
|
// {data: 'script', defaultContent: '无'},
|
|
|
|
// {data: 'line'},
|
|
|
|
// {data: 'column'},
|
|
|
|
// {data: 'stack', defaultContent: '无'}
|
|
|
|
// ],
|
|
|
|
// data: [{
|
|
|
|
// time: "",
|
|
|
|
// app: "",
|
|
|
|
// type: "",
|
|
|
|
// reqID: "",
|
|
|
|
// uid: "",
|
|
|
|
// udid: "",
|
|
|
|
// code: "",
|
|
|
|
// message: "",
|
|
|
|
// script: "",
|
|
|
|
// line: "",
|
|
|
|
// column: "",
|
|
|
|
// stack: ""
|
|
|
|
// }],
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// function initSelect() {
|
|
|
|
// $('#selectedApp').change(function() {
|
|
|
|
// selectedApp = $('#selectedApp').val();
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// $('#search').on('click', () => {
|
|
|
|
// _handleChanged();
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// function _handleChanged() {
|
|
|
|
// dataTable && dataTable.ajax.url(ajaxUrl()).load();
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
var selectedServer, selectedApp;
|
|
|
|
|
|
|
|
var data_end_point = '/profile/error.json';
|
|
|
|
var dataTable = null;
|
|
|
|
|
|
|
|
var query = {
|
|
|
|
hostname: '',
|
|
|
|
app: '',
|
|
|
|
type: '',
|
|
|
|
time: '',
|
|
|
|
code: '',
|
|
|
|
route: '',
|
|
|
|
api: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
function qs(obj) {
|
|
|
|
return Object.keys(obj).map(key => {
|
|
|
|
return `${key}=${encodeURIComponent(obj[key])}`;
|
|
|
|
}).join('&')
|
|
|
|
}
|
|
|
|
|
|
|
|
function ajaxUrl() {
|
|
|
|
let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
|
|
|
|
return url
|
|
|
|
let result = `${data_end_point}?${qs(query)}`;
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
init();
|
|
|
|
initTable();
|
|
|
|
initSelect();
|
|
|
|
initDatePicker();
|
|
|
|
});
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
selectedServer = 'aws';
|
|
|
|
selectedApp = 'default';
|
|
|
|
}
|
|
|
|
|
|
|
|
function initTable() {
|
|
|
|
dataTable = $("#table-servers").DataTable({
|
|
|
|
pageLength: 20,
|
|
|
|
serverSide: true,
|
|
|
|
retrieve: true,
|
|
|
|
searching: false,
|
|
|
|
responsive: true,
|
|
|
|
ajax: ajaxUrl(),
|
|
|
|
dataSrc: 'data',
|
|
|
|
pageLength: 25,
|
|
...
|
...
|
@@ -180,12 +183,14 @@ |
|
|
|
{data: 'reqid'},
|
|
|
|
{data: 'uid'},
|
|
|
|
{data: 'udid'},
|
|
|
|
{data: 'route'},
|
|
|
|
{data: 'api'},
|
|
|
|
{data: 'code', defaultContent: '无'},
|
|
|
|
{data: 'message', defaultContent: '无'},
|
|
|
|
{data: 'script', defaultContent: '无'},
|
|
|
|
{data: 'line'},
|
|
|
|
{data: 'column'},
|
|
|
|
{data: 'stack', defaultContent: '无'}
|
|
|
|
// {data: 'message', defaultContent: '无'},
|
|
|
|
// {data: 'script', defaultContent: '无'},
|
|
|
|
// {data: 'line'},
|
|
|
|
// {data: 'column'},
|
|
|
|
// {data: 'stack', defaultContent: '无'}
|
|
|
|
],
|
|
|
|
data: [{
|
|
|
|
time: "",
|
|
...
|
...
|
@@ -194,12 +199,14 @@ |
|
|
|
reqid: "",
|
|
|
|
uid: "",
|
|
|
|
udid: "",
|
|
|
|
route: "",
|
|
|
|
api: "",
|
|
|
|
code: "",
|
|
|
|
message: "",
|
|
|
|
script: "",
|
|
|
|
line: "",
|
|
|
|
column: "",
|
|
|
|
stack: ""
|
|
|
|
// message: "",
|
|
|
|
// script: "",
|
|
|
|
// line: "",
|
|
|
|
// column: "",
|
|
|
|
// stack: ""
|
|
|
|
}],
|
|
|
|
columnDefs: [
|
|
|
|
{
|
|
...
|
...
|
@@ -217,18 +224,117 @@ |
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const TIME = {
|
|
|
|
'最近1分钟': [1, 'm'],
|
|
|
|
'最近30分钟': [30, 'm'],
|
|
|
|
'最近1小时': [1, 'h'],
|
|
|
|
'最近3小时': [3, 'h'],
|
|
|
|
'最近6小时': [6, 'h'],
|
|
|
|
'最近12小时': [12, 'h']
|
|
|
|
};
|
|
|
|
|
|
|
|
function initDatePicker() {
|
|
|
|
var first = '无';
|
|
|
|
|
|
|
|
$('#reportrange span').html(first);
|
|
|
|
|
|
|
|
lastTime = TIME[first];
|
|
|
|
|
|
|
|
function cb(start, end, label) {
|
|
|
|
if (label && label !== '自定义日期') {
|
|
|
|
$('#reportrange span').html(label);
|
|
|
|
|
|
|
|
var lastTime = TIME[label];
|
|
|
|
var selectedStartTime = moment().subtract(...lastTime).unix();
|
|
|
|
var selectedEndTime = moment().unix();
|
|
|
|
|
|
|
|
query.time = `${selectedStartTime}:${selectedEndTime}`;
|
|
|
|
} else if (label && label === '自定义日期'){
|
|
|
|
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
|
|
|
|
|
|
|
|
var selectedStartTime = start.format('YYYY-MM-DD').unix();
|
|
|
|
var selectedEndTime = end.format('YYYY-MM-DD').unix();
|
|
|
|
|
|
|
|
query.time = `${selectedStartTime}:${selectedEndTime}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$('#reportrange').daterangepicker({
|
|
|
|
startDate: undefined,
|
|
|
|
endDate: undefined,
|
|
|
|
timePicker: true,
|
|
|
|
timePicker24Hour: true,
|
|
|
|
dateLimit: {
|
|
|
|
days: 7
|
|
|
|
},
|
|
|
|
ranges: {
|
|
|
|
'最近1分钟': [moment().subtract(1, 'minutes'), moment()],
|
|
|
|
'最近30分钟': [moment().subtract(30, 'minutes'), moment()],
|
|
|
|
'最近1小时': [moment().subtract(1, 'hours'), moment()],
|
|
|
|
'最近3小时': [moment().subtract(3, 'hours'), moment()],
|
|
|
|
'最近6小时': [moment().subtract(6, 'hours'), moment()],
|
|
|
|
'最近12小时': [moment().subtract(12, 'hours'), moment()]
|
|
|
|
},
|
|
|
|
locale: {
|
|
|
|
format: "YYYY-MM-DD",
|
|
|
|
applyLabel: '确定',
|
|
|
|
cancelLabel: '取消',
|
|
|
|
weekLabel: 'W',
|
|
|
|
customRangeLabel: '自定义日期',
|
|
|
|
daysOfWeek: '一_二_三_四_五_六_日'.split('_'),
|
|
|
|
monthNames: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
|
|
|
|
firstDay: 1
|
|
|
|
},
|
|
|
|
}, cb);
|
|
|
|
|
|
|
|
$('#reportrange').on('cancel.daterangepicker', function() {
|
|
|
|
$('#reportrange').data('daterangepicker').setStartDate(undefined);
|
|
|
|
$('#reportrange').data('daterangepicker').setEndDate(undefined);
|
|
|
|
$('#reportrange span').html(first);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function initSelect() {
|
|
|
|
$('#selectedHost').change(function() {
|
|
|
|
query.hostname = $('#selectedHost').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#selectedApp').change(function() {
|
|
|
|
selectedApp = $('#selectedApp').val();
|
|
|
|
query.app = $('#selectedApp').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#selectedType').change(function() {
|
|
|
|
query.type = $('#selectedType').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#selectedCode').change(function() {
|
|
|
|
query.code = $('#selectedCode').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#selectedRoute').change(function() {
|
|
|
|
query.route = $('#selectedRoute').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#selectedApi').change(function() {
|
|
|
|
query.api = $('#selectedApi').val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#search').on('click', () => {
|
|
|
|
_handleChanged();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#clear').on('click', () => {
|
|
|
|
clearSelect();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function _handleChanged() {
|
|
|
|
dataTable && dataTable.ajax.url(ajaxUrl()).load();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clearSelect() {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|
