mirror of https://gitee.com/stylefeng/guns
parent
15cd3273be
commit
f6664c3869
@ -1,171 +0,0 @@
|
||||
function initGraph(params){
|
||||
const paramsId = echarts.init(document.getElementById(params.id), myEchartsTheme);
|
||||
let metricData = params.metric;
|
||||
const option = {
|
||||
title: {
|
||||
text: params.id,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (params.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + params.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: params.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (params.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name : params.id,
|
||||
data: metricData,
|
||||
areaStyle: { // 折现下是否填充
|
||||
color: this.color,
|
||||
opacity: 0.6
|
||||
},
|
||||
showSymbol: false}],
|
||||
};
|
||||
paramsId.setOption(option);
|
||||
}
|
||||
|
||||
// 初始化三个数据指标
|
||||
function initMultiGraph(multiParams){
|
||||
const multiParamsId = echarts.init(document.getElementById(multiParams.id), myEchartsTheme);
|
||||
let metricData = multiParams.metric;
|
||||
const option = {
|
||||
title: { text: multiParams.title, x: 'center' },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (multiParams.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + multiParams.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:"8%",
|
||||
formatter: function (name) {
|
||||
return name;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: multiParams.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (multiParams.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#63BAC9',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric1.name,
|
||||
data: metricData.metric1.value,
|
||||
areaStyle: {
|
||||
color: '#1D292D',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false},
|
||||
{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#B29943',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric2.name,
|
||||
data: metricData.metric2.value,
|
||||
areaStyle: {
|
||||
color: '#313830',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false},
|
||||
{type : 'line',
|
||||
smooth: true,
|
||||
lineStyle : {
|
||||
color: '#7CA76D',
|
||||
width : 2,
|
||||
type : 'solid',
|
||||
},
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name: metricData.metric3.name,
|
||||
data: metricData.metric3.value,
|
||||
areaStyle: {
|
||||
color: '#394437',
|
||||
opacity: 0.2
|
||||
},
|
||||
smoothMonotone: 'x',
|
||||
showSymbol: false}]
|
||||
};
|
||||
multiParamsId.setOption(option);
|
||||
}
|
@ -1,223 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Eden Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Old Gen" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="PS Survivor Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Code Cache" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Compressed Class Space" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Metaspace" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Classes Loaded" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="mapped" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="direct" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Threads" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const ids = ["PS Eden Space","PS Old Gen","PS Survivor Space","Code Cache","Compressed Class Space","Metaspace"]
|
||||
const baseUrl = "/view/monitor/getJvmInfo";
|
||||
// heap&nonheap echarts series
|
||||
for (let i=0;i<ids.length;i++){
|
||||
let id = ids[i];
|
||||
let heapParams;
|
||||
if (i>2) {
|
||||
heapParams = {
|
||||
dataObj: {
|
||||
'id':id,
|
||||
'area': 'nonheap'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
heapParams = {
|
||||
dataObj: {
|
||||
'id':id,
|
||||
'area': 'heap'
|
||||
}
|
||||
}
|
||||
}
|
||||
let request = new HttpRequest(baseUrl, 'get',function (data){
|
||||
let echartsParams={
|
||||
id : id,
|
||||
title : id,
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Used',
|
||||
value: data.jvm_memory_used_bytes
|
||||
},
|
||||
metric2: {
|
||||
name: 'Committed',
|
||||
value: data.jvm_memory_committed_bytes
|
||||
},
|
||||
metric3: {
|
||||
name: 'Max',
|
||||
value: data.jvm_memory_max_bytes
|
||||
}
|
||||
},
|
||||
unit: 'MB'
|
||||
}
|
||||
initMultiGraph(echartsParams);
|
||||
})
|
||||
request.dataObject = heapParams.dataObj;
|
||||
request.setAsync(true);
|
||||
request.start();
|
||||
}
|
||||
let clazzLoadRequest = new HttpRequest(baseUrl, 'get',function (clazzLoadData) {
|
||||
let clazzLoadParams = {
|
||||
id: 'Classes Loaded',
|
||||
metric: clazzLoadData.jvm_classes_loaded_classes
|
||||
}
|
||||
initGraph(clazzLoadParams);
|
||||
})
|
||||
clazzLoadRequest.setAsync(true);
|
||||
clazzLoadRequest.start();
|
||||
const bfIds = ['mapped','direct'];
|
||||
for (let i=0;i<bfIds.length;i++){
|
||||
let id = bfIds[i];
|
||||
let bfRequest = new HttpRequest(baseUrl, 'get',function (bfData) {
|
||||
let bfParams = {
|
||||
id: id,
|
||||
title: id+' Buffers',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Used Bytes',
|
||||
value: bfData.jvm_buffer_memory_used_bytes
|
||||
},
|
||||
metric2: {
|
||||
name: 'Capacity Bytes',
|
||||
value: bfData.jvm_buffer_total_capacity_bytes
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
},
|
||||
unit: 'MB'
|
||||
}
|
||||
}
|
||||
initMultiGraph(bfParams);
|
||||
})
|
||||
bfRequest.dataObject = {
|
||||
'id': id
|
||||
};
|
||||
bfRequest.setAsync(true);
|
||||
bfRequest.start();
|
||||
}
|
||||
let threadRequest = new HttpRequest(baseUrl, 'get',function (threadData) {
|
||||
let threadParams = {
|
||||
id: 'Threads',
|
||||
title: 'Threads',
|
||||
metric: {
|
||||
metric1: {
|
||||
name: 'Daemon',
|
||||
value: threadData.jvm_threads_daemon_threads
|
||||
},
|
||||
metric2: {
|
||||
name: 'Live',
|
||||
value: threadData.jvm_threads_live_threads
|
||||
},
|
||||
metric3: {
|
||||
name: 'Peak',
|
||||
value: threadData.jvm_threads_peak_threads
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(threadParams)
|
||||
})
|
||||
threadRequest.setAsync(true);
|
||||
threadRequest.start();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="info logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="error logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="warn logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="debug logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="trace logs" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const levels = ["info","error","warn","debug","trace"]
|
||||
const logbackUrl = "/view/monitor/getLogbackInfo";
|
||||
for (let i=0;i<levels.length;i++){
|
||||
let level = levels[i];
|
||||
let request = new HttpRequest(logbackUrl, 'get',function (data){
|
||||
console.log(data)
|
||||
let echartsParams = {
|
||||
id: level+" logs",
|
||||
metric: data.logback_events_total
|
||||
}
|
||||
initGraph(echartsParams);
|
||||
})
|
||||
request.dataObject = {
|
||||
level: level,
|
||||
isRate: 'irate',
|
||||
rateMetric: 'logback_events_total'
|
||||
};
|
||||
request.setAsync(true);
|
||||
request.start();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,134 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Process Open Files" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="CPU Usage" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="Load Average" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const cpuUrl = "/view/monitor/getCpuInfo";
|
||||
let cpuRequest = new HttpRequest(cpuUrl, 'get',function (cpuData) {
|
||||
let cpuParams = {
|
||||
id: 'CPU Usage',
|
||||
title: 'CPU Usage',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'System CPU Usage',
|
||||
value: cpuData.system_cpu_usage
|
||||
},
|
||||
metric2: {
|
||||
name: 'Process CPU Usage',
|
||||
value: cpuData.process_cpu_usage
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(cpuParams);
|
||||
})
|
||||
cpuRequest.setAsync(true);
|
||||
cpuRequest.start();
|
||||
|
||||
const loadUrl = "/view/monitor/getLoadInfo";
|
||||
let loadRequest = new HttpRequest(loadUrl, 'get',function (loadData) {
|
||||
let loadParams = {
|
||||
id: 'Load Average',
|
||||
title: 'Load Average',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Load Average [1m]',
|
||||
value: loadData.system_load_average_1m
|
||||
},
|
||||
metric2: {
|
||||
name: 'CPU Core Size',
|
||||
value: loadData.system_cpu_count
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(loadParams);
|
||||
})
|
||||
loadRequest.setAsync(true);
|
||||
loadRequest.start();
|
||||
|
||||
const processUrl = "/view/monitor/getProcessInfo";
|
||||
let processRequest = new HttpRequest(processUrl, 'get',function (processData) {
|
||||
let processParams = {
|
||||
id: 'Process Open Files',
|
||||
title: 'Process Open Files',
|
||||
metric : {
|
||||
metric1: {
|
||||
name: 'Open Files',
|
||||
value: processData.process_files_open_files
|
||||
},
|
||||
metric2: {
|
||||
name: 'Max Files',
|
||||
value: processData.process_files_max_files
|
||||
},
|
||||
metric3: {
|
||||
name: '',
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
initMultiGraph(processParams);
|
||||
})
|
||||
processRequest.setAsync(true);
|
||||
processRequest.start();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,187 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>${constants.getSystemName()}</title>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}" media="all"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="currentSession" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="maxSession" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="maxSeconds" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15" >
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="createTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="rejectTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="expiredTotal" style="width: 100%;min-height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js部分 -->
|
||||
@/* 加入contextPath属性和session超时的配置 */
|
||||
<script type="text/javascript">
|
||||
var Feng = {
|
||||
ctxPath: "${ctxPath}",
|
||||
version: '${constants.getReleaseVersion()}'
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script src="${ctxPath}/assets/common/js/echartInit.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','HttpRequest'], function () {
|
||||
const $ = layui.jquery;
|
||||
let HttpRequest = layui.HttpRequest;
|
||||
const tomcatBaseUrl = "/view/monitor/getTomcatInfo";
|
||||
let tomcatRequest = new HttpRequest(tomcatBaseUrl, 'get',function (data) {
|
||||
console.log(data)
|
||||
let currentParams = {
|
||||
id: 'currentSession',
|
||||
title : 'Current Sessions',
|
||||
metric: data.tomcat_sessions_active_current_sessions
|
||||
}
|
||||
initGraph1(currentParams);
|
||||
let maxParams = {
|
||||
id: 'maxSession',
|
||||
title : 'Max Sessions',
|
||||
metric: data.tomcat_sessions_active_max_sessions
|
||||
}
|
||||
initGraph1(maxParams);
|
||||
let msParams = {
|
||||
id: 'maxSeconds',
|
||||
title : 'Max Seconds',
|
||||
metric: data.tomcat_sessions_alive_max_seconds
|
||||
}
|
||||
initGraph1(msParams);
|
||||
let ctParams = {
|
||||
id: 'createTotal',
|
||||
title : 'Total Create',
|
||||
metric: data.tomcat_sessions_created_sessions_total
|
||||
}
|
||||
initGraph1(ctParams);
|
||||
let rtParams = {
|
||||
id: 'rejectTotal',
|
||||
title : 'Total Reject',
|
||||
metric: data.tomcat_sessions_rejected_sessions_total
|
||||
}
|
||||
initGraph1(rtParams);
|
||||
let exParams = {
|
||||
id: 'expiredTotal',
|
||||
title : 'Total Expired',
|
||||
metric: data.tomcat_sessions_expired_sessions_total
|
||||
}
|
||||
initGraph1(exParams);
|
||||
})
|
||||
tomcatRequest.setAsync(true);
|
||||
tomcatRequest.start();
|
||||
|
||||
function initGraph1(params) {
|
||||
const paramsId = echarts.init(document.getElementById(params.id), myEchartsTheme);
|
||||
let metricData = params.metric;
|
||||
const option = {
|
||||
title: {
|
||||
text: params.id,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas){
|
||||
let res;
|
||||
datas.map(function (e,i) {
|
||||
if (res == undefined){
|
||||
let datetime = new Date(e.value[0]*1000);
|
||||
res = datetime.getUTCFullYear().toString()+'-'+datetime.getUTCMonth().toString()+'-'+datetime.getUTCDate().toString()+' '+datetime.getHours().toString()+':'+ datetime.getMinutes().toString() + ':' + datetime.getSeconds().toString() + '<br/>'
|
||||
}
|
||||
if (params.unit === 'MB' && e.value[1]>0){
|
||||
res += e.marker +" " + e.seriesName + ' : ' + (e.value[1]/1000/1000).toFixed(2) + params.unit + '<br/>'
|
||||
} else {
|
||||
res += e.marker +" " + e.seriesName + ' : ' + e.value[1] + '<br/>'
|
||||
}
|
||||
})
|
||||
return res;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
let datetime = new Date(value*1000)
|
||||
return datetime.getHours().toString()+':'+ datetime.getMinutes().toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: params.unit,
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
formatter: function(value,index){
|
||||
if (params.unit == 'MB' && value>0){
|
||||
return value/1000/1000
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{type : 'line',
|
||||
smooth: true,
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticOut',
|
||||
name : params.id,
|
||||
data: metricData,
|
||||
areaStyle: { // 折现下是否填充
|
||||
color: this.color,
|
||||
opacity: 0.6
|
||||
},
|
||||
showSymbol: false}],
|
||||
};
|
||||
paramsId.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in new issue