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

<!-- 加载中 -->
<div>
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
</div>

<!-- 概况 -->
<columns-grid v-if="!isLoading">
    <div class="ui column">
        <h4>在线状态</h4>
        <div class="value">
            <span class="green" v-if="board.isActive">在线</span>
            <span class="red" v-else-if="node.isUp">离线</span>
            <span class="red" v-else style="font-size: 1.5em" title="因健康检查失败而离线">健康离线</span>
            <a href="" v-if="node.isOn && !node.isUp" @click.prevent="upNode(node.id)">[上线]</a>
        </div>
    </div>
    <div class="ui column">
        <h4>当前下行带宽</h4>
        <div class="value"><span>{{board.trafficOutBytes[0]}}</span>{{board.trafficOutBytes[1]}}</div>
    </div>
    <div class="ui column">
        <h4>当前上行带宽</h4>
        <div class="value"><span>{{board.trafficInBytes[0]}}</span>{{board.trafficInBytes[1]}}</div>
    </div>
    <div class="ui column with-border">
        <h4>当前连接数</h4>
        <div class="value"><span>{{board.countConnections}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>当前访问量</h4>
        <div class="value"><span>{{board.countRequests}}</span>/s</div>
    </div>
    <div class="ui column">
        <h4>当前攻击访问量</h4>
        <div class="value"><span :class="{red: board.countAttackRequests != '0'}">{{board.countAttackRequests}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>缓存硬盘用量</h4>
        <div class="value"><span>{{board.cacheDiskSize}}</span><span class="small" :class="{grey: !cacheDirAvailWarning && !cacheDirOverCapacity, red: cacheDirAvailWarning || cacheDirOverCapacity}" style="font-size: 0.9em" v-if="cacheDirAvail.length > 0"><span style="font-size: 0.9em" v-if="!cacheDirOverCapacity">剩余{{cacheDirAvail}}</span><span v-if="cacheDirOverCapacity" style="font-size: 0.9em">超出用量限制</span></span></div>
    </div>
    <div class="ui column">
        <h4>硬盘预估写入最大速度</h4>
        <div class="value"><span v-if="diskWritingSpeedMB == 0">-</span><span v-if="diskWritingSpeedMB > 0">&gt; {{diskWritingSpeedMB}}</span>
            <span class="small" v-if="diskWritingSpeedMB > 1000" style="font-size: 0.9em">MiB/s 极快</span>
            <span class="small" v-else-if="diskWritingSpeedMB > 150" style="font-size: 0.9em">MiB/s 快</span>
            <span class="small" v-else-if="diskWritingSpeedMB > 0" style="font-size: 0.9em">MiB/s 一般</span>
        </div>
    </div>
    <div class="ui column with-border">
        <h4>内存缓存用量</h4>
        <div class="value"><span>{{board.cacheMemorySize}}</span></div>
    </div>
    <div class="ui column">
        <h4>CPU</h4>
        <div class="value"><span :class="{red: board.cpuUsage > 80}">{{board.cpuUsage}}</span>%</div>
    </div>
    <div class="ui column">
        <h4>内存</h4>
        <div class="value"><span :class="{red: board.memoryUsage > 80}">{{board.memoryUsage}}</span>%</div>
    </div>
    <div class="ui column">
        <h4>总内存</h4>
        <div class="value"><span>{{board.memoryTotalSize}}</span>G</div>
    </div>
    <div class="ui column with-border">
        <h4>负载</h4>
        <div class="value"><span :class="{red: board.load > 20}">{{board.load}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>当月流量</h4>
        <div class="value"><span>{{monthlyTrafficFormat[0]}}</span>{{monthlyTrafficFormat[1]}}</div>
    </div>
    <div class="ui column">
        <h4>昨日流量</h4>
        <div class="value"><span>{{yesterdayTrafficFormat[0]}}</span>{{yesterdayTrafficFormat[1]}}</div>
    </div>
    <div class="ui column with-border">
        <h4>今日流量</h4>
        <div class="value"><span>{{todayTrafficFormat[0]}}</span>{{todayTrafficFormat[1]}}</div>
    </div>
</columns-grid>

<chart-columns-grid>
    <div class="ui column">
        <div class="ui menu text" v-show="!isLoading">
            <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
            <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
        </div>
        <div class="ui divider"></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="ui column">
        <div class="ui menu text" v-show="!isLoading">
            <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
            <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
        </div>
        <div class="ui divider"></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="ui column">
        <!-- 域名排行 -->
        <h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
        <div class="ui divider"></div>
        <div class="chart-box" id="top-domains-chart"><loading-message>数据加载中...</loading-message></div>
    </div>


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

    <div class="ui column">
        <!-- CPU、内存、负载 -->
        <div class="ui menu text" v-show="!isLoading">
            <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
            <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
            <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
        </div>
        <div class="ui divider"></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="ui column">
        <!-- 缓存 -->
        <h4 v-show="!isLoading">缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
        <div class="ui divider"></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>
</chart-columns-grid>