2021-07-05 11:38:07 +08:00
{$layout}
{$template "/echarts"}
< div class = "ui four columns grid" >
< div class = "ui column" >
< h4 > 在线节点< link-icon :href = "'/clusters/cluster/nodes?clusterId=' + clusterId" > < / link-icon > < / h4 >
< div class = "value" > < span > {{board.countActiveNodes}}< / span > 个< / div >
< / div >
< div class = "ui column" >
< h4 > 离线节点< link-icon :href = "'/clusters/cluster/nodes?clusterId=' + clusterId" > < / link-icon > < / h4 >
< div class = "value" > < span :class = "{red: board.countInactiveNodes > 0}" > {{board.countInactiveNodes}}< / span > 个< / div >
< / div >
< div class = "ui column" >
< h4 > 服务< / h4 >
< div class = "value" > < span > {{board.countServers}}< / span > 个< / div >
< / div >
< div class = "ui column no-border" >
< h4 > 用户< / h4 >
< div class = "value" > < span > {{board.countUsers}}< / span > 个< / div >
< / div >
< / div >
< div class = "ui menu tabular" >
< 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 = "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 class = "ui divider" > < / div >
< div class = "ui menu tabular" >
< 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 = "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 class = "ui divider" > < / div >
<!-- 域名排行 -->
2021-07-06 20:06:20 +08:00
< h4 > 域名访问排行 < span > （ ） < / span > < / h4 >
2021-07-05 11:38:07 +08:00
< div class = "chart-box" id = "top-domains-chart" > < / div >
< div class = "ui divider" > < / div >
<!-- 节点排行 -->
2021-07-06 20:06:20 +08:00
< h4 > 节点访问排行 < span > （ ） < / span > < / h4 >
2021-07-05 11:38:07 +08:00
< div class = "chart-box" id = "top-nodes-chart" > < / div >
< div class = "ui divider" > < / div >
< div class = "ui menu tabular" >
< 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 = "chart-box" id = "cpu-chart" v-show = "nodeStatusTab == 'cpu'" > < / div >
< div class = "chart-box" id = "memory-chart" v-show = "nodeStatusTab == 'memory'" > < / div >
2021-07-06 20:06:20 +08:00
< div class = "chart-box" id = "load-chart" v-show = "nodeStatusTab == 'load'" > < / div >
<!-- 指标 -->
< div class = "ui divider" v-if = "metricCharts.length > 0" > < / div >
< metric-board >
< metric-chart v-for = "chart in metricCharts" :key = "chart.id" :v-chart = "chart.chart" :v-stats = "chart.stats" :v-period = "chart.item.period" :v-period-unit = "chart.item.periodUnit" :v-value-type = "chart.item.valueType" > < / metric-chart >
< / metric-board >
