From 5bcf133bfc1da172888a2c6ebb3b1c4310abf22b Mon Sep 17 00:00:00 2001
From: xiezhineng <xiezhineng@corp.netease.com>
Date: Wed, 9 Feb 2022 18:07:14 +0800
Subject: [PATCH] RBF: add search box in Router's tab-mounttable web page.

---
 .../main/webapps/router/federationhealth.html    |  8 ++++----
 .../src/main/webapps/router/federationhealth.js  | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.html b/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.html
index 9b000d8cf1233..f45da5605f734 100644
--- a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.html
+++ b/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.html
@@ -458,7 +458,7 @@
   </ul>
 </div>
 <small>
-<table class="table">
+<table class="table" id="table-mounttable">
   <thead>
     <tr>
       <th>Global path</th>
@@ -478,9 +478,9 @@
   <tbody>
     {#MountTable}
     <tr>
-      <td>{sourcePath}</td>
-      <td>{nameserviceId}</td>
-      <td>{path}</td>
+      <td ng-value="{sourcePath}">{sourcePath}</td>
+      <td ng-value="{nameserviceId}">{nameserviceId}</td>
+      <td ng-value="{path}">{path}</td>
       <td>{order}</td>
       <td align="center" class="federationhealth-mounttable-icon federationhealth-mounttable-{readonly}" title="{status}"/>
       <td align="center" class="mount-table-icon mount-table-fault-tolerant-{faulttolerant}" title="{ftStatus}"></td>
diff --git a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.js b/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.js
index dc24a322d770b..6220ca14a8cbb 100644
--- a/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.js
+++ b/hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/federationhealth.js
@@ -475,6 +475,22 @@
         var base = dust.makeBase(HELPERS);
         dust.render('mounttable', base.push(data), function(err, out) {
           $('#tab-mounttable').html(out);
+          $('#table-mounttable').dataTable( {
+            'lengthMenu': [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
+            'columns': [
+              { 'orderDataType': 'ng-value', 'searchable': true },
+              { 'orderDataType': 'ng-value', 'searchable': true },
+              { 'orderDataType': 'ng-value', 'searchable': true },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" },
+              { 'type': 'string' , "defaultContent": "" }
+            ]});
           $('#ui-tabs a[href="#tab-mounttable"]').tab('show');
         });
       })).fail(ajax_error_handler);