{$layout}
{$template "menu"}

<div class="margin"></div>
<form method="get" action="/clusters" class="ui form">
    <input type="hidden" name="searchType" :value="searchType"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="集群、节点关键词"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
        </div>
        <div class="ui field" v-if="latestClusters.length > 0">
            <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
        </div>
    </div>
</form>
<div class="ui segment" v-if="latestVisible">
    常用集群：<span v-for="(cluster, index) in latestClusters"><a :href="'/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a> &nbsp; <span class="disabled" v-if="index != latestClusters.length - 1">|</span> &nbsp;</span>
</div>

<div class="ui tabular menu" v-if="isSearching">
    <a :href="'/clusters?searchType=cluster&keyword=' + keyword" class="item" :class="{active: searchType == '' || searchType == 'cluster'}">集群({{countClusters}})</a>
    <a :href="'/clusters?searchType=node&keyword=' + keyword" class="item" :class="{active: searchType == 'node'}">节点({{countNodes}})</a>
</div>

<!-- 集群 -->
<div v-show="searchType == '' || searchType == 'cluster'">
    <div class="margin"></div>
    <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="center width10">服务数</th>
                <th>DNS域名</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tr v-for="cluster in clusters">
            <td>
                <a :href="'/clusters/cluster?clusterId=' + cluster.id"><keyword :v-word="keyword">{{cluster.name}}</keyword></a>
                <div v-if="cluster.timeZone != null && cluster.timeZone.length > 0">
                    <grey-label>时区：{{cluster.timeZone}}</grey-label>
                </div>
            </td>
            <td class="center">
                <a :href="'/clusters/cluster/nodes?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="'/clusters/cluster/upgradeRemote?clusterId=' + cluster.id" title="点击进入远程升级页面"><span class="red">有节点需要升级</span></a>
                </div>
            </td>
            <td class="center">
                <a :href="'/clusters/cluster/nodes?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 class="center">
                <span v-if="cluster.countServers > 0">{{cluster.countServers}}</span>
                <span class="disabled" v-else>-</span>
            </td>
            <td>
                <span v-if="cluster.dnsName.length > 0">
                    <var><keyword :v-word="keyword">{{cluster.dnsName}}</keyword></var>.<span v-if="cluster.dnsDomainName.length > 0">{{cluster.dnsDomainName}}</span><span v-else class="disabled">主域名</span>
                    <span v-if="cluster.dnsDomainId > 0"><link-icon :href="'/dns/clusters/cluster?clusterId=' + cluster.id"></link-icon></span>
                </span>
                <span v-else class="disabled">-</span>
            </td>
            <td>
                <a :href="'/clusters/cluster?clusterId=' + cluster.id">详情</a> &nbsp;
                <a :href="'/clusters/cluster/settings?clusterId=' + cluster.id">设置</a>
            </td>
        </tr>
    </table>
</div>

<div v-show="searchType == 'node'">
    <p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>
    <table class="ui table selectable celled" v-if="nodes.length > 0">
        <thead>
        <tr>
            <th>节点名称</th>
            <th>所属区域</th>
            <th>所属分组</th>
            <th>IP</th>
            <th class="width10">DNS线路</th>
            <th class="width5 center">CPU</th>
            <th class="width5 center">内存</th>
            <!--<th>流量</th>
            <th>连接数</th>-->
            <th class="two wide center">状态</th>
            <th class="two op">操作</th>
        </tr>
        </thead>
        <tr v-for="node in nodes">
            <td><a :href="'/clusters/cluster/node?clusterId=' + node.cluster.id + '&nodeId=' + node.id"><keyword :v-word="keyword">{{node.name}}</keyword></a>
                <div style="margin-top: 0.5em">
                    <node-clusters-labels :v-primary-cluster="node.cluster" :v-secondary-clusters="node.secondaryClusters" size="tiny"></node-clusters-labels>
                </div>
            </td>
            <td>
                <span v-if="node.region != null">{{node.region.name}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td>
                <span v-if="node.group != null">{{node.group.name}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td>
                <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
                <div v-else class="address-box">
                    <div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
                        <div class="ui label tiny basic"><keyword :v-word="keyword">{{addr.ip}}</keyword>
                            <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
                            <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div v-if="node.dnsRouteNames.length > 0">
                    <div v-for="routeName in node.dnsRouteNames">
                        <tiny-basic-label>{{routeName}}</tiny-basic-label>
                    </div>
                </div>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <div v-if="!node.isUp">
                    <span class="red">健康问题</span>
                </div>
                <div v-else-if="!node.isOn">
                    <label-on :v-is-on="node.isOn"></label-on>
                </div>
                <div v-else-if="node.isInstalled">
                    <div v-if="node.status.isActive">
                        <span v-if="!node.isSynced" class="red">同步中</span>
                        <span v-else class="green">运行中</span>
                    </div>
                    <span v-else-if="node.status.updatedAt > 0" class="red">已断开</span>
                    <span v-else-if="node.status.updatedAt == 0" class="red">未连接</span>
                </div>
                <div v-else>
                    <span v-if="node.installStatus.isRunning" class="red">安装中</span>
                    <a v-if="node.installStatus.isFinished && !node.installStatus.isOk" :href="'/clusters/cluster/node/install?clusterId=' + node.cluster.id + '&nodeId=' + node.id" title="点击看安装错误"><span class="red">安装出错</span></a>
                    <a v-else class="red" :href="'/clusters/cluster/node/install?clusterId=' + node.cluster.id + '&nodeId=' + node.id" title="点击进安装界面"><span class="red">未安装</span></a>
                </div>
            </td>
            <td>
                <a :href="'/clusters/cluster/node?clusterId=' + node.cluster.id + '&nodeId=' + node.id">详情</a>
            </td>
        </tr>
    </table>
</div>

<page-box></page-box>