{$layout}
{$template "menu"}

<p class="comment" v-if="clusters.length == 0">暂时还没有集群。</p>

<table class="ui table selectable celled" v-if="clusters.length > 0">
    <thead>
        <tr>
            <th>集群名称</th>
            <th class="center width10">节点数</th>
            <th class="center width10">在线节点数</th>
            <th class="two wide">集群状态</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="cluster in clusters">
        <td><a :href="'/ns/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a></td>
        <td class="center">
            <a :href="'/ns/clusters/cluster?clusterId=' + cluster.id" v-if="cluster.countAllNodes > 0"><span :class="{red:cluster.countAllNodes > cluster.countActiveNodes}">{{cluster.countAllNodes}}</span></a>
            <span class="disabled" v-else="">-</span>

            <div v-if="cluster.countUpgradeNodes > 0" style="margin-top:0.5em">
                <a :href="'/ns/clusters/cluster/upgradeRemote?clusterId=' + cluster.id" title="点击进入远程升级页面"><span class="red">有节点需要升级</span></a>
            </div>
        </td>
        <td class="center">
            <a :href="'/ns/clusters/cluster?clusterId=' + cluster.id + '&activeState=1'" v-if="cluster.countActiveNodes > 0"><span class="green">{{cluster.countActiveNodes}}</span></a>
            <span class="disabled" v-else>-</span>
        </td>
        <td>
            <label-on :v-is-on="cluster.isOn"></label-on>
        </td>
        <td>
            <a :href="'/ns/clusters/cluster?clusterId=' + cluster.id">详情</a>
        </td>
    </tr>
</table>

<div class="page" v-html="page"></div>