nezha-2023/resource/template/theme-default/service.html

{{define "theme-default/service"}}
{{template "common/header" .}}
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="service-status">
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th class="ui center aligned">{{tr "Name"}}</th>
                        <th class="ui center aligned">{{tr "30DaysOnline"}}</th>
                        <th class="ui center aligned">{{tr "Details"}}</th>
                        <th class="ui center aligned">{{tr "Status"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $service := .Services}}
                    <tr>
                        <td class="ui center aligned">{{$service.Monitor.Name}}</td>
                        <td class="ui center aligned">
                            {{$service.TotalUptime|float32f}}%
                        </td>
                        <td class="ui center aligned">{{range $i,$d := $service.Delay}}
                            <div class="ui icon button {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}"
                                data-tooltip="{{dayBefore $i}}，{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%，{{tr "AverageLatency"}}:{{float32f $d}}ms">
                            </div> {{end}}
                        </td>
                        <td class="ui center aligned delay-today">
                            <i
                                class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
                            {{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
                        </td>
                    </tr> {{end}}
                </tbody>
            </table>

            {{if .CycleTransferStats}}

            <h2 style="text-align: center;">{{tr "CycleTransferStats"}}</h2>

            <table class="ui celled table">
                <thead>
                    <tr>
                        <th class="ui center aligned">ID</th>
                        <th class="ui center aligned">{{tr "Rules"}}</th>
                        <th class="ui center aligned">{{tr "Server"}}</th>
                        <th class="ui center aligned">{{tr "From"}}</th>
                        <th class="ui center aligned">{{tr "To"}}</th>
                        <th class="ui center aligned">MAX</th>
                        <th class="ui center aligned">MIN</th>
                        <th class="ui center aligned">{{tr "NextCheck"}}</th>
                        <th class="ui center aligned">{{tr "CurrentUsage"}}</th>
                        <th class="ui center aligned" style="display:none!important">用量</th>
                        <th class="ui center aligned" id="TotalTable" style="display:none!important">总量</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $id, $stats := .CycleTransferStats}}
                    {{range $innerId, $transfer := $stats.Transfer}}
                        <tr>
                            <td class="ui center aligned">{{$id}}</td>
                            <td class="ui center aligned">{{$stats.Name}}</td>
                            <td class="ui center aligned">{{index $stats.ServerName $innerId}}</td>
                            <td class="ui center aligned">{{$stats.From|tf}}</td>
                            <td class="ui center aligned">{{$stats.To|tf}}</td>
                            <td class="ui center aligned">{{$stats.Max|bf}}</td>
                            <td class="ui center aligned">{{$stats.Min|bf}}</td>
                            <td class="ui center aligned">{{(index $stats.NextUpdate $innerId)|sft}}</td>
                            <td class="ui center aligned">{{$transfer|bf}}</td>
                            <td class="ui center aligned used" style="display:none!important">{{$transfer}}</td>
                            <td class="ui center aligned total" style="display:none!important">{{$stats.Max}}</td>
                        </tr>
                    {{end}}
                    {{end}}
                </tbody>
            </table>

            {{end}}
        </div>
    </div>
</div>
<script>
window.onload = function(){
var used = []
var total = []
var percent = []
$("#TotalTable").after("<th class='ui center aligned' style='padding: 0px 31px 0px 31px;'>剩余</th>")
$('.used').each(function () {
        used.push($(this).html())
    })
$('.total').each(function () {
        total.push($(this).html())
    })
for(var i=0;i<used.length;i++){
    percent[i] = (100 - ((used[i] / total[i]) * 100)).toFixed(2)
    if (percent[i] < 25){
            $(".total").eq(i).after("<td class='ui center aligned' style='padding: 14px 0px 0px 0px; position: relative;><div class='thirteen wide column'><div class='ui progress warning'><div class='bar' style='transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: "+percent[i]+"% !important;'><small>"+percent[i]+"%</small></div></div></div></td>") 
    }else{
            $(".total").eq(i).after("<td class='ui center aligned' style='padding: 14px 0px 0px 0px; position: relative;'><div class='thirteen wide column'><div class='ui progress fine'><div class='bar' style='transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: "+percent[i]+"% !important;'><small>"+percent[i]+"%</small></div></div></div></td>") 
    } 
}
}
</script>
{{template "common/footer" .}}
{{end}}