nezha/resource/template/theme-server-status/home.html

{{define "theme-server-status/home"}}
{{template "theme-server-status/header" .}}
<div id="app">
    {{template "theme-server-status/content-nav" .}}   
    <!--  showGroup true -->
    <template v-if="showGroup">
        <section class="container table-responsive content" style="max-width: 95vw" v-for="group in nodesTag">
            {{template "theme-server-status/home-group-true" .}} 
        </section>
    </template>
    <!--  showGroup false -->
    <template v-else>
        <section class="container table-responsive content" style="max-width: 95vw">
            {{template "theme-server-status/home-group-false" .}}
        </section>
    </template>
    <div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
                    <i class="bi bi-x" data-dismiss="modal" aria-label="Close"></i>
                </div>
                <div class="modal-body">
                    <div id="mapChart" style="width:100%;height:auto;"></div>
                </div>
            </div>
        </div>
    </div>
    {{template "theme-server-status/content-footer" .}}
</div>
<script>
    new Vue({
        el: '#app',
        delimiters: ['@#', '#@'],
        data: {
            page: 'index',
            defaultTemplate: {{.Conf.Site.Theme}},
            templates: {{.Themes}},
            cache: [],
            servers: [],
            nodesTag: [],
            nodesNoTag: [],
            chartDataList: [],
            ws: null,
            language: {{.Conf.Language}},
            countryMap: {"ad":{"flag":"🇦🇩","en":"Andorra","zh":"安道尔"},"ae":{"flag":"🇦🇪","en":"United Arab Emirates","zh":"阿联酋"},"af":{"flag":"🇦🇫","en":"Afghanistan","zh":"阿富汗"},"ag":{"flag":"🇦🇬","en":"Antigua and Barb.","zh":"安提瓜和巴布达"},"ai":{"flag":"🇦🇮","en":"Anguilla","zh":"安圭拉"},"al":{"flag":"🇦🇱","en":"Albania","zh":"阿尔巴尼亚"},"am":{"flag":"🇦🇲","en":"Armenia","zh":"亚美尼亚"},"ao":{"flag":"🇦🇴","en":"Angola","zh":"安哥拉"},"aq":{"flag":"🇦🇶","en":"Antarctica","zh":"南极洲"},"ar":{"flag":"🇦🇷","en":"Argentina","zh":"阿根廷"},"as":{"flag":"🇦🇸","en":"American Samoa","zh":"美属萨摩亚"},"Ashmore and Cartier Is.":{"flag":"","en":"Ashmore and Cartier Is.","zh":"阿什莫尔和卡捷群岛"},"at":{"flag":"🇦🇹","en":"Austria","zh":"奥地利"},"au":{"flag":"🇦🇺","en":"Australia","zh":"澳大利亚"},"aw":{"flag":"🇦🇼","en":"Aruba","zh":"阿鲁巴"},"ax":{"flag":"🇦🇽","en":"Åland","zh":"奥兰"},"az":{"flag":"🇦🇿","en":"Azerbaijan","zh":"阿塞拜疆"},"ba":{"flag":"🇧🇦","en":"Bosnia and Herz.","zh":"波黑"},"bb":{"flag":"🇧🇧","en":"Barbados","zh":"巴巴多斯"},"bd":{"flag":"🇧🇩","en":"Bangladesh","zh":"孟加拉国"},"be":{"flag":"🇧🇪","en":"Belgium","zh":"比利时"},"bf":{"flag":"🇧🇫","en":"Burkina Faso","zh":"布基纳法索"},"bg":{"flag":"🇧🇬","en":"Bulgaria","zh":"保加利亚"},"bh":{"flag":"🇧🇭","en":"Bahrain","zh":"巴林"},"bi":{"flag":"🇧🇮","en":"Burundi","zh":"布隆迪"},"bj":{"flag":"🇧🇯","en":"Benin","zh":"贝宁"},"bl":{"flag":"🇧🇱","en":"St-Barthélemy","zh":"圣巴泰勒米"},"bm":{"flag":"🇧🇲","en":"Bermuda","zh":"百慕大"},"bn":{"flag":"🇧🇳","en":"Brunei","zh":"文莱"},"bo":{"flag":"🇧🇴","en":"Bolivia","zh":"玻利维亚"},"bq":{"flag":"🇧🇶","en":"Bonaire, Sint Eustatius and Saba","zh":"荷兰加勒比区"},"br":{"flag":"🇧🇷","en":"Brazil","zh":"巴西"},"bs":{"flag":"🇧🇸","en":"Bahamas","zh":"巴哈马"},"bt":{"flag":"🇧🇹","en":"Bhutan","zh":"不丹"},"bv":{"flag":"🇧🇻","en":"Bouvet Island","zh":"布韦岛"},"bw":{"flag":"🇧🇼","en":"Botswana","zh":"博茨瓦纳"},"by":{"flag":"🇧🇾","en":"Belarus","zh":"白俄罗斯"},"bz":{"flag":"🇧🇿","en":"Belize","zh":"伯利兹"},"ca":{"flag":"🇨🇦","en":"Canada","zh":"加拿大"},"cc":{"flag":"🇨🇨","en":"Cocos (Keeling) Islands","zh":"科科斯（基林）群岛"},"cd":{"flag":"🇨🇩","en":"Dem. Rep. Congo","zh":"刚果民主共和国"},"cf":{"flag":"🇨🇫","en":"Central African Rep.","zh":"中非"},"cg":{"flag":"🇨🇬","en":"Congo","zh":"刚果共和国"},"ch":{"flag":"🇨🇭","en":"Switzerland","zh":"瑞士"},"ci":{"flag":"🇨🇮","en":"Côte d'Ivoire","zh":"科特迪瓦"},"ck":{"flag":"🇨🇰","en":"Cook Is.","zh":"库克群岛"},"cl":{"flag":"🇨🇱","en":"Chile","zh":"智利"},"cm":{"flag":"🇨🇲","en":"Cameroon","zh":"喀麦隆"},"cn":{"flag":"🇨🇳","en":"China","zh":"中国"},"co":{"flag":"🇨🇴","en":"Colombia","zh":"哥伦比亚"},"cr":{"flag":"🇨🇷","en":"Costa Rica","zh":"哥斯达黎加"},"cu":{"flag":"🇨🇺","en":"Cuba","zh":"古巴"},"cv":{"flag":"🇨🇻","en":"Cabo Verde","zh":"佛得角"},"cw":{"flag":"🇨🇼","en":"Curaçao","zh":"库拉索"},"cx":{"flag":"🇨🇽","en":"Christmas Island","zh":"圣诞岛"},"cy":{"flag":"🇨🇾","en":"Cyprus","zh":"塞浦路斯"},"cz":{"flag":"🇨🇿","en":"Czech Rep.","zh":"捷克"},"de":{"flag":"🇩🇪","en":"Germany","zh":"德国"},"dj":{"flag":"🇩🇯","en":"Djibouti","zh":"吉布提"},"dk":{"flag":"🇩🇰","en":"Denmark","zh":"丹麦"},"dm":{"flag":"🇩🇲","en":"Dominica","zh":"多米尼克"},"do":{"flag":"🇩🇴","en":"Dominican Rep.","zh":"多米尼加"},"dz":{"flag":"🇩🇿","en":"Algeria","zh":"阿尔及利亚"},"ec":{"flag":"🇪🇨","en":"Ecuador","zh":"厄瓜多尔"},"ee":{"flag":"🇪🇪","en":"Estonia","zh":"爱沙尼亚"},"eg":{"flag":"🇪🇬","en":"Egypt","zh":"埃及"},"eh":{
            countryServer: [],
            countryNameMap: {},
            countryMapChartData: []
        },
        mixins: [mixinsVue],
        created() {
            this.servers = JSON.parse('{{.Servers}}').servers;
            if(this.showGroup) {
                this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
            } else {
                this.nodesNoTag = this.handleNodes(this.servers);
            }
            this.countryNameMap = this.initCountryNameMap();
            this.countryServer = this.initCountryServer();
            this.countryMapChartData = this.initCountryMapChartData();
        },
        mounted() {
            // 初始化时建立WebSocket连接
            this.connect();
            // 监听页面可见性变化
            document.addEventListener("visibilitychange", () => {
                if (document.visibilityState === "visible") {
                    setTimeout(() => {
                        if (document.hasFocus()) {
                            this.connect();
                        }
                    }, 200);
                }
            });
        },
        methods: {
            initCountryNameMap(){
                const result = {};
                for (const item in this.countryMap) {
                    result[this.countryMap[item].en] = this.language=='zh-CN' ? this.countryMap[item].zh : this.countryMap[item].en;
                }
                return result;
            },
            initCountryServer() {
                let count = {};
                let result = [];
                let exist = {};
                this.servers.forEach(item => {
                    if (item.Host.CountryCode) {
                        if(item.Host.CountryCode.toLowerCase() == 'tw' || item.Host.CountryCode.toLowerCase() == 'hk' || item.Host.CountryCode.toLowerCase() == 'mo') item.Host.CountryCode = 'cn';
                        if (!exist[item.Host.CountryCode]) {
                            exist[item.Host.CountryCode] = true;
                            count[item.Host.CountryCode] = 1;
                            const obj = {
                                'countryCode': item.Host.CountryCode,
                                'count': count[item.Host.CountryCode]
                            };
                            result.push(obj);
                        } else {
                            count[item.Host.CountryCode]++;
                            result.find(obj => obj.countryCode === item.Host.CountryCode).count = count[item.Host.CountryCode];
                        }
                    }
                });
                return result;
            },
            initCountryMapChartData(){
                let result = [];
                this.countryServer.forEach(item => {
                    var obj = {
                        "name": this.language=='zh-CN' ? this.countryMap[item.countryCode].zh : this.countryMap[item.countryCode].en,
                        "value": item.count
                    }
                    result.push(obj);
                });
                return result;
            },
            showMapChart(){
                // 处理异常
                if( this.countryMapChartData.length == 0 ) {
                    console.log('init countryMapChartData not complete');
                    return;
                }
                const isMobile = this.checkIsMobile();
                const width = isMobile ? 338 : 1102;
                const height = isMobile ? 200 : 500;
                const backgroundColor = this.theme == "dark" ? '#1C1D26' : '#ffffff';
                const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
                const fontSize = isMobile ? 10 : 12;
                const fontColor = this.theme == "dark" ? "#000000" : "#000000";     
                const chartContainer = document.getElementById('mapChart');
                const mapChart = echarts.init(chartContainer, '', { // init图表
                    renderer: 'canvas',
                    useDirtyRect: false,
                    width: width,
                    height: height,
                });
                const option = {
                    title: {
                        show: false,
                    },
                    backgroundColor: backgroundColor,
                    grid: {
                        top: 0,
                        left: 10,
                        right: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (params.data && params.data.value > 0) {
                                const unit = this.language=='zh-CN' ? '台' : ' Servers';
                                return params.name + ' ' + params.data.value + unit;
                            } else {
                                return '';
                            }
                        },
                        backgroundColor: tooltipBackgroundColor,
                        borderColor: tooltipBorderColor,
                        padding: [4,10],
                        textStyle: {
                            fontSize: fontSize,
                            color: fontColor
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 1000,
                        calculable: false,
                        inRange: {
                            color: inRangeColor
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: 'world',
                            roam: true,
                            label: {
                                show: false,
                                fontSize: 8
                            },
                            data: this.countryMapChartData,
                            nameMap: this.countryNameMap,
                        }
                    ]
                };
                mapChart.setOption(option);
            },
            isWindowsPlatform(str) {
                return str.includes('Windows')
            },
            getFontLogoClass(str) {
                if (["almalinux",
                        "alpine",
                        "aosc",
                        "apple",
                        "archlinux",
                        "archlabs",
                        "artix",
                        "budgie",
                        "centos",
                        "coreos",
                        "debian",
                        "deepin",
                        "devuan",
                        "docker",
                        "elementary",
                        "fedora",
                        "ferris",
                        "flathub",
                        "freebsd",
                        "gentoo",
                        "gnu-guix",
                        "illumos",
                        "kali-linux",
                        "linuxmint",
                        "mageia",
                        "mandriva",
                        "manjaro",
                        "nixos",
                        "openbsd",
                        "opensuse",
                        "pop-os",
                        "raspberry-pi",
                        "redhat",
                        "rocky-linux",
                        "sabayon",
                        "slackware",
                        "snappy",
                        "solus",
                        "tux",
                        "ubuntu",
                        "void",
                        "zorin"].indexOf(str)
                    > -1) {
                    return str;
                }
                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
                    return 'tux';
                }
                if (str == 'amazon') {
                    return 'redhat';
                }
                if (str == 'arch') {
                    return 'archlinux';
                }
                return '';
            },
            secondToDate(s) {
                const d = Math.floor(s / 3600 / 24);
                if (d > 0) {
                    return d + ' {{tr "Day"}}'
                }
                const h = Math.floor(s / 3600 % 24);
                const m = Math.floor(s / 60 % 60);
                const second = Math.floor(s % 60);
                return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + second).slice(-2);
            },
            formatTimestamp(t) {
                return new Date(t * 1000).toLocaleString()
            },
            formatByteSize(bs) {
                const x = this.readableBytes(bs)
                return x !== "NaN undefined" ? x : '0B'
            },
            formatPercent(live, used, total) {
                //const percent = live ? (this.toFixed2(used / total * 100) || 0) : 0
                const percent = (this.toFixed2(used / total * 100) || 0)
                return this.formatPercents(live,percent)
            },
            formatPercents(live,percent) {
                //if(!live) { percent = 0; }
                if (percent <= 0) {
                    percent = 0;
                }
                if (percent >= 100) {
                    percent = 100;
                }
                if (!this.cache[percent]) {
                    this.cache[percent] = {
                        class: 'progress-bar progress-bar-success',
                        style: `width: ${parseInt(percent)+1}%`,
                        percent,
                    }
                    if (percent < 80) {
                        this.cache[percent].class = 'progress-bar progress-bar-success'
                    } else if (percent < 90) {
                        this.cache[percent].class = 'progress-bar progress-bar-warning'
                    } else {
                        this.cache[percent].class = 'progress-bar progress-bar-danger'
                    }
                }
                return this.cache[percent]
            },
            readableBytes(bytes) {
                if (!bytes) {
                    return '0B'
                }
                const i = Math.floor(Math.log(bytes) / Math.log(1024)),
                    sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
                return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
            },
            connect() {
                // 如果已经存在 WebSocket 连接并且处于开启状态，则不重复建立连接
                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                    console.log('Closing old WebSocket connection...');
                    this.ws.close();
                }
                const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
                this.ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');

                this.ws.onopen = function () {
                    console.log("Connection open ...")
                }
                this.ws.onmessage = (evt) => {
                    let jsonData = evt.data
                    const data = JSON.parse(jsonData)
                    for (let i = 0; i < data.servers?.length; i++) {
                        const ns = data.servers[i];
                        if (!ns.Host) {
                            data.servers[i].live = false
                        } else {
                            const lastActive = new Date(ns.LastActive).getTime()
                            data.servers[i].live = data.now - lastActive <= 10 * 1000;
                        }
                    }
                    if(this.showGroup) {
                        this.nodesTag = this.groupingData(this.handleNodes(data.servers),"Tag");
                    } else {
                        this.nodesNoTag = this.handleNodes(data.servers);
                    }
                }
                this.ws.onclose = () => {
                    setTimeout(() => {
                        this.connect();
                    }, 5000);
                };
                this.ws.onerror = () => {
                    this.ws.close()
                }
            },
            handleNodes(servers) {
                let nodes = []
                servers?.forEach(server => {
                    let platform = server.Host.Platform;
                    if (this.isWindowsPlatform(platform)) {
                        platform = "windows"
                    }else if (platform === "immortalwrt") {
                        platform = "openwrt"
                    }
                    let node = {
                        ID: server.ID,
                        name: server.Name,
                        os: platform,
                        location: server.Host.CountryCode,
                        uptime: this.secondToDate(server.State.Uptime),
                        load: this.toFixed2(server.State.Load1),
                        network: this.getNetworkSpeed(server.State.NetInSpeed, server.State.NetOutSpeed),
                        traffic: this.formatByteSize(server.State.NetInTransfer) + ' | ' + this.formatByteSize(server.State.NetOutTransfer),
                        cpu: this.formatPercents(server.live, this.toFixed2(server.State.CPU)),
                        memory: this.formatPercent(server.live, server.State.MemUsed, server.Host.MemTotal),
                        hdd: this.formatPercent(server.live, server.State.DiskUsed, server.Host.DiskTotal),
                        online: server.live,
                        state: server.State,
                        host: server.Host,
                        lastActive: server.LastActive,
                        Tag: server.Tag,
                    }
                    nodes.push(node)
                })
                return nodes;
            },
            getNetworkSpeed(netInSpeed, netOutSpeed) {
                return this.formatByteSize(netInSpeed) + ' | ' + this.formatByteSize(netOutSpeed)
            },
            showCharts(event, id) {
                const chartContainer = this.$refs[`chart${id}`][0];
                const chartboxShow = chartContainer.getAttribute('chartbox-show');
                chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
                const isAriaExpandedFalse = event.currentTarget.getAttribute('aria-expanded') === 'false';
                if (!isAriaExpandedFalse) return;
                // 发起数据请求
                const url = `/api/v1/monitor/${id}`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.result) { // 数据请求成功，更新数据并渲染图表
                            this.chartDataList[id - 1] = data.result;
                            this.$nextTick(() => {
                                this.renderCharts(id);
                            });
                        } else {
                            console.log('this agent (id:'+ id + ') has no monitor.');
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            renderCharts(id, reload = false) {
                if (!this.chartDataList[id - 1]) return;
                const chartData = this.chartDataList[id - 1];
                const chartContainer = this.$refs[`chart${id}`][0];
                if (reload) { //点击切换亮色/暗色风格模式时,重新载入echarts图表的逻辑,
                    // 第一步,查找已经渲染出的图表容器,并销毁它
                    const existingChart = echarts.getInstanceByDom(chartContainer);
                    if (existingChart) existingChart.dispose();
                    // 第二步,如果图表容器处于不可见状态chartboxShow=0,不重新渲染出新的图表,
                    // 如果图表容器处于可见状态chartboxShow=1,重新渲染出新的图表
                    const chartboxShow = chartContainer.getAttribute('chartbox-show');
                    if ( chartboxShow === '0' ) return; 
                }
                // 定义图表参数值
                const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
                const isMobile = this.checkIsMobile();
                const fontSize = isMobile ? 10 : 14;
                const gridLeft = isMobile ? 25 : 36;
                const gridRight = isMobile ? 5 : 20;
                const legendLeft = isMobile ? 'center' : 'center';
                const legendTop = isMobile ? 5 : 5;
                const legendPadding= isMobile ? [5,0,5,0] : [5,0,5,0];
                const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
                const chartTheme = theme == "dark" ? "dark" : "default";
                const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
                const backgroundColor = theme == "dark" ? "#1C1D26" : '';
                const tooltipBackgroundColor = theme == "dark" ? "#1C1D26" : '#ffffff';
                const tooltipBorderColor = theme == "dark" ? "#31363B" : "#ffffff";
                // 渲染图表
                const chart = echarts.init(chartContainer, chartTheme, {
                    renderer: 'canvas',
                    useDirtyRect: false,
                    width: 'auto',
                    height: 300,
                });
                const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
                const seriesData = chartData.map(item => {
                    let loss = 0;
                    const data = item.avg_delay.map((avgDelay, index) => {                        
                        if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
                            loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
                            return [item.created_at[index], avgDelay];
                        }else{
                            loss += 1;
                        }
                    });
                    const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
                    item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
                    return {
                        name: item.monitor_name,
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        data: data,
                        connectNulls: true
                    };
                });
                const option = {
                    backgroundColor: backgroundColor,
                    title: {
                        show: false
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: tooltipBackgroundColor,
                        borderColor: tooltipBorderColor,
                        textStyle: {
                            fontSize: fontSize,
                            color: fontColor
                        }
                    },
                    legend: {
                        data: chartData.map(item => item.monitor_name),
                        show: true,
                        textStyle: {
                            fontSize: fontSize,
                            color: fontColor
                        },
                        top: legendTop,
                        bottom: 0,
                        left: legendLeft,
                        padding: legendPadding
                    },
                    xAxis: {
                        type: 'time',
                        data: xAxisData,
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            start: 0,
                            end: 100
                        }
                    ],
                    series: seriesData,
                    textStyle: {
                        fontSize: fontSize,
                        color: fontColor
                    },
                    grid: {
                        top: '40',
                        left: gridLeft,
                        right: gridRight
                    }
                };
                chart.setOption(option);
            },
            reloadCharts() { // 重新加载所有图表
                this.servers.forEach(node => {
                    const id = node.ID;
                    const chartData = this.chartDataList[id - 1];
                    if (chartData) {
                        this.renderCharts(id,true);
                    }
                });
            }
        }
    })
</script>
{{template "theme-server-status/footer" .}}
{{end}}