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

<!-- 概况 -->
<div class="ui four columns grid">
    <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}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>上行流量</h4>
        <div class="value"><span>{{board.trafficInBytes}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>连接数</h4>
        <div class="value"><span>{{board.countConnections}}</span>/分钟</div>
    </div>
    <div class="ui column">
        <h4>当前访问量</h4>
        <div class="value"><span>{{board.countRequests}}</span>/分钟</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, red: cacheDirAvailWarning}" style="font-size: 0.9em" v-if="cacheDirAvail.length > 0">剩余{{cacheDirAvail}}</span></div>
    </div>
    <div class="ui column">
        <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">
        <h4>负载</h4>
        <div class="value"><span :class="{red: board.load > 20}">{{board.load}}</span>/分钟</div>
    </div>
</div>

<div class="ui divider"></div>

<div class="ui menu tabular">
    <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="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 class="ui divider"></div>

<div class="ui menu tabular">
    <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="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 class="ui divider"></div>

<!-- 域名排行 -->
<h4>域名访问排行 <span>（24小时）</span></h4>
<div class="chart-box" id="top-domains-chart"></div>

<div class="ui divider"></div>

<!-- CPU、内存、负载 -->
<div class="ui menu tabular">
    <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="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 class="ui divider"></div>
<h4>缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
<div class="chart-box" id="cache-dirs-chart"></div>

<!-- 指标 -->
<div class="ui divider" v-if="metricCharts.length > 0"></div>
<metric-board>
    <metric-chart v-for="chart in metricCharts"
                  :key="chart.id"
                  :v-chart="chart.chart"
                  :v-stats="chart.stats"
                  :v-item="chart.item">
    </metric-chart>
</metric-board>