{$layout}
{$template "menu"}

<form class="ui form" action="/ns/clusters/cluster" v-show="countAll > 0">
	<input type="hidden" name="clusterId" :value="clusterId"/>
	<div class="ui fields inline">
		<div class="ui field">
			<b-select
				name="installedState"
				v-model="installState"
				:options="[
					{label: t('cluster_index@安装状态'), value: '0'},
					{label: t('cluster_index@已安装'), value: '1'},
					{label: t('cluster_index@未安装'), value: '2'},
				]"
			></b-select>
		</div>
		<div class="ui field">
			<b-select
				name="activeState"
				v-model="activeState"
				:options="[
					{label: t('cluster_index@在线状态'), value: '0'},
					{label: t('cluster_index@在线'), value: '1'},
					{label: t('cluster_index@不在线'), value: '2'},
				]"
			></b-select>
		</div>
		<div class="ui field">
			<input type="text" name="keyword" :placeholder="t('cluster_index@关键词')" v-model="keyword" style="width:10em"/>
		</div>
		<div class="ui field">
			<button class="ui button" type="submit">{{t('cluster_index@搜索')}}</button>
		</div>
	</div>
</form>

<div v-if="countAll == 0">
	<b-empty large>
		{{t('cluster_index@当前集群下还没有节点')}}
		<a :href="'/ns/clusters/cluster/createNode?clusterId=' + clusterId">
			<i class="pi pi-pen-to-square"></i>
			{{t('cluster_index@创建节点')}}
		 </a>
	</b-empty>
</div>
<div v-if="countAll > 0">
	<b-empty v-if="nodes.length == 0">{{t('cluster_index@暂时还没有节点')}}</b-empty>
</div>

<div class="margin"></div>

<b-table
    v-if="nodes.length > 0"
    :columns="columns"
    :data-source="nodes"
    :row-key="'id'"
    size="middle"
    :show-header="true"
>
    <!-- Name Slot -->
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a :href="'/ns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.id">
            <keyword :v-word="keyword">{{record.name}}</keyword>
        </a>
        <div v-if="record.status != null && record.status.version.length > 0 && record.status.version != latestVersion">
            <span class="small red">v{{record.status.version}} -&gt; v{{latestVersion}}</span>
        </div>
        <a :href="'/ns/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + record.id" :title="t('cluster_index@设置')" style="margin-left: 5px;">
            <i class="icon setting grey"></i>
        </a>
    </template>

    <!-- IP Slot -->
    <template slot="ipSlot" slot-scope="{ text, record }">
        <span v-if="record.ipAddresses.length == 0" class="disabled">-</span>
        <div v-else class="address-box">
            <div v-for="addr in record.ipAddresses" style="margin-bottom:0.3em">
                <div class="ui label tiny basic">{{addr.ip}}
                    <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，{{t('cluster_index@不公开访问')}}</span>）</span>
                    <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（{{t('cluster_index@不公开访问')}}）</span>
                    <span v-if="addr.hasError"> &nbsp;<a href="" @click.prevent="showPortError(addr)"><span class="small red">{{t('cluster_index@异常')}}</span></a></span>
                </div>
            </div>
        </div>
    </template>

    <!-- CPU Slot (Conditional) -->
    <template slot="cpuSlot" slot-scope="{ text, record }">
        <div v-if="windowWidth < miniWidth || windowWidth > columnWidth1">
            <span v-if="record.status.isActive" :class="{red:record.status.cpuUsage > 0.80}">{{record.status.cpuUsageText}}</span>
            <span v-else class="disabled">-</span>
        </div>
    </template>

    <!-- Memory Slot (Conditional) -->
    <template slot="memorySlot" slot-scope="{ text, record }">
        <div v-if="windowWidth < miniWidth || windowWidth > columnWidth2">
            <span v-if="record.status.isActive" :class="{red:record.status.memUsage > 0.80}">{{record.status.memUsageText}}</span>
            <span v-else class="disabled">-</span>
        </div>
    </template>

    <!-- Load Slot (Conditional) -->
    <template slot="loadSlot" slot-scope="{ text, record }">
        <div v-if="windowWidth < miniWidth || windowWidth > columnWidth3">
            <span v-if="record.status.isActive && record.status.load1m > 0">{{record.status.load1m}}</span>
            <span v-else class="disabled">-</span>
        </div>
    </template>

    <!-- Status Slot -->
    <template slot="statusSlot" slot-scope="{ text, record }">
        <div v-if="!record.isUp">
            <span class="red">{{t('cluster_index@健康问题下线')}}</span>
            <div>
                <a href="" @click.prevent="upNode(record.id)">{{t('cluster_index@上线')}}</a>
            </div>
        </div>
        <div v-else-if="!record.isOn">
            <label-on :v-is-on="record.isOn"></label-on>
        </div>
        <div v-else-if="record.isInstalled">
            <div v-if="record.status.isActive">
                <span class="green">{{t('cluster_index@运行中')}}</span>
            </div>
            <span v-else-if="record.status.updatedAt > 0" class="red">{{t('cluster_index@已断开')}}</span>
            <span v-else-if="record.status.updatedAt == 0" class="red">{{t('cluster_index@未连接')}}</span>
        </div>
        <div v-else>
            <span v-if="record.installStatus.isRunning" class="red">{{t('cluster_index@安装中')}}</span>
            <a v-if="record.installStatus.isFinished && !record.installStatus.isOk" :href="'/ns/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" :title="t('cluster_index@点击看安装错误')"><span class="red">{{t('cluster_index@安装出错')}}</span></a>
            <a v-else class="red" :href="'/ns/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" :title="t('cluster_index@点击进安装界面')"><span class="red">{{t('cluster_index@未安装')}}</span></a>
        </div>
    </template>

    <!-- Action Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a :href="'/ns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.id">{{t('cluster_index@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteNode(record.id)">{{t('cluster_index@删除')}}</a>
    </template>
</b-table>

<div class="page" v-html="filterPageContent(page)"></div>