<!DOCTYPE html>
|
<html>
|
<head>
|
<title th:text="${application.wgName}">TSSW监控系统</title>
|
<div th:replace="common/header.html"></div>
|
|
|
|
</head>
|
<body class="hold-transition sidebar-mini layout-fixed">
|
|
<div class="wrapper">
|
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper" style="margin-left: 10px">
|
<!-- Content Header (Page header) -->
|
<div class="content-header">
|
<div class="container-fluid">
|
<div class="row mb-2">
|
<div class="col-sm-6">
|
<a href="javascript:location.reload();">
|
<img th:src="${application.logoUrl}"style="height:25px;width:25px;opacity: .8" class="brand-image img-circle elevation-3"> <span style="vertical-align:bottom;" th:text="${application.wgName}">WGCLOUD</span>
|
</a>
|
</div>
|
<div class="col-sm-6">
|
<ol class="breadcrumb float-sm-right">
|
<li class="breadcrumb-item ">
|
<span style="cursor:pointer;margin-right: 10px" title="当前已关闭页面告警声音提示，点击可开启" value="1" data-toggle="dropdown" onclick="javascript:playSound(this);">
|
<i style="font-size:0.95rem;" class="far fa-bell-slash"></i>
|
</span>
|
</li>
|
<li class="breadcrumb-item active">监控概要</li>
|
<li class="breadcrumb-item "><a href="/tssw/systemInfo/systemInfoList?dashView=1">主机列表</a></li>
|
<!--<li class="breadcrumb-item active"><a target="_blank" href="https://www.wgstart.com/elasticsearch-head/index.html">ES监控工具</a></li>-->
|
</ol>
|
</div><!-- /.col -->
|
<!-- <div class="col-sm-6">
|
<ol class="breadcrumb float-sm-right">
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
<li class="breadcrumb-item active">Dashboard v1</li>
|
</ol>
|
</div>--><!-- /.col -->
|
</div><!-- /.row -->
|
</div><!-- /.container-fluid -->
|
</div>
|
<!-- /.content-header -->
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="container-fluid">
|
<!-- Small boxes (Stat box) -->
|
|
|
<!-- Small boxes (Stat box) -->
|
<div class="row">
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${downAppSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${downAppSize <= 0}">
|
<div class="small-box bg-info">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${downAppSize}">0</font>/<span th:text="${totalSizeApp}">1</span></h3>
|
|
<p>监控进程</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/jincheng.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${downDockerSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${downDockerSize <= 0}">
|
<div class="small-box bg-olive">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${downDockerSize}">0</font>/<span th:text="${dockerSize}">1</span></h3>
|
|
|
<p>DOCKER</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/docker.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${dbInfoDownSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${dbInfoDownSize <= 0}">
|
<div class="small-box bg-info">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${dbInfoDownSize}">0</font>/<span th:text="${dbInfoSize}">1</span></h3>
|
|
|
<p>数据源</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/db.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${dceDownSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${dceDownSize <= 0}">
|
<div class="small-box bg-info">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${dceDownSize}">0</font>/<span th:text="${dceSize}">1</span></h3>
|
|
<p>数通PING设备</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/yun.png"/></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- /.row -->
|
|
<!-- Small boxes (Stat box) -->
|
<div class="row">
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<div class="small-box bg-info">
|
<div class="inner">
|
<h3 th:text="${fileWarnSize}"></h3>
|
|
<p>日志监控</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/log.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${heatherrSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${heatherrSize <= 0}">
|
<div class="small-box bg-info">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${heatherrSize}">0</font>/<span th:text="${heathSize}">1</span></h3>
|
|
|
<p>服务接口</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/api.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${hostDownSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${hostDownSize <= 0}">
|
<div class="small-box bg-purple">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${hostDownSize}">0</font>/<span th:text="${totalSystemInfoSize}">1</span></h3>
|
|
|
<p>监控主机</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/pc.png"/></i>
|
</div>
|
</div>
|
</div>
|
<!-- ./col -->
|
<!-- ./col -->
|
<div class="col-lg-3 col-6">
|
<!-- small box -->
|
<th:block th:if="${portDownSize > 0}">
|
<div class="small-box bg-maroon">
|
</th:block>
|
<th:block th:if="${portDownSize <= 0}">
|
<div class="small-box bg-success">
|
</th:block>
|
<div class="inner" title="已下线/总数量">
|
<h3><font color="#DCDCDC" th:text="${portDownSize}">0</font>/<span th:text="${portSize}">1</span></h3>
|
|
<p>端口监控</p>
|
</div>
|
<div class="icon">
|
<i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/tssw/static/images/telnet.png"/></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- /.row -->
|
|
<div class="row mb-2">
|
<div class="col-sm-12" style="font-weight: 500">当前所有主机最近5分钟状态，下行传输速率：
|
最高<span class="description-percentage text-danger" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-down"></i> <span th:text="${maxRxbyt}">18</span></span>
|
平均<span class="description-percentage text-warning" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-left"></i> <span th:text="${avgRxbyt}">0</span></span>
|
最低<span class="description-percentage text-success" style="margin-left:5px;margin-right:30px;"><i class="fas fa-caret-up"></i> <span th:text="${minRxbyt}">17</span></span>
|
上行传输速率：最高<span class="description-percentage text-danger" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-down"></i> <span th:text="${maxTxbyt}"></span></span>
|
平均<span class="description-percentage text-warning" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-left"></i> <span th:text="${avgTxbyt}">0</span></span>
|
最低<span class="description-percentage text-success" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-up"></i> <span th:text="${minTxbyt}">17</span></span></div>
|
</div>
|
|
<div class="row mb-2">
|
<div class="col-sm-12" style="font-weight: 500">当前所有主机最近5分钟状态，5分钟系统负载：
|
最高<span class="description-percentage text-danger" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-down"></i> <span th:text="${maxFiveLoad}">18</span></span>
|
平均<span class="description-percentage text-warning" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-left"></i> <span th:text="${avgFiveLoad}">0</span></span>
|
最低<span class="description-percentage text-success" style="margin-left:5px;margin-right:30px;"><i class="fas fa-caret-up"></i> <span th:text="${minFiveLoad}">17</span></span>
|
15分钟系统负载：最高<span class="description-percentage text-danger" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-down"></i> <span th:text="${maxFifteenLoad}"></span></span>
|
平均<span class="description-percentage text-warning" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-left"></i> <span th:text="${avgFifteenLoad}">0</span></span>
|
最低<span class="description-percentage text-success" style="margin-left:5px;margin-right:10px;"><i class="fas fa-caret-up"></i> <span th:text="${minFifteenLoad}">17</span></span></div>
|
</div>
|
<div class="row">
|
<!-- Left col -->
|
<section class="col-lg-5 connectedSortable" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="top" data-content="当前所有主机最近5分钟内存状态">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div id="chartMemInfo"></div>
|
<!-- /.card -->
|
</section>
|
<section class="col-lg-2 connectedSortable">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div style="font-weight: 500"><p><p>内存总和：<span class="description-percentage text-danger"><span th:text="${memSum}">18</span>G</span><p>
|
CPU核数总和：<span class="description-percentage text-danger"><span th:text="${cpuCoresSum}">18</span></span><p>
|
<span data-trigger="hover" data-container="body" data-toggle="popover" data-placement="top" data-content="每小时统计一次">磁盘容量总和</span>：<span class="description-percentage text-danger"><span th:text="${application.sumDiskSizeCache}">18</span></span></div>
|
<!-- /.card -->
|
</section>
|
<section class="col-lg-5 connectedSortable" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="top" data-content="当前所有主机最近5分钟CPU状态">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div id="chartCpuInfo"></div>
|
<!-- /.card -->
|
</section>
|
</div>
|
|
<!-- Main row -->
|
<div class="row">
|
<!-- Left col -->
|
<section class="col-lg-4 connectedSortable">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div id="chartInfoList1"></div>
|
<!-- /.card -->
|
</section>
|
<section class="col-lg-4 connectedSortable">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div id="chartInfoHuantu"></div>
|
<!-- /.card -->
|
</section>
|
<section class="col-lg-4 connectedSortable">
|
<!-- Custom tabs (Charts with tabs)-->
|
<div id="chartInfoList2"></div>
|
<!-- /.card -->
|
</section>
|
|
</div>
|
|
<!-- Main row -->
|
<div class="row" th:if="${not #lists.isEmpty(dbTableList)}">
|
|
<section class="col-lg-12 connectedSortable ui-sortable">
|
<div id="dbTableList"> </div>
|
</section>
|
</div>
|
|
|
</div><!-- /.container-fluid -->
|
</section>
|
<!-- /.content -->
|
</div>
|
<div th:replace="common/chart.html"></div>
|
<div th:replace="common/footerDashView.html"></div>
|
|
</div>
|
<!-- ./wrapper -->
|
|
|
<script th:inline="javascript">
|
|
const data1 = [[${chartInfoList1}]];
|
const data2 = [[${chartInfoList2}]];
|
|
const data4 = [[${cpuInfoList}]];
|
const data5 = [[${memInfoList}]];
|
|
const chart4 = new G2.Chart({
|
container: 'chartCpuInfo',
|
height: 130,
|
padding: 0
|
});
|
chart4.source(data4, {
|
value: {
|
min: 0,
|
max: 100
|
}
|
});
|
chart4.legend(false);
|
chart4.axis(false);
|
chart4.interval()
|
.position('item*value')
|
.color('item',['#FF5371','#FFD22F','#26CD7B'])
|
// .shape('path', path => [ 'liquid-fill-path', path ])
|
.shape('liquid-fill-gauge')
|
.style({
|
lineWidth: 10,
|
opacity: 0.75
|
});
|
data4.forEach(row => {
|
chart4.guide().text({
|
top: true,
|
position: {
|
item: row.item,
|
value: 50
|
},
|
content: `${row.value}%`,
|
style: {
|
opacity: 1,
|
fontSize: 22,
|
textAlign: 'center'
|
}
|
});
|
});
|
chart4.render();
|
|
const chart5 = new G2.Chart({
|
container: 'chartMemInfo',
|
height: 130,
|
padding: 0
|
});
|
chart5.source(data5, {
|
value: {
|
min: 0,
|
max: 100
|
}
|
});
|
chart5.legend(false);
|
chart5.axis(false);
|
chart5.interval()
|
.position('item*value')
|
.color('item',['#FF5371','#FFD22F','#26CD7B'])
|
// .shape('path', path => [ 'liquid-fill-path', path ])
|
.shape('liquid-fill-gauge')
|
.style({
|
lineWidth: 10,
|
opacity: 0.75
|
});
|
data5.forEach(row => {
|
chart5.guide().text({
|
top: true,
|
position: {
|
item: row.item,
|
value: 50
|
},
|
content: `${row.value}%`,
|
style: {
|
opacity: 1,
|
fontSize: 22,
|
textAlign: 'center'
|
}
|
});
|
});
|
chart5.render();
|
|
const chart1 = new G2.Chart({
|
container: 'chartInfoList1',
|
forceFit: true,
|
height: 400
|
});
|
chart1.source(data1, {
|
percent: {
|
formatter: val => {
|
val = (val * 100) + '%';
|
if(val.length > 10 ){
|
val = val.substr(0,5)+'%';
|
}
|
return val;
|
}
|
}
|
});
|
chart1.tooltip({
|
showTitle: false,
|
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}的主机数量: {value}</li>'
|
});
|
chart1.coord('theta', {
|
startAngle: Math.PI, // 起始角度
|
endAngle: Math.PI * (3 / 2) // 结束角度
|
});
|
chart1.intervalStack()
|
.position('percent')
|
.color('item',['#FF5371','#FFD22F','#26A3FF','#26CD7B']);
|
chart1.render();
|
|
const chart3 = new G2.Chart({
|
container: 'chartInfoList2',
|
forceFit: true,
|
height: 400
|
});
|
chart3.source(data2, {
|
percent: {
|
formatter: val => {
|
val = (val * 100) + '%';
|
if(val.length > 10 ){
|
val = val.substr(0,5)+'%';
|
}
|
return val;
|
}
|
}
|
});
|
chart3.coord('theta');
|
chart3.tooltip({
|
showTitle: false,
|
});
|
chart3.intervalStack()
|
.position('percent')
|
.color('item',['#FF5371','#FFD22F','#26A3FF','#26CD7B'])
|
.tooltip('item*percent', (item, percent) => {
|
percent = (percent * 100) + '%';
|
if(percent.length > 10 ){
|
percent = percent.substr(0,5)+'%';
|
}
|
return {
|
name: item+"的主机数量",
|
value: percent
|
};
|
})
|
.style({
|
lineWidth: 1,
|
stroke: '#fff'
|
});
|
chart3.render();
|
|
|
const dataTable = [[${dbTableList}]];
|
if(dataTable.length>0) {
|
const chart2 = new G2.Chart({
|
container: 'dbTableList',
|
forceFit: true,
|
height: 400
|
});
|
chart2.source(dataTable);
|
chart2.scale('value', {
|
tickInterval: 20
|
});
|
chart2.axis('remark', {
|
label: {
|
textStyle: {
|
fill: '#aaaaaa'
|
}
|
}
|
});
|
chart2.source(dataTable, {
|
value: {
|
min: 0,
|
nice: false,
|
alias: '数据监控'
|
}
|
});
|
chart2.axis('value', {
|
label: null,
|
title: {
|
offset: 30,
|
textStyle: {
|
fontSize: 12,
|
fontWeight: 300
|
}
|
}
|
});
|
chart2.interval().position('remark*value').size(28);
|
chart2.render();
|
}
|
|
const huantuChartInfos = [[${huantuChartInfos}]];
|
const chart6 = new G2.Chart({
|
container: 'chartInfoHuantu',
|
forceFit: true,
|
height: 400,
|
animate: false
|
});
|
// chart6.legend(false);
|
chart6.source(huantuChartInfos, {
|
percent: {
|
formatter: val => {
|
val = (val * 100) + '%';
|
return val;
|
}
|
}
|
});
|
chart6.coord('theta', {
|
radius: 0.95,
|
innerRadius: 0.6
|
});
|
chart6.tooltip({
|
showTitle: false,
|
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
});
|
// 辅助文本
|
chart6.guide().html({
|
position: [ '50%', '50%' ],
|
html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">监控资源总数量<br><span style="color:#8c8c8c;font-size:20px">[[${huantuTotalSize}]]</span></div>',
|
alignX: 'middle',
|
alignY: 'middle'
|
});
|
const interval6 = chart6.intervalStack()
|
.position('percent')
|
.color('item')
|
.tooltip('item*percent', (item, percent) => {
|
percent = percent * 100 + '%';
|
return {
|
name: item,
|
value: percent
|
};
|
})
|
.style({
|
lineWidth: 1,
|
stroke: '#fff'
|
});
|
chart6.render();
|
interval6.setSelected(huantuChartInfos[0]);
|
</script>
|
</body>
|
</html>
|
