Some improvements on Sentinel Dashboard

- Fixes #231: when resource name is too long in resource page, the name will jump out and cover other layout
- Hide `origin` input view in degrade rule dialog
- Refine style and color of buttons in dialogs
- Add support for exception count in degrade rule
- Other improvements

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

sentinel-dashboard/src/main/java/com/taobao/csp/sentinel/dashboard/view/DegradeController.java

@@ -18,6 +18,7 @@ package com.taobao.csp.sentinel.dashboard.view;
 import java.util.Date;
 import java.util.List;
 
+import com.alibaba.csp.sentinel.slots.block.RuleConstant;
 import com.alibaba.csp.sentinel.util.StringUtil;
 
 import com.taobao.csp.sentinel.dashboard.datasource.entity.rule.DegradeRuleEntity;
@@ -38,15 +39,17 @@ import org.springframework.web.bind.annotation.ResponseBody;
 @Controller
 @RequestMapping(value = "/degrade", produces = MediaType.APPLICATION_JSON_VALUE)
 public class DegradeController {
-    private static Logger logger = LoggerFactory.getLogger(DegradeController.class);
+
+    private final Logger logger = LoggerFactory.getLogger(DegradeController.class);
+
     @Autowired
-    InMemDegradeRuleStore repository;
+    private InMemDegradeRuleStore repository;
     @Autowired
     private SentinelApiClient sentinelApiClient;
 
     @ResponseBody
     @RequestMapping("/rules.json")
-    Result<List<DegradeRuleEntity>> queryMachineRules(String app, String ip, Integer port) {
+    public Result<List<DegradeRuleEntity>> queryMachineRules(String app, String ip, Integer port) {
         if (StringUtil.isEmpty(app)) {
             return Result.ofFail(-1, "app can't be null or empty");
         }
@@ -68,7 +71,7 @@ public class DegradeController {
 
     @ResponseBody
     @RequestMapping("/new.json")
-    Result<?> add(String app, String ip, Integer port, String limitApp, String resource,
+    public Result<DegradeRuleEntity> add(String app, String ip, Integer port, String limitApp, String resource,
                   Double count, Integer timeWindow, Integer grade) {
         if (StringUtil.isBlank(app)) {
             return Result.ofFail(-1, "app can't be null or empty");
@@ -94,8 +97,8 @@ public class DegradeController {
         if (grade == null) {
             return Result.ofFail(-1, "grade can't be null");
         }
-        if (grade != 0 && grade != 1) {
-            return Result.ofFail(-1, "grade must be 0 or 1, but " + grade + " got");
+        if (grade < RuleConstant.DEGRADE_GRADE_RT || grade > RuleConstant.DEGRADE_GRADE_EXCEPTION_COUNT) {
+            return Result.ofFail(-1, "Invalid grade: " + grade);
         }
         DegradeRuleEntity entity = new DegradeRuleEntity();
         entity.setApp(app.trim());
@@ -123,14 +126,14 @@ public class DegradeController {
 
     @ResponseBody
     @RequestMapping("/save.json")
-    Result<?> updateIfNotNull(Long id, String app, String limitApp, String resource,
+    public Result<DegradeRuleEntity> updateIfNotNull(Long id, String app, String limitApp, String resource,
                               Double count, Integer timeWindow, Integer grade) {
         if (id == null) {
             return Result.ofFail(-1, "id can't be null");
         }
         if (grade != null) {
-            if (grade != 0 && grade != 1) {
-                return Result.ofFail(-1, "grade must be 0 or 1, but " + grade + " got");
+            if (grade < RuleConstant.DEGRADE_GRADE_RT || grade > RuleConstant.DEGRADE_GRADE_EXCEPTION_COUNT) {
+                return Result.ofFail(-1, "Invalid grade: " + grade);
             }
         }
         DegradeRuleEntity entity = repository.findById(id);
@@ -172,7 +175,7 @@ public class DegradeController {
 
     @ResponseBody
     @RequestMapping("/delete.json")
-    Result<?> delete(Long id) {
+    public Result<Long> delete(Long id) {
         if (id == null) {
             return Result.ofFail(-1, "id can't be null");
         }

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

@@ -92,6 +92,19 @@ app.controller('DegradeCtl', ['$scope', '$stateParams', 'DegradeService', 'ngDia
       }
     };
 
+    function parseDegradeMode(grade) {
+        switch (grade) {
+            case 0:
+              return 'RT';
+            case 1:
+              return '异常比例';
+            case 2:
+              return '异常数';
+            default:
+              return '未知';
+        }
+    }
+
     var confirmDialog;
     $scope.deleteRule = function (rule) {
       $scope.currentRule = rule;
@@ -99,15 +112,14 @@ app.controller('DegradeCtl', ['$scope', '$stateParams', 'DegradeService', 'ngDia
         title: '删除降级规则',
         type: 'delete_rule',
         attentionTitle: '请确认是否删除如下降级规则',
-        attention: '资源名: ' + rule.resource + ', 降级应用: ' + rule.limitApp
-          + ', 阈值类型: ' + (rule.grade == 0 ? 'RT' : '异常比例') + ', 阈值: ' + rule.count,
+        attention: '资源名: ' + rule.resource +
+            ', 降级模式: ' + parseDegradeMode(rule.grade) + ', 阈值: ' + rule.count,
         confirmBtnText: '删除',
       };
       confirmDialog = ngDialog.open({
         template: '/app/views/dialog/confirm-dialog.html',
         scope: $scope,
         overlay: true
-
       });
     };
 

sentinel-dashboard/src/main/webapp/resources/app/scripts/libs/treeTable.js

@@ -195,7 +195,7 @@ var com_github_culmat_jsTreeTable =  (function(){
 				td.prepend($('<span style="padding-left:16px;" /></span>'))
 			}
 			td.prepend($('<span style="padding-left:'+(15*parseInt(level-1))+'px;" /></span>'))
-			td.css('white-space','nowrap')
+			// td.css('white-space','nowrap')
 			tr.trExpand = function(changeState){
 				if(this.trChildren.length < 1) return
 				if(changeState) {

sentinel-dashboard/src/main/webapp/resources/app/scripts/services/degradeservice.js

@@ -67,7 +67,7 @@ app.service('DegradeService', ['$http', function ($http) {
           return false;
       }
       if (rule.grade === undefined || rule.grade < 0) {
-          alert('未知的降级类型');
+          alert('未知的降级策略');
           return false;
       }
       if (rule.count === undefined || rule.count === '' || rule.count < 0) {

sentinel-dashboard/src/main/webapp/resources/app/styles/main.css

@@ -1473,4 +1473,276 @@ body {
 .selectize-input-200 > .selectize-input {
     min-width: 200px;
     border-color: #337ab7;
+}
+
+.btn-outline-primary {
+    color: #007bff;
+    background-color: transparent;
+    background-image: none;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:hover {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+    color: #007bff;
+    background-color: transparent;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+.btn-outline-secondary {
+    color: #6c757d;
+    background-color: transparent;
+    background-image: none;
+    border-color: #6c757d;
+}
+
+.btn-outline-secondary:hover {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
+    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+}
+
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+    color: #6c757d;
+    background-color: transparent;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+}
+
+.btn-outline-success {
+    color: #28a745;
+    background-color: transparent;
+    background-image: none;
+    border-color: #28a745;
+}
+
+.btn-outline-success:hover {
+    color: #fff;
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-outline-success:focus, .btn-outline-success.focus {
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+}
+
+.btn-outline-success.disabled, .btn-outline-success:disabled {
+    color: #28a745;
+    background-color: transparent;
+}
+
+.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
+.show > .btn-outline-success.dropdown-toggle {
+    color: #fff;
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-success.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+}
+
+.btn-outline-info {
+    color: #17a2b8;
+    background-color: transparent;
+    background-image: none;
+    border-color: #17a2b8;
+}
+
+.btn-outline-info:hover {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+}
+
+.btn-outline-info:focus, .btn-outline-info.focus {
+    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+}
+
+.btn-outline-info.disabled, .btn-outline-info:disabled {
+    color: #17a2b8;
+    background-color: transparent;
+}
+
+.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
+.show > .btn-outline-info.dropdown-toggle {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+}
+
+.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-info.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+}
+
+.btn-outline-warning {
+    color: #ffc107;
+    background-color: transparent;
+    background-image: none;
+    border-color: #ffc107;
+}
+
+.btn-outline-warning:hover {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.btn-outline-warning:focus, .btn-outline-warning.focus {
+    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+}
+
+.btn-outline-warning.disabled, .btn-outline-warning:disabled {
+    color: #ffc107;
+    background-color: transparent;
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
+.show > .btn-outline-warning.dropdown-toggle {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-warning.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+}
+
+.btn-outline-danger {
+    color: #dc3545;
+    background-color: transparent;
+    background-image: none;
+    border-color: #dc3545;
+}
+
+.btn-outline-danger:hover {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.btn-outline-danger:focus, .btn-outline-danger.focus {
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+}
+
+.btn-outline-danger.disabled, .btn-outline-danger:disabled {
+    color: #dc3545;
+    background-color: transparent;
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
+.show > .btn-outline-danger.dropdown-toggle {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-danger.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+}
+
+.btn-outline-light {
+    color: #f8f9fa;
+    background-color: transparent;
+    background-image: none;
+    border-color: #f8f9fa;
+}
+
+.btn-outline-light:hover {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.btn-outline-light:focus, .btn-outline-light.focus {
+    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+}
+
+.btn-outline-light.disabled, .btn-outline-light:disabled {
+    color: #f8f9fa;
+    background-color: transparent;
+}
+
+.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
+.show > .btn-outline-light.dropdown-toggle {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+}
+
+.btn-outline-dark {
+    color: #343a40;
+    background-color: transparent;
+    background-image: none;
+    border-color: #343a40;
+}
+
+.btn-outline-dark:hover {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
+
+.btn-outline-dark:focus, .btn-outline-dark.focus {
+    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+}
+
+.btn-outline-dark.disabled, .btn-outline-dark:disabled {
+    color: #343a40;
+    background-color: transparent;
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
+.show > .btn-outline-dark.dropdown-toggle {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
 }

sentinel-dashboard/src/main/webapp/resources/app/views/degrade.html

@@ -33,11 +33,11 @@
                 <td style="width: 40%">
                   资源名
                 </td>
+                <!--<td style="width: 10%;">-->
+                  <!--降级应用-->
+                <!--</td>-->
                 <td style="width: 10%;">
-                  降级应用
-                </td>
-                <td style="width: 10%;">
-                  阈值类型
+                  降级模式
                 </td>
                 <td style="width: 10%;">
                   阈值
@@ -57,15 +57,17 @@
               <tr dir-paginate="rule in rules | filter : searchKey | itemsPerPage: rulesPageConfig.pageSize " current-page="rulesPageConfig.currentPageIndex"
                 pagination-id="entriesPagination">
                 <td style="word-wrap:break-word;word-break:break-all;">{{rule.resource}}</td>
-                <td style="word-wrap:break-word;word-break:break-all;">{{rule.limitApp }}</td>
+                <!--<td style="word-wrap:break-word;word-break:break-all;">{{rule.limitApp }}</td>-->
                 <td>
-                  {{rule.grade==0 ? 'RT' : '异常比例'}}
+                  <span ng-if="rule.grade == 0">RT</span>
+                  <span ng-if="rule.grade == 1" title="秒级异常比例">异常比例</span>
+                  <span ng-if="rule.grade == 2" title="分钟级异常数">异常数</span>
                 </td>
                 <td style="word-wrap:break-word;word-break:break-all;">
                   {{rule.count}}
                 </td>
                 <td style="word-wrap:break-word;word-break:break-all;">
-                  {{rule.timeWindow}}
+                  {{rule.timeWindow}}s
                 </td>
 
                 <td>

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

@@ -36,8 +36,8 @@
             </div>
             <div class="separator"></div>
             <div clss="row" style="margin-top: 20px;">
-                <button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-                <button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{authorityRuleDialog.confirmBtnText}}</button>
+                <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
+                <button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{authorityRuleDialog.confirmBtnText}}</button>
                 <button ng-if="authorityRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
                         ng-click="saveRuleAndContinue()">{{authorityRuleDialog.saveAndContinueBtnText}}</button>
             </div>

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

@@ -13,7 +13,7 @@
       <div class="separator"></div>
       <div clss="row" style="margin-top: 20px;">
         <button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-        <button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;" ng-click="confirm()">{{confirmDialog.confirmBtnText}}</button>
+        <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;" ng-click="confirm()">{{confirmDialog.confirmBtnText}}</button>
       </div>
     </div>
   </div>

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

@@ -14,19 +14,20 @@
 						</div>
 					</div>
 
-					<div class="form-group">
-						<label class="col-sm-2 control-label">流控应用</label>
-						<div class="col-sm-9">
-							<input type="text" class="form-control highlight-border" ng-model='currentRule.limitApp' placeholder='"default"表示所有应用。' />
-						</div>
-					</div>
+					<!--<div class="form-group">-->
+						<!--<label class="col-sm-2 control-label">流控应用</label>-->
+						<!--<div class="col-sm-9">-->
+							<!--<input type="text" class="form-control highlight-border" ng-model='currentRule.limitApp' placeholder='"default"表示所有应用。' />-->
+						<!--</div>-->
+					<!--</div>-->
 
 					<div class="form-group">
-						<label class="col-sm-2 control-label">阈值类型</label>
+						<label class="col-sm-2 control-label">降级策略</label>
 						<div class="col-sm-9">
 							<div class="form-control highlight-border" align="center">
-								<input type="radio" name="grade" value="0" checked ng-model='currentRule.grade' />&nbsp;RT&nbsp;&nbsp;
-								<input type="radio" name="grade" value="1" ng-model='currentRule.grade' />&nbsp;异常比例
+								<input type="radio" name="grade" value="0" checked ng-model='currentRule.grade' title="秒级平均响应时间" />&nbsp;RT&nbsp;&nbsp;
+								<input type="radio" name="grade" value="1" ng-model='currentRule.grade' title="秒级异常比例" />&nbsp;异常比例&nbsp;&nbsp;
+								<input type="radio" name="grade" value="2" ng-model='currentRule.grade' title="分钟级异常数，仅 1.3.0 及以上版本生效" />&nbsp;异常数
 							</div>
 						</div>
 					</div>
@@ -34,11 +35,11 @@
 					<div class="form-group">
 						<label ng-if="currentRule.grade == 0" class="col-sm-2 control-label">RT</label>
 						<label ng-if="currentRule.grade == 1" class="col-sm-2 control-label">异常比例</label>
+						<label ng-if="currentRule.grade == 2" class="col-sm-2 control-label">异常数</label>
 						<div class="col-sm-3">
-							<input type='number' class="form-control highlight-border" ng-model='currentRule.count' ng-if="currentRule.grade == 0" placeholder="毫秒"
-							/>
-							<input type='number' class="form-control highlight-border" ng-model='currentRule.count' ng-if="currentRule.grade == 1" placeholder="0.0~1.0"
-							/>
+							<input type='number' class="form-control highlight-border" ng-model='currentRule.count' ng-if="currentRule.grade == 0" placeholder="毫秒"/>
+							<input type='number' class="form-control highlight-border" ng-model='currentRule.count' ng-if="currentRule.grade == 1" placeholder="0.0~1.0"/>
+							<input type='number' class="form-control highlight-border" ng-model='currentRule.count' ng-if="currentRule.grade == 2" placeholder="异常数"/>
 						</div>
 						<label class="col-sm-2 control-label">时间窗口</label>
 						<div class="col-sm-4">
@@ -49,8 +50,8 @@
 			</div>
 			<div class="separator"></div>
 			<div clss="row" style="margin-top: 20px;">
-				<button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-				<button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{degradeRuleDialog.confirmBtnText}}</button>
+				<button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
+				<button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{degradeRuleDialog.confirmBtnText}}</button>
 				<button ng-if="degradeRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
 				 ng-click="saveRuleAndContinue()">{{degradeRuleDialog.saveAndContinueBtnText}}</button>
 			</div>

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

@@ -89,15 +89,15 @@
             </div>
           </div>
           <div class="form-group text-center">
-            <a ng-click="onOpenAdvanceClick()" ng-if="flowRuleDialog.showAdvanceButton">高级选项</a>
-            <a ng-click="onCloseAdvanceClick()" ng-if="!flowRuleDialog.showAdvanceButton">关闭高级选项</a>
+            <a ng-click="onOpenAdvanceClick()" ng-if="flowRuleDialog.showAdvanceButton" style="cursor: pointer;">高级选项</a>
+            <a ng-click="onCloseAdvanceClick()" ng-if="!flowRuleDialog.showAdvanceButton" style="cursor: pointer;">关闭高级选项</a>
           </div>
         </form>
       </div>
       <div class="separator"></div>
       <div clss="row" style="margin-top: 20px;">
-        <button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-        <button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{flowRuleDialog.confirmBtnText}}</button>
+        <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
+        <button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{flowRuleDialog.confirmBtnText}}</button>
         <button ng-if="flowRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
           ng-click="saveRuleAndContinue()">{{flowRuleDialog.saveAndContinueBtnText}}</button>
       </div>

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

@@ -102,15 +102,15 @@
 
 					<!-- exclusion item part end -->
 					<div class="form-group text-center" ng-if="paramFlowRuleDialog.supportAdvanced">
-						<a ng-click="onOpenAdvanceClick()" ng-if="paramFlowRuleDialog.showAdvanceButton">高级选项</a>
-						<a ng-click="onCloseAdvanceClick()" ng-if="!paramFlowRuleDialog.showAdvanceButton">关闭高级选项</a>
+						<a ng-click="onOpenAdvanceClick()" ng-if="paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">高级选项</a>
+						<a ng-click="onCloseAdvanceClick()" ng-if="!paramFlowRuleDialog.showAdvanceButton" style="cursor: pointer;">关闭高级选项</a>
 					</div>
 				</form>
 			</div>
 			<div class="separator"></div>
 			<div clss="row" style="margin-top: 20px;">
-				<button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-				<button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{paramFlowRuleDialog.confirmBtnText}}</button>
+				<button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
+				<button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="saveRule()">{{paramFlowRuleDialog.confirmBtnText}}</button>
 				<button ng-if="paramFlowRuleDialog.saveAndContinueBtnText" class="btn btn-default" style="float:right; height: 30px;font-size: 12px;"
 				 ng-click="saveRuleAndContinue()">{{paramFlowRuleDialog.saveAndContinueBtnText}}</button>
 			</div>

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

@@ -49,8 +49,8 @@
       </div>
       <div class="separator"></div>
       <div clss="row" style="margin-top: 20px;">
-        <button class="btn btn-default-inverse" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
-        <button class="btn btn-danger-inverse" style="float:right; height: 30px;font-size: 12px;" ng-click="saveRule()">{{systemRuleDialog.confirmBtnText}}</button>
+        <button class="btn btn-outline-danger" style="float:right; height: 30px;font-size: 12px;margin-left: 10px;" ng-click="closeThisDialog()">取消</button>
+        <button class="btn btn-outline-success" style="float:right; height: 30px;font-size: 12px;" ng-click="saveRule()">{{systemRuleDialog.confirmBtnText}}</button>
       </div>
     </div>
   </div>

sentinel-dashboard/src/main/webapp/resources/app/views/identity.html

@@ -57,7 +57,7 @@
                   <td style="white-space: normal; text-align: left;">
                     <!--<a ng-click="copyIdentity(resource.resource)"-->
                     <!--title="{{resource.resource}} 单击复制到剪切板">-->
-                    {{resource.resource}}
+                    <span style="word-wrap:break-word;word-break:break-all;">{{resource.resource}}</span>
                     <!--</a>-->
                   </td>
                   <td>{{resource.passQps}}</td>