dashboard: improvements for gateway flow control pages

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

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

@@ -72,13 +72,13 @@ app.controller('GatewayApiCtl', ['$scope', '$stateParams', 'GatewayApiService',
     $scope.editApi = function (api) {
       $scope.currentApi = angular.copy(api);
       $scope.gatewayApiDialog = {
-        title: '编辑自定义API',
+        title: '编辑自定义 API',
         type: 'edit',
         confirmBtnText: '保存'
       };
       gatewayApiDialog = ngDialog.open({
         template: '/app/views/dialog/gateway/api-dialog.html',
-        width: 840,
+        width: 900,
         overlay: true,
         scope: $scope
       });
@@ -94,13 +94,13 @@ app.controller('GatewayApiCtl', ['$scope', '$stateParams', 'GatewayApiService',
         predicateItems: [{matchStrategy: 0, pattern: ''}]
       };
       $scope.gatewayApiDialog = {
-        title: '新增自定义API',
+        title: '新增自定义 API',
         type: 'add',
         confirmBtnText: '新增'
       };
       gatewayApiDialog = ngDialog.open({
         template: '/app/views/dialog/gateway/api-dialog.html',
-        width: 840,
+        width: 900,
         overlay: true,
         scope: $scope
       });

sentinel-dashboard/src/main/webapp/resources/app/scripts/directives/sidebar/sidebar.html

@@ -19,7 +19,7 @@
         <a href="javascript:void(0);" ng-click="click($event)" collapse="{{collpaseall == 1}}" style="font-size: 16px;word-break: break-word;">
           &nbsp;{{entry.app}}
           <span class="fa arrow"></span>
-          <span class="arrow">({{entry.heathyCount}}/{{entry.machines.length}})</span>
+          <span class="arrow">({{entry.healthyCount}}/{{entry.machines.length}})</span>
         </a>
 
         <!--<ul class="nav nav-second-level" collapse="{{entry.active}}" style="display: none;">-->
@@ -29,12 +29,12 @@
               <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;实时监控</a>
           </li>
 
-          <li ui-sref-active="active" ng-if="entry.appType==0">
+          <li ui-sref-active="active" ng-if="!entry.isGateway">
             <a ui-sref="dashboard.identity({app: entry.app})">
               <i class="glyphicon glyphicon-list-alt"></i>&nbsp;&nbsp;簇点链路</a>
           </li>
 
-          <li ui-sref-active="active" ng-if="entry.appType==1">
+          <li ui-sref-active="active" ng-if="entry.isGateway">
             <a ui-sref="dashboard.gatewayIdentity({app: entry.app})">
               <i class="glyphicon glyphicon-filter"></i>&nbsp;&nbsp;请求链路</a>
           </li>
@@ -44,16 +44,16 @@
               <!--<i class="glyphicon glyphicon-filter"></i>&nbsp;&nbsp;流控规则 V1</a>-->
           <!--</li>-->
 
-          <li ui-sref-active="active" ng-if="entry.appType==1">
+          <li ui-sref-active="active" ng-if="entry.isGateway">
             <a ui-sref="dashboard.gatewayApi({app: entry.app})">
-              <i class="glyphicon glyphicon-tags"></i>&nbsp;&nbsp;&nbsp;API管理</a>
+              <i class="glyphicon glyphicon-tags"></i>&nbsp;&nbsp;&nbsp;API 管理</a>
           </li>
-          <li ui-sref-active="active" ng-if="entry.appType==1">
+          <li ui-sref-active="active" ng-if="entry.isGateway">
             <a ui-sref="dashboard.gatewayFlow({app: entry.app})">
               <i class="glyphicon glyphicon-filter"></i>&nbsp;&nbsp;流控规则</a>
           </li>
 
-          <li ui-sref-active="active" ng-if="entry.appType==0">
+          <li ui-sref-active="active" ng-if="!entry.isGateway">
             <a ui-sref="dashboard.flowV1({app: entry.app})">
               <i class="glyphicon glyphicon-filter"></i>&nbsp;&nbsp;流控规则</a>
           </li>
@@ -62,7 +62,7 @@
             <a ui-sref="dashboard.degrade({app: entry.app})">
               <i class="glyphicon glyphicon-flash"></i>&nbsp;&nbsp;降级规则</a>
           </li>
-          <li ui-sref-active="active" ng-if="entry.appType==0">
+          <li ui-sref-active="active" ng-if="!entry.isGateway">
             <a ui-sref="dashboard.paramFlow({app: entry.app})">
               <i class="glyphicon glyphicon-fire"></i>&nbsp;&nbsp;热点规则</a>
           </li>
@@ -70,11 +70,11 @@
             <a ui-sref="dashboard.system({app: entry.app})">
               <i class="glyphicon glyphicon-lock"></i>&nbsp;&nbsp;系统规则</a>
           </li>
-          <li ui-sref-active="active" ng-if="entry.appType==0">
+          <li ui-sref-active="active" ng-if="!entry.isGateway">
             <a ui-sref="dashboard.authority({app: entry.app})">
               <i class="glyphicon glyphicon-check"></i>&nbsp;&nbsp;授权规则</a>
           </li>
-          <li ui-sref-active="active" ng-if="entry.appType==0">
+          <li ui-sref-active="active" ng-if="!entry.isGateway">
             <a ui-sref="dashboard.clusterAppServerList({app: entry.app})">
               <i class="glyphicon glyphicon-cloud"></i>&nbsp;&nbsp;集群流控</a>
           </li>

sentinel-dashboard/src/main/webapp/resources/app/scripts/directives/sidebar/sidebar.js

@@ -1,9 +1,3 @@
-/**
- * @ngdoc directive
- * @name izzyposWebApp.directive:adminPosHeader
- * @description # adminPosHeader
- */
-
 angular.module('sentinelDashboardApp')
   .directive('sidebar', ['$location', '$stateParams', 'AppService', function () {
     return {
@@ -20,20 +14,23 @@ angular.module('sentinelDashboardApp')
         AppService.getApps().success(
           function (data) {
             if (data.code === 0) {
-              var path = $location.path().split('/');
+              let path = $location.path().split('/');
               let initHashApp = path[path.length - 1];
               $scope.apps = data.data;
               $scope.apps = $scope.apps.map(function (item) {
                 if (item.app === initHashApp) {
                   item.active = true;
                 }
-                var heathyCount = 0;
-                for (var i in item.machines) {
+                let healthyCount = 0;
+                for (let i in item.machines) {
                   if (item.machines[i].healthy) {
-                      heathyCount++;
+                      healthyCount++;
                   }
                 }
-                item.heathyCount = heathyCount;
+                item.healthyCount = healthyCount;
+                // Handle appType
+                item.isGateway = item.appType === 1 || item.appType === 11 || item.appType === 12;
+
                 if (item.shown) {
                   return item;
                 }
@@ -47,8 +44,8 @@ angular.module('sentinelDashboardApp')
           let entry = angular.element($event.target).scope().entry;
           entry.active = !entry.active;// toggle this clicked app bar
 
-          $scope.apps.forEach(function (item) {// collapse other app bars
-            if (item != entry) {
+          $scope.apps.forEach(function (item) { // collapse other app bars
+            if (item !== entry) {
               item.active = false;
             }
           });

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

@@ -5,7 +5,7 @@
 			<div class="row">
 				<form role="form" class="form-horizontal">
 					<div class="form-group">
-						<label class="col-sm-2 control-label">API名称</label>
+						<label class="col-sm-2 control-label">API 名称</label>
 						<div class="col-sm-9">
 							<input type="text" ng-if="gatewayApiDialog.type == 'edit'" class="form-control" placeholder="请输入" ng-model='currentApi.apiName'
 							 disabled="" />
@@ -27,13 +27,14 @@
 							<input type='text' ng-model="predicateItem.pattern" class="form-control highlight-border" placeholder="请输入" />
 						</div>
 						<div class="col-sm-1 control-label" align="center">
-							<button class="btn btn-default-inverse" ng-click="removeMatchPattern($index)" align="center" ng-if="currentApi.predicateItems.length>1">X</button>
+							<button class="btn btn-outline-danger" ng-click="removeMatchPattern($index)"
+									align="center" ng-if="currentApi.predicateItems.length>1">X</button>
 						</div>
 					</div>
 
 					<div class="form-group">
 						<label class="col-sm-11 control-label" style="text-align: center;">
-								<button class="btn btn-default-inverse" ng-click="addNewMatchPattern()" align="center">
+								<button class="btn btn-outline-primary" ng-click="addNewMatchPattern()" align="center">
 									<i class="fa fa-plus"></i>新增匹配规则
 								</button>
 						</label>

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

@@ -5,7 +5,7 @@
 			<div class="row">
 				<form role="form" class="form-horizontal">
 					<div class="form-group">
-						<label class="col-sm-2 control-label">API类型</label>
+						<label class="col-sm-2 control-label">API 类型</label>
 						<div class="col-sm-9">
 							<div class="form-control highlight-border" align="center">
 								<input type="radio" ng-if="gatewayFlowRuleDialog.type == 'edit'" value="0" checked ng-model='currentRule.resourceMode'
@@ -13,19 +13,19 @@
 								<input type="radio" ng-if="gatewayFlowRuleDialog.type == 'add'" value="0" checked ng-model='currentRule.resourceMode'
 											 title="Route ID" ng-click="useRouteID()"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;Route ID&nbsp;&nbsp;</span>
 								<input type="radio" ng-if="gatewayFlowRuleDialog.type == 'edit'" value="1" ng-model='currentRule.resourceMode'
-											 disabled="" title="API分组" /><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;API分组&nbsp&nbsp;</span>
+											 disabled="" title="API分组" /><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;API 分组&nbsp&nbsp;</span>
 								<input type="radio" ng-if="gatewayFlowRuleDialog.type == 'add'" value="1" ng-model='currentRule.resourceMode'
-											 title="API分组" ng-click="useCustormAPI()"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;API分组&nbsp&nbsp;</span>
+											 title="API分组" ng-click="useCustormAPI()"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;API 分组&nbsp&nbsp;</span>
 							</div>
 						</div>
 					</div>
 
 					<div class="form-group">
-						<label class="col-sm-2 control-label">API名称</label>
+						<label class="col-sm-2 control-label">API 名称</label>
 						<div class="col-sm-9">
-							<input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'edit'" class="form-control" placeholder="请输入Route ID" ng-model='currentRule.resource'
+							<input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'edit'" class="form-control" placeholder="请输入 Route ID" ng-model='currentRule.resource'
 							 disabled="" />
-							<input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'add'" class="form-control highlight-border" placeholder="请输入Route ID" ng-model='currentRule.resource' />
+							<input type="text" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'add'" class="form-control highlight-border" placeholder="请输入 Route ID" ng-model='currentRule.resource' />
 
 							<select ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'edit'" ng-model="currentRule.resource" ng-init="selectedName = currentRule.resource"
 										disabled=""	ng-options="name for name in apiNames" class="form-control">
@@ -53,7 +53,7 @@
 								<input type="radio" name="parseStrategy" value="0" checked ng-model='currentRule.paramItem.parseStrategy' title="Client IP" />&nbsp;Client IP&nbsp;&nbsp;
 								<input type="radio" name="parseStrategy" value="1" ng-model='currentRule.paramItem.parseStrategy' title="Remote Host" />&nbsp;Remote Host&nbsp;&nbsp;
 								<input type="radio" name="parseStrategy" value="2" ng-model='currentRule.paramItem.parseStrategy' title="Header" />&nbsp;Header&nbsp;&nbsp;
-								<input type="radio" name="parseStrategy" value="3" ng-model='currentRule.paramItem.parseStrategy' title="URL参数" />&nbsp;URL参数&nbsp;&nbsp;
+								<input type="radio" name="parseStrategy" value="3" ng-model='currentRule.paramItem.parseStrategy' title="URL 参数" />&nbsp;URL 参数&nbsp;&nbsp;
 								<input type="radio" name="parseStrategy" value="4" ng-model='currentRule.paramItem.parseStrategy' title="Cookie" />&nbsp;Cookie&nbsp;&nbsp;
 							</div>
 						</div>
@@ -61,9 +61,9 @@
 
 					<div class="form-group" ng-if="currentRule.paramItem != null && (currentRule.paramItem.parseStrategy == 2 || currentRule.paramItem.parseStrategy == 3 || currentRule.paramItem.parseStrategy == 4)">
 						<label class="col-sm-2 control-label">
-							<span ng-if="currentRule.paramItem.parseStrategy==2">Header名称</span>
-							<span ng-if="currentRule.paramItem.parseStrategy==3">URL参数名称</span>
-							<span ng-if="currentRule.paramItem.parseStrategy==4">Cookie名称</span>
+							<span ng-if="currentRule.paramItem.parseStrategy==2">Header 名称</span>
+							<span ng-if="currentRule.paramItem.parseStrategy==3">URL 参数名称</span>
+							<span ng-if="currentRule.paramItem.parseStrategy==4">Cookie 名称</span>
 						</label>
 						<div class="col-sm-9">
 							<input type="text" name="fieldName" class="form-control highlight-border" placeholder="请输入" ng-model='currentRule.paramItem.fieldName' />
@@ -108,7 +108,7 @@
 					<div class="form-group">
 						<div>
 							<label class="col-sm-2 control-label">
-								<span ng-if="currentRule.grade==1">QPS阈值</span>
+								<span ng-if="currentRule.grade==1">QPS 阈值</span>
 								<span ng-if="currentRule.grade==0">线程数</span>
 							</label>
 							<div class="col-sm-3">

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

@@ -3,8 +3,8 @@
     <span style="font-size: 30px;font-weight: bold;">{{app}}</span>
   </div>
   <div class="col-md-6">
-    <button class="btn btn-default-inverse" style="float: right; margin-right: 10px;" ng-disabled="!macInputModel" ng-click="addNewApi()">
-      <i class="fa fa-plus"></i>&nbsp;&nbsp;新增API</button>
+    <button class="btn btn-outline-primary" style="float: right; margin-right: 10px;" ng-disabled="!macInputModel" ng-click="addNewApi()">
+      <i class="fa fa-plus"></i>&nbsp;&nbsp;新增 API 分组</button>
   </div>
 </div>
 
@@ -15,7 +15,7 @@
     <div class="col-md-12">
       <div class="card">
         <div class="inputs-header">
-          <span class="brand" style="font-size: 13px;">API管理</span>
+          <span class="brand" style="font-size: 13px;">API 分组管理</span>
           <button class="btn btn-primary" style="float: right; margin-right: 10px; height: 30px;font-size: 12px;" ng-click="getApis()">刷新</button>
           <input class="form-control witdh-200" placeholder="关键字" ng-model="searchKey">
           <div class="control-group" style="float:right;margin-right: 10px;margin-bottom: -10px;">
@@ -30,7 +30,7 @@
             <thead>
               <tr style="background: #F3F5F7;">
                 <td>
-                  API名称
+                  API 名称
                 </td>
                 <td>
                   匹配模式
@@ -54,8 +54,8 @@
                 </td>
                 <td>{{api.pattern}}</td>
                 <td ng-if="api.firstFlag==0" rowspan="{{api.itemSize}}" style="vertical-align: middle;">
-                  <button class="btn btn-xs btn-default" type="button" ng-click="editApi(api)" style="font-size: 12px; height:25px;">编辑</button>
-                  <button class="btn btn-xs btn-default" type="button" ng-click="deleteApi(api)" style="font-size: 12px; height:25px;">删除</button>
+                  <button class="btn btn-xs btn-outline-primary" type="button" ng-click="editApi(api)" style="font-size: 12px; height:25px;">编辑</button>
+                  <button class="btn btn-xs btn-outline-danger" type="button" ng-click="deleteApi(api)" style="font-size: 12px; height:25px;">删除</button>
                 </td>
               </tr>
             </tbody>

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

@@ -3,8 +3,8 @@
     <span style="font-size: 30px;font-weight: bold;">{{app}}</span>
   </div>
   <div class="col-md-6">
-    <button class="btn btn-default-inverse" style="float: right; margin-right: 10px;" ng-disabled="!macInputModel" ng-click="addNewRule()">
-      <i class="fa fa-plus"></i>&nbsp;&nbsp;新增流控规则</button>
+    <button class="btn btn-outline-primary" style="float: right; margin-right: 10px;" ng-disabled="!macInputModel" ng-click="addNewRule()">
+      <i class="fa fa-plus"></i>&nbsp;&nbsp;新增网关流控规则</button>
   </div>
 </div>
 
@@ -30,10 +30,10 @@
             <thead>
               <tr style="background: #F3F5F7;">
                 <td>
-                  API名称
+                  API 名称
                 </td>
                 <td>
-                  API类型
+                  API 类型
                 </td>
                 <td>
                   阈值类型
@@ -53,7 +53,7 @@
                 <td>{{rule.resource}}</td>
                 <td>
                   <span ng-if="rule.resourceMode == 0">Route ID</span>
-                  <span ng-if="rule.resourceMode == 1">API分组</span>
+                  <span ng-if="rule.resourceMode == 1">API 分组</span>
                 </td>
                 <td>
                   <span ng-if="rule.grade == 1">QPS</span>
@@ -61,8 +61,8 @@
                 </td>
                 <td>{{rule.count}}</td>
                 <td>
-                  <button class="btn btn-xs btn-default" type="button" ng-click="editRule(rule)" style="font-size: 12px; height:25px;">编辑</button>
-                  <button class="btn btn-xs btn-default" type="button" ng-click="deleteRule(rule)" style="font-size: 12px; height:25px;">删除</button>
+                  <button class="btn btn-xs btn-outline-primary" type="button" ng-click="editRule(rule)" style="font-size: 12px; height:25px;">编辑</button>
+                  <button class="btn btn-xs btn-outline-danger" type="button" ng-click="deleteRule(rule)" style="font-size: 12px; height:25px;">删除</button>
                 </td>
               </tr>
             </tbody>

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

@@ -27,18 +27,18 @@
               <thead>
                 <tr style="background: #F3F5F7;">
                   <td style="width: 34%;">
-                    资源名
+                    API 名称
                   </td>
-                  <td style="width: 6%;">
-                    资源类型
+                  <td style="width: 8%;">
+                    API 类型
                   </td>
-                  <td style="width: 7%;">通过QPS</td>
-                  <td style="width: 7%;">拒绝QPS</td>
+                  <td style="width: 7%;">通过 QPS</td>
+                  <td style="width: 7%;">拒绝 QPS</td>
                   <td style="width: 5%;">线程数</td>
-                  <td style="width: 6%;">平均RT</td>
+                  <td style="width: 6%;">平均 RT</td>
                   <td style="width: 6%;">分钟通过</td>
                   <td style="width: 6%;">分钟拒绝</td>
-                  <td style="width: 23%">操作</td>
+                  <td style="width: 20%">操作</td>
                 </tr>
                 <tr></tr>
               </thead>
@@ -50,7 +50,7 @@
                   </td>
                   <td>
                     <span ng-if="apiNames.indexOf(resource.resource) == -1">Route ID</span>
-                    <span ng-if="apiNames.indexOf(resource.resource) != -1">自定义API</span>
+                    <span ng-if="apiNames.indexOf(resource.resource) != -1">自定义 API</span>
                   </td>
                   <td>{{resource.passQps}}</td>
                   <td>{{resource.blockQps}}</td>