226 lines
9.6 KiB
HTML
Vendored
226 lines
9.6 KiB
HTML
Vendored
{{define "theme-server-status/service"}}
|
||
{{template "theme-server-status/header" .}}
|
||
<div id="app">
|
||
{{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">
|
||
{{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;">
|
||
{{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>
|
||
{{template "theme-server-status/content-footer" .}}
|
||
</div>
|
||
<script>
|
||
// 初始化 Tooltip
|
||
$(document).ready(function(){
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
});
|
||
</script>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
delimiters: ['@#', '#@'],
|
||
data: {
|
||
page: 'service',
|
||
defaultTemplate: {{.Conf.Site.Theme}},
|
||
templates: {{.Themes}},
|
||
servicesTag: [],
|
||
servicesNoTag: [],
|
||
},
|
||
created() {
|
||
this.initData();
|
||
},
|
||
mounted() {
|
||
},
|
||
mixins: [mixinsVue],
|
||
methods: {
|
||
toSSBar(n) {
|
||
switch (n) {
|
||
case "fine":
|
||
return "success"
|
||
case "offline":
|
||
return "danger"
|
||
case "error":
|
||
return "danger"
|
||
case "warning":
|
||
return "warning"
|
||
}
|
||
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))
|
||
}
|
||
this.servicesTag = this.groupingData(services,"type");
|
||
this.servicesNoTag = services;
|
||
},
|
||
getPercent(up, down) {
|
||
if (!up) {
|
||
up = 0;
|
||
}
|
||
if (!down) {
|
||
down = 0
|
||
}
|
||
const currentUp = parseInt(up)
|
||
const currentDown = parseInt(down)
|
||
const total = currentUp + currentDown
|
||
if (total === 0) {
|
||
if (currentUp > 0) {
|
||
return 100
|
||
}
|
||
return 0
|
||
} else if (currentUp === 0) {
|
||
return 0.00001 / total * 100
|
||
}
|
||
return this.toFixed2(currentUp / total * 100)
|
||
},
|
||
getDayTails(service) {
|
||
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)
|
||
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`
|
||
result.push({
|
||
text, className
|
||
})
|
||
}
|
||
return result
|
||
},
|
||
beforeDay(days) {
|
||
const today = new Date();
|
||
today.setDate(today.getDate() - days);
|
||
// 获取月份和日期并格式化
|
||
const month = (today.getMonth() + 1).toString().padStart(2, '0');
|
||
const day = today.getDate().toString().padStart(2, '0');
|
||
return `${month}-${day}`;
|
||
},
|
||
getStateInfo(percent) {
|
||
if (percent < 0) {
|
||
percent = 0;
|
||
}
|
||
const result = {
|
||
className: "good",
|
||
text: "",
|
||
percent
|
||
}
|
||
if (percent === 0) {
|
||
result.className = ""
|
||
result.text = '{{tr "StatusNoData"}}'
|
||
} else if (percent > 95) {
|
||
result.className = "good"
|
||
result.text = '{{tr "StatusGood"}}'
|
||
} else if (percent > 80) {
|
||
result.className = "warning"
|
||
result.text = '{{tr "StatusLowAvailability"}}'
|
||
} else {
|
||
result.className = "danger"
|
||
result.text = '{{tr "StatusDown"}}'
|
||
}
|
||
return result;
|
||
},
|
||
getProgressInfo(percent) {
|
||
const result = this.getStateInfo(percent)
|
||
result.style = `width: ${parseInt(percent)}%`;
|
||
const className = result.className;
|
||
if (className === "good") {
|
||
result.className = 'progress-bar progress-bar-success'
|
||
} else if (className === "warning") {
|
||
result.className = 'progress-bar progress-bar-warning'
|
||
} else if (className === "danger") {
|
||
result.className = 'progress-bar progress-bar-danger'
|
||
} else {
|
||
result.className = ""
|
||
result.style = "width: 100%"
|
||
}
|
||
return result
|
||
},
|
||
}
|
||
})
|
||
</script>
|
||
{{template "theme-server-status/footer" .}}
|
||
{{end}}
|