nezha/resource/template/theme-default/home.html

{{define "theme-default/home"}}
{{template "common/header" .}}
{{if ts .CustomCSS}}
{{tag "style"}}
{{.CustomCSS|css}}
{{tag "/style"}}
{{end}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="ui four stackable status cards">
            <div v-for='server in servers' :id="server.ID" class="card">
                <div class="content" v-if='server.Host'>
                    <div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
                            v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
                            v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
                            v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
                            v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name + (server.live?'':' [已离线]')#@
                        <i class="yellow info circle icon"></i>
                        <div class='ui content popup'>
                            系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
                                v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
                            CPU：@#server.Host.CPU#@<br>
                            硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
                            内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
                            交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
                            流量：<i
                                class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i
                                class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br>
                            启动：@# formatTimestamp(server.Host.BootTime) #@<br>
                            版本：@#server.Host.Version#@<br>
                        </div>
                    </div>
                    <div class="description">
                        <div class="ui grid">
                            <div class="three wide column">CPU</div>
                            <div class="thirteen wide column">
                                <div :class="formatPercent(server.live,server.State.CPU, 100).class">
                                    <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">内存</div>
                            <div class="thirteen wide column">
                                <div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
                                    <div class="bar"
                                        :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">交换</div>
                            <div class="thirteen wide column">
                                <div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
                                    <div class="bar"
                                        :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">网络</div>
                            <div class="thirteen wide column">
                                <i class="arrow alternate circle down outline icon"></i>
                                @#formatByteSize(server.State.NetInSpeed)#@/s
                                <i class="arrow alternate circle up outline icon"></i>
                                @#formatByteSize(server.State.NetOutSpeed)#@/s
                            </div>
                            <div class="three wide column">硬盘</div>
                            <div class="thirteen wide column">
                                <div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
                                    <div class="bar"
                                        :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">在线</div>
                            <div class="thirteen wide column">
                                <i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-else>
                    <p>@#server.Name#@</p>
                    <p>节点已离线</p>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "common/footer" .}}
<script>
    const initData = {{.Servers }};
    var statusCards = new Vue({
        el: 'div.status.cards',
        delimiters: ['@#', '#@'],
        data: {
            servers: initData,
            pulled: false,
            cache: [],
        },
        mounted() {
            $('.yellow.info.icon').popup({
                popup: '.ui.content.popup'
            });
        },
        methods: {
            formatPercent(live, used, total) {
                const percent = live ? (parseInt(used / total * 100) || 0) : -1
                if (!this.cache[percent]) {
                    this.cache[percent] = {
                        class: {
                            ui: true,
                            progress: true,
                        },
                        style: {
                            'transition-duration': '300ms',
                            'min-width': 'unset',
                            width: percent + '% !important',
                        },
                        percent,
                    }
                    if (percent < 0) {
                        this.cache[percent].style['background-color'] = 'slategray'
                        this.cache[percent].class.offline = true
                    } else if (percent < 51) {
                        this.cache[percent].style['background-color'] = 'lime'
                        this.cache[percent].class.fine = true
                    } else if (percent < 81) {
                        this.cache[percent].style['background-color'] = 'orange'
                        this.cache[percent].class.warning = true
                    } else {
                        this.cache[percent].style['background-color'] = 'crimson'
                        this.cache[percent].class.error = true
                    }
                }
                return this.cache[percent]
            },
            secondToDate(s) {
                var d = Math.floor(s / 3600 / 24);
                var h = Math.floor(s / 3600 % 24);
                var m = Math.floor((s / 60 % 60));
                var s = Math.floor((s % 60));
                return result = d + "天" + h + "小时" + m + "分钟" + s + "秒";
            },
            formatTimestamp(t) {
                return new Date(t * 1000).toLocaleString()
            },
            formatByteSize(bs) {
                const x = readableBytes(bs)
                return x != "NaN undefined" ? x : '0 KB'
            }
        }
    })
    const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
    const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
    ws.onopen = function (evt) {
        $.suiAlert({
            title: '实时通道建立',
            description: '可以实时获取最新监控数据啦',
            type: 'success',
            time: '2',
            position: 'top-center',
        });
        ws.send('track');
        setInterval(() => {
            ws.send('track');
            console.log('追加监控时间')
        }, 1000 * 60 * 6);
    }
    ws.onmessage = function (evt) {
        const oldServers = statusCards.servers
        statusCards.servers = JSON.parse(evt.data)
        statusCards.pulled++
        const keys = Object.keys(statusCards.servers)
        for (let i = 0; i < keys.length; i++) {
            const ns = statusCards.servers[keys[i]];
            if (!ns.Host) ns.live = false
            else {
                const lastActive = new Date(ns.LastActive).getTime()
                if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
                    ns.live = false
                } else {
                    ns.live = true
                }
            }
            for (let j = 0; j < oldServers.length; j++) {
                const os = oldServers[j];
                if (ns.ID == os.ID) {
                    break
                }
                // 新加入的仔
                $('#' + ns.ID + ' .yellow.info.icon').popup({
                    popup: '.ui.content.popup'
                });
            }
        }
    }
    ws.onclose = function () {
        $.suiAlert({
            title: '实时通道断开',
            description: '无法实时获取最新监控数据咯',
            type: 'warning',
            time: '2',
            position: 'top-center',
        });
    }
</script>
{{end}}