SSH认证可搜索

web/views/@default/clusters/grants/index.html

@@ -1,6 +1,21 @@
 {$layout}
 {$template "menu"}
 
+
+<!-- 搜索表单 -->
+<form class="ui form" method="get" action="/clusters/grants">
+    <div class="margin"></div>
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" name="keyword" placeholder="名称、用户名等..." v-model="keyword"/>
+        </div>
+        <div class="ui field">
+            <button class="ui button" type="submit">搜索</button>
+        </div>
+    </div>
+</form>
+
+<!-- SSH认证列表 -->
 <div class="ui message" v-if="grants.length == 0">暂时还没有认证信息。</div>
 
 <table class="ui table selectable celled" v-if="grants.length > 0">
@@ -8,6 +23,7 @@
 		<tr>
 			<th>名称</th>
 			<th>类型</th>
+            <th>用户名</th>
 			<th class="center width5">集群数</th>
 			<th class="center width5">节点数</th>
 			<th class="two op">操作</th>
@@ -18,6 +34,10 @@
 		<td>
 			<span class="ui label tiny basic">{{grant.method.name}}</span>
 		</td>
+        <td>
+            <span v-if="grant.username.length > 0">{{grant.username}}</span>
+            <span v-else class="disabled">-</span>
+        </td>
 		<td class="center">
 			<span v-if="grant.countClusters > 0">{{grant.countClusters}}</span>
 			<span v-else class="disabled">0</span>

web/views/@default/clusters/grants/selectPopup.html

@@ -2,11 +2,19 @@
 
 <h3>选择认证</h3>
 
-<table class="ui table definition">
+<form class="ui form">
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" placeholder="搜索名称、用户名等" v-model="keyword"/>
+        </div>
+    </div>
+</form>
+
+<table class="ui table">
     <tr>
         <td>
             <span v-if="grants.length == 0">暂时还没有可用的认证。</span>
-            <a class="ui label small basic" v-for="grant in grants" :class="{blue:grantId == grant.id}" @click.prevent="selectGrant(grant)" style="margin-bottom:0.5em">{{grant.name}} <span class="small">（{{grant.methodName}}）</span></a>
+            <a class="ui label small basic" v-for="grant in grants" :class="{blue:grantId == grant.id}" @click.prevent="selectGrant(grant)" style="margin-bottom:0.5em">{{grant.name}} <span class="small">（{{grant.methodName}}）</span><span v-if="grant.username.length > 0" class="small">（{{grant.username}}）</span></a>
             <p class="comment">请点击选中某个认证。</p>
         </td>
     </tr>

web/views/@default/clusters/grants/selectPopup.js

@@ -1,5 +1,7 @@
 Tea.context(function () {
-	this.grantId = 0;
+	this.grantId = 0
+	this.keyword = ""
+	let allGrants = this.grants.$copy()
 
 	this.selectGrant = function (grant) {
 		NotifyPopup({
@@ -8,5 +10,20 @@ Tea.context(function () {
 				grant: grant
 			}
 		})
-	};
-});
+	}
+
+	this.$delay(function () {
+		let that = this
+		this.$watch("keyword", function (keyword) {
+			if (keyword.length > 0) {
+				that.grants = allGrants.$findAll(function (k, grant) {
+					return teaweb.match(grant.name, keyword)
+						|| teaweb.match(grant.description, keyword)
+						|| teaweb.match(grant.username, keyword)
+				})
+			} else {
+				that.grants = allGrants
+			}
+		})
+	})
+})