前端页面

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

@@ -0,0 +1,68 @@
+{$layout}
+{$template "menu"}
+
+<div>
+    <div v-if="hasErrorLogs" class="ui icon message small error">
+        <i class="icon warning circle"></i>
+        <div class="content">有部分集群节点状态异常，请及时处理。</div>
+    </div>
+
+    <form method="get" class="ui form" action="/httpdns/clusters">
+        <div class="ui fields inline">
+            <div class="ui field">
+                <input type="text" name="keyword" style="width:14em" placeholder="集群名称..." v-model="keyword" />
+            </div>
+            <div class="ui field">
+                <button type="submit" class="ui button">查询</button>
+                <a href="/httpdns/clusters" v-if="keyword.length > 0">[清除条件]</a>
+            </div>
+        </div>
+    </form>
+
+    <p class="ui message" v-if="clusters.length == 0">暂时还没有 HTTPDNS 集群，现在去 <a
+            href="/httpdns/clusters/create">[创建新集群]</a>。</p>
+
+    <table class="ui table selectable celled" v-if="clusters.length > 0">
+        <thead>
+            <tr>
+                <th>集群名称</th>
+                <th>服务域名</th>
+                <th class="center width10">节点数</th>
+                <th class="center width10">在线节点数</th>
+                <th class="width5">状态</th>
+                <th class="two op">操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="cluster in clusters">
+                <td>
+                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">
+                        <keyword :v-word="keyword">{{cluster.name}}</keyword>
+                    </a>
+                </td>
+                <td>
+                    <code>{{cluster.gatewayDomain}}</code>
+                </td>
+                <td class="center">
+                    <a :href="'/httpdns/clusters/cluster?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>
+                </td>
+                <td class="center">
+                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id" v-if="cluster.countActiveNodes > 0">
+                        <span class="green">{{cluster.countActiveNodes}}</span>
+                    </a>
+                    <span class="disabled" v-else>-</span>
+                </td>
+                <td><label-on :v-is-on="cluster.isOn"></label-on></td>
+                <td>
+                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">详情</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <div class="page" v-html="page"></div>
+</div>