1.4.5.2
This commit is contained in:
unknown
11
EdgeAdmin/web/views/@default/dashboard/boards/@menu.html
Normal file
11
EdgeAdmin/web/views/@default/dashboard/boards/@menu.html
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
<first-menu>
|
||||
<menu-item href="/dashboard/boards" code="index">{{LANG('admin_dashboard@ui_overview')}}</menu-item>
|
||||
<menu-item href="/dashboard/boards/waf" code="waf">
|
||||
{{LANG('admin_dashboard@ui_waf')}}
|
||||
<span v-if="countTodayAttacks > 0" :class="{red: countTodayAttacks != countTodayAttacksRead}">({{countTodayAttacksFormat}})</span>
|
||||
</menu-item>
|
||||
<menu-item href="/dashboard/boards/dns" code="dns">{{LANG('admin_dashboard@ui_dns')}}</menu-item>
|
||||
<menu-item href="/dashboard/boards/user" code="user">{{LANG('admin_dashboard@ui_user')}}</menu-item>
|
||||
<menu-item href="/dashboard/boards/events" code="event">{{LANG('admin_dashboard@ui_events')}}<span :class="{red: countEvents > 0}">({{countEvents}})</span></menu-item>
|
||||
</first-menu>
|
||||
9
EdgeAdmin/web/views/@default/dashboard/boards/dns.css
Normal file
9
EdgeAdmin/web/views/@default/dashboard/boards/dns.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.ui.message .icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
/*# sourceMappingURL=dns.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["dns.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA","file":"dns.css"}
|
||||
81
EdgeAdmin/web/views/@default/dashboard/boards/dns.html
Normal file
81
EdgeAdmin/web/views/@default/dashboard/boards/dns.html
Normal file
@@ -0,0 +1,81 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
{$template "/echarts"}
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div style="margin-top: 0.8em" v-if="isLoading">
|
||||
<div class="ui message loading">
|
||||
<div class="ui active inline loader small"></div> 数据加载中...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="!isLoading">
|
||||
<columns-grid>
|
||||
<div class="ui column">
|
||||
<h4>域名<link-icon href="/ns/domains"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countDomains}}</span>个</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>记录<link-icon href="/ns/domains"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countRecords}}</span>个</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>集群<link-icon href="/ns/clusters"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countClusters}}</span>个</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>节点<link-icon href="/ns/clusters"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countNodes}}</span>
|
||||
<span v-if="board.countOfflineNodes > 0" style="font-size: 1em">
|
||||
/ <a href="/ns/clusters"><span class="red" style="font-size: 1em">{{board.countOfflineNodes}}离线</span></a>
|
||||
</span>
|
||||
<span v-else style="font-size: 1em">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</columns-grid>
|
||||
|
||||
<chart-columns-grid>
|
||||
<div class="ui column">
|
||||
<!-- 流量统计 -->
|
||||
<div class="ui menu text blue">
|
||||
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
|
||||
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<!-- 按小时统计流量 -->
|
||||
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
|
||||
|
||||
<!-- 按日统计流量 -->
|
||||
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 域名排行 -->
|
||||
<h4>域名访问排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-domains-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 节点排行 -->
|
||||
<h4>节点访问排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-nodes-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 系统信息 -->
|
||||
<div class="ui column">
|
||||
<div class="ui menu text blue">
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">DNS节点CPU</a>
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">DNS节点内存</a>
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">DNS节点负载</a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
|
||||
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
|
||||
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
|
||||
</div>
|
||||
</chart-columns-grid>
|
||||
</div>
|
||||
259
EdgeAdmin/web/views/@default/dashboard/boards/dns.js
Normal file
259
EdgeAdmin/web/views/@default/dashboard/boards/dns.js
Normal file
@@ -0,0 +1,259 @@
|
||||
Tea.context(function () {
|
||||
this.isLoading = true
|
||||
|
||||
this.$delay(function () {
|
||||
this.$post("$")
|
||||
.success(function (resp) {
|
||||
for (let k in resp.data) {
|
||||
this[k] = resp.data[k]
|
||||
}
|
||||
|
||||
this.$delay(function () {
|
||||
this.reloadHourlyTrafficChart()
|
||||
this.reloadTopDomainsChart()
|
||||
this.reloadTopNodesChart()
|
||||
this.reloadCPUChart()
|
||||
})
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 流量统计
|
||||
*/
|
||||
this.trafficTab = "hourly"
|
||||
|
||||
this.selectTrafficTab = function (tab) {
|
||||
this.trafficTab = tab
|
||||
if (tab == "hourly") {
|
||||
this.$delay(function () {
|
||||
this.reloadHourlyTrafficChart()
|
||||
})
|
||||
} else if (tab == "daily") {
|
||||
this.$delay(function () {
|
||||
this.reloadDailyTrafficChart()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.reloadHourlyTrafficChart = function () {
|
||||
let stats = this.hourlyStats
|
||||
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", stats, function (args) {
|
||||
return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时<br/>流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes) + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadDailyTrafficChart = function () {
|
||||
let stats = this.dailyStats
|
||||
this.reloadTrafficChart("daily-traffic-chart", "流量统计", stats, function (args) {
|
||||
return stats[args.dataIndex].day + "<br/>流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes) + "<br/>请求数：" + teaweb.formatNumber(stats[args.dataIndex].countRequests)
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
|
||||
let chartBox = document.getElementById(chartId)
|
||||
if (chartBox == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let axis = teaweb.bytesAxis(stats, function (v) {
|
||||
return v.bytes
|
||||
})
|
||||
|
||||
let chart = teaweb.initChart(chartBox)
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: stats.map(function (v) {
|
||||
if (v.hour != null) {
|
||||
return v.hour
|
||||
}
|
||||
return v.day
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return value + axis.unit
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: tooltipFunc
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 10,
|
||||
right: 20,
|
||||
bottom: 20
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "流量",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.bytes / axis.divider
|
||||
}),
|
||||
itemStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
areaStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
animation: true
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
// 域名排行
|
||||
this.reloadTopDomainsChart = function () {
|
||||
let that = this
|
||||
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-domains-chart",
|
||||
name: "域名",
|
||||
values: this.topDomainStats,
|
||||
x: function (v) {
|
||||
return v.domainName
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].domainName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
window.location = "/ns/domains/domain?domainId=" + stats[args.dataIndex].domainId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 节点排行
|
||||
this.reloadTopNodesChart = function () {
|
||||
let that = this
|
||||
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-nodes-chart",
|
||||
name: "节点",
|
||||
values: this.topNodeStats,
|
||||
x: function (v) {
|
||||
return v.nodeName
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
window.location = "/ns/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + stats[args.dataIndex].clusterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统信息
|
||||
*/
|
||||
this.nodeStatusTab = "cpu"
|
||||
|
||||
this.selectNodeStatusTab = function (tab) {
|
||||
this.nodeStatusTab = tab
|
||||
this.$delay(function () {
|
||||
switch (tab) {
|
||||
case "cpu":
|
||||
this.reloadCPUChart()
|
||||
break
|
||||
case "memory":
|
||||
this.reloadMemoryChart()
|
||||
break
|
||||
case "load":
|
||||
this.reloadLoadChart()
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadCPUChart = function () {
|
||||
let axis = {unit: "%", divider: 1}
|
||||
teaweb.renderLineChart({
|
||||
id: "cpu-chart",
|
||||
name: "CPU",
|
||||
values: this.cpuValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value * 100;
|
||||
},
|
||||
axis: axis,
|
||||
max: 100
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadMemoryChart = function () {
|
||||
let axis = {unit: "%", divider: 1}
|
||||
teaweb.renderLineChart({
|
||||
id: "memory-chart",
|
||||
name: "内存",
|
||||
values: this.memoryValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value * 100;
|
||||
},
|
||||
axis: axis,
|
||||
max: 100
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadLoadChart = function () {
|
||||
let axis = {unit: "", divider: 1}
|
||||
let max = this.loadValues.$map(function (k, v) {
|
||||
return v.value
|
||||
}).$max()
|
||||
if (max < 10) {
|
||||
max = 10
|
||||
} else if (max < 20) {
|
||||
max = 20
|
||||
} else if (max < 100) {
|
||||
max = 100
|
||||
} else {
|
||||
max = null
|
||||
}
|
||||
teaweb.renderLineChart({
|
||||
id: "load-chart",
|
||||
name: "负载",
|
||||
values: this.loadValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value;
|
||||
},
|
||||
axis: axis,
|
||||
max: max
|
||||
})
|
||||
}
|
||||
})
|
||||
11
EdgeAdmin/web/views/@default/dashboard/boards/dns.less
Normal file
11
EdgeAdmin/web/views/@default/dashboard/boards/dns.less
Normal file
@@ -0,0 +1,11 @@
|
||||
.ui.message {
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
69
EdgeAdmin/web/views/@default/dashboard/boards/events.html
Normal file
69
EdgeAdmin/web/views/@default/dashboard/boards/events.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
|
||||
<p class="ui message" v-if="autoDeleted">已自动删除没有关联对象的事件。</p>
|
||||
|
||||
<p class="comment" v-if="logs.length == 0">暂时还没有事件。</p>
|
||||
|
||||
<second-menu v-if="logs.length > 0">
|
||||
<a href="" class="item" @click.prevent="updatePageRead()">[本页已读]</a>
|
||||
<a href="" class="item" @click.prevent="updateAllRead()">[全部已读]</a>
|
||||
</second-menu>
|
||||
|
||||
<table class="ui table selectable celled" v-if="logs.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th nowrap="">节点类型</th>
|
||||
<th nowrap="">集群</th>
|
||||
<th nowrap="">节点</th>
|
||||
<th>信息</th>
|
||||
<th class="one op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="log in logs">
|
||||
<td>
|
||||
<node-role-name :v-role="log.role"></node-role-name>
|
||||
</td>
|
||||
<td nowrap="">
|
||||
<span v-if="log.role == 'node'">
|
||||
<link-icon :href="'/clusters/cluster?clusterId=' + log.node.cluster.id">{{log.node.cluster.name}}</link-icon>
|
||||
</span>
|
||||
<span v-else-if="log.role == 'dns'">
|
||||
<link-icon :href="'/ns/clusters/cluster?clusterId=' + log.node.cluster.id">{{log.node.cluster.name}}</link-icon>
|
||||
</span>
|
||||
<span v-else class="disabled">-</span>
|
||||
</td>
|
||||
<td nowrap="">
|
||||
<span v-if="log.role == 'node'">
|
||||
<link-icon :href="'/clusters/cluster/node?clusterId=' + log.node.cluster.id + '&nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'api'">
|
||||
<link-icon :href="'/settings/api/node?nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'dns'">
|
||||
<link-icon :href="'/ns/clusters/cluster/node?clusterId=' + log.node.cluster.id + '&nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'database'">
|
||||
<link-icon :href="'/db/node?nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'admin'">管理平台</span>
|
||||
<span v-if="log.role == 'user'">
|
||||
<link-icon :href="'/settings/userNodes/node?nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'monitor'">
|
||||
<link-icon :href="'/settings/monitorNodes/node?nodeId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
<span v-if="log.role == 'report'">
|
||||
<link-icon :href="'/clusters/monitors/reporters/reporter?reporterId=' + log.node.id">{{log.node.name}}</link-icon>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<node-log-row :v-log="log" :v-keyword="keyword"></node-log-row>
|
||||
</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateRead(log.id)">已读</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page" v-if="logs.length > 0"></div>
|
||||
36
EdgeAdmin/web/views/@default/dashboard/boards/events.js
Normal file
36
EdgeAdmin/web/views/@default/dashboard/boards/events.js
Normal file
@@ -0,0 +1,36 @@
|
||||
Tea.context(function () {
|
||||
this.updateRead = function (logId) {
|
||||
this.$post(".readLogs")
|
||||
.params({
|
||||
logIds: [logId]
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
|
||||
this.updatePageRead = function () {
|
||||
let logIds = this.logs.map(function (v) {
|
||||
return v.id
|
||||
})
|
||||
teaweb.confirm("确定要设置本页日志为已读吗？", function () {
|
||||
this.$post(".readLogs")
|
||||
.params({
|
||||
logIds: logIds
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
this.updateAllRead = function () {
|
||||
teaweb.confirm("确定要设置所有日志为已读吗？", function () {
|
||||
this.$post(".readAllLogs")
|
||||
.params({})
|
||||
.success(function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
75
EdgeAdmin/web/views/@default/dashboard/boards/index.css
Normal file
75
EdgeAdmin/web/views/@default/dashboard/boards/index.css
Normal file
@@ -0,0 +1,75 @@
|
||||
.ui.message a .icon.remove {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 2em;
|
||||
}
|
||||
.grid.realtime-chart {
|
||||
margin-left: 0.4em !important;
|
||||
position: relative;
|
||||
}
|
||||
.grid.realtime-chart .column {
|
||||
margin-bottom: 1em;
|
||||
border: 1px rgba(0, 0, 0, 0.1) solid;
|
||||
border-right: none;
|
||||
}
|
||||
.grid.realtime-chart .column.with-border {
|
||||
border-right: 1px rgba(0, 0, 0, 0.1) solid;
|
||||
}
|
||||
.grid.realtime-chart .chart {
|
||||
height: 10em;
|
||||
}
|
||||
.grid.realtime-chart a {
|
||||
display: none;
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
.grid.realtime-chart .column:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.grid.realtime-chart .column:hover a {
|
||||
display: inline;
|
||||
}
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
.traffic-map-box {
|
||||
height: 16em;
|
||||
}
|
||||
.traffic-map-box div::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
h4 span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
.percent-box {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.percent-box .detail {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -2em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.percent-box .detail .label {
|
||||
color: grey;
|
||||
}
|
||||
.percent-box .detail .value {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.percent-box .summary {
|
||||
color: grey;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.percent-box .summary span {
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
.percent-box .summary a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,QAAA;;AAKH,KAAK;EACJ,kBAAA;EACA,kBAAA;;AAFD,KAAK,eAIJ;EACC,kBAAA;EACA,oCAAA;EACA,kBAAA;;AAPF,KAAK,eAUJ,QAAO;EACN,0CAAA;;AAXF,KAAK,eAcJ;EACC,YAAA;;AAfF,KAAK,eAkBJ;EACC,aAAA;EACA,iBAAA;EACA,kBAAA;EACA,UAAA;;AAtBF,KAAK,eAyBJ,QAAO;EACN,+BAAA;;AA1BF,KAAK,eAyBJ,QAAO,MAGN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF,EACC;EACC,gBAAA;EACA,WAAA;;AAIF;EACC,kBAAA;EACA,kBAAA;;AAFD,YAIC;EACC,kBAAA;EACA,QAAA;EACA,gBAAA;EACA,OAAA;EACA,QAAA;EACA,gBAAA;;AAVF,YAIC,QAQC;EACC,WAAA;;AAbH,YAIC,QAYC;EACC,gBAAA;;AAjBH,YAqBC;EACC,WAAA;EACA,iBAAA;;AAvBF,YAqBC,SAIC;EACC,gBAAA;EACA,mBAAA;;AA3BH,YAqBC,SASC;EACC,gBAAA","file":"index.css"}
|
||||
271
EdgeAdmin/web/views/@default/dashboard/boards/index.html
Normal file
271
EdgeAdmin/web/views/@default/dashboard/boards/index.html
Normal file
@@ -0,0 +1,271 @@
|
||||
{$layout}
|
||||
|
||||
{$var "header"}
|
||||
<!-- world map -->
|
||||
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="/js/world.js"></script>
|
||||
<script type="text/javascript" src="/js/world-countries-map.js"></script>
|
||||
{$end}
|
||||
|
||||
{$template "menu"}
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div style="margin-top: 0.8em">
|
||||
<div class="ui message loading" v-if="isLoading">
|
||||
<div class="ui active inline loader small"></div> 数据加载中...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XFF设置提示 -->
|
||||
<div class="ui message warning" v-if="teaXFFPrompt">
|
||||
检测到你正在使用反向代理访问当前系统，如果你的系统确定在一个反向代理服务的上游，为了系统的正常运行，请在安全设置中设置“自定义客户端IP报头”。
|
||||
<a href="/settings/security?showAll=1#client-header-names">[去设置]</a>
|
||||
<a href="" @click.prevent="dismissXFFPrompt">[关闭提示]</a>
|
||||
</div>
|
||||
|
||||
<!-- 商业版错误 -->
|
||||
<div class="ui icon message error" v-if="plusErr.length > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
{{plusErr}}
|
||||
</div>
|
||||
|
||||
<!-- 没有节点提醒 -->
|
||||
<div class="ui icon message warning" v-if="!isLoading && dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<a :href="'/clusters/cluster/createNode?clusterId=' + dashboard.defaultClusterId">还没有在集群中添加节点，现在去添加？添加节点后才可部署网站。</a>
|
||||
</div>
|
||||
|
||||
<!-- 新版本更新提醒 -->
|
||||
<div class="ui icon message error" v-if="!isLoading && newVersionCode.length > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
升级提醒：有新版本管理系统可以更新：v{{currentVersionCode}} -> v{{newVersionCode}}
|
||||
<a href="/settings/updates?doCheck=1">[查看详情]</a>
|
||||
|
||||
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- 过期提醒 -->
|
||||
<div class="ui icon message error" v-if="plusExpireDay.length > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/settings/authority"><strong>续费提醒：当前商业版系统即将在 {{plusExpireDay}} 过期，为了您能正常使用相关功能，请及时提前续费。</strong></a>
|
||||
</div>
|
||||
|
||||
<!-- 升级提醒 -->
|
||||
<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/clusters">
|
||||
升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本，系统正在尝试自动升级，请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
<div class="ui icon message error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/settings/userNodes">升级提醒：有 {{userNodeUpgradeInfo.count}} 个用户节点需要升级到 v{{userNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
|
||||
<div class="ui icon message error" v-if="!isLoading && apiNodeUpgradeInfo.count > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/settings/api">升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本；如果已经升级，请尝试重启API节点进程。</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
|
||||
|
||||
<!-- 本地API节点 -->
|
||||
<div class="ui icon message error" v-if="!isLoading && localLowerVersionAPINode != null">
|
||||
<i class="icon warning circle"></i>
|
||||
<span v-if="localLowerVersionAPINode.runtimeVersion == localLowerVersionAPINode.fileVersion">升级提醒：发现一个正在使用的本地API节点版本需要升级，文件位置：{{localLowerVersionAPINode.exePath}}，当前版本：v{{localLowerVersionAPINode.runtimeVersion}}。</span>
|
||||
<span v-if="localLowerVersionAPINode.runtimeVersion != localLowerVersionAPINode.fileVersion">升级提醒：发现一个正在使用的本地API节点版本文件已经更新，但需要重启后生效，文件位置：{{localLowerVersionAPINode.exePath}}。 <a href="" @click.prevent="restartAPINode" v-if="!isRestartingLocalAPINode">[帮我重启]</a><span v-if="isRestartingLocalAPINode">尝试重启中...</span></span>
|
||||
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="ui icon message error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/ns/clusters">升级提醒：有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本，系统正在尝试自动升级，请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
<div class="ui icon message error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/clusters/monitors/reporters">升级提醒：有 {{reportNodeUpgradeInfo.count}} 个区域监控终端需要升级到 v{{reportNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- 没有硬盘空间提醒 -->
|
||||
<div class="ui icon message error" v-if="!isLoading && dashboard.diskUsageWarning != null && dashboard.diskUsageWarning.length > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<span v-html="dashboard.diskUsageWarning" style="line-height: 1.8"></span>
|
||||
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- 弱密码提示 -->
|
||||
<div class="ui icon message error" v-if="countWeakAdmins > 0">
|
||||
<i class="icon warning circle"></i>
|
||||
<a href="/admins?hasWeakPassword=1">安全提醒：有 {{countWeakAdmins}} 个管理员登录账号正在使用弱密码，请及时修改密码，避免产生安全风险。</a>
|
||||
<a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- 总体统计 -->
|
||||
<columns-grid v-if="!isLoading">
|
||||
<div class="ui column">
|
||||
<h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
|
||||
<div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>边缘节点<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
|
||||
<div class="value">
|
||||
<span>{{dashboard.countNodes}}</span>个
|
||||
<span style="font-size: 1em" v-if="dashboard.countOfflineNodes > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/clusters" v-if="dashboard.canGoNodes"><span class="red" style="font-size: 1em">{{dashboard.countOfflineNodes}}离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineNodes}}离线</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>API节点<link-icon href="/settings/api" v-if="dashboard.canGoSettings"></link-icon></h4>
|
||||
<div class="value">
|
||||
<span>{{dashboard.countAPINodes}}</span>个
|
||||
<span style="font-size: 1em" v-if="dashboard.countOfflineAPINodes > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/settings/api" v-if="dashboard.canGoSettings"><span class="red" style="font-size: 1em">{{dashboard.countOfflineAPINodes}}离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineAPINodes}}离线</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>用户<link-icon href="/users" v-if="dashboard.canGoUsers"></link-icon></h4>
|
||||
<div class="value"><span>{{dashboard.countUsers}}</span>个
|
||||
<span style="font-size: 1em" v-if="dashboard.countOfflineUserNodes > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/settings/userNodes" v-if="dashboard.canGoSettings"><span class="red" style="font-size: 1em">{{dashboard.countOfflineUserNodes}}节点离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineUserNodes}}节点离线</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>网站<link-icon href="/servers" v-if="dashboard.canGoServers"></link-icon></h4>
|
||||
<div class="value"><span>{{dashboard.countServers}}</span>个
|
||||
<span style="font-size: 1em" v-if="dashboard.countAuditingServers > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/servers?auditingFlag=1" v-if="dashboard.canGoServers"><span class="red" style="font-size: 1em">{{dashboard.countAuditingServers}}审核</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countAuditingServers}}审核</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>本周流量</h4>
|
||||
<div class="value"><span>{{weekTraffic}}</span>{{weekTrafficUnit}}</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>昨日流量</h4>
|
||||
<div class="value"><span>{{yesterdayTraffic}}</span>{{yesterdayTrafficUnit}}</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>当天独立IP</h4>
|
||||
<div class="value">
|
||||
<span v-if="todayCountIPs > 0">{{todayCountIPsFormat}}</span>
|
||||
<span v-else class="disabled">尚无数据</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>当天流量</h4>
|
||||
<div class="value"><span>{{todayTraffic}}</span>{{todayTrafficUnit}}
|
||||
<span class="red" style="font-size: 1em" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('+') > -1" title="同昨日同时间对比"><span class="disabled" style="font-size: 1em">/</span> {{yesterdayPercentFormat}}%</span>
|
||||
<span class="green" style="font-size: 1em" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('-') > -1" title="同昨日同时间对比"><span class="disabled" style="font-size: 1em">/</span> {{yesterdayPercentFormat}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</columns-grid>
|
||||
|
||||
<!-- 即时统计 -->
|
||||
<div class="ui four columns grid realtime-chart" v-if="!isLoading">
|
||||
<div class="ui column">
|
||||
<link-icon href="/clusters/nodes?trafficOutOrder=desc"></link-icon>
|
||||
<div class="percent-box">
|
||||
<div id="total-bandwidth-chart-box" class="chart"></div>
|
||||
<div class="detail">
|
||||
<div class="label"> </div>
|
||||
<div class="value"> </div>
|
||||
</div>
|
||||
<div class="summary" v-if="nodeValuesStat != null">总{{nodeValuesStat.totalTrafficPerSecondSizeFormat}}<span>{{nodeValuesStat.totalTrafficPerSecondUnitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<link-icon href="/clusters/nodes?cpuOrder=desc"></link-icon>
|
||||
<div class="percent-box">
|
||||
<div id="all-cpu-chart-box" class="chart"></div>
|
||||
<div class="detail">
|
||||
<div class="label">平均CPU用量</div>
|
||||
<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgCPUUsageFormat}}%</div>
|
||||
</div>
|
||||
<div class="summary" v-if="nodeValuesStat != null">共{{nodeValuesStat.totalCPUCores}}核</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<link-icon href="/clusters/nodes?memoryOrder=desc"></link-icon>
|
||||
<div class="percent-box">
|
||||
<div id="all-memory-chart-box" class="chart"></div>
|
||||
<div class="detail">
|
||||
<div class="label">平均内存用量</div>
|
||||
<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgMemoryUsageFormat}}%</div>
|
||||
</div>
|
||||
<div class="summary" v-if="nodeValuesStat != null">共{{nodeValuesStat.totalMemoryFormat}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui column with-border">
|
||||
<link-icon href="/clusters/nodes?loadOrder=desc"></link-icon>
|
||||
<div class="percent-box">
|
||||
<div id="all-load-chart-box" class="chart"></div>
|
||||
<div class="detail">
|
||||
<div class="label">平均负载</div>
|
||||
<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad1minFormat}}/min</div>
|
||||
</div>
|
||||
<div class="summary" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad5minFormat}}/5min</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<chart-columns-grid>
|
||||
<div class="ui column">
|
||||
<!-- 流量地图 -->
|
||||
<div v-if="!isLoading">
|
||||
<traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 流量 -->
|
||||
<div class="ui menu text blue" v-show="!isLoading">
|
||||
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
|
||||
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<!-- 按小时统计 -->
|
||||
<div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'hourly'"></div>
|
||||
|
||||
<!-- 按日统计 -->
|
||||
<div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<div class="ui menu text blue" v-show="!isLoading">
|
||||
<a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
|
||||
<a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<!-- 按小时统计访问量 -->
|
||||
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
|
||||
|
||||
<!-- 按日统计访问量 -->
|
||||
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 域名排行 -->
|
||||
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-domains-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 节点排行 -->
|
||||
<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-nodes-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 指标 -->
|
||||
<metric-chart v-for="chart in metricCharts"
|
||||
:key="chart.id"
|
||||
:v-chart="chart.chart"
|
||||
:v-stats="chart.stats"
|
||||
:v-item="chart.item"
|
||||
:v-column="true"
|
||||
>
|
||||
</metric-chart>
|
||||
</chart-columns-grid>
|
||||
|
||||
596
EdgeAdmin/web/views/@default/dashboard/boards/index.js
Normal file
596
EdgeAdmin/web/views/@default/dashboard/boards/index.js
Normal file
@@ -0,0 +1,596 @@
|
||||
Tea.context(function () {
|
||||
this.isLoading = true
|
||||
this.trafficTab = "hourly"
|
||||
this.metricCharts = []
|
||||
this.plusExpireDay = ""
|
||||
this.topCountryStats = []
|
||||
this.yesterdayPercentFormat = ""
|
||||
this.localLowerVersionAPINode = null
|
||||
this.countWeakAdmins = 0
|
||||
this.todayCountIPsFormat = "0"
|
||||
|
||||
this.nodeValuesStat = null
|
||||
|
||||
this.$delay(function () {
|
||||
// 整体图表
|
||||
this.$post("$")
|
||||
.success(function (resp) {
|
||||
for (let k in resp.data) {
|
||||
this[k] = resp.data[k]
|
||||
}
|
||||
|
||||
this.todayCountIPsFormat = teaweb.formatNumber(this.todayCountIPs)
|
||||
|
||||
this.isLoading = false
|
||||
|
||||
this.$delay(function () {
|
||||
this.reloadHourlyTrafficChart()
|
||||
this.reloadHourlyRequestsChart()
|
||||
this.reloadTopDomainsChart()
|
||||
this.reloadTopNodesChart()
|
||||
})
|
||||
|
||||
// 节点数据
|
||||
this.$delay(function () {
|
||||
this.reloadNodeValues()
|
||||
}, 200)
|
||||
})
|
||||
})
|
||||
|
||||
this.selectTrafficTab = function (tab) {
|
||||
this.trafficTab = tab
|
||||
if (tab == "hourly") {
|
||||
this.$delay(function () {
|
||||
this.reloadHourlyTrafficChart()
|
||||
})
|
||||
} else if (tab == "daily") {
|
||||
this.$delay(function () {
|
||||
this.reloadDailyTrafficChart()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.reloadHourlyTrafficChart = function () {
|
||||
let stats = this.hourlyTrafficStats
|
||||
this.reloadTrafficChart("hourly-traffic-chart-box", stats, function (args) {
|
||||
let index = args.dataIndex
|
||||
let cachedRatio = 0
|
||||
let attackRatio = 0
|
||||
if (stats[index].bytes > 0) {
|
||||
cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
|
||||
attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
|
||||
}
|
||||
|
||||
return stats[index].day + " " + stats[index].hour + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadDailyTrafficChart = function () {
|
||||
let stats = this.dailyTrafficStats
|
||||
this.reloadTrafficChart("daily-traffic-chart-box", stats, function (args) {
|
||||
let index = args.dataIndex
|
||||
let cachedRatio = 0
|
||||
let attackRatio = 0
|
||||
if (stats[index].bytes > 0) {
|
||||
cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
|
||||
attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
|
||||
}
|
||||
|
||||
return stats[index].day + "<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadTrafficChart = function (chartId, stats, tooltipFunc) {
|
||||
let axis = teaweb.bytesAxis(stats, function (v) {
|
||||
return v.bytes
|
||||
})
|
||||
let chartBox = document.getElementById(chartId)
|
||||
let chart = teaweb.initChart(chartBox)
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: stats.map(function (v) {
|
||||
if (v.hour != null) {
|
||||
return v.hour
|
||||
}
|
||||
return v.day
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: function (v) {
|
||||
return v + axis.unit
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: tooltipFunc
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 40,
|
||||
right: 20,
|
||||
bottom: 20
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "总流量",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.bytes / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
lineStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
areaStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: "缓存流量",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.cachedBytes / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#61A0A8"
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#61A0A8"
|
||||
},
|
||||
areaStyle: {},
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: "攻击流量",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.attackBytes / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#F39494"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F39494"
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: ["总流量", "缓存流量", "攻击流量"]
|
||||
},
|
||||
animation: false
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求数统计
|
||||
*/
|
||||
this.requestsTab = "hourly"
|
||||
|
||||
this.selectRequestsTab = function (tab) {
|
||||
this.requestsTab = tab
|
||||
if (tab == "hourly") {
|
||||
this.$delay(function () {
|
||||
this.reloadHourlyRequestsChart()
|
||||
})
|
||||
} else if (tab == "daily") {
|
||||
this.$delay(function () {
|
||||
this.reloadDailyRequestsChart()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.reloadHourlyRequestsChart = function () {
|
||||
let stats = this.hourlyTrafficStats
|
||||
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", stats, function (args) {
|
||||
let index = args.dataIndex
|
||||
let cachedRatio = 0
|
||||
let attackRatio = 0
|
||||
if (stats[index].countRequests > 0) {
|
||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
||||
}
|
||||
|
||||
return stats[index].day + " " + stats[index].hour + "时<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadDailyRequestsChart = function () {
|
||||
let stats = this.dailyTrafficStats
|
||||
this.reloadRequestsChart("daily-requests-chart", "请求数统计", stats, function (args) {
|
||||
let index = args.dataIndex
|
||||
let cachedRatio = 0
|
||||
let attackRatio = 0
|
||||
if (stats[index].countRequests > 0) {
|
||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
||||
}
|
||||
|
||||
return stats[index].day + "<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
|
||||
let chartBox = document.getElementById(chartId)
|
||||
if (chartBox == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let axis = teaweb.countAxis(stats, function (v) {
|
||||
return Math.max(v.countRequests, v.countCachedRequests)
|
||||
})
|
||||
|
||||
let chart = teaweb.initChart(chartBox)
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: stats.map(function (v) {
|
||||
if (v.hour != null) {
|
||||
return v.hour
|
||||
}
|
||||
if (v.day != null) {
|
||||
return v.day
|
||||
}
|
||||
return ""
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return value + axis.unit
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: tooltipFunc
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 40,
|
||||
right: 20,
|
||||
bottom: 20
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "请求数",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countRequests / axis.divider
|
||||
}),
|
||||
itemStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
areaStyle: {
|
||||
color: teaweb.DefaultChartColor
|
||||
},
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: "缓存请求数",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countCachedRequests / axis.divider
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#61A0A8"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#61A0A8"
|
||||
},
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: "攻击请求数",
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countAttackRequests / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#F39494"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F39494"
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: ["请求数", "缓存请求数", "攻击请求数"]
|
||||
},
|
||||
animation: true
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
// 节点排行
|
||||
this.reloadTopNodesChart = function () {
|
||||
let that = this
|
||||
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-nodes-chart",
|
||||
name: "节点",
|
||||
values: this.topNodeStats,
|
||||
x: function (v) {
|
||||
return v.nodeName
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
window.location = "/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + that.clusterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 域名排行
|
||||
this.reloadTopDomainsChart = function () {
|
||||
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-domains-chart",
|
||||
name: "域名",
|
||||
values: this.topDomainStats,
|
||||
x: function (v) {
|
||||
return v.domain
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
let index = args.dataIndex
|
||||
window.location = "/servers/server?serverId=" + stats[index].serverId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 绘制节点总体信息
|
||||
this.reloadNodeValues = function () {
|
||||
let reloadInterval = 20000
|
||||
this.$post(".values")
|
||||
.success(function (resp) {
|
||||
this.nodeValuesStat = resp.data.stat
|
||||
this.renderBandwidthGauge()
|
||||
this.renderCPUGauge()
|
||||
this.renderMemoryGauge()
|
||||
this.renderLoadGauge()
|
||||
|
||||
if (resp.data.stat.todayTrafficFormat.length > 0) {
|
||||
let pieces = teaweb.splitFormat(resp.data.stat.todayTrafficFormat)
|
||||
this.todayTraffic = pieces[0]
|
||||
this.todayTrafficUnit = pieces[1]
|
||||
}
|
||||
|
||||
this.yesterdayPercentFormat = resp.data.stat.yesterdayPercentFormat
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(function () {
|
||||
this.reloadNodeValues()
|
||||
}, reloadInterval)
|
||||
})
|
||||
}
|
||||
|
||||
// 绘制gauge
|
||||
let lastBandwidthBytes = 0
|
||||
this.renderBandwidthGauge = function () {
|
||||
let bandwidthFormat = this.nodeValuesStat.totalTrafficPerSecondFormat
|
||||
let matchResult = bandwidthFormat.match(/^([0-9.]+)([a-zA-Z]+)$/)
|
||||
let size = parseFloat(matchResult[1])
|
||||
let unit = matchResult[2]
|
||||
this.nodeValuesStat.totalTrafficPerSecondSizeFormat = matchResult[1]
|
||||
this.nodeValuesStat.totalTrafficPerSecondUnitFormat = unit
|
||||
|
||||
let max = size
|
||||
if (size < 10) {
|
||||
max = 10
|
||||
} else if (size < 100) {
|
||||
max = 100
|
||||
} else if (size < 1000) {
|
||||
max = 1000
|
||||
} else if (size < 1200) {
|
||||
max = 1200
|
||||
}
|
||||
|
||||
let color = ""
|
||||
if (lastBandwidthBytes == 0) {
|
||||
lastBandwidthBytes = this.nodeValuesStat.totalTrafficBytesPerSecond
|
||||
}
|
||||
if (lastBandwidthBytes > 0 && lastBandwidthBytes != this.nodeValuesStat.totalTrafficBytesPerSecond) {
|
||||
let delta = Math.abs(lastBandwidthBytes - this.nodeValuesStat.totalTrafficBytesPerSecond) * 100 / lastBandwidthBytes
|
||||
if (delta > 20) {
|
||||
color = "red"
|
||||
} else if (delta > 10) {
|
||||
color = "yellow"
|
||||
}
|
||||
lastBandwidthBytes = this.nodeValuesStat.totalTrafficBytesPerSecond
|
||||
}
|
||||
|
||||
teaweb.renderGaugeChart({
|
||||
id: "total-bandwidth-chart-box",
|
||||
name: "",
|
||||
min: 0,
|
||||
max: max,
|
||||
value: size,
|
||||
startAngle: 240,
|
||||
endAngle: -60,
|
||||
color: color,
|
||||
unit: "",
|
||||
detail: ""
|
||||
})
|
||||
}
|
||||
|
||||
this.renderCPUGauge = function () {
|
||||
let avgCPUUsage = Math.round(this.nodeValuesStat.avgCPUUsage * 100) / 100
|
||||
let color = ""
|
||||
if (avgCPUUsage > 50) {
|
||||
color = "red"
|
||||
} else if (avgCPUUsage > 20) {
|
||||
color = "yellow"
|
||||
} else if (avgCPUUsage < 10) {
|
||||
color = "green"
|
||||
}
|
||||
|
||||
let maxCPUUsage = Math.round(this.nodeValuesStat.maxCPUUsage * 100) / 100
|
||||
let maxColor = ""
|
||||
if (maxCPUUsage > 50) {
|
||||
maxColor = "red"
|
||||
} else if (maxCPUUsage > 20) {
|
||||
maxColor = "yellow"
|
||||
} else if (maxCPUUsage < 10) {
|
||||
maxColor = "green"
|
||||
}
|
||||
|
||||
teaweb.renderPercentChart({
|
||||
id: "all-cpu-chart-box",
|
||||
name: "平均CPU用量",
|
||||
unit: "%",
|
||||
total: 100,
|
||||
value: avgCPUUsage,
|
||||
color: color,
|
||||
max: maxCPUUsage,
|
||||
maxColor: maxColor,
|
||||
maxName: "最大CPU用量"
|
||||
})
|
||||
}
|
||||
|
||||
this.renderMemoryGauge = function () {
|
||||
let avgMemoryUsage = Math.round(this.nodeValuesStat.avgMemoryUsage * 100) / 100
|
||||
let color = ""
|
||||
if (avgMemoryUsage > 80) {
|
||||
color = "red"
|
||||
} else if (avgMemoryUsage > 60) {
|
||||
color = "yellow"
|
||||
} else if (avgMemoryUsage < 20) {
|
||||
color = "green"
|
||||
}
|
||||
|
||||
let maxMemoryUsage = Math.round(this.nodeValuesStat.maxMemoryUsage * 100) / 100
|
||||
let maxColor = ""
|
||||
if (maxMemoryUsage > 80) {
|
||||
maxColor = "red"
|
||||
} else if (maxMemoryUsage > 60) {
|
||||
maxColor = "yellow"
|
||||
} else if (maxMemoryUsage < 20) {
|
||||
maxColor = "green"
|
||||
}
|
||||
|
||||
teaweb.renderPercentChart({
|
||||
id: "all-memory-chart-box",
|
||||
name: "平均内存用量",
|
||||
total: 100,
|
||||
unit: "%",
|
||||
value: avgMemoryUsage,
|
||||
color: color,
|
||||
max: maxMemoryUsage,
|
||||
maxColor: maxColor,
|
||||
maxName: "最大内存用量"
|
||||
})
|
||||
}
|
||||
|
||||
this.renderLoadGauge = function () {
|
||||
let avgLoad1min = Math.round(this.nodeValuesStat.avgLoad1min * 100) / 100
|
||||
let color = ""
|
||||
if (avgLoad1min > 20) {
|
||||
color = "red"
|
||||
} else if (avgLoad1min > 5) {
|
||||
color = "yellow"
|
||||
} else {
|
||||
color = "green"
|
||||
}
|
||||
if (avgLoad1min > 10) {
|
||||
avgLoad1min = 10
|
||||
}
|
||||
|
||||
let maxLoad1min = Math.round(this.nodeValuesStat.maxLoad1min * 100) / 100
|
||||
let maxColor = ""
|
||||
if (maxLoad1min > 20) {
|
||||
maxColor = "red"
|
||||
} else if (maxLoad1min > 5) {
|
||||
maxColor = "yellow"
|
||||
} else {
|
||||
maxColor = "green"
|
||||
}
|
||||
if (maxLoad1min > 20) {
|
||||
maxLoad1min = 20
|
||||
}
|
||||
|
||||
teaweb.renderPercentChart({
|
||||
id: "all-load-chart-box",
|
||||
name: "平均负载",
|
||||
unit: "",
|
||||
value: avgLoad1min,
|
||||
total: 20,
|
||||
color: color,
|
||||
max: maxLoad1min,
|
||||
maxColor: maxColor,
|
||||
maxName: "最大负载"
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 升级提醒
|
||||
*/
|
||||
this.closeMessage = function (e) {
|
||||
let target = e.target
|
||||
while (true) {
|
||||
target = target.parentNode
|
||||
if (target.tagName.toUpperCase() == "DIV") {
|
||||
target.style.cssText = "display: none"
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重启本地API节点
|
||||
this.isRestartingLocalAPINode = false
|
||||
this.restartAPINode = function () {
|
||||
if (this.isRestartingLocalAPINode) {
|
||||
return
|
||||
}
|
||||
if (this.localLowerVersionAPINode == null) {
|
||||
return
|
||||
}
|
||||
this.isRestartingLocalAPINode = true
|
||||
this.localLowerVersionAPINode.isRestarting = true
|
||||
this.$post("/dashboard/restartLocalAPINode")
|
||||
.params({
|
||||
"exePath": this.localLowerVersionAPINode.exePath
|
||||
})
|
||||
.timeout(300)
|
||||
.success(function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
.done(function () {
|
||||
this.isRestartingLocalAPINode = false
|
||||
this.localLowerVersionAPINode.isRestarting = false
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭XFF提示
|
||||
this.dismissXFFPrompt = function () {
|
||||
this.$post("/settings/security/dismissXFFPrompt")
|
||||
.success(function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
98
EdgeAdmin/web/views/@default/dashboard/boards/index.less
Normal file
98
EdgeAdmin/web/views/@default/dashboard/boards/index.less
Normal file
@@ -0,0 +1,98 @@
|
||||
.ui.message {
|
||||
a {
|
||||
.icon.remove {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid.realtime-chart {
|
||||
margin-left: 0.4em !important;
|
||||
position: relative;
|
||||
|
||||
.column {
|
||||
margin-bottom: 1em;
|
||||
border: 1px rgba(0, 0, 0, .1) solid;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.column.with-border {
|
||||
border-right: 1px rgba(0, 0, 0, .1) solid;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: none;
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
background: rgba(0, 0, 0, .03);
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
|
||||
.traffic-map-box {
|
||||
height: 16em;
|
||||
|
||||
div::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.percent-box {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.detail {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -2em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0.8em;
|
||||
|
||||
.label {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
color: grey;
|
||||
margin-top: 0.5em;
|
||||
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
EdgeAdmin/web/views/@default/dashboard/boards/user.css
Normal file
13
EdgeAdmin/web/views/@default/dashboard/boards/user.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.ui.message .icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
h4 span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
/*# sourceMappingURL=user.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["user.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"user.css"}
|
||||
59
EdgeAdmin/web/views/@default/dashboard/boards/user.html
Normal file
59
EdgeAdmin/web/views/@default/dashboard/boards/user.html
Normal file
@@ -0,0 +1,59 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
{$template "/echarts"}
|
||||
|
||||
<columns-grid>
|
||||
<div class="ui column">
|
||||
<h4>用户总数<link-icon href="/users"></link-icon></h4>
|
||||
<div class="value"><span>{{board.totalUsers}}</span>
|
||||
<span v-if="board.countVerifyingUsers > 0" style="font-size: 1em">
|
||||
/ <a href="/users?verifying=1"><span class="red" style="font-size: 1em">{{board.countVerifyingUsers}}待审核</span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>今日新增<link-icon href="/users"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countTodayUsers}}</span></div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>本周新增<link-icon href="/users"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countWeeklyUsers}}</span></div>
|
||||
</div>
|
||||
<div class="ui column">
|
||||
<h4>用户节点<link-icon href="/settings/userNodes"></link-icon></h4>
|
||||
<div class="value"><span>{{board.countUserNodes}}</span>
|
||||
<span v-if="board.countOfflineUserNodes > 0" style="font-size: 1em">
|
||||
/ <a href="/settings/userNodes"><span class="red" style="font-size: 1em">{{board.countOfflineUserNodes}}离线</span></a>
|
||||
</span>
|
||||
<span v-else style="font-size: 1em">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</columns-grid>
|
||||
|
||||
<chart-columns-grid>
|
||||
<div class="ui column">
|
||||
<h4>用户增长趋势</h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="daily-stat-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>流量排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-traffic-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 系统信息 -->
|
||||
<div class="ui menu text blue">
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">用户节点CPU</a>
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">用户节点内存</a>
|
||||
<a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">用户节点负载</a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
|
||||
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
|
||||
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
|
||||
</div>
|
||||
</chart-columns-grid>
|
||||
154
EdgeAdmin/web/views/@default/dashboard/boards/user.js
Normal file
154
EdgeAdmin/web/views/@default/dashboard/boards/user.js
Normal file
@@ -0,0 +1,154 @@
|
||||
Tea.context(function () {
|
||||
this.$delay(function () {
|
||||
this.reloadDailyStats()
|
||||
this.reloadCPUChart()
|
||||
this.reloadTopTrafficChart()
|
||||
})
|
||||
|
||||
this.reloadDailyStats = function () {
|
||||
let axis = teaweb.countAxis(this.dailyStats, function (v) {
|
||||
return v.count
|
||||
})
|
||||
let max = axis.max
|
||||
if (max < 10) {
|
||||
max = 10
|
||||
} else if (max < 100) {
|
||||
max = 100
|
||||
}
|
||||
teaweb.renderLineChart({
|
||||
id: "daily-stat-chart",
|
||||
name: "用户",
|
||||
values: this.dailyStats,
|
||||
x: function (v) {
|
||||
return v.day.substring(4, 6) + "-" + v.day.substring(6)
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
let index = args.dataIndex
|
||||
return stats[index].day.substring(4, 6) + "-" + stats[index].day.substring(6) + "：" + stats[index].count
|
||||
},
|
||||
value: function (v) {
|
||||
return v.count;
|
||||
},
|
||||
axis: axis,
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统信息
|
||||
*/
|
||||
this.nodeStatusTab = "cpu"
|
||||
|
||||
this.selectNodeStatusTab = function (tab) {
|
||||
this.nodeStatusTab = tab
|
||||
this.$delay(function () {
|
||||
switch (tab) {
|
||||
case "cpu":
|
||||
this.reloadCPUChart()
|
||||
break
|
||||
case "memory":
|
||||
this.reloadMemoryChart()
|
||||
break
|
||||
case "load":
|
||||
this.reloadLoadChart()
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadCPUChart = function () {
|
||||
let axis = {unit: "%", divider: 1}
|
||||
teaweb.renderLineChart({
|
||||
id: "cpu-chart",
|
||||
name: "CPU",
|
||||
values: this.cpuValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value * 100;
|
||||
},
|
||||
axis: axis,
|
||||
max: 100
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadMemoryChart = function () {
|
||||
let axis = {unit: "%", divider: 1}
|
||||
teaweb.renderLineChart({
|
||||
id: "memory-chart",
|
||||
name: "内存",
|
||||
values: this.memoryValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value * 100;
|
||||
},
|
||||
axis: axis,
|
||||
max: 100
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadLoadChart = function () {
|
||||
let axis = {unit: "", divider: 1}
|
||||
let max = this.loadValues.$map(function (k, v) {
|
||||
return v.value
|
||||
}).$max()
|
||||
if (max < 10) {
|
||||
max = 10
|
||||
} else if (max < 20) {
|
||||
max = 20
|
||||
} else if (max < 100) {
|
||||
max = 100
|
||||
} else {
|
||||
max = null
|
||||
}
|
||||
teaweb.renderLineChart({
|
||||
id: "load-chart",
|
||||
name: "负载",
|
||||
values: this.loadValues,
|
||||
x: function (v) {
|
||||
return v.time
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.value;
|
||||
},
|
||||
axis: axis,
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
// 流量排行
|
||||
this.reloadTopTrafficChart = function () {
|
||||
let that = this
|
||||
let axis = teaweb.bytesAxis(this.topTrafficStats, function (v) {
|
||||
return v.bytes
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-traffic-chart",
|
||||
name: "流量",
|
||||
values: this.topTrafficStats,
|
||||
x: function (v) {
|
||||
return v.userName
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
let index = args.dataIndex
|
||||
return stats[index].userName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[index].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[index].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.bytes / axis.divider;
|
||||
},
|
||||
axis: axis
|
||||
})
|
||||
}
|
||||
})
|
||||
18
EdgeAdmin/web/views/@default/dashboard/boards/user.less
Normal file
18
EdgeAdmin/web/views/@default/dashboard/boards/user.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.ui.message {
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
30
EdgeAdmin/web/views/@default/dashboard/boards/waf.css
Normal file
30
EdgeAdmin/web/views/@default/dashboard/boards/waf.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.ui.message .icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
.traffic-map-box {
|
||||
height: 16em;
|
||||
}
|
||||
.traffic-map-box div::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.color-span {
|
||||
font-size: 0.8em;
|
||||
padding: 4px;
|
||||
}
|
||||
h4.header a {
|
||||
font-size: 0.85em;
|
||||
float: right;
|
||||
}
|
||||
.access-box-box {
|
||||
max-height: 14em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.access-box-box::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
/*# sourceMappingURL=waf.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF;EACC,gBAAA;EACA,YAAA;;AAGD,EAAE,OACD;EACC,iBAAA;EACA,YAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,eAAe;EACd,UAAA","file":"waf.css"}
|
||||
90
EdgeAdmin/web/views/@default/dashboard/boards/waf.html
Normal file
90
EdgeAdmin/web/views/@default/dashboard/boards/waf.html
Normal file
@@ -0,0 +1,90 @@
|
||||
{$layout}
|
||||
|
||||
{$var "header"}
|
||||
<!-- world map -->
|
||||
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
|
||||
<script type="text/javascript" src="/js/world.js"></script>
|
||||
<script type="text/javascript" src="/js/world-countries-map.js"></script>
|
||||
{$end}
|
||||
|
||||
{$template "menu"}
|
||||
|
||||
<columns-grid>
|
||||
<div class="ui column">
|
||||
<h4>今日拦截</h4>
|
||||
<div class="value"><span>{{board.countDailyBlocks}}</span>次</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>今日验证码验证</h4>
|
||||
<div class="value"><span>{{board.countDailyCaptcha}}</span>次</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>今日记录</h4>
|
||||
<div class="value"><span>{{board.countDailyLogs}}</span>次</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>本周拦截</h4>
|
||||
<div class="value"><span>{{board.countWeeklyBlocks}}</span>次</div>
|
||||
</div>
|
||||
</columns-grid>
|
||||
|
||||
<chart-columns-grid>
|
||||
<div class="ui column">
|
||||
<!-- 流量地图 -->
|
||||
<div v-if="!isLoading">
|
||||
<traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近日志 -->
|
||||
<div class="ui column" v-if="accessLogs.length > 0">
|
||||
<h4 class="header">最新拦截记录 <a href="/servers/logs?hasWAF=1">更多 »</a></h4>
|
||||
<div class="access-box-box">
|
||||
<table class="ui table selectable">
|
||||
<tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
|
||||
<td><http-access-log-box :v-access-log="accessLog"></http-access-log-box></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 按小时/天统计 -->
|
||||
<div class="ui menu text blue">
|
||||
<a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时趋势</a>
|
||||
<a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天趋势</a>
|
||||
<div class="item right">
|
||||
<span class="color-span" style="background: #F39494">拦截</span>
|
||||
<span class="color-span" style="background: #FBD88A">验证码</span>
|
||||
<span class="color-span" style="background: #879BD7">记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<div class="chart-box" id="hourly-chart" v-show="requestsTab == 'hourly'"></div>
|
||||
<div class="chart-box" id="daily-chart" v-show="requestsTab == 'daily'"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<h4>拦截类型分布</h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="group-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 域名排行 -->
|
||||
<h4 v-show="!isLoading">域名拦截排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-domains-chart"></div>
|
||||
</div>
|
||||
|
||||
<div class="ui column">
|
||||
<!-- 节点排行 -->
|
||||
<h4 v-show="!isLoading">节点拦截排行 <span>（24小时）</span></h4>
|
||||
<div class="ui divider"></div>
|
||||
<div class="chart-box" id="top-nodes-chart"></div>
|
||||
</div>
|
||||
</chart-columns-grid>
|
||||
255
EdgeAdmin/web/views/@default/dashboard/boards/waf.js
Normal file
255
EdgeAdmin/web/views/@default/dashboard/boards/waf.js
Normal file
@@ -0,0 +1,255 @@
|
||||
Tea.context(function () {
|
||||
this.isLoading = false
|
||||
|
||||
this.$delay(function () {
|
||||
this.board.countDailyBlocks = teaweb.formatCount(this.board.countDailyBlocks)
|
||||
this.board.countDailyCaptcha = teaweb.formatCount(this.board.countDailyCaptcha)
|
||||
this.board.countDailyLogs = teaweb.formatCount(this.board.countDailyLogs)
|
||||
this.board.countWeeklyBlocks = teaweb.formatCount(this.board.countWeeklyBlocks)
|
||||
|
||||
this.reloadHourlyChart()
|
||||
this.reloadGroupChart()
|
||||
this.reloadAccessLogs()
|
||||
this.reloadTopNodesChart()
|
||||
this.reloadTopDomainsChart()
|
||||
})
|
||||
|
||||
this.requestsTab = "hourly"
|
||||
|
||||
this.selectRequestsTab = function (tab) {
|
||||
this.requestsTab = tab
|
||||
this.$delay(function () {
|
||||
switch (tab) {
|
||||
case "hourly":
|
||||
this.reloadHourlyChart()
|
||||
break
|
||||
case "daily":
|
||||
this.reloadDailyChart()
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.reloadHourlyChart = function () {
|
||||
let axis = teaweb.countAxis(this.hourlyStats, function (v) {
|
||||
return v.countLogs + v.countCaptcha + v.countBlocks
|
||||
})
|
||||
let that = this
|
||||
this.reloadLineChart("hourly-chart", "按小时统计", this.hourlyStats, function (v) {
|
||||
return v.hour.substring(8, 10)
|
||||
}, function (args) {
|
||||
let index = args.dataIndex
|
||||
let hour = that.hourlyStats[index].hour.substring(0, 4) + "-" + that.hourlyStats[index].hour.substring(4, 6) + "-" + that.hourlyStats[index].hour.substring(6, 8) + " " + that.hourlyStats[index].hour.substring(8)
|
||||
return hour + "时<br/>拦截: "
|
||||
+ teaweb.formatNumber(that.hourlyStats[index].countBlocks) + "<br/>验证码: " + teaweb.formatNumber(that.hourlyStats[index].countCaptcha) + "<br/>记录: " + teaweb.formatNumber(that.hourlyStats[index].countLogs)
|
||||
}, axis)
|
||||
}
|
||||
|
||||
this.reloadDailyChart = function () {
|
||||
let axis = teaweb.countAxis(this.dailyStats, function (v) {
|
||||
return v.countLogs + v.countCaptcha + v.countBlocks
|
||||
})
|
||||
|
||||
let that = this
|
||||
this.reloadLineChart("daily-chart", "按天统计", this.dailyStats, function (v) {
|
||||
return v.day.substring(4, 6) + "月" + v.day.substring(6, 8) + "日"
|
||||
}, function (args) {
|
||||
let index = args.dataIndex
|
||||
let day = that.dailyStats[index].day.substring(0, 4) + "-" + that.dailyStats[index].day.substring(4, 6) + "-" + that.dailyStats[index].day.substring(6, 8)
|
||||
return day + "<br/>拦截: "
|
||||
+ teaweb.formatNumber(that.dailyStats[index].countBlocks) + "<br/>验证码: " + teaweb.formatNumber(that.dailyStats[index].countCaptcha) + "<br/>记录: " + teaweb.formatNumber(that.dailyStats[index].countLogs)
|
||||
}, axis)
|
||||
}
|
||||
|
||||
this.reloadLineChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
|
||||
let chartBox = document.getElementById(chartId)
|
||||
if (chartBox == null) {
|
||||
return
|
||||
}
|
||||
let chart = teaweb.initChart(chartBox)
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: stats.map(xFunc)
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return value + axis.unit
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: tooltipFunc
|
||||
},
|
||||
grid: {
|
||||
left: 42,
|
||||
top: 10,
|
||||
right: 20,
|
||||
bottom: 20
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: name,
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countLogs / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#879BD7"
|
||||
},
|
||||
areaStyle: {},
|
||||
stack: "总量",
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countCaptcha / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#FBD88A"
|
||||
},
|
||||
areaStyle: {},
|
||||
stack: "总量",
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
type: "line",
|
||||
data: stats.map(function (v) {
|
||||
return v.countBlocks / axis.divider;
|
||||
}),
|
||||
itemStyle: {
|
||||
color: "#F39494"
|
||||
},
|
||||
areaStyle: {},
|
||||
stack: "总量",
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
animation: true
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
this.reloadGroupChart = function () {
|
||||
let axis = teaweb.countAxis(this.groupStats, function (v) {
|
||||
return v.count
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "group-chart",
|
||||
values: this.groupStats,
|
||||
x: function (v) {
|
||||
return v.name
|
||||
},
|
||||
value: function (v) {
|
||||
return v.count / axis.divider
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
let index = args.dataIndex
|
||||
return stats[index].name + ": " + stats[index].count
|
||||
},
|
||||
axis: axis
|
||||
})
|
||||
}
|
||||
|
||||
this.accessLogs = []
|
||||
this.reloadAccessLogs = function () {
|
||||
this.$post(".wafLogs")
|
||||
.success(function (resp) {
|
||||
if (resp.data.accessLogs != null) {
|
||||
let regions = resp.data.regions
|
||||
let wafInfos = resp.data.wafInfos
|
||||
|
||||
let that = this
|
||||
resp.data.accessLogs.forEach(function (accessLog) {
|
||||
that.formatTime(accessLog)
|
||||
|
||||
if (typeof (regions[accessLog.remoteAddr]) == "string") {
|
||||
accessLog.region = regions[accessLog.remoteAddr]
|
||||
} else {
|
||||
accessLog.region = ""
|
||||
}
|
||||
if (accessLog.firewallRuleSetId > 0 && typeof (wafInfos[accessLog.firewallRuleSetId]) == "object") {
|
||||
accessLog.wafInfo = wafInfos[accessLog.firewallRuleSetId]
|
||||
} else {
|
||||
accessLog.wafInfo = null
|
||||
}
|
||||
})
|
||||
this.accessLogs = resp.data.accessLogs
|
||||
}
|
||||
})
|
||||
.done(function () {
|
||||
this.$delay(this.reloadAccessLogs, 10000)
|
||||
})
|
||||
}
|
||||
|
||||
this.formatTime = function (accessLog) {
|
||||
let elapsedSeconds = Math.ceil(new Date().getTime() / 1000) - accessLog.timestamp
|
||||
if (elapsedSeconds >= 0) {
|
||||
if (elapsedSeconds < 60) {
|
||||
accessLog.humanTime = elapsedSeconds + "秒前"
|
||||
} else if (elapsedSeconds < 3600) {
|
||||
accessLog.humanTime = Math.ceil(elapsedSeconds / 60) + "分钟前"
|
||||
} else if (elapsedSeconds < 3600 * 24) {
|
||||
accessLog.humanTime = Math.ceil(elapsedSeconds / 3600) + "小时前"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 节点排行
|
||||
this.reloadTopNodesChart = function () {
|
||||
let that = this
|
||||
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-nodes-chart",
|
||||
name: "节点",
|
||||
values: this.topNodeStats,
|
||||
x: function (v) {
|
||||
return v.nodeName
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
window.location = "/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + that.clusterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 域名排行
|
||||
this.reloadTopDomainsChart = function () {
|
||||
let axis = teaweb.countAxis(this.topDomainStats, function (v) {
|
||||
return v.countRequests
|
||||
})
|
||||
teaweb.renderBarChart({
|
||||
id: "top-domains-chart",
|
||||
name: "域名",
|
||||
values: this.topDomainStats,
|
||||
x: function (v) {
|
||||
return v.domain
|
||||
},
|
||||
tooltip: function (args, stats) {
|
||||
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
||||
},
|
||||
value: function (v) {
|
||||
return v.countRequests / axis.divider;
|
||||
},
|
||||
axis: axis,
|
||||
click: function (args, stats) {
|
||||
let index = args.dataIndex
|
||||
window.location = "/servers/server?serverId=" + stats[index].serverId
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
40
EdgeAdmin/web/views/@default/dashboard/boards/waf.less
Normal file
40
EdgeAdmin/web/views/@default/dashboard/boards/waf.less
Normal file
@@ -0,0 +1,40 @@
|
||||
.ui.message {
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
height: 14em;
|
||||
}
|
||||
|
||||
.traffic-map-box {
|
||||
height: 16em;
|
||||
|
||||
div::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-span {
|
||||
font-size: 0.8em;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
h4.header {
|
||||
a {
|
||||
font-size: 0.85em;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.access-box-box {
|
||||
max-height: 14em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.access-box-box::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user