优化server-status主题服务页 (#382)
This commit is contained in:
nap0o
GitHub
parent
740d15bf79
commit
0613b0022d
@ -27,6 +27,9 @@ const mixinsVue = {
|
||||
toggleView() {
|
||||
this.showGroup = !this.showGroup;
|
||||
localStorage.setItem("showGroup", JSON.stringify(this.showGroup));
|
||||
if(this.$root.page == 'service') {
|
||||
this.$root.initTooltip();
|
||||
}
|
||||
return this.showGroup;
|
||||
},
|
||||
storedShowGroup() {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
||||
<script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
<script src="https://unpkg.com/echarts@4.9.0/map/js/world.js"></script>
|
||||
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
|
||||
<script src="/static/theme-server-status/js/mixin.js?v20240630"></script>
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/static/theme-server-status/js/html5shiv.js"></script>
|
||||
|
||||
213
resource/template/theme-server-status/service.html
vendored
213
resource/template/theme-server-status/service.html
vendored
@ -4,74 +4,74 @@
|
||||
{{template "theme-server-status/content-nav" .}}
|
||||
<!-- showGroup true -->
|
||||
<template v-if="showGroup">
|
||||
<section class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
||||
<section v-if="servicesTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||
</section>
|
||||
<section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
||||
{{template "theme-server-status/service-group-true" .}}
|
||||
</section>
|
||||
</template>
|
||||
<!-- showGroup false -->
|
||||
<template v-else>
|
||||
<section class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
||||
<section v-if="servicesNoTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||
</section>
|
||||
<section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
||||
{{template "theme-server-status/service-group-false" .}}
|
||||
</section>
|
||||
</template>
|
||||
<section class="container content table-responsive" style="max-width: 95vw">
|
||||
{{if .CycleTransferStats}}
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr class="node-group-tag">
|
||||
<th colspan="16" style="border:none;">
|
||||
{{tr "CycleTransferStats"}}
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="node-group-cell">
|
||||
<th class="node-cell center">ID</th>
|
||||
<th class="node-cell center">{{tr "Rules"}}</th>
|
||||
<th class="node-cell center">{{tr "Server"}}</th>
|
||||
<th class="node-cell center">{{tr "From"}}</th>
|
||||
<th class="node-cell center">{{tr "To"}}</th>
|
||||
<th class="node-cell center">MAX</th>
|
||||
<th class="node-cell center">MIN</th>
|
||||
<th class="node-cell center">{{tr "NextCheck"}}</th>
|
||||
<th class="node-cell center">{{tr "CurrentUsage"}}</th>
|
||||
<th class="node-cell center">{{tr "Transleft"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $id, $stats := .CycleTransferStats}}
|
||||
{{range $innerId, $transfer := $stats.Transfer}}
|
||||
{{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
|
||||
<tr>
|
||||
<td class="node-cell center">{{$id}}</td>
|
||||
<td class="node-cell center">{{$stats.Name}}</td>
|
||||
<td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
|
||||
<td class="node-cell center">{{$stats.From|tf}}</td>
|
||||
<td class="node-cell center">{{$stats.To|tf}}</td>
|
||||
<td class="node-cell center">{{$stats.Max|bf}}</td>
|
||||
<td class="node-cell center">{{$stats.Min|bf}}</td>
|
||||
<td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
|
||||
<td class="node-cell center">{{$transfer|bf}}</td>
|
||||
<td class="node-cell center">
|
||||
<div class="progress">
|
||||
<div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
|
||||
<small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{end}}
|
||||
</section>
|
||||
{{if .CycleTransferStats}}
|
||||
<section class="container content table-responsive" style="max-width: 95vw">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr class="node-group-tag">
|
||||
<th colspan="16" style="border:none;">
|
||||
{{tr "CycleTransferStats"}}
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="node-group-cell">
|
||||
<th class="node-cell center">ID</th>
|
||||
<th class="node-cell center">{{tr "Rules"}}</th>
|
||||
<th class="node-cell center">{{tr "Server"}}</th>
|
||||
<th class="node-cell center">{{tr "From"}}</th>
|
||||
<th class="node-cell center">{{tr "To"}}</th>
|
||||
<th class="node-cell center">MAX</th>
|
||||
<th class="node-cell center">MIN</th>
|
||||
<th class="node-cell center">{{tr "NextCheck"}}</th>
|
||||
<th class="node-cell center">{{tr "CurrentUsage"}}</th>
|
||||
<th class="node-cell center">{{tr "Transleft"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $id, $stats := .CycleTransferStats}}
|
||||
{{range $innerId, $transfer := $stats.Transfer}}
|
||||
{{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
|
||||
<tr>
|
||||
<td class="node-cell center">{{$id}}</td>
|
||||
<td class="node-cell center">{{$stats.Name}}</td>
|
||||
<td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
|
||||
<td class="node-cell center">{{$stats.From|tf}}</td>
|
||||
<td class="node-cell center">{{$stats.To|tf}}</td>
|
||||
<td class="node-cell center">{{$stats.Max|bf}}</td>
|
||||
<td class="node-cell center">{{$stats.Min|bf}}</td>
|
||||
<td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
|
||||
<td class="node-cell center">{{$transfer|bf}}</td>
|
||||
<td class="node-cell center">
|
||||
<div class="progress">
|
||||
<div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
|
||||
<small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
{{end}}
|
||||
{{template "theme-server-status/content-footer" .}}
|
||||
</div>
|
||||
<script>
|
||||
// 初始化 Tooltip
|
||||
$(document).ready(function(){
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
@ -80,13 +80,16 @@
|
||||
page: 'service',
|
||||
defaultTemplate: {{.Conf.Site.Theme}},
|
||||
templates: {{.Themes}},
|
||||
services: {{.Services}},
|
||||
servicesTag: [],
|
||||
servicesNoTag: [],
|
||||
servicesNoTag: []
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
this.servicesTag = this.groupingData(this.initData(this.services),"type");
|
||||
this.servicesNoTag = this.initData(this.services);
|
||||
},
|
||||
mounted() {
|
||||
this.initTooltip();
|
||||
},
|
||||
mixins: [mixinsVue],
|
||||
methods: {
|
||||
@ -103,32 +106,36 @@
|
||||
}
|
||||
return n
|
||||
},
|
||||
initData() {
|
||||
// @formatter:off
|
||||
const services = []
|
||||
{{range $service := .Services}}
|
||||
services.push({
|
||||
type: '{{$service.Monitor.Type}}',
|
||||
name: '{{$service.Monitor.Name}}',
|
||||
currentUp: parseInt('{{$service.CurrentUp}}'),
|
||||
currentDown: parseInt('{{$service.CurrentDown}}'),
|
||||
totalUp: parseInt('{{$service.TotalUp}}'),
|
||||
totalDown: parseInt('{{$service.TotalDown}}'),
|
||||
delay: '{{$service.Delay}}'.replaceAll("[","").replaceAll("]","").split(" "),
|
||||
up: '{{$service.Up}}'.replaceAll("[","").replaceAll("]","").split(" "),
|
||||
down: '{{$service.Down}}'.replaceAll("[","").replaceAll("]","").split(" "),
|
||||
})
|
||||
{{end}}
|
||||
// @formatter:on
|
||||
for (let i = 0; i < services.length; i++) {
|
||||
const service = services[i];
|
||||
service.avgDelay = parseInt(service.delay[service.delay.length - 1]) + "ms"
|
||||
service.health = this.getStateInfo(this.getPercent(service.currentUp, service.currentDown))
|
||||
service.dayDetail = this.getDayTails(service)
|
||||
service.totalUpTime = this.getProgressInfo(this.getPercent(service.totalUp, service.totalDown))
|
||||
initData(services) {
|
||||
let nodes = [];
|
||||
for (let key in services) {
|
||||
const service = services[key];
|
||||
let node = {
|
||||
type: service.Monitor.Type,
|
||||
name: service.Monitor.Name,
|
||||
currentUp: parseInt(service.CurrentUp),
|
||||
currentDown: parseInt(service.CurrentDown),
|
||||
totalUp: parseInt(service.TotalUp),
|
||||
totalDown: parseInt(service.TotalDown),
|
||||
up: service.Up,
|
||||
down: service.Down,
|
||||
delay: service.Delay,
|
||||
avgDelay: parseInt(this.getAvgDelay(service.Delay)) + "ms",
|
||||
health: this.getStateInfo(this.getPercent(service.CurrentUp, service.CurrentDown)),
|
||||
totalUpTime: this.getProgressInfo(this.getPercent(service.TotalUp, service.TotalDown))
|
||||
};
|
||||
nodes.push(node);
|
||||
};
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
node.dayDetail = this.getDayTails(node)
|
||||
}
|
||||
this.servicesTag = this.groupingData(services,"type");
|
||||
this.servicesNoTag = services;
|
||||
return nodes
|
||||
},
|
||||
initTooltip() {
|
||||
$(document).ready(function(){
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
},
|
||||
getPercent(up, down) {
|
||||
if (!up) {
|
||||
@ -151,24 +158,24 @@
|
||||
return this.toFixed2(currentUp / total * 100)
|
||||
},
|
||||
getDayTails(service) {
|
||||
const result = []
|
||||
const result = [];
|
||||
for (let i = 0; i < service.up.length; i++) {
|
||||
const up = service.up[i]
|
||||
const down = service.down[i]
|
||||
const delay = service.delay[i]
|
||||
let percent = this.getPercent(up, down)
|
||||
const up = service.up[i];
|
||||
const down = service.down[i];
|
||||
let delay = Number(service.delay[i]);
|
||||
let percent = this.getPercent(up, down);
|
||||
if (percent <= 0) {
|
||||
percent = 0;
|
||||
}
|
||||
let className = this.getStateInfo(percent).className
|
||||
let available = '{{tr "Availability"}}'
|
||||
let averageLatency = '{{tr "AverageLatency"}}'
|
||||
const text = `${this.beforeDay(service.up.length - i - 1)}，${available}：${percent}%，${averageLatency}：${delay}ms`
|
||||
let className = this.getStateInfo(percent).className;
|
||||
let available = '{{tr "Availability"}}';
|
||||
let averageLatency = '{{tr "AverageLatency"}}';
|
||||
const text = `${this.beforeDay(service.up.length - i - 1)}，${available}：${Number(percent).toFixed(3)}%，${averageLatency}：${Number(delay).toFixed(3)}ms`;
|
||||
result.push({
|
||||
text, className
|
||||
})
|
||||
});
|
||||
}
|
||||
return result
|
||||
return result;
|
||||
},
|
||||
beforeDay(days) {
|
||||
const today = new Date();
|
||||
@ -203,8 +210,9 @@
|
||||
return result;
|
||||
},
|
||||
getProgressInfo(percent) {
|
||||
const result = this.getStateInfo(percent)
|
||||
const result = this.getStateInfo(percent);
|
||||
result.style = `width: ${parseInt(percent)}%`;
|
||||
result.percent = Number(percent).toFixed(2);
|
||||
const className = result.className;
|
||||
if (className === "good") {
|
||||
result.className = 'progress-bar progress-bar-success'
|
||||
@ -218,6 +226,17 @@
|
||||
}
|
||||
return result
|
||||
},
|
||||
getAvgDelay(array) {
|
||||
const { sum, count } = array.reduce((acc, value) => {
|
||||
if (value !== 0) {
|
||||
acc.sum += value;
|
||||
acc.count += 1;
|
||||
}
|
||||
return acc;
|
||||
}, { sum: 0, count: 0 });
|
||||
|
||||
return count > 0 ? sum / count : 0;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user