实现节点分组管理

web/views/@default/clusters/cluster/groups/index.html

@@ -0,0 +1,36 @@
+{$layout}
+{$template "../menu"}
+
+<first-menu style="margin-top:-1em">
+	<a href="" class="item" @click.prevent="createGroup()">[创建分组]</a>
+</first-menu>
+
+<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
+<div v-show="groups.length > 0">
+	<div class="margin"></div>
+	<table class="ui table selectable" id="sortable-table">
+		<thead>
+			<tr>
+				<th style="width:3em"></th>
+				<th>分组名称</th>
+				<th>节点数</th>
+				<th class="two op">操作</th>
+			</tr>
+		</thead>
+		<tbody v-for="group in groups" :data-group-id="group.id">
+			<tr>
+				<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
+				<td>{{group.name}}</td>
+				<td>
+					<span v-if="group.countNodes.length > 0">{{group.countNodes}}</span>
+					<span v-else class="disabled">0</span>
+				</td>
+				<td>
+					<a href="" @click.prevent="updateGroup(group.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+
+<p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>