Files
EdgeAdmin/web/views/@default/clusters/cluster/index.html
2020-09-26 08:07:18 +08:00

97 lines
3.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{$layout}
{$template "/left_menu"}
<div class="right-box">
{$template "menu"}
<form class="ui form segment" action="/clusters/cluster">
<input type="hidden" name="clusterId" :value="clusterId"/>
<div class="ui fields inline">
<div class="ui field">
安装状态:
</div>
<div class="ui field">
<select class="ui dropdown" name="installedState" v-model="installState">
<option value="0">[全部]</option>
<option value="1">已安装</option>
<option value="2">未安装</option>
</select>
</div>
<div class="ui field">
在线状态:
</div>
<div class="ui field">
<select class="ui dropdown" name="activeState" v-model="activeState">
<option value="0">[全部]</option>
<option value="1">在线</option>
<option value="2">不在线</option>
</select>
</div>
<div class="ui field">
<button class="ui button" type="submit">搜索</button>
</div>
</div>
</form>
<p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>
<table class="ui table selectable" v-if="nodes.length > 0">
<thead>
<tr>
<th>ID</th>
<th>节点名称</th>
<th>主机名</th>
<th>IP</th>
<th>CPU</th>
<th>内存</th>
<!--<th>流量</th>
<th>连接数</th>-->
<th>状态</th>
<th class="two op">操作</th>
</tr>
</thead>
<tr v-for="node in nodes">
<td>{{node.id}}</td>
<td>{{node.name}}</td>
<td>
<span v-if="node.status.hostname != null && node.status.hostname.length > 0">{{node.status.hostname}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="node.ipAddresses.length == 0">-</span>
<div v-else class="address-box">
<div v-for="addr in node.ipAddresses" class="ui label small">{{addr.ip}} <span class="small">{{addr.name}}</span></div>
</div>
</td>
<td>
<span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
<span v-else>-</span>
</td>
<td>
<div v-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=' + clusterId + '&nodeId=' + node.id" title="点击看安装错误"><span class="red">安装出错</span></a>
<a v-else class="red" :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" title="点击进安装界面"><span class="red">未安装</span></a>
</div>
</td>
<td>
<a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a> &nbsp; <a href="" @click.prevent="deleteNode(node.id)">删除</a>
</td>
</tr>
</table>
<div class="page" v-html="page"></div>
</div>