{$layout}
{$template "/echarts"}
{$template "menu"}


<table class="ui table definition selectable">
    <tr>
        <td class="title">IP地址</td>
        <td>
            {{addr.ip}}
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <span v-if="!addr.canAccess" class="red">不可访问</span>
            <span v-else-if="!addr.isOn" class="red">禁用</span>
            <span v-else-if="addr.isUp && addr.backupIP.length > 0" class="orange">备用
                &nbsp; <a href="" @click.prevent="restoreBackup(addr.id)"><span class="small">[恢复]</span></a>
                <br/><span class="grey small">{{addr.backupIP}}</span>
            </span>
            <span v-else-if="addr.isUp" class="green">在线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, false)"><span class="small">[下线]</span></a></span>
            <span v-else class="red">离线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, true)"><span class="small">[上线]</span></a>
            </span>
        </td>
    </tr>
    <tr>
        <td>所属集群</td>
        <td><link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon></td>
    </tr>
    <tr>
        <td>所属节点</td>
        <td>
            <link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id">{{addr.node.name}}</link-icon>
        </td>
    </tr>
    <tr>
        <td>名称</td>
        <td>
            <span v-if="addr.name.length > 0">{{addr.name}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
    <tr>
        <td>阈值设置</td>
        <td>
            <div v-if="addr.thresholds.length > 0">
                <node-ip-address-thresholds-view :v-thresholds="addr.thresholds"></node-ip-address-thresholds-view>
            </div>
            <span v-else class="disabled">没有设置阈值。</span>
        </td>
    </tr>
</table>

<!-- 监控信息 -->
<div v-if="results.length > 0">
    <div class="margin"></div>
    <h4>区域监控 <a :href="Tea.url('.reports', {addrId: addr.id})"><span>[详情]</span></a></h4>
    <div class="ui divider"></div>
    <div class="chart-box" id="reports-chart-box"></div>
</div>