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

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')
.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;
}
@ -48,7 +45,7 @@ angular.module('sentinelDashboardApp')
entry.active = !entry.active;// toggle this clicked app bar
$scope.apps.forEach(function (item) { // collapse other app bars
if (item != entry) {
if (item !== entry) {
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="请输入" />
</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>

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>
</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;">
@ -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>

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>
</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>
@ -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>

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

@ -27,10 +27,10 @@
<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>
@ -38,7 +38,7 @@
<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>