mirror of https://github.com/tp4a/teleport
dashboard的网络浏览和磁盘IO展示完成了。
Apex Liu
parent
5b8f882f61
commit
7336219cc5
File diff suppressed because one or more lines are too long
|
|
@ -3,16 +3,20 @@
|
|||
$app.on_init = function (cb_stack) {
|
||||
$app.MAX_OVERLOAD_DATA = 10 * 60 / 5;
|
||||
$app.dom = {
|
||||
count_user: $('#count-user')
|
||||
, count_host: $('#count-host')
|
||||
, count_acc: $('#count-acc')
|
||||
, count_conn: $('#count-conn')
|
||||
count_user: $('#count-user'),
|
||||
count_host: $('#count-host'),
|
||||
count_acc: $('#count-acc'),
|
||||
count_conn: $('#count-conn'),
|
||||
bar_cpu: $('#bar-cpu'),
|
||||
bar_mem: $('#bar-mem'),
|
||||
bar_net: $('#bar-net'),
|
||||
bar_disk: $('#bar-disk')
|
||||
};
|
||||
|
||||
window.onresize = $app.on_screen_resize;
|
||||
|
||||
// refresh basic info every 1m.
|
||||
$app.load_basic_info();
|
||||
// refresh overload info every 5m.
|
||||
//$app.load_overload_info();
|
||||
|
||||
$app.ws = null;
|
||||
$app.init_ws();
|
||||
|
|
@ -23,7 +27,6 @@ $app.on_init = function (cb_stack) {
|
|||
$app.load_basic_info = function () {
|
||||
$tp.ajax_post_json('/dashboard/do-get-basic', {},
|
||||
function (ret) {
|
||||
console.log(ret);
|
||||
if (ret.code === TPE_OK) {
|
||||
$app.dom.count_user.text(ret.data.count_user);
|
||||
$app.dom.count_host.text(ret.data.count_host);
|
||||
|
|
@ -44,8 +47,61 @@ $app.load_basic_info = function () {
|
|||
|
||||
$app.init_sys_status_info = function (data) {
|
||||
var i = 0;
|
||||
// var t = (Math.floor(Date.now() / 1000) - $app.MAX_OVERLOAD_DATA - 1) * 1000;
|
||||
console.log(data);
|
||||
|
||||
var grid_cfg = {
|
||||
show: true, left: 60, right: 20, top: 30, bottom: 20
|
||||
};
|
||||
|
||||
var axis_time_cfg = {
|
||||
type: 'time',
|
||||
boundaryGap: false,
|
||||
splitNumber: 10,
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
axisLabel: {
|
||||
margin: 3,
|
||||
formatter: function (value, index) {
|
||||
return tp_format_datetime_ms(tp_utc2local_ms(value), 'HH:mm');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var axis_percent_cfg = {
|
||||
type: 'value',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
boundaryGap: [0, '60%'],
|
||||
axisLabel: {
|
||||
margin: 3,
|
||||
formatter: function (value, index) {
|
||||
if (index === 0)
|
||||
return '';
|
||||
return value + '%';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var axis_size_cfg = {
|
||||
type: 'value',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
splitNumber: 5,
|
||||
boundaryGap: [0, '20%'],
|
||||
axisLabel: {
|
||||
margin: 3,
|
||||
fontSize: 10,
|
||||
fontFamily: 'Courier New',
|
||||
formatter: function (value, index) {
|
||||
if (index === 0)
|
||||
return '';
|
||||
return tp_size2str(value, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
console.log(axis_size_cfg);
|
||||
|
||||
//=====================================
|
||||
// CPU
|
||||
|
|
@ -54,39 +110,33 @@ $app.init_sys_status_info = function (data) {
|
|||
$app.bar_cpu_user = [];
|
||||
$app.bar_cpu_sys = [];
|
||||
for (i = 0; i < data.length; i++) {
|
||||
// var x = t + i * 1000;
|
||||
$app.bar_cpu_user.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, data[i].c.u]});
|
||||
$app.bar_cpu_sys.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, data[i].c.s]});
|
||||
$app.bar_cpu_user.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].cpu.u]});
|
||||
$app.bar_cpu_sys.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].cpu.s]});
|
||||
}
|
||||
|
||||
var clr_user = '#e2524c';
|
||||
var clr_user_area = '#f7827a';
|
||||
var clr_sys = '#558c5a';
|
||||
var clr_sys_area = '#3dc34a';
|
||||
var clr_cpu_user = '#e2524c';
|
||||
var clr_cpu_user_area = '#f7827a';
|
||||
var clr_cpu_sys = '#558c5a';
|
||||
var clr_cpu_sys_area = '#3dc34a';
|
||||
|
||||
$app.bar_cpu = echarts.init(document.getElementById('bar-cpu'));
|
||||
$app.bar_cpu.setOption({
|
||||
title: {
|
||||
// show: false
|
||||
text: 'CPU负载',
|
||||
left: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: [clr_sys, clr_user],
|
||||
grid: {
|
||||
show: true
|
||||
, left: 30
|
||||
, right: 20
|
||||
, top: 30
|
||||
, bottom: 20
|
||||
},
|
||||
useUTC: true,
|
||||
color: [clr_cpu_sys, clr_cpu_user],
|
||||
grid: grid_cfg,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br/>'+ params[1].seriesName + ': ' + params[1].value[1] + '%<br/>' + params[0].seriesName + ': ' + params[0].value[1] + '%';
|
||||
return params[0].name + '<br/>' + params[1].seriesName + ': ' + params[1].value[1] + '%<br/>' + params[0].seriesName + ': ' + params[0].value[1] + '%';
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false
|
||||
|
|
@ -99,20 +149,8 @@ $app.init_sys_status_info = function (data) {
|
|||
{name: '用户', icon: 'rect'}
|
||||
]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false,
|
||||
splitNumber: 10,
|
||||
axisLine: {show: false}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {show: false},
|
||||
min: 0,
|
||||
max: 100,
|
||||
containLabel: true
|
||||
|
||||
},
|
||||
xAxis: axis_time_cfg,
|
||||
yAxis: axis_percent_cfg,
|
||||
series: [
|
||||
{
|
||||
name: '系统',
|
||||
|
|
@ -126,10 +164,10 @@ $app.init_sys_status_info = function (data) {
|
|||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: clr_sys
|
||||
color: clr_cpu_sys
|
||||
}, {
|
||||
offset: 1,
|
||||
color: clr_sys_area
|
||||
color: clr_cpu_sys_area
|
||||
}])
|
||||
}
|
||||
},
|
||||
|
|
@ -144,10 +182,10 @@ $app.init_sys_status_info = function (data) {
|
|||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: clr_user
|
||||
color: clr_cpu_user
|
||||
}, {
|
||||
offset: 1,
|
||||
color: clr_user_area
|
||||
color: clr_cpu_user_area
|
||||
}])
|
||||
}
|
||||
},
|
||||
|
|
@ -162,7 +200,7 @@ $app.init_sys_status_info = function (data) {
|
|||
|
||||
$app.bar_mem_used = [];
|
||||
for (i = 0; i < data.length; i++) {
|
||||
$app.bar_mem_used.push({name: tp_format_datetime(tp_utc2local(data[i].t), 'HH:mm:ss'), value: [tp_utc2local(data[i].t)*1000, tp_digital_precision(data[i].m.u * 100 / data[i].m.t, 1)]});
|
||||
$app.bar_mem_used.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, tp_digital_precision(data[i].mem.u * 100 / data[i].mem.t, 1)]});
|
||||
}
|
||||
|
||||
var clr_mem = '#5671e2';
|
||||
|
|
@ -172,41 +210,39 @@ $app.init_sys_status_info = function (data) {
|
|||
$app.bar_mem.setOption({
|
||||
title: {
|
||||
text: '内存用量',
|
||||
left: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
useUTC: true,
|
||||
color: [clr_mem],
|
||||
grid: {
|
||||
show: true
|
||||
, left: 30
|
||||
, right: 20
|
||||
, top: 30
|
||||
, bottom: 20
|
||||
},
|
||||
grid: grid_cfg,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
return params[0].name + ': '+ params[0].value[1] + '%';
|
||||
return params[0].name + ': ' + params[0].value[1] + '%';
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false,
|
||||
splitNumber: 10,
|
||||
axisLine: {show: false}
|
||||
axisPointer: {animation: false}
|
||||
},
|
||||
xAxis: axis_time_cfg,
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
min: 0,
|
||||
max: 100,
|
||||
containLabel: true
|
||||
// boundaryGap: [0, '60%'],
|
||||
axisLabel: {
|
||||
margin: 3,
|
||||
formatter: function (value, index) {
|
||||
if (index === 0)
|
||||
return '';
|
||||
return value + '%';
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -232,6 +268,141 @@ $app.init_sys_status_info = function (data) {
|
|||
}
|
||||
]
|
||||
});
|
||||
|
||||
//=====================================
|
||||
// Network
|
||||
//=====================================
|
||||
|
||||
$app.bar_net_recv = [];
|
||||
$app.bar_net_sent = [];
|
||||
for (i = 0; i < data.length; i++) {
|
||||
$app.bar_net_recv.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].net.r]});
|
||||
$app.bar_net_sent.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].net.s]});
|
||||
}
|
||||
|
||||
var clr_net_recv = '#e2524c';
|
||||
var clr_net_sent = '#558c5a';
|
||||
|
||||
$app.bar_net = echarts.init(document.getElementById('bar-net'));
|
||||
$app.bar_net.setOption({
|
||||
title: {
|
||||
text: '网络流量',
|
||||
left: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
useUTC: true,
|
||||
color: [clr_net_recv, clr_net_sent],
|
||||
grid: grid_cfg,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br/>' + params[1].seriesName + ': ' + tp_size2str(params[1].value[1], 2) + '<br/>' + params[0].seriesName + ': ' + tp_size2str(params[0].value[1], 2);
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 20,
|
||||
data: [
|
||||
{name: '发送', icon: 'rect'},
|
||||
{name: '接收', icon: 'rect'}
|
||||
]
|
||||
},
|
||||
xAxis: axis_time_cfg,
|
||||
yAxis: axis_size_cfg,
|
||||
series: [
|
||||
{
|
||||
name: '接收',
|
||||
type: 'line', smooth: true, symbol: 'none', stack: 'a', showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: $app.bar_net_recv
|
||||
},
|
||||
{
|
||||
name: '发送', type: 'line', smooth: true, symbol: 'none', stack: 'b', showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {width: 1}
|
||||
},
|
||||
data: $app.bar_net_sent
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//=====================================
|
||||
// Disk IO
|
||||
//=====================================
|
||||
|
||||
$app.bar_disk_read = [];
|
||||
$app.bar_disk_write = [];
|
||||
for (i = 0; i < data.length; i++) {
|
||||
$app.bar_disk_read.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].disk.r]});
|
||||
$app.bar_disk_write.push({name: tp_format_datetime_ms(tp_utc2local_ms(data[i].t), 'HH:mm:ss'), value: [data[i].t, data[i].disk.w]});
|
||||
}
|
||||
|
||||
var clr_disk_read = '#558c5a';
|
||||
var clr_disk_write = '#e2524c';
|
||||
|
||||
$app.bar_disk = echarts.init(document.getElementById('bar-disk'));
|
||||
$app.bar_disk.setOption({
|
||||
title: {
|
||||
text: '磁盘读写',
|
||||
left: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
useUTC: true,
|
||||
color: [clr_disk_read, clr_disk_write],
|
||||
grid: grid_cfg,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br/>' + params[1].seriesName + ': ' + tp_size2str(params[1].value[1], 2) + '<br/>' + params[0].seriesName + ': ' + tp_size2str(params[0].value[1], 2);
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 20,
|
||||
data: [
|
||||
{name: '读取', icon: 'rect'},
|
||||
{name: '写入', icon: 'rect'}
|
||||
]
|
||||
},
|
||||
xAxis: axis_time_cfg,
|
||||
yAxis: axis_size_cfg,
|
||||
series: [
|
||||
{
|
||||
name: '读取',
|
||||
type: 'line', smooth: true, symbol: 'none', stack: 'a', showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: $app.bar_disk_read
|
||||
},
|
||||
{
|
||||
name: '写入', type: 'line', smooth: true, symbol: 'none', stack: 'b', showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {width: 1}
|
||||
},
|
||||
data: $app.bar_disk_write
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$app.init_ws = function () {
|
||||
|
|
@ -263,19 +434,50 @@ $app.init_ws = function () {
|
|||
|
||||
if (t.method === 'subscribe' && t.param === 'sys_status') {
|
||||
$app.bar_cpu_user.shift();
|
||||
$app.bar_cpu_user.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, t.data.c.u]});
|
||||
$app.bar_cpu_user.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.cpu.u]});
|
||||
$app.bar_cpu_sys.shift();
|
||||
$app.bar_cpu_sys.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, t.data.c.s]});
|
||||
$app.bar_cpu_sys.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.cpu.s]});
|
||||
$app.bar_cpu.setOption(
|
||||
{series: [{data: $app.bar_cpu_sys}, {data: $app.bar_cpu_user}]}
|
||||
);
|
||||
|
||||
$app.bar_mem_used.shift();
|
||||
$app.bar_mem_used.push({name: tp_format_datetime(tp_utc2local(t.data.t), 'HH:mm:ss'), value: [tp_utc2local(t.data.t) * 1000, Math.round(t.data.m.u / t.data.m.t * 100, 2)]});
|
||||
$app.bar_mem_used.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, Math.round(t.data.mem.u / t.data.mem.t * 100, 2)]});
|
||||
$app.bar_mem.setOption(
|
||||
{series: [{data: $app.bar_mem_used}]}
|
||||
);
|
||||
|
||||
$app.bar_net_recv.shift();
|
||||
$app.bar_net_recv.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.net.r]});
|
||||
$app.bar_net_sent.shift();
|
||||
$app.bar_net_sent.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.net.s]});
|
||||
$app.bar_net.setOption(
|
||||
{series: [{data: $app.bar_net_recv}, {data: $app.bar_net_sent}]}
|
||||
);
|
||||
|
||||
$app.bar_disk_read.shift();
|
||||
$app.bar_disk_read.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.disk.r]});
|
||||
$app.bar_disk_write.shift();
|
||||
$app.bar_disk_write.push({name: tp_format_datetime_ms(tp_utc2local_ms(t.data.t), 'HH:mm:ss'), value: [t.data.t, t.data.disk.w]});
|
||||
$app.bar_disk.setOption(
|
||||
{series: [{data: $app.bar_disk_read}, {data: $app.bar_disk_write}]}
|
||||
);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
$app.on_screen_resize = function () {
|
||||
// console.log('avail width:', screen.availWidth, 'avail height:', screen.availHeight);
|
||||
// console.log('page width:', $(document).width(), 'page height:', $(document).height());
|
||||
// console.log('window width:', $(window).width(), 'window height:', $(window).height());
|
||||
// console.log('client width:', $(window).innerWidth(), 'client height:', $(window).innerHeight());
|
||||
|
||||
// var win = window, d = document, e = d.documentElement, b = d.getElementsByTagName('body')[0],
|
||||
// w = win.innerWidth || e.clientWidth || b.clientWidth,
|
||||
// h = win.innerHeight || e.clientHeight || b.clientHeight;
|
||||
|
||||
$app.bar_cpu.resize({width: 'auto', height: 'auto'});
|
||||
$app.bar_mem.resize({width: 'auto', height: 'auto'});
|
||||
$app.bar_net.resize({width: 'auto', height: 'auto'});
|
||||
$app.bar_disk.resize({width: 'auto', height: 'auto'});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -128,12 +128,17 @@ function tp_get_cookie(name) {
|
|||
}
|
||||
|
||||
function tp_utc2local(timestamp) {
|
||||
//console.log('utc_to_local:', timestamp);
|
||||
var d = new Date(timestamp * 1000);
|
||||
var _local = d.getTime() - (d.getTimezoneOffset() * 60000);
|
||||
return Math.round(_local / 1000);
|
||||
}
|
||||
|
||||
function tp_utc2local_ms(timestamp) {
|
||||
var d = new Date(timestamp);
|
||||
var _local = d.getTime() - (d.getTimezoneOffset() * 60000);
|
||||
return Math.round(_local);
|
||||
}
|
||||
|
||||
function tp_local2utc(timestamp) {
|
||||
var ts = timestamp || Math.floor(Date.now() / 1000);
|
||||
var d = new Date(ts * 1000);
|
||||
|
|
@ -141,8 +146,8 @@ function tp_local2utc(timestamp) {
|
|||
return Math.round(_utc / 1000);
|
||||
}
|
||||
|
||||
function tp_format_datetime(timestamp, format) {
|
||||
var d = new Date(timestamp * 1000);
|
||||
function tp_format_datetime_ms(timestamp, format) {
|
||||
var d = new Date(timestamp);
|
||||
//return '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
|
||||
|
||||
var fmt = format || 'yyyy-MM-dd HH:mm:ss';
|
||||
|
|
@ -168,6 +173,10 @@ function tp_format_datetime(timestamp, format) {
|
|||
return fmt;
|
||||
}
|
||||
|
||||
function tp_format_datetime(timestamp, format) {
|
||||
return tp_format_datetime_ms(timestamp * 1000, format);
|
||||
}
|
||||
|
||||
var base64KeyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||
|
||||
function tp_base64_encode(input) {
|
||||
|
|
@ -300,20 +309,20 @@ function tp_gen_password(len) {
|
|||
var have_CHAR = false;
|
||||
var have_char = false;
|
||||
var have_num = false;
|
||||
for(;;) {
|
||||
for (; ;) {
|
||||
ret = '';
|
||||
for (i = 0; i < len; i++) {
|
||||
var idx = Math.floor(Math.random() * _chars.length);
|
||||
if(idx === 0)
|
||||
if (idx === 0)
|
||||
have_CHAR = true;
|
||||
else if(idx === 1)
|
||||
else if (idx === 1)
|
||||
have_char = true;
|
||||
else
|
||||
have_num = true;
|
||||
ret += _chars[idx].charAt(Math.floor(Math.random() * _chars_len[idx]));
|
||||
}
|
||||
|
||||
if(have_CHAR && have_char && have_num)
|
||||
if (have_CHAR && have_char && have_num)
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,142 +24,6 @@
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// dashboard
|
||||
//.widget {
|
||||
// overflow: hidden;
|
||||
// border-radius: 3px;
|
||||
// padding: 15px;
|
||||
// margin-bottom: 20px;
|
||||
// color: #fff;
|
||||
//
|
||||
// &.widget-stats {
|
||||
// position: relative;
|
||||
// }
|
||||
//
|
||||
// .stats-icon {
|
||||
// font-size: 52px;
|
||||
// top: 12px;
|
||||
// right: 21px;
|
||||
// width: 56px;
|
||||
// height: 56px;
|
||||
// text-align: center;
|
||||
// line-height: 56px;
|
||||
// margin-left: 15px;
|
||||
// color: #fff;
|
||||
// position: absolute;
|
||||
// opacity: .2;
|
||||
// }
|
||||
// .stats-title {
|
||||
// color: #fff;
|
||||
// color: rgba(255, 255, 255, .6);
|
||||
// }
|
||||
// .stats-split {
|
||||
// height: 2px;
|
||||
// margin: 0 -15px 10px;
|
||||
// background: rgba(0, 0, 0, .2);
|
||||
// }
|
||||
// .stats-content {
|
||||
// font-size: 24px;
|
||||
// font-weight: 300;
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
// .stats-desc {
|
||||
// display: inline-block;
|
||||
// color: #fff;
|
||||
// color: rgba(255, 255, 255, .6);
|
||||
// }
|
||||
// .stats-action {
|
||||
// display: inline-block;
|
||||
// float: right;
|
||||
// }
|
||||
//
|
||||
// a {
|
||||
// color: #eee;
|
||||
// color: rgba(255, 255, 255, .7);
|
||||
// &:hover {
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &.widget-info {
|
||||
// background-color: @color-bg-info;
|
||||
// }
|
||||
// &.widget-primary {
|
||||
// background-color: @color-bg-primary;
|
||||
// }
|
||||
//
|
||||
// &.widget-success {
|
||||
// background-color: @color-bg-success;
|
||||
// }
|
||||
// &.widget-warning {
|
||||
// background-color: @color-bg-warning;
|
||||
// }
|
||||
// &.widget-danger {
|
||||
// background-color: @color-bg-danger;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.panel {
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// border-radius: 3px;
|
||||
//
|
||||
// .panel-heading {
|
||||
// padding: 6px 15px;
|
||||
// color: #fff;
|
||||
// // border-bottom-width: 2px;
|
||||
// // border-bottom-color: rgba(0, 0, 0, .2);
|
||||
//
|
||||
// .panel-title {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .panel-heading-btn {
|
||||
// float: right;
|
||||
//
|
||||
// .btn {
|
||||
// display: inline-block;
|
||||
// padding: 0;
|
||||
// border: none;
|
||||
// text-align: center;
|
||||
//
|
||||
// &.btn-xs {
|
||||
// width: 18px;
|
||||
// height: 18px;
|
||||
// line-height: 18px;
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// &.btn-circle {
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.place-holder-h200 {
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
// background-color: #eee;
|
||||
// border: 1px solid #ccc;
|
||||
// line-height: 200px;
|
||||
// text-align: center;
|
||||
//}
|
||||
//
|
||||
//.dashboard-panel2-holder {
|
||||
// width: 100%;
|
||||
// height: 1150px;
|
||||
// background-color: #eee;
|
||||
// border: 1px solid #ccc;
|
||||
// line-height: 200px;
|
||||
// text-align: center;
|
||||
//}
|
||||
//
|
||||
//.dashboard-panel-time {
|
||||
// color: #cecece;
|
||||
//}
|
||||
//
|
||||
|
||||
|
||||
.stats {
|
||||
overflow: hidden;
|
||||
//padding: 15px;
|
||||
|
|
@ -279,7 +143,7 @@
|
|||
|
||||
&.stats-bar {
|
||||
position: relative;
|
||||
height: 280px;
|
||||
height: 200px;
|
||||
padding:8px;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
|
|
@ -287,14 +151,15 @@
|
|||
//padding-left: 100px;
|
||||
}
|
||||
|
||||
.stats-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
//color: #1f1f1f;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
//.stats-name {
|
||||
// font-size: 14px;
|
||||
// font-weight: 500;
|
||||
// //color: #1f1f1f;
|
||||
// color: rgba(0, 0, 0, 0.6);
|
||||
//}
|
||||
.stats-value {
|
||||
margin-top: 5px;
|
||||
height: 180px;
|
||||
//color: #000000;
|
||||
//color: rgba(0, 0, 0, 0.6);
|
||||
//font-size: 48px;
|
||||
|
|
|
|||
|
|
@ -70,13 +70,13 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="stats stats-bar">
|
||||
<div class="stats-value" id="bar-cpu" style="height:180px;">
|
||||
<div class="stats-value" id="bar-cpu">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="stats stats-bar">
|
||||
<div class="stats-value" id="bar-mem" style="height:180px;">
|
||||
<div class="stats-value" id="bar-mem">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,15 +85,13 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="stats stats-bar">
|
||||
<div class="stats-name">网络流量</div>
|
||||
<div class="stats-value">
|
||||
<div class="stats-value" id="bar-net">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="stats stats-bar">
|
||||
<div class="stats-name">网络连接</div>
|
||||
<div class="stats-value">
|
||||
<div class="stats-value" id="bar-disk">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
|
||||
import time
|
||||
import datetime
|
||||
import threading
|
||||
import psutil
|
||||
import json
|
||||
|
||||
from app.base.logger import log
|
||||
from app.base.utils import tp_timestamp_utc_now
|
||||
from app.base.utils import tp_timestamp_utc_now, tp_utc_timestamp_ms
|
||||
from app.controller.ws import tp_wss
|
||||
from app.base.cron import tp_corn
|
||||
|
||||
|
|
@ -31,18 +25,18 @@ class TPSysStatus(object):
|
|||
self._net_sent = 0
|
||||
|
||||
def init(self):
|
||||
t = tp_timestamp_utc_now() - 10 * 60
|
||||
t = tp_utc_timestamp_ms() - 10 * 60 * 1000
|
||||
cnt = int((10 * 60 + self._INTERVAL - 1) / self._INTERVAL)
|
||||
for i in range(cnt):
|
||||
val = {
|
||||
't': t,
|
||||
'c': {'u': 0, 's': 0},
|
||||
'm': {'u': 1, 't': 100},
|
||||
'd': {'r': 0, 'w': 0},
|
||||
'n': {'r': 0, 's': 0}
|
||||
'cpu': {'u': 0, 's': 0},
|
||||
'mem': {'u': 1, 't': 100},
|
||||
'disk': {'r': 0, 'w': 0},
|
||||
'net': {'r': 0, 's': 0}
|
||||
}
|
||||
self._history.append(val)
|
||||
t += self._INTERVAL
|
||||
t += self._INTERVAL*1000
|
||||
|
||||
psutil.cpu_times_percent()
|
||||
net = psutil.net_io_counters(pernic=False)
|
||||
|
|
@ -57,20 +51,15 @@ class TPSysStatus(object):
|
|||
return True
|
||||
|
||||
def _check_status(self):
|
||||
# time.sleep(self._interval)
|
||||
val = {'t': tp_timestamp_utc_now()}
|
||||
val = {'t': tp_utc_timestamp_ms()}
|
||||
|
||||
cpu = psutil.cpu_times_percent()
|
||||
# print(int(cpu.user * 100), int(cpu.system * 100))
|
||||
val['c'] = {'u': cpu.user, 's': cpu.system}
|
||||
#
|
||||
val['cpu'] = {'u': cpu.user, 's': cpu.system}
|
||||
|
||||
mem = psutil.virtual_memory()
|
||||
val['m'] = {'u': mem.used, 't': mem.total}
|
||||
# print(mem.total, mem.used, int(mem.used * 100 / mem.total))
|
||||
val['mem'] = {'u': mem.used, 't': mem.total}
|
||||
|
||||
disk = psutil.disk_io_counters(perdisk=False)
|
||||
# val['d'] = {'r': disk.read_byes, 'w': disk.write_bytes}
|
||||
# print(disk.read_bytes, disk.write_bytes)
|
||||
_read = disk.read_bytes - self._disk_read
|
||||
_write = disk.write_bytes - self._disk_write
|
||||
self._disk_read = disk.read_bytes
|
||||
|
|
@ -80,8 +69,7 @@ class TPSysStatus(object):
|
|||
_read = 0
|
||||
if _write < 0:
|
||||
_write = 0
|
||||
val['d'] = {'r': int(_read / self._INTERVAL), 'w': int(_write / self._INTERVAL)}
|
||||
# print(int(_read / self._interval), int(_write / self._interval))
|
||||
val['disk'] = {'r': int(_read / self._INTERVAL), 'w': int(_write / self._INTERVAL)}
|
||||
|
||||
net = psutil.net_io_counters(pernic=False)
|
||||
_recv = net.bytes_recv - self._net_recv
|
||||
|
|
@ -95,8 +83,7 @@ class TPSysStatus(object):
|
|||
_recv = 0
|
||||
if _sent < 0:
|
||||
_sent = 0
|
||||
val['n'] = {'r': int(_recv / self._INTERVAL), 's': int(_sent / self._INTERVAL)}
|
||||
# print(int(_recv / self._interval), int(_sent / self._interval))
|
||||
val['net'] = {'r': int(_recv / self._INTERVAL), 's': int(_sent / self._INTERVAL)}
|
||||
|
||||
self._history.pop(0)
|
||||
self._history.append(val)
|
||||
|
|
|
|||
|
|
@ -169,6 +169,10 @@ def tp_timestamp_utc_now():
|
|||
return int(datetime.datetime.utcnow().timestamp())
|
||||
|
||||
|
||||
def tp_utc_timestamp_ms():
|
||||
return int(datetime.datetime.utcnow().timestamp()*1000)
|
||||
|
||||
|
||||
def tp_bytes2string(b, encode='utf8'):
|
||||
for c in range(len(b)):
|
||||
if b[c] == 0:
|
||||
|
|
|
|||
Loading…
Reference in New Issue