前端页面

EdgeAdmin/web/views/@default/httpdns/clusters/cluster.html

@@ -0,0 +1,91 @@
+{$layout}
+{$template "cluster_menu"}
+<div class="ui margin"></div>
+
+<div class="right-menu">
+    <a :href="'/httpdns/clusters/createNode?clusterId=' + clusterId" class="item">[创建节点]</a>
+</div>
+
+<form class="ui form" action="/httpdns/clusters/cluster">
+    <input type="hidden" name="clusterId" :value="clusterId" />
+    <div class="ui fields inline">
+        <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">
+            <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">
+            <input type="text" name="keyword" placeholder="节点名称、IP..." :value="keyword" />
+        </div>
+        <div class="ui field">
+            <button class="ui button" type="submit">搜索</button>
+            &nbsp;
+            <a :href="'/httpdns/clusters/cluster?clusterId=' + clusterId"
+                v-if="installState > 0 || activeState > 0 || keyword.length > 0">[清除条件]</a>
+        </div>
+    </div>
+</form>
+
+<div class="ui margin" v-if="!hasNodes"></div>
+<p class="comment" v-if="!hasNodes">当前集群下暂时还没有节点。</p>
+
+<table class="ui table selectable celled" v-if="hasNodes">
+    <thead>
+        <tr>
+            <th>节点名称</th>
+            <th>IP地址</th>
+            <th class="width-5 center">状态</th>
+            <th class="two op">操作</th>
+        </tr>
+    </thead>
+    <tbody v-for="node in nodes">
+        <tr>
+            <td>
+                <a
+                    :href="'/httpdns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</a>
+                <a :href="'/httpdns/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id"
+                    title="设置"><i class="icon setting grey"></i></a>
+                <div v-if="node.region != null">
+                    <span class="grey small">{{node.region.name}}</span>
+                </div>
+            </td>
+            <td>
+                <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
+                <div v-for="addr in node.ipAddresses">
+                    <div class="ui label tiny basic">{{addr.ip}}
+                        <span class="small" v-if="addr.name.length > 0">（{{addr.name}}）</span>
+                        <span class="small red" v-if="!addr.canAccess" title="不公开访问">[内]</span>
+                        <span class="small red" v-if="!addr.isOn">[下线]</span>
+                        <span class="small red" v-if="!addr.isUp" title="健康检查失败">[宕机]</span>
+                    </div>
+                </div>
+            </td>
+            <td class="center">
+                <div v-if="!node.isUp">
+                    <span class="red">宕机</span>
+                </div>
+                <div v-else-if="!node.isOn">
+                    <span class="disabled">未启用</span>
+                </div>
+                <div v-else>
+                    <span v-if="node.status.isActive" class="green">在线</span>
+                    <span v-else class="disabled">离线</span>
+                </div>
+            </td>
+            <td>
+                <a :href="'/httpdns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a> &nbsp;
+                <a href="" @click.prevent="deleteNode(node.id)">删除</a>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<div class="page" v-html="page"></div>