<!DOCTYPE html>
|
<html>
|
<head>
|
<div th:replace="common/header.html"></div>
|
|
|
</head>
|
<body th:class="${application.sidebarCollapse}">
|
|
<div class="wrapper">
|
|
<div th:replace="common/navbar.html"></div>
|
|
<div th:replace="common/aside.html"></div>
|
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper">
|
<!-- Content Header (Page header) -->
|
<div class="content-header">
|
<div class="container-fluid">
|
<div class="row mb-2">
|
<div class="col-sm-6">
|
</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>
|
<a th:href="@{'/appInfo/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/dockerInfo/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/dbInfo/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/dceInfo/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/fileWarnInfo/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/heathMonitor/list'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/systemInfo/systemInfoList'}" class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</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>
|
<a th:href="@{'/portInfo/list'}"class="small-box-footer">更多 <i class="fas fa-arrow-circle-right"></i></a>
|
</div>
|
</div>
|
</div>
|
<!-- /.row -->
|
|
<div class="row mb-2">
|
<div class="col-sm-12" style="font-weight: 500">
|
累积告警(次数)：<span style="margin-right:10px;"><small class="badge badge-danger"><span th:text="${warnCount}">18</span></small></span>
|
主机平均上报频率(秒)：<span style="margin-right:10px;"><small class="badge badge-primary"><i class="far fa-clock"></i><span style="margin-left:5px;" th:text="${avgSubmitSeconds}">18</span></small></span>
|
<!--历史数据保留(天)：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${historyDataOut}">0</span></small></span>-->
|
告警通知：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${warnType}">17</span></small></span>
|
公众看板：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${dapingView}"></span></small></span>
|
管理员密码：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${adminPwd}"></span></small></span>
|
只读账号密码：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${guestAccountPwd}"></span></small></span>
|
通信Token：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${wgToken}"></span></small></span>
|
web ssh：<span style="margin-right:10px;"><small class="badge badge-primary"><span th:text="${webSSH}"></span></small></span></div>
|
</div>
|
|
<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" title="当前所有主机最近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 class="description-percentage text-danger">
|
<th:block th:if="${session.LOGIN_KEY == null || session.LOGIN_KEY.role != 'user'}"><span th:text="${application.sumDiskSizeCache}">18</span></th:block>
|
<th:block th:if="${session.LOGIN_KEY != null && session.LOGIN_KEY.role == 'user'}"><span th:text="${sumDiskSizeCache}">18</span></th:block></span></div>
|
<!-- /.card -->
|
</section>
|
<section class="col-lg-5 connectedSortable" title="当前所有主机最近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/footer.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>
|
