[ISSUE #54]Add filtering function when querying message consumption. (#56)

src/main/resources/static/src/message.js

@@ -210,7 +210,8 @@ module.controller('messageController', ['$scope', 'ngDialog', '$http', 'Notifica
 }]);
 
 module.controller('messageDetailViewDialogController', ['$scope', 'ngDialog', '$http', 'Notification', function ($scope, ngDialog, $http, Notification) {
-
+        $scope.messageTrackList = $scope.ngDialogData.messageTrackList;
+        $scope.messageTrackShowList = $scope.ngDialogData.messageTrackList;
         $scope.resendMessage = function (messageView, consumerGroup) {
             var topic = messageView.topic;
             var msgId = messageView.msgId;
@@ -262,5 +263,18 @@ module.controller('messageDetailViewDialogController', ['$scope', 'ngDialog', '$
                 }
             });
         };
+
+        $scope.filterConsumerGroup = "";
+        $scope.$watch('filterConsumerGroup', function () {
+            const lowExceptStr = $scope.filterConsumerGroup.toLowerCase();
+            const canShowList = [];
+
+            $scope.messageTrackList.forEach(function (element) {
+                if (element.consumerGroup.toLowerCase().indexOf(lowExceptStr) != -1) {
+                    canShowList.push(element);
+                }
+            });
+            $scope.messageTrackShowList = canShowList;
+        });
     }]
 );

src/main/resources/static/view/pages/message.html

@@ -230,7 +230,13 @@
                 </div>
             </form>
         </div>
-        <p>messageTrackList:</p>
+        <div style="font-weight:700; color:#000">messageTrackList:</div>
+        <form class="form-inline">
+            <div class="form-group">
+                <label>consumerGroup:</label>
+                <input type="text" class="form-control" ng-model="filterConsumerGroup">
+            </div>
+        </form>
         <table class="table-bordered table text-middle">
             <tr>
                 <th class="text-center">consumerGroup</th>
@@ -238,7 +244,7 @@
                 <!--<th class="text-center">exceptionDesc</th>-->
                 <th class="text-center">Operation</th>
             </tr>
-            <tr ng-repeat="item in ngDialogData.messageTrackList">
+            <tr ng-repeat="item in messageTrackShowList">
                 <td class="text-center">{{item.consumerGroup}}</td>
                 <td class="text-center">{{item.trackType}}</td>
                 <td class="text-center">