删除监控界面

pull/65/head
fengshuonan 4 years ago
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…
Cancel
Save