{$layout}
{$template "menu"}

<div class="left-right-box-container">
	{$template "/left_menu"}

	<div class="right-box">
		<b-empty v-if="nodes.length == 0">暂时没有需要升级的节点。</b-empty>

		<div v-if="nodes.length > 0">
			<b-settings-header
				v-if="countCheckedNodes() > 0"
				@action="installBatch()"
				:action-text="'批量升级(' + countCheckedNodes() + ')'"
			>
				所有需要升级的节点
			</b-settings-header>
			<b-settings-header v-else>所有需要升级的节点</b-settings-header>
			<!-- <h3>
				所有需要升级的节点
				<button class="ui button primary tiny" v-if="countCheckedNodes() > 0" @click.prevent="installBatch()">批量升级({{countCheckedNodes()}})</button>
			</h3> -->
			<table class="ui table selectable celled">
				<thead>
					<tr>
						<th style="width:3em">
								<checkbox @input="checkNodes"></checkbox>
						</th>
						<th>节点名</th>
						<th>访问IP</th>
						<th>SSH地址</th>
						<th>版本变化</th>
						<th class="four wide">节点状态</th>
						<th class="two op">操作</th>
					</tr>
				</thead>
				<tr v-for="node in nodes">
					<td>
							<checkbox v-model="node.isChecked" v-if="node.installStatus == null || !node.installStatus.isOk"></checkbox>
					</td>
					<td>
						<link-icon :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</link-icon>
					</td>
					<td>
						<span v-for="addr in node.addresses" v-if="addr.canAccess" class="ui label tiny basic">{{addr.ip}}</span>
					</td>
					<td>
						<span v-if="node.login != null && node.login.type == 'ssh' && node.loginParams != null && node.loginParams.host != null && node.loginParams.host.length > 0">
							{{node.loginParams.host}}:{{node.loginParams.port}}
						</span>
						<span v-else class="disabled">没有设置</span>
					</td>
					<td>v{{node.oldVersion}} -&gt; v{{node.newVersion}}</td>
					<td>
						<div v-if="node.installStatus != null && (node.installStatus.isRunning || node.installStatus.isFinished)">
							<div v-if="node.installStatus.isRunning" class="blue">升级中...</div>
							<div v-if="node.installStatus.isFinished">
								<span v-if="node.installStatus.isOk" class="green">已升级成功</span>
								<span v-if="!node.installStatus.isOk" class="red">升级过程中发生错误：{{node.installStatus.error}}</span>
							</div>
						</div>
						<span v-else class="disabled">等待升级</span>
					</td>
					<td>
						<a href="" @click.prevent="installNode(node)" v-if="!isInstalling">升级</a>
						<span v-if="isInstalling && node.isInstalling">升级中...</span>
						<span v-if="isInstalling && !node.isInstalling" class="disabled">升级</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>