OPENTECH / yoho-node-ci · Commits

Go to a project

Authored by htoooth
Commit 81cb08cb97522f240d966fb528426b93cd9a56c6 1 parent 08fa89ed

fix

Inline Side-by-side
Showing 4 changed files with 287 additions and 20 deletions
... ... @@ -79,7 +79,7 @@ function handleCount(rows) {
}
const profile_service = {
async time(server, start, end, app, lastTime) {
async mean(server, start, end, app, lastTime) {
const model = profile_sql.duration()
.select('*')
.where(APP[app]);
... ... @@ -123,6 +123,26 @@ const profile_service = {
return {code: 200, data: rows}
},
async time(server, start, end, app, lastTime) {
const model = profile_sql.duration()
.select('*')
.where(APP[app]);
if (lastTime) {
model.where('time', '>=', SqlBuilder.raw(`now() - ${lastTime}`))
}
if (start && end) {
model.where('time', '>=', start)
.where('time', '<', end);
}
const rows = await exec(SERVER[server], model.toSql())
.then(result => _.get(result, 'results[0].series[0]', []))
.then(handleZip);
return {cde: 200, data: rows};
},
async error(server, start, end, app, lastTime) {
const model = profile_sql.error()
.select('*')
... ... @@ -146,10 +166,10 @@ const profile_service = {
};
const profile_controller = {
async time_report_index(ctx) {
await ctx.render('action/profile_time');
async mean_report_index(ctx) {
await ctx.render('action/profile_mean');
},
async time_report_json(ctx) {
async mean_report_json(ctx) {
const start = ctx.query.start;
const end = ctx.query.end;
const app = ctx.query.app;
... ... @@ -172,6 +192,19 @@ const profile_controller = {
const result = await profile_service.count(server, start, end, app, lastTime);
ctx.body = result;
},
async time_report_index(ctx) {
await ctx.render('action/profile_time');
},
async time_report_json(ctx) {
const start = ctx.query.start;
const end = ctx.query.end;
const app = ctx.query.app;
const server = ctx.query.server || 'aws';
const lastTime = ctx.query.lastTime;
const result = await profile_service.time(server, start, end, app, lastTime);
ctx.body = result;
},
async error_report_index(ctx) {
await ctx.render('action/profile_error');
},
... ... @@ -188,12 +221,15 @@ const profile_controller = {
};
r.get('/time', profile_controller.time_report_index);
r.get('/time.json', profile_controller.time_report_json);
r.get('/mean', profile_controller.mean_report_index);
r.get('/mean.json', profile_controller.mean_report_json);
r.get('/count', profile_controller.count_report_index);
r.get('/count.json', profile_controller.count_report_json);
r.get('/time', profile_controller.time_report_index);
r.get('/time.json', profile_controller.time_report_json);
r.get('/error', profile_controller.error_report_index);
r.get('/error.json', profile_controller.error_report_json);
... ...
<div class="pageheader">
<div class="media">
<div class="pageicon pull-left">
<i class="fa fa-th-list"></i>
</div>
<div class="media-body">
<ul class="breadcrumb">
<li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
<li><a href="">性能监控</a></li>
<li>调用时间统计</li>
</ul>
<h4>调用时间统计</h4>
</div>
</div>
<!-- media -->
</div>
<!-- pageheader -->
<div class="contentpanel page-servers">
<div class="panel panel-primary-head">
<div class="panel-heading" style="overflow: hidden">
<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 id="reportrange" class="pull-left"
style="display: inline-block; background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc; width: 250px; color: black; margin-left: 20px;">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<span></span> <b class="caret"></b>
</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 -->
<table id="table-servers" class="table table-striped table-bordered">
<thead class="">
<tr>
<td >接口名称</td>
<td >耗时</td>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- panel -->
</div>
<script>
var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime;
var data_end_point = '/profile/mean.json';
var dataTable = null;
function ajaxUrl() {
let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
if (selectedEndTime && selectedEndTime) {
url += `&start=${selectedStarTime}&end=${selectedEndTime}`;
}
if (lastTime) {
url += `&lastTime=${lastTime}`
}
return url
}
$(function() {
init();
initTable();
initDatePicker();
initSelect();
});
function init() {
selectedServer = 'aws';
selectedApp = 'default';
}
function initTable() {
dataTable = $("#table-servers").DataTable({
pageLength: 20,
retrieve: true,
searching: true,
dataSrc: 'data',
pageLength: 25,
columns: [
{data: 'route'},
{data: 'mean'}
],
data: [{
route: '',
mean: ''
}],
order: [[ 1, "desc" ]]
});
}
const TIME = {
'最近1分钟': '1m',
'最近30分钟': '30m',
'最近1小时': '1h',
'最近3小时': '3h',
'最近6小时': '6h',
'最近12小时': '12h'
};
function initDatePicker() {
var start = selectedStarTime;
var end = selectedEndTime;
var first = '最近1分钟';
$('#reportrange span').html(first);
lastTime = TIME[first];
function cb(start, end, label) {
if (label && label !== '自定义日期') {
$('#reportrange span').html(label);
lastTime = TIME[label];
} else if (label && label === '自定义日期'){
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
selectedStarTime = start.format('YYYY-MM-DD');
selectedEndTime = end.format('YYYY-MM-DD');
lastTime = null
}
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
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);
cb(start, end);
}
function initSelect() {
$('#selectedServer').change(function() {
selectedServer = $('#selectedServer').val();
});
$('#selectedApp').change(function() {
selectedApp = $('#selectedApp').val();
});
$('#search').on('click', () => {
_handleChanged();
})
}
function _handleChanged() {
dataTable && dataTable.ajax.url(ajaxUrl()).load();
}
</script>
\ No newline at end of file
... ...
... ... @@ -7,9 +7,9 @@
<ul class="breadcrumb">
<li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
<li><a href="">性能监控</a></li>
<li>调用时间统计</li>
<li>耗时分析</li>
</ul>
<h4>调用时间统计</h4>
<h4>耗时分析</h4>
</div>
</div>
<!-- media -->
... ... @@ -21,7 +21,8 @@
<div class="panel-heading" style="overflow: hidden">
<div class="pull-left">
<select id="selectedServer" class="selectpicker show-menu-arrow form-control" style="margin-left: 10px;">
<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>
... ... @@ -47,11 +48,19 @@
</div>
<!-- panel-heading -->
<table id="table-servers" class="table table-striped table-bordered">
<table id="table-servers" class="table table-striped table-bordered responsive">
<thead class="">
<tr>
<td >接口名称</td>
<td >耗时</td>
<th>时间</th>
<th>应用</th>
<th>类型</th>
<td>接口名称</td>
<td>请求路由</td>
<td>耗时</td>
<th>请求ID</th>
<td>用户ID</td>
<td>访客ID</td>
</tr>
</thead>
<tbody>
... ... @@ -90,6 +99,8 @@
function init() {
selectedServer = 'aws';
selectedStarTime = moment();
selectedEndTime = moment().add(1, 'days');
selectedApp = 'default';
}
... ... @@ -97,24 +108,48 @@
dataTable = $("#table-servers").DataTable({
pageLength: 20,
retrieve: true,
responsive: true,
searching: true,
dataSrc: 'data',
pageLength: 25,
deferLoading: 0,
columns: [
{data: 'route'},
{data: 'mean'}
{data: "time"},
{data: "app"},
{data: "type"},
{data: "api"},
{data: "route"},
{data: "duration"},
{data: "reqID"},
{data: "uid"},
{data: "udid"}
],
data: [{
route: '',
mean: ''
time: "",
app: "",
type: "",
api: "",
route: "",
duration: "",
reqID: "",
uid: "",
udid: ""
}],
order: [[ 1, "desc" ]]
columnDefs: [
{
render: function(data, type, row) {
return moment(data).format('YYYY/MM/DD HH:MM:ss');
},
targets: 0
}
],
order: [[0, "desc"]]
});
}
const TIME = {
'最近1分钟': '1m',
'最近30分钟': '30m',
'最近30分钟': '30m',
'最近1小时': '1h',
'最近3小时': '3h',
'最近6小时': '6h',
... ... @@ -134,7 +169,7 @@
if (label && label !== '自定义日期') {
$('#reportrange span').html(label);
lastTime = TIME[label];
} else if (label && label === '自定义日期'){
} else if (label && label === '自定义日期') {
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
selectedStarTime = start.format('YYYY-MM-DD');
selectedEndTime = end.format('YYYY-MM-DD');
... ...
... ... @@ -77,8 +77,9 @@
<li class="parent"><a><i class="fa fa-list"></i> <span>性能统计</span></a>
<ul class="children">
<li><a href="/profile/time"> <span>调用时间统计</span></a></li>
<li><a href="/profile/mean"> <span>调用时间统计</span></a></li>
<li><a href="/profile/count"> <span>调用次数统计</span></a></li>
<li><a href="/profile/time"> <span>调用时间统计</span></a></li>
<li><a href="/profile/error"> <span>错误信息统计</span></a></li>
</ul>
</li>
... ...