Improve the edit dialog for FlowRule and ParamFlowRule in Sentinel dashboard (#845)

* dashboard: update edit dialog for FlowRule and ParamFlowRule
- Add duration configuration support for ParamFlowRule
- Some other enhancements

* Code polish: move implementation of toRule() to AbstractRuleEntity

Signed-off-by: Eric Zhao <sczyh16@gmail.com>

sentinel-dashboard/src/main/java/com/alibaba/csp/sentinel/dashboard/controller/ParamFlowRuleController.java

@@ -188,6 +188,12 @@ public class ParamFlowRuleController {
         if (entity.getParamIdx() == null || entity.getParamIdx() < 0) {
             return Result.ofFail(-1, "paramIdx should be valid");
         }
+        if (entity.getDurationInSec() <= 0) {
+            return Result.ofFail(-1, "durationInSec should be valid");
+        }
+        if (entity.getControlBehavior() < 0) {
+            return Result.ofFail(-1, "controlBehavior should be valid");
+        }
         return null;
     }
 

sentinel-dashboard/src/main/java/com/alibaba/csp/sentinel/dashboard/datasource/entity/rule/AbstractRuleEntity.java

@@ -18,6 +18,7 @@ package com.alibaba.csp.sentinel.dashboard.datasource.entity.rule;
 import java.util.Date;
 
 import com.alibaba.csp.sentinel.slots.block.AbstractRule;
+import com.alibaba.csp.sentinel.slots.block.Rule;
 
 /**
  * @author Eric Zhao
@@ -103,4 +104,9 @@ public abstract class AbstractRuleEntity<T extends AbstractRule> implements Rule
         this.gmtModified = gmtModified;
         return this;
     }
+
+    @Override
+    public T toRule() {
+        return rule;
+    }
 }

sentinel-dashboard/src/main/java/com/alibaba/csp/sentinel/dashboard/datasource/entity/rule/AuthorityRuleEntity.java

@@ -15,7 +15,6 @@
  */
 package com.alibaba.csp.sentinel.dashboard.datasource.entity.rule;
 
-import com.alibaba.csp.sentinel.slots.block.Rule;
 import com.alibaba.csp.sentinel.slots.block.authority.AuthorityRule;
 import com.alibaba.csp.sentinel.util.AssertUtil;
 
@@ -56,9 +55,4 @@ public class AuthorityRuleEntity extends AbstractRuleEntity<AuthorityRule> {
     public int getStrategy() {
         return rule.getStrategy();
     }
-    
-    @Override
-    public Rule toRule() {
-        return rule;
-    }
 }

sentinel-dashboard/src/main/java/com/alibaba/csp/sentinel/dashboard/datasource/entity/rule/ParamFlowRuleEntity.java

@@ -17,7 +17,6 @@ package com.alibaba.csp.sentinel.dashboard.datasource.entity.rule;
 
 import java.util.List;
 
-import com.alibaba.csp.sentinel.slots.block.Rule;
 import com.alibaba.csp.sentinel.slots.block.flow.param.ParamFlowClusterConfig;
 import com.alibaba.csp.sentinel.slots.block.flow.param.ParamFlowItem;
 import com.alibaba.csp.sentinel.slots.block.flow.param.ParamFlowRule;
@@ -76,6 +75,26 @@ public class ParamFlowRuleEntity extends AbstractRuleEntity<ParamFlowRule> {
         return rule.getParamFlowItemList();
     }
 
+    @JsonIgnore
+    public int getControlBehavior() {
+        return rule.getControlBehavior();
+    }
+
+    @JsonIgnore
+    public int getMaxQueueingTimeMs() {
+        return rule.getMaxQueueingTimeMs();
+    }
+
+    @JsonIgnore
+    public int getBurstCount() {
+        return rule.getBurstCount();
+    }
+
+    @JsonIgnore
+    public long getDurationInSec() {
+        return rule.getDurationInSec();
+    }
+
     @JsonIgnore
     public boolean isClusterMode() {
         return rule.isClusterMode();
@@ -85,9 +104,4 @@ public class ParamFlowRuleEntity extends AbstractRuleEntity<ParamFlowRule> {
     public ParamFlowClusterConfig getClusterConfig() {
         return rule.getClusterConfig();
     }
-    
-    @Override
-    public Rule toRule() {
-        return rule;
-    }
 }

sentinel-dashboard/src/main/webapp/resources/app/scripts/controllers/identity.js

@@ -322,6 +322,15 @@ app.controller('IdentityCtl', ['$scope', '$stateParams', 'IdentityService',
                   paramFlowItemList: [],
                   count: 0,
                   limitApp: 'default',
+                  controlBehavior: 0,
+                  durationInSec: 1,
+                  burstCount: 0,
+                  maxQueueingTimeMs: 0,
+                  clusterMode: false,
+                  clusterConfig: {
+                      thresholdType: 0,
+                      fallbackToLocalWhenFail: true,
+                  }
               }
           };
 

sentinel-dashboard/src/main/webapp/resources/app/scripts/controllers/param_flow.js

@@ -130,6 +130,9 @@ angular.module('sentinelDashboardApp').controller('ParamFlowController', ['$scop
 
     $scope.editRule = function (rule) {
       $scope.currentRule = angular.copy(rule);
+      if ($scope.currentRule.rule && $scope.currentRule.rule.durationInSec === undefined) {
+        $scope.currentRule.rule.durationInSec = 1;
+      }
       $scope.paramFlowRuleDialog = {
         title: '编辑热点规则',
         type: 'edit',
@@ -157,9 +160,14 @@ angular.module('sentinelDashboardApp').controller('ParamFlowController', ['$scop
           paramFlowItemList: [],
           count: 0,
           limitApp: 'default',
+          controlBehavior: 0,
+          durationInSec: 1,
+          burstCount: 0,
+          maxQueueingTimeMs: 0,
           clusterMode: false,
           clusterConfig: {
-            thresholdType: 0
+            thresholdType: 0,
+            fallbackToLocalWhenFail: true,
           }
         }
       };
@@ -167,6 +175,7 @@ angular.module('sentinelDashboardApp').controller('ParamFlowController', ['$scop
         title: '新增热点规则',
         type: 'add',
         confirmBtnText: '新增',
+        supportAdvanced: true,
         showAdvanceButton: true,
       };
       paramFlowRuleDialog = ngDialog.open({

sentinel-dashboard/src/main/webapp/resources/app/views/dialog/flow-rule-dialog.html

@@ -15,9 +15,9 @@
           </div>
 
           <div class="form-group">
-            <label class="col-sm-2 control-label" data-toggle="tooltip" title="流控针对应用，即流量入口的调用来源（origin）">来源应用</label>
+            <label class="col-sm-2 control-label" data-toggle="tooltip" title="流控针对的来源，即流量入口的调用来源（origin）">针对来源</label>
             <div class="col-sm-9">
-              <input type="text" class="form-control highlight-border" ng-model='currentRule.limitApp' placeholder='指调用方，"default"表示所有应用。'
+              <input type="text" class="form-control highlight-border" ng-model='currentRule.limitApp' placeholder='调用来源，"default"表示所有应用'
               />
             </div>
           </div>
@@ -72,9 +72,9 @@
             <label class="col-sm-2 control-label">失败退化</label>
             <div class="col-sm-8">
               <label class="checkbox-inline">
-                <input type="checkbox" name="clusterMode" ng-model="currentRule.clusterConfig.fallbackToLocalWhenFail">
+                <input type="checkbox" name="fallbackToLocalWhenFail" ng-model="currentRule.clusterConfig.fallbackToLocalWhenFail">
+                <i class="glyphicon glyphicon-info-sign"></i>&nbsp;如果 Token Server 不可用是否退化到单机限流
               </label>
-              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;如果 Token Server 不可用是否退化到单机限流
             </div>
           </div>
 

sentinel-dashboard/src/main/webapp/resources/app/views/dialog/param-flow-rule-dialog.html

@@ -27,9 +27,16 @@
                     <div class="form-group">
 						<div ng-if="!currentRule.rule.clusterMode">
 							<label class="col-sm-2 control-label">单机阈值</label>
-							<div class="col-sm-9">
+							<div class="col-sm-3">
 								<input type="number" class="form-control highlight-border" ng-model='currentRule.rule.count' placeholder='单机阈值' />
 							</div>
+							<label class="col-sm-3 control-label" title="统计窗口时间长度，单位为 s">统计窗口时长</label>
+							<div class="input-group col-sm-3">
+								<input type="number" class="form-control highlight-border"
+									   ng-model='currentRule.rule.durationInSec' min="1"
+									   placeholder='请填入统计窗口时长（单位为 秒）' />
+								<span class="input-group-addon">秒</span>
+							</div>
 						</div>
 						<div ng-if="currentRule.rule.clusterMode && currentRule.rule.clusterConfig.thresholdType == 0">
 							<label class="col-sm-2 control-label">均摊阈值</label>
@@ -61,6 +68,16 @@
 						</div>
 					</div>
 
+					<div class="form-group" ng-if="currentRule.rule.clusterMode">
+						<label class="col-sm-2 control-label">失败退化</label>
+						<div class="col-sm-8">
+							<div class="checkbox-inline">
+								<input type="checkbox" name="fallbackToLocalWhenFail"
+									   ng-model="currentRule.rule.clusterConfig.fallbackToLocalWhenFail">
+								<i class="glyphicon glyphicon-info-sign"></i>&nbsp;若选择，则 Token Server 不可用时将退化到单机限流
+							</div>
+						</div>
+					</div>
 
                     <!-- exclusion item part start -->
 					<div ng-if="!paramFlowRuleDialog.showAdvanceButton">