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

{{define "theme-default/home"}}
{{template "theme-default/header" .}}
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
{{template "theme-default/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <template v-if="groups">
            <div class="ui styled fluid accordion" v-for="group in groups">
                <div class="active title">
                    <i class="dropdown icon"></i>
                    @#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
                </div>
                <div class="active content">
                    <div class="ui four stackable status cards">
                        <div v-for="server in group.data" :id="server.ID" class="ui card">
                            <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
                                <div class="header">
                                    <i style="width: 22px;border-radius: 4px;" :class="'fi fi-' + server.Host.CountryCode"></i>                                    
                                    <i v-if='isWindowsPlatform(server.Host.Platform)' class="windows icon"></i>
                                    <i v-else-if='getFontLogoClass(server.Host.Platform) == "" && server.State.Uptime > 0' class="fl-tux"></i>
                                    <i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
                                    @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
                                    <i @click="togglePopup($event, server.ID)" aria-expanded="false" class="nezha-secondary-font info circle icon"></i>
                                    <div class="ui content popup" :class="{ 'visible': isActive(server.ID) }" style="margin-bottom: 0;">
                                        <i class="closePopup window close icon" @click="closePopup(server.ID)"></i>
                                        {{tr "Platform"}}: @#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 />
                                        <template v-if="server.Host.GPU">
                                            GPU: @#server.Host.GPU#@
                                            <br />
                                        </template>
                                        {{tr "DiskUsed"}}:
                                        @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@
                                        <br />
                                        {{tr "MemUsed"}}:
                                        @#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@
                                        <br />
                                        {{tr "SwapUsed"}}:
                                        <template v-if="server.Host.SwapTotal === 0">OFF</template>
                                        <template v-else>@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@</template>
                                        <br />
                                        {{tr "NetTransfer"}}:
                                        <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 />
                                        {{tr "Load"}}: @#toFixed2(server.State.Load1)#@/@#toFixed2(server.State.Load5)#@/@#
                                        toFixed2(server.State.Load15)#@
                                        <br />
                                        {{tr "ProcessCount"}}: @#server.State.ProcessCount#@
                                        <br />
                                        {{tr "ConnCount"}}: TCP @#server.State.TcpConnCount#@ / UDP @#server.State.UdpConnCount#@
                                        <br />
                                        {{tr "BootTime"}}: @#formatTimestamp(server.Host.BootTime)#@
                                        <br />
                                        {{tr "LastActive"}}: @#new Date(server.LastActive).toLocaleString()#@
                                        <br />
                                        <div v-if="server.State.Temperatures && getTemperature(server.State.Temperatures, sensorList) > 0" class="temp-detail" @click="toggleDetailedTemp(server.ID)" :id="`temp-${server.ID}`" temp-detail-show="0">
                                            {{tr "Temperature"}}: 
                                            <span :id="`temp-main-${server.ID}`">
                                                @#getTemperature(server.State.Temperatures, sensorList)#@°C
                                                <i class="bi bi-chevron-double-down"></i>
                                            </span>
                                            <span :id="`temp-detail-${server.ID}`" style="display:none">
                                                <span v-for="temp in server.State.Temperatures" :key="temp.Name" v-if="temp.Temperature !== 0">
                                                    [ @#temp.Name#@: @#temp.Temperature#@°C ]
                                                </span>
                                                <i class="bi bi-chevron-double-up"></i>
                                            </span>
                                        </div>
                                        {{tr "Version"}}: @#server.Host.Version#@
                                        <div class="chartbox" :key="server.ID" :ref="`chart${server.ID}`" style="width: 100%; height: auto; margin-bottom: 2px;"></div>
                                    </div>
                                    <div class="ui divider" style="margin-bottom: 5px"></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">
                                                    <small>@#parseInt(server.State.CPU?server.State.CPU:0)#@%</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="three wide column">{{tr "MemUsed"}}</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">
                                                    <small>@#parseInt(server.Host.MemTotal?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="three wide column">{{tr "SwapUsed"}}</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">          
                                                    <small v-if="server.Host.SwapTotal === 0">OFF</small>
                                                    <small v-else>@#parseInt(server.State.SwapUsed/server.Host.SwapTotal*100)#@%</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="three wide column">{{tr "DiskUsed"}}</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">
                                                    <small>@#parseInt(server.Host.DiskTotal?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="three wide column">{{tr "NetSpeed"}}</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">{{tr "NetTransfer"}}</div>
                                        <div class="thirteen wide column">
                                            <i class="arrow circle down icon"></i>
                                            @#formatByteSize(server.State.NetInTransfer)#@
                                            &nbsp;
                                            <i class="arrow circle up icon"></i>
                                            @#formatByteSize(server.State.NetOutTransfer)#@
                                        </div>
                                        <div class="three wide column">{{tr "Stat"}}</div>
                                        <div class="thirteen wide column">
                                            <i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i>
                                            @#getCoreAndGHz(server.Host.CPU)#@
                                            &nbsp;
                                            <i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i>
                                            @#getK2Gb(server.Host.MemTotal)#@
                                            &nbsp;
                                            <i class="bi bi-hdd" style="font-size: 1.1rem; color: #e41e10"></i>
                                            @#getK2Gb(server.Host.DiskTotal)#@
                                        </div>
                                        <div class="three wide column">{{tr "Load"}}</div>
                                        <div class="thirteen wide column">
                                            <i class="bi bi-activity" style="font-size: 1.1rem; color: #e41e10;"></i>
                                            @#toFixed2(server.State.Load1)#@ |
                                            @#toFixed2(server.State.Load5)#@ |
                                            @#toFixed2(server.State.Load15)#@
                                        </div>
                                        <div class="three wide column">{{tr "Uptime"}}</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>{{tr "ServerIsOffline"}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
{{template "theme-default/footer" .}}
<script>
    var statusCards = new Vue({
        el: '#app',
        delimiters: ['@#', '#@'],
        data: {
            page: 'index',
            defaultTemplate: {{.Conf.Site.Theme }},
            templates: {{.Themes }},
            servers: [],
            groups: [],
            cache: [],
            chartDataList: [],
            activePopup: null,
            sensorList: [
                'TC0D', //CPU Die 温度，代表 CPU 内部的温度
                'TC0H', //CPU Heatsink 温度，代表 CPU 散热器的温度
                'TC0P', //CPU Proximity 温度，代表 CPU 附近的温度
                'k10temp', //AMD K10（Phenom、Athlon、Sempron 等）系列处理器的温度监测
                'k10temp_tctl', //AMD K10 (Athlon II、Phenom II 等）系列处理器的温度监测
                'coretemp_package_id_0', //整个封装处理器温度
                'cpu_thermal_zone', //全志
                'cpu-thermal', //树莓派(博通)
                'soc_thermal', //新瑞芯微
                'cpu_thermal', //老瑞芯微
                'ACPI\\ThermalZone\\TZ0__0', //Windows
                'ACPI\\ThermalZone\\CPUZ_0', //Windows
                'ACPI\\ThermalZone\\TZ00_0', //Windows
                'ACPI\\ThermalZone\\TZ001_0', //Windows
                'ACPI\\ThermalZone\\THM0_0' //Windows
            ]
        },
        mixins: [mixinsVue],
        created() {
            this.servers = JSON.parse('{{.Servers}}').servers;
            this.group()
        },
        methods: {
            togglePopup(event, id) {
                // 切换弹出层的激活状态
                this.activePopup = this.activePopup === id ? null : id;
                this.showCharts(id);
            },
            isActive(id) {
                // 检查弹出层是否处于激活状态
                return this.activePopup === id;
            },
            closePopup(id) {
                this.activePopup = null;
            },
            showCharts(id) {
                // 发起数据请求
                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) {
                if (!this.chartDataList[id - 1]) return;
                const MaxTCPPingValue = {{.Conf.MaxTCPPingValue }} ? {{.Conf.MaxTCPPingValue }} : 300;
                const isMobile = this.checkIsMobile();
                const fontSize = isMobile ? 10 : 9;
                const itemGap = isMobile ? 6 : 6;
                const itemWidth = isMobile ? 10 : 10;
                const itemHeight = isMobile ? 10 : 10;
                const gridLeft = 25;
                const gridRight = 12;
                const backgroundColor = '';
                const borderColor = "#ffffff";
                const chartData = this.chartDataList[id - 1];
                const chartContainer = this.$refs[`chart${id}`][0];
                const chartTheme = $('html').attr('nz-theme') == "dark" ? "dark" : "";
                const chart = echarts.init(chartContainer, chartTheme, {
                    renderer: 'canvas',
                    useDirtyRect: false,
                    width: 'auto',
                    height: 120,
                });
                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: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: fontSize,
                        }
                    },
                    legend: {
                        icon: 'rect',
                        data: chartData.map(item => item.monitor_name),
                        show: true,
                        textStyle: {
                            fontSize: fontSize,
                        },
                        lineStyle: {
                            cap: 'butt'
                        },
                        top: 0,
                        bottom: 0,
                        itemGap: itemGap,
                        itemWidth: itemWidth,
                        itemHeight: itemHeight,
                        padding: [5, 0, 5, 0]
                    },
                    xAxis: {
                        type: 'time',
                        data: xAxisData,
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                fontSize: fontSize
                            }
                        }
                    },
                    dataZoom: [
                        {
                            show: false,
                            type: 'slider',
                            start: 0,
                            end: 100
                        }
                    ],
                    series: seriesData,
                    textStyle: {
                        fontSize: fontSize,
                    },
                    grid: {
                        top: '30',
                        bottom: '20',
                        left: gridLeft,
                        right: gridRight
                    }
                };
                chart.setOption(option);
            },
            checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
                return window.innerWidth <= 768;
            },
            toFixed2(f) {
                return f.toFixed(2)
            },
            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 (str == 'darwin') {
                    return 'apple';
                }
                if (['openwrt', 'linux'].indexOf(str) > -1) {
                    return 'tux';
                }
                if (str == 'amazon') {
                    return 'redhat';
                }
                if (str == 'arch') {
                    return 'archlinux';
                }
                if (str.toLowerCase().includes('opensuse')) {
                    return 'opensuse';
                }
                return '';
            },
            group() {
                this.groups = groupingData(this.servers, "Tag")
            },
            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
                        if (!live) {
                            this.cache[percent].percent = 0
                        }
                    } else if (percent < 51) {
                        this.cache[percent].style['background-color'] = '#0a94f2'
                        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);
                if (d > 0) {
                    return d + " {{tr "Day"}}"
                }
                var h = Math.floor(s / 3600 % 24);
                var m = Math.floor(s / 60 % 60);
                var s = Math.floor(s % 60);
                return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
            },
            formatTimestamp(t) {
                return new Date(t * 1000).toLocaleString()
            },
            formatByteSize(bs) {
                const x = this.readableBytes(bs)
                return x != "NaN undefined" ? x : '0B'
            },
            readableBytes(bytes) {
                if (!bytes) {
                    return '0B'
                }
                const i = Math.floor(Math.log(bytes) / Math.log(1024));
                const sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
                return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
            },
            getCoreAndGHz(arr) {
                if ((arr || []).length === 0) {
                    return '';
                }
                let totalCores = 0;
                arr.forEach(str => {
                    let coreMatch = str.match(/(\d+(\.\d+)?) Physical/g);
                    let coreCount = 0;
                    if (coreMatch) {
                        coreCount = parseFloat(coreMatch[0]);
                    } else {
                        let coreMatch = str.match(/(\d+(\.\d+)?) Virtual/g);
                        coreCount = coreMatch ? parseFloat(coreMatch[0]) : 0;
                    }
                    totalCores += coreCount;
                });
                return `${totalCores} Cores`;
            },
            getK2Gb(bs){
                bs = bs / 1024 / 1024 / 1024;
                if (bs >= 1) {
                    return Math.ceil(bs.toFixed(2)) + 'GB';
                } else {
                    bs = bs * 1024;
                    return Math.ceil(bs.toFixed(2)) + 'MB';
                }
            },
            listTipsMouseenter(obj, strs, tipsNum = 1){
                this.layerIndex = layer.tips(strs, '#' + obj, { tips: [tipsNum, 'rgb(0 0 0 / 85%)'], time: 0 });
                $('#' + obj).attr('layerIndex', this.layerIndex)
            },
            listTipsMouseleave(obj){
                layer.close(this.layerIndex)
            },
            toggleDetailedTemp(id){
                const tempDom = document.getElementById(`temp-${id}`); 
                const tempDetailShow = tempDom.getAttribute('temp-detail-show');
                const tempMain = document.getElementById(`temp-main-${id}`); 
                const tempDetail = document.getElementById(`temp-detail-${id}`); 
                if (tempDetailShow == 0){
                    tempMain.style.display = 'none';
                    tempDetail.style.display = 'inline';
                    tempDom.setAttribute('temp-detail-show', 1);
                } else {
                    tempMain.style.display = 'inline';
                    tempDetail.style.display = 'none';
                    tempDom.setAttribute('temp-detail-show', 0);
                }
            },
            getTemperature(temperatureList, sensorList) {
                // 将 sensorList 中的所有项转换为小写
                const lowerCaseSensorList = sensorList.map(sensor => sensor.toLowerCase());

                // 合并过滤逻辑：过滤出 Temperature 不为 0 且 Name 在 sensorList 中的元素（忽略大小写）
                const filtered = temperatureList.filter(item => item.Temperature !== 0 && lowerCaseSensorList.includes(item.Name.toLowerCase()));
                //console.log('filtered:',filtered);
                
                // 如果有匹配的元素，则计算这些元素的 Temperature 的最大值
                if (filtered.length > 0) {
                    return filtered.reduce((max, current) => {
                        return current.Temperature > max ? current.Temperature : max;
                    }, filtered[0].Temperature);
                }

                // 如果没有匹配的元素，则计算 temperatureList 中所有 Temperature 不为 0 的元素的最大值
                const nonZeroTemps = temperatureList.filter(item => item.Temperature !== 0);
                //console.log('nonZeroTemps:',nonZeroTemps);

                if (nonZeroTemps.length > 0) {
                    return nonZeroTemps.reduce((max, current) => {
                        return current.Temperature > max ? current.Temperature : max;
                    }, nonZeroTemps[0].Temperature);
                }

                // 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
                return 0;
            }
        }
    })
  
    function groupingData(data, field) {
        let map = {};
        let dest = [];
        data.forEach(item => {
            if (!map[item[field]]) {
                    dest.push({
                    [field]: item[field],
                    data: [item]
                });
                map[item[field]] = item;
            } else {
                dest.forEach(dItem => {
                    if (dItem[field] == item[field]) {
                        dItem.data.push(item);
                    }
                });
            }
        })
        return dest;
    }
  
    let canShowError = true;
    function connect() {
        const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
        const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
        ws.onopen = function (evt) {
            canShowError = true;
            $.suiAlert({
                title: '{{tr "RealtimeChannelEstablished"}}',
                description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
                type: 'success',
                time: '2',
                position: 'top-center',
            });
        }
        ws.onmessage = function (evt) {
            const oldServers = statusCards.servers
            const data = JSON.parse(evt.data)
            statusCards.servers = data.servers
            for (let i = 0; i < statusCards.servers.length; i++) {
                const ns = statusCards.servers[i];
                if (!ns.Host) {
                    ns.live = false
                } else {
                    const lastActive = new Date(ns.LastActive).getTime()
                    if (data.now - lastActive > 10 * 1000) {
                        ns.live = false
                    } else {
                        ns.live = true
                    }
                }
            }
            statusCards.groups = groupingData(statusCards.servers, "Tag")
        }
        ws.onclose = function () {
            if (canShowError) {
                canShowError = false;
                $.suiAlert({
                    title: '{{tr "RealtimeChannelDisconnect"}}',
                    description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
                    type: 'warning',
                    time: '2',
                    position: 'top-center',
                });
            }
            setTimeout(function () {
                connect()
            }, 3000);
        }
        ws.onerror = function () {
            ws.close()
        }
    }
  
    connect();
  
    $('.ui.accordion').accordion({ "exclusive": false });
</script>
{{end}}