{$layout}
{$template "../node_menu"}
{$template "/echarts"}

{$var "header"}
<link rel="stylesheet" href="./index.css">
{$end}

<div class="dashboard">
    <!-- 加载中 -->
    <div class="loading-message" v-if="isLoading">
        <i class="pi pi-spin pi-spinner"></i> 数据加载中...
    </div>

    <!-- 概况 -->
    <div class="stats-card-grid" v-if="!isLoading">
        <div class="stat-card">
            <div class="stat-icon green">
                <i class="pi pi-check-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">
                    <span class="green" v-if="board.isActive">在线</span>
                    <span class="red" v-else-if="node.isUp">离线</span>
                    <span class="red" v-else title="因健康检查失败而离线">健康离线</span>
                </div>
                <div class="stat-label">
                    在线状态
                    <a href="" v-if="node.isOn && !node.isUp" @click.prevent="upNode(node.id)">[上线]</a>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue">
                <i class="pi pi-arrow-down"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.trafficOutBytes[0]}}<span class="stat-unit">{{board.trafficOutBytes[1]}}</span></div>
                <div class="stat-label">当前下行带宽</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon cyan">
                <i class="pi pi-arrow-up"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.trafficInBytes[0]}}<span class="stat-unit">{{board.trafficInBytes[1]}}</span></div>
                <div class="stat-label">当前上行带宽</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple">
                <i class="pi pi-link"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.countConnections}}<span class="stat-unit">/分钟</span></div>
                <div class="stat-label">当前连接数</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon orange">
                <i class="pi pi-external-link"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.countRequests}}<span class="stat-unit">/s</span></div>
                <div class="stat-label">当前访问量</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon red">
                <i class="pi pi-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value"><span :class="{red: board.countAttackRequests != '0'}">{{board.countAttackRequests}}</span><span class="stat-unit">/分钟</span></div>
                <div class="stat-label">当前攻击访问量</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple">
                <i class="pi pi-database"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.cacheDiskSize}}</div>
                <div class="stat-label">
                    缓存硬盘用量
                    <span v-if="cacheDirAvail.length > 0 && !cacheDirOverCapacity">剩余{{cacheDirAvail}}</span>
                    <span v-if="cacheDirOverCapacity" class="stat-badge">超出用量限制</span>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon yellow">
                <i class="pi pi-server"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">
                    <span v-if="diskWritingSpeedMB == 0">-</span>
                    <span v-if="diskWritingSpeedMB > 0">&gt; {{diskWritingSpeedMB}}</span>
                    <span class="stat-unit" v-if="diskWritingSpeedMB > 0">MiB/s</span>
                </div>
                <div class="stat-label">
                    硬盘预估写入最大速度
                    <span v-if="diskWritingSpeedMB > 1000" class="stat-badge green">极快</span>
                    <span v-else-if="diskWritingSpeedMB > 150" class="stat-badge blue">快</span>
                    <span v-else-if="diskWritingSpeedMB > 0" class="stat-badge orange">一般</span>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon cyan">
                <i class="pi pi-database"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.cacheMemorySize}}</div>
                <div class="stat-label">内存缓存用量</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon red">
                <i class="pi pi-cog"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value"><span :class="{red: board.cpuUsage > 80}">{{board.cpuUsage}}</span><span class="stat-unit">%</span></div>
                <div class="stat-label">CPU</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue">
                <i class="pi pi-database"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value"><span :class="{red: board.memoryUsage > 80}">{{board.memoryUsage}}</span><span class="stat-unit">%</span></div>
                <div class="stat-label">内存</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green">
                <i class="pi pi-database"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{board.memoryTotalSize}}<span class="stat-unit">G</span></div>
                <div class="stat-label">总内存</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon orange">
                <i class="pi pi-server"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value"><span :class="{red: board.load > 20}">{{board.load}}</span><span class="stat-unit">/分钟</span></div>
                <div class="stat-label">负载</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple">
                <i class="pi pi-chart-bar"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{monthlyTrafficFormat[0]}}<span class="stat-unit">{{monthlyTrafficFormat[1]}}</span></div>
                <div class="stat-label">当月流量</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon yellow">
                <i class="pi pi-chart-bar"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{yesterdayTrafficFormat[0]}}<span class="stat-unit">{{yesterdayTrafficFormat[1]}}</span></div>
                <div class="stat-label">昨日流量</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green">
                <i class="pi pi-chart-bar"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{todayTrafficFormat[0]}}<span class="stat-unit">{{todayTrafficFormat[1]}}</span></div>
                <div class="stat-label">今日流量</div>
            </div>
        </div>
    </div>

    <div class="margin"></div>

    <div class="chart-grid" v-if="!isLoading">
        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-chart-line"></i> 流量趋势</h4>
                <div class="chart-tabs">
                    <a href="" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
                    <a href="" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
                </div>
            </div>

            <!-- 按小时统计流量 -->
            <div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>

            <!-- 按日统计流量 -->
            <div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-chart-pie"></i> 访问量趋势</h4>
                <div class="chart-tabs">
                    <a href="" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
                    <a href="" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
                </div>
            </div>

            <!-- 按小时统计访问量 -->
            <div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>

            <!-- 按日统计访问量 -->
            <div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-list"></i> 域名访问排行 <span>（24小时）</span></h4>
            </div>
            <div class="chart-box" id="top-domains-chart">
                <div class="loading-message">
                    <i class="pi pi-spin pi-spinner"></i> 数据加载中...
                </div>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-server"></i> 网络数据包</h4>
                <div class="chart-tabs">
                    <a href="" :class="{active: networkPacketsTab == 'tcp'}" @click.prevent="selectNetworkPacketsTab('tcp')">TCP数据包<span>（pps）</span></a>
                    <a href="" :class="{active: networkPacketsTab == 'udp'}" @click.prevent="selectNetworkPacketsTab('udp')">UDP数据包<span>（pps）</span></a>
                    <a href="" :class="{active: networkPacketsTab == 'icmp'}" @click.prevent="selectNetworkPacketsTab('icmp')">ICMP数据包<span>（pps）</span></a>
                </div>
            </div>
            <div class="chart-box" id="network-packets-chart" v-show="networkPacketsValues.length > 0">
                <div class="loading-message">
                    <i class="pi pi-spin pi-spinner"></i> 数据加载中...
                </div>
            </div>
            <div class="chart-box" v-if="!isLoading && networkPacketsValues.length == 0">尚未产生数据或未启用相关功能（集群设置 -- 网络安全）或节点服务器性能不足以支持此功能。</div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-desktop"></i> 节点状态</h4>
                <div class="chart-tabs">
                    <a href="" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
                    <a href="" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
                    <a href="" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
                </div>
            </div>

            <div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
            <div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
            <div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h4><i class="pi pi-database"></i> 缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
            </div>
            <div class="chart-box" id="cache-dirs-chart"></div>
        </div>

        <!-- 指标 -->
        <metric-chart v-for="chart in metricCharts"
                      :key="chart.id"
                      :v-chart="chart.chart"
                      :v-stats="chart.stats"
                      :v-item="chart.item"
                      :v-column="true">
        </metric-chart>
    </div>
</div>