服务列表增加筛选

web/views/@default/servers/index.html

@@ -1,6 +1,27 @@
 {$layout}
 {$template "menu"}
 
+<form class="ui form" action="/servers">
+	<div class="ui margin"></div>
+	<div class="ui fields inline">
+		<div class="ui field" v-if="groups.length > 0" style="padding-right:0">
+			所属分组：
+		</div>
+		<div class="ui field" v-if="groups.length > 0">
+			<select class="ui dropdown" name="groupId" v-model="groupId">
+				<option value="0">[全部]</option>
+				<option v-for="group in groups" :value="group.id">{{group.name}}</option>
+			</select>
+		</div>
+		<div class="ui field">
+			<input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
+		</div>
+		<div class="ui field">
+			<button type="submit" class="ui button">搜索</button>
+		</div>
+	</div>
+</form>
+
 <p class="ui message" v-if="servers.length == 0">暂时还没有服务。</p>
 
 <table class="ui table selectable" v-if="servers.length > 0">
@@ -8,29 +29,37 @@
 		<tr>
 			<th>服务名称</th>
 			<th>所属分组</th>
-			<th>服务类型</th>
 			<th>部署集群</th>
+			<th>域名</th>
 			<th>端口</th>
 			<th class="two wide">状态</th>
 			<th class="two op">操作</th>
 		</tr>
 	</thead>
 	<tr v-for="server in servers">
-		<td>{{server.name}}</td>
+		<td>{{server.name}}
+			<div style="margin-top:0.2em">
+				<tiny-label>{{server.serverTypeName}}</tiny-label>
+			</div>
+		</td>
 		<td>
 			<div v-if="server.groups.length > 0">
 				<div  v-for="group in server.groups">
-					<span class="ui label tiny" style="margin-bottom:0.5em">{{group.name}}</span>
+					<tiny-label>{{group.name}}</tiny-label>
 				</div>
 			</div>
 			<span class="disabled" v-else>-</span>
 		</td>
-		<td>{{server.serverTypeName}}</td>
 		<td>{{server.cluster.name}}</td>
+		<td>
+			<div v-for="serverName in server.serverNames">
+				<tiny-label>{{serverName.name}}</tiny-label>
+			</div>
+		</td>
 		<td>
 			<span v-if="server.ports.length == 0">-</span>
 			<div v-for="port in server.ports">
-				<div class="ui label tiny" style="margin-bottom:0.5em">{{port.portRange}}<span class="small">（{{port.protocol}}）</span></div>
+				<tiny-label>{{port.portRange}}<span class="small">（{{port.protocol}}）</span></tiny-label>
 			</div>
 		</td>
 		<td>