crabapples
/
Sentinel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard: improvements for gateway flow control pages 

Signed-off-by: Eric Zhao <sczyh16@gmail.com>
This commit is contained in:
Eric Zhao 2019-07-10 10:14:11 +08:00
parent 856ff312e9
commit 4a9543fd1f
8 changed files with 60 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,7 +78,7 @@ app.controller('GatewayApiCtl', ['$scope', '$stateParams', 'GatewayApiService',
}; };
gatewayApiDialog = ngDialog.open({ gatewayApiDialog = ngDialog.open({
template: '/app/views/dialog/gateway/api-dialog.html', template: '/app/views/dialog/gateway/api-dialog.html',
width: 840, width: 900,
overlay: true, overlay: true,
scope: $scope scope: $scope
}); });
@ -100,7 +100,7 @@ app.controller('GatewayApiCtl', ['$scope', '$stateParams', 'GatewayApiService',
}; };
gatewayApiDialog = ngDialog.open({ gatewayApiDialog = ngDialog.open({
template: '/app/views/dialog/gateway/api-dialog.html', template: '/app/views/dialog/gateway/api-dialog.html',
width: 840, width: 900,
overlay: true, overlay: true,
scope: $scope scope: $scope
}); });

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

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

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

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

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

@ -27,13 +27,14 @@
<input type='text' ng-model="predicateItem.pattern" class="form-control highlight-border" placeholder="请输入" /> <input type='text' ng-model="predicateItem.pattern" class="form-control highlight-border" placeholder="请输入" />
</div> </div>
<div class="col-sm-1 control-label" align="center"> <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> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-11 control-label" style="text-align: center;"> <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>新增匹配规则 <i class="fa fa-plus"></i>新增匹配规则
</button> </button>
</label> </label>

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

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

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

@ -3,8 +3,8 @@
<span style="font-size: 30px;font-weight: bold;">{{app}}</span> <span style="font-size: 30px;font-weight: bold;">{{app}}</span>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button class="btn btn-default-inverse" style="float: right; margin-right: 10px;" ng-disabled="!macInputModel" ng-click="addNewRule()"> <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> <i class="fa fa-plus"></i>&nbsp;&nbsp;新增网关流控规则</button>
</div> </div>
</div> </div>
@ -61,8 +61,8 @@
</td> </td>
<td>{{rule.count}}</td> <td>{{rule.count}}</td>
<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-outline-primary" 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-danger" type="button" ng-click="deleteRule(rule)" style="font-size: 12px; height:25px;">删除</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

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

@ -27,10 +27,10 @@
<thead> <thead>
<tr style="background: #F3F5F7;"> <tr style="background: #F3F5F7;">
<td style="width: 34%;"> <td style="width: 34%;">
资源名 API 名称
</td> </td>
<td style="width: 6%;"> <td style="width: 8%;">
资源类型 API 类型
</td> </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>
@ -38,7 +38,7 @@
<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: 6%;">分钟拒绝</td> <td style="width: 6%;">分钟拒绝</td>
<td style="width: 23%">操作</td> <td style="width: 20%">操作</td>
</tr> </tr>
<tr></tr> <tr></tr>
</thead> </thead>