Support FIFO-Type SubGroup Add、Update and Query For V5 (#204)

* Support dashboard v4-v5 switch And query for v5 topic

* Modify tag name

* Support subGroup FIFO Type Query and Update

---------

Co-authored-by: yuanziwei <yuanziwei@xiaomi.com>

src/main/java/org/apache/rocketmq/dashboard/model/GroupConsumeInfo.java

@@ -27,6 +27,8 @@ public class GroupConsumeInfo implements Comparable<GroupConsumeInfo> {
     private MessageModel messageModel;
     private int consumeTps;
     private long diffTotal = -1;
+    private String subGroupType = "NORMAL";
+
 
     public String getGroup() {
         return group;
@@ -91,4 +93,12 @@ public class GroupConsumeInfo implements Comparable<GroupConsumeInfo> {
     public void setVersion(String version) {
         this.version = version;
     }
+
+    public String getSubGroupType() {
+        return subGroupType;
+    }
+
+    public void setSubGroupType(String subGroupType) {
+        this.subGroupType = subGroupType;
+    }
 }

src/main/java/org/apache/rocketmq/dashboard/service/impl/ConsumerServiceImpl.java

@@ -177,6 +177,10 @@ public class ConsumerServiceImpl extends AbstractCommonService implements Consum
             }
 
             ConsumerConnection consumerConnection = null;
+            boolean isFifoType = examineSubscriptionGroupConfig(consumerGroup)
+                    .stream().map(ConsumerConfigInfo::getSubscriptionGroupConfig)
+                    .allMatch(SubscriptionGroupConfig::isConsumeMessageOrderly);
+
             try {
                 consumerConnection = mqAdminExt.examineConsumerConnectionInfo(consumerGroup);
             }
@@ -185,6 +189,13 @@ public class ConsumerServiceImpl extends AbstractCommonService implements Consum
             }
 
             groupConsumeInfo.setGroup(consumerGroup);
+            if (SYSTEM_GROUP_SET.contains(consumerGroup)) {
+                groupConsumeInfo.setSubGroupType("SYSTEM");
+            } else if (isFifoType) {
+                groupConsumeInfo.setSubGroupType("FIFO");
+            } else {
+                groupConsumeInfo.setSubGroupType("NORMAL");
+            }
 
             if (consumeStats != null) {
                 groupConsumeInfo.setConsumeTps((int)consumeStats.getConsumeTps());

src/main/resources/static/src/consumer.js

@@ -45,6 +45,7 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
     $scope.writeOperationEnabled =  $scope.userRole == null ? true : ($scope.userRole == 1 ? true : false);
     $scope.filterNormal = true;
     $scope.filterSystem = false;
+    $scope.filterFIFO = false;
 
     $scope.doSort = function () {// todo  how to change this fe's code ? (it's dirty)
         if ($scope.sortKey == 'diffTotal') {
@@ -75,7 +76,10 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
 
         $http({
             method: "GET",
-            url: "consumer/groupList.query"
+            url: "consumer/groupList.query",
+            params: {
+                skipSysGroup: false,
+            }
         }).success(function (resp) {
             if (resp.status == 0) {
                 $scope.allConsumerGrouopList = resp.data;
@@ -135,16 +139,28 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
         $scope.filterList(1);
     });
 
-    $scope.filterByType = function (str) {
+    $scope.$watch('filterFIFO', function () {
+        $scope.filterList(1);
+    });
+
+    $scope.filterByType = function (str, type,version) {
         if ($scope.filterSystem) {
-            if (str.startsWith("%S")) {
+            if (type === "SYSTEM") {
                 return true
             }
         }
         if ($scope.filterNormal) {
-            if (str.startsWith("%") == false) {
+            if (type === "NORMAL") {
                 return true
             }
+            if(!version && type === "FIFO"){
+                return true;
+            }
+        }
+        if ($scope.filterFIFO) {
+            if (type === "FIFO") {
+                return true;
+            }
         }
         return false;
     };
@@ -154,7 +170,7 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
         var canShowList = [];
         $scope.allConsumerGrouopList.forEach(function (element) {
             console.log(element)
-            if ($scope.filterByType(element.group)) {
+            if ($scope.filterByType(element.group, element.subGroupType, $scope.rmqVersion)) {
                 if (element.group.toLowerCase().indexOf(lowExceptStr) != -1) {
                     canShowList.push(element);
                 }
@@ -189,6 +205,7 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
                 subscriptionGroupConfig: {
                     groupName: "",
                     consumeEnable: true,
+                    consumeMessageOrderly: false,
                     consumeFromMinEnable: true,
                     consumeBroadcastEnable: true,
                     retryQueueNums: 1,
@@ -211,7 +228,7 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
                         // Refresh topic list
                         $scope.refreshConsumerData();
                     },
-                    template: 'consumerModifyDialog',
+                    template: $scope.rmqVersion ? 'consumerModifyDialogForV5' : 'consumerModifyDialog',
                     controller: 'consumerModifyDialogController',
                     data: {
                         consumerRequestList: request,

src/main/resources/static/src/controller.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 app.controller('AppCtrl', ['$scope','$window','$translate','$http','Notification', function ($scope,$window,$translate, $http, Notification) {
-    $scope.rmqVersion = localStorage.getItem("isV5") === "true" ? true : false;
+    $scope.rmqVersion = localStorage.getItem("isV5");
 
     $scope.changeTranslate = function(langKey){
         $translate.use(langKey);
@@ -23,7 +23,8 @@ app.controller('AppCtrl', ['$scope','$window','$translate','$http','Notification
 
     $scope.changeRMQVersion = function (version) {
         $scope.rmqVersion = version === 5;
-        localStorage.setItem("isV5", $scope.rmqVersion);
+        var v = version === 5;
+        localStorage.setItem("isV5", v);
     }
 
     $scope.logout = function(){

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

@@ -26,6 +26,8 @@
                 </div>
                 <md-checkbox aria-label="Checkbox" ng-model="filterNormal" class="md-primary">{{'NORMAL' | translate}}
                 </md-checkbox>
+                <md-checkbox aria-label="Checkbox" ng-show="rmqVersion" ng-model="filterFIFO" class="md-primary">{{'FIFO' | translate}}
+                </md-checkbox>
                 <md-checkbox aria-label="Checkbox" ng-model="filterSystem" class="md-primary">{{'SYSTEM' | translate}}
                 </md-checkbox>
                 <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
@@ -320,6 +322,116 @@
     </div>
 </script>
 
+<script type="text/ng-template" id="consumerModifyDialogForV5">
+    <div>
+        <div>
+            <div class="modal-header">
+                <h4 class="modal-title">{{'SUBSCRIPTION_CHANGE'|translate}}</h4>
+            </div>
+            <div class="modal-body " ng-repeat="item in ngDialogData.consumerRequestList">
+                <form id="addAppForm1" name="addAppForm" class="form-horizontal" novalidate>
+                    <div class="form-group" ng-hide="ngDialogData.bIsUpdate">
+                        <label class="control-label col-sm-3">clusterName:</label>
+                        <div class="col-sm-9">
+                            <select name="mySelectClusterNameList" multiple chosen
+                                    ng-model="item.clusterNameList"
+                                    ng-options="clusterNameItem for clusterNameItem in ngDialogData.allClusterNameList">
+                                <option value=""></option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">brokerName:</label>
+                        <div class="col-sm-9">
+                            <select name="mySelectBrokerNameList" multiple chosen
+                                    ng-disabled="ngDialogData.bIsUpdate"
+                                    ng-model="item.brokerNameList"
+                                    ng-options="brokerNameItem for brokerNameItem in ngDialogData.allBrokerNameList">
+                                <option value=""></option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">groupName:</label>
+                        <div class="col-sm-9">
+                            <input class="form-control" ng-model="item.subscriptionGroupConfig.groupName" type="text"
+                                   ng-disabled="ngDialogData.bIsUpdate" required/>
+                            <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">consumeEnable:</label>
+                        <div class="col-sm-9">
+                            <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
+                                       aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeEnable">
+                            </md-switch>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">consumeOrderlyEnable:</label>
+                        <div class="col-sm-9">
+                            <md-switch class="md-primary custom-md-switch" eng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
+                                       aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeMessageOrderly">
+                            </md-switch>
+                            <span style="font-size: 12px;">[Pay Attention: FIFO ConsumerGroup Need Open 'consumeOrderlyEnable' Option]</span>
+                        </div>
+
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">consumeBroadcastEnable:</label>
+                        <div class="col-sm-9">
+                            <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
+                                       aria-label="Switch No Ink"
+                                       ng-model="item.subscriptionGroupConfig.consumeBroadcastEnable">
+                            </md-switch>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">retryQueueNums:</label>
+                        <div class="col-sm-9">
+                            <input class="form-control" ng-model="item.subscriptionGroupConfig.retryQueueNums"
+                                   type="text" ng-disabled="{{!ngDialogData.writeOperationEnabled}}"
+                                   required/>
+                            <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">brokerId:</label>
+                        <div class="col-sm-9">
+                            <input class="form-control" ng-model="item.subscriptionGroupConfig.brokerId" type="text"
+                                   ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
+                            <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">whichBrokerWhenConsumeSlowly:</label>
+                        <div class="col-sm-9">
+                            <input class="form-control"
+                                   ng-model="item.subscriptionGroupConfig.whichBrokerWhenConsumeSlowly" type="text"
+                                   ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
+                            <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
+                        </div>
+                    </div>
+                </form>
+                <div class="modal-footer">
+                    <div class="ngdialog-buttons">
+                        <button type="button" class="ngdialog-button ngdialog-button-primary"
+                                ng-disabled="addAppForm.$invalid"
+                                ng-show="{{ngDialogData.writeOperationEnabled}}"
+                                ng-click="postConsumerRequest(item)">{{ 'COMMIT' | translate }}
+                        </button>
+                        <button type="button" class="ngdialog-button ngdialog-button-secondary"
+                                ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+</script>
+
 <!--consumer monitor config-->
 <script type="text/ng-template" id="consumerMonitorDialog">
     <div class="modal-header">