{$layout}
{$template "menu"}

<table class="ui table definition selectable">
    <tr>
        <td class="title">IP地址</td>
        <td>
            {{addr.ip}}
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <label-on :v-is-on="addr.isOn" v-if="!addr.isOn"></label-on>
            <span v-else-if="addr.isUp" class="green">在线</span>
            <span v-else class="red">离线</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>
            <span v-if="addr.canAccess" class="green">Y</span>
            <span v-else class="disabled">N</span>
        </td>
    </tr>
    <tr>
        <td>阈值</td>
        <td>
            <div v-if="addr.thresholds.length > 0">
                <span v-for="threshold in addr.thresholds" class="ui basic tiny label">
                    {{threshold.item}} {{threshold.operator}} {{threshold.value}}
                </span>
            </div>
            <span v-else class="disabled">没有设置阈值。</span>
        </td>
    </tr>
</table>