[ISSUE #25]Add filter in consumer list. (#26)

Co-authored-by: zhangjidi <zhangjidi@cmss.chinamobile.com>
This commit is contained in:
zhangjidi2016
2021-10-09 18:56:58 +08:00
committed by GitHub
parent d0583b73c3
commit cc30bb2373
10 changed files with 255 additions and 194 deletions

View File

@@ -43,6 +43,8 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
};
$scope.userRole = $window.sessionStorage.getItem("userrole");
$scope.writeOperationEnabled = $scope.userRole == null ? true : ($scope.userRole == 1 ? true : false);
$scope.filterNormal = true;
$scope.filterSystem = false;
$scope.doSort = function () {// todo how to change this fe's code ? (it's dirty)
if ($scope.sortKey == 'diffTotal') {
@@ -125,13 +127,37 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http', 'Notific
$scope.filterList(1)
});
$scope.$watch('filterNormal', function () {
$scope.filterList(1);
});
$scope.$watch('filterSystem', function () {
$scope.filterList(1);
});
$scope.filterByType = function (str) {
if ($scope.filterSystem) {
if (str.startsWith("%S")) {
return true
}
}
if ($scope.filterNormal) {
if (str.startsWith("%") == false) {
return true
}
}
return false;
};
$scope.filterList = function (currentPage) {
var lowExceptStr = $scope.filterStr.toLowerCase();
var canShowList = [];
$scope.allConsumerGrouopList.forEach(function (element) {
console.log(element)
if (element.group.toLowerCase().indexOf(lowExceptStr) != -1) {
canShowList.push(element);
if ($scope.filterByType(element.group)) {
if (element.group.toLowerCase().indexOf(lowExceptStr) != -1) {
canShowList.push(element);
}
}
});
$scope.paginationConf.totalItems = canShowList.length;

View File

@@ -24,27 +24,25 @@
<label>{{ 'SUBSCRIPTION_GROUP' | translate}}:</label>
<input type="text" class="form-control" ng-model="filterStr">
</div>
<div class="form-group form-group-sm">
<button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
ng-click="openAddDialog()">{{'ADD' | translate}}/ {{'UPDATE' | translate}}
</button>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="refreshConsumerData()">
{{'REFRESH' | translate}}
</button>
</div>
<div class="form-group form-group-sm">
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="intervalProcessSwitch">
{{'AUTO_REFRESH' | translate}}
</md-switch>
</div>
<md-checkbox aria-label="Checkbox" ng-model="filterNormal" class="md-primary">{{'NORMAL' | translate}}
</md-checkbox>
<md-checkbox aria-label="Checkbox" ng-model="filterSystem" class="md-primary">{{'SYSTEM' | translate}}
</md-checkbox>
<button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
ng-click="openAddDialog()">{{'ADD' | translate}}/ {{'UPDATE' | translate}}
</button>
<button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="refreshConsumerData()">
{{'REFRESH' | translate}}
</button>
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="intervalProcessSwitch">
{{'AUTO_REFRESH' | translate}}
</md-switch>
</form>
</div>
<br>
<div>
<div id="deployList" class="row">
<table class="table table-bordered">
<table class="table table-bordered text-middle">
<tr>
<th class="text-center"><a ng-click="sortByKey('group')">{{ 'SUBSCRIPTION_GROUP' | translate}}</a></th>
<th class="text-center"><a ng-click="sortByKey('count')">{{ 'QUANTITY' | translate}}</a></th>
@@ -55,15 +53,17 @@
<th class="text-center"><a ng-click="sortByKey('diffTotal')">{{ 'DELAY' | translate}}</a></th>
<th class="text-center">{{ 'OPERATION' | translate}}</th>
</tr>
<tr ng-repeat="consumerGroup in consumerGroupShowList">
<td class="text-left">{{consumerGroup.group}}</td>
<tr ng-repeat="consumerGroup in consumerGroupShowList"
ng-init="sysFlag = consumerGroup.group.startsWith('%SYS%')">
<td class="text-center"><font color={{sysFlag?"red":""}}>
{{sysFlag?consumerGroup.group.substring(5):consumerGroup.group}}</font></td>
<td class="text-center">{{consumerGroup.count}}</td>
<td class="text-center">{{consumerGroup.version}}</td>
<td class="text-center">{{consumerGroup.consumeType}}</td>
<td class="text-center">{{consumerGroup.messageModel}}</td>
<td class="text-center">{{consumerGroup.consumeTps}}</td>
<td class="text-center">{{consumerGroup.diffTotal}}</td>
<td class="text-center">
<td class="text-left">
<button name="client" ng-click="client(consumerGroup.group)"
class="btn btn-raised btn-sm btn-primary"
type="button">{{'CLIENT' | translate}}
@@ -80,7 +80,7 @@
<!--</button>-->
<button name="client" ng-click="delete(consumerGroup.group)"
class="btn btn-raised btn-sm btn-danger"
ng-show="{{writeOperationEnabled}}"
ng-show="{{!sysFlag && writeOperationEnabled}}"
type="button">{{'DELETE' | translate}}
</button>
@@ -284,7 +284,7 @@
<!--</div>-->
<!--</div>-->
<div class="form-group">
<label class="control-label col-sm-4">brokerId:</label>
<label class="control-label col-sm-2">brokerId:</label>
<div class="col-sm-8">
<input class="form-control" ng-model="item.subscriptionGroupConfig.brokerId" type="text"
ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
@@ -292,7 +292,7 @@
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">whichBrokerWhenConsumeSlowly:</label>
<label class="control-label col-sm-2">whichBrokerWhenConsumeSlowly:</label>
<div class="col-sm-8">
<input class="form-control"
ng-model="item.subscriptionGroupConfig.whichBrokerWhenConsumeSlowly" type="text"

View File

@@ -20,10 +20,10 @@
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="Topic">
<h5 class="md-display-5">Total {{paginationConf.totalItems}} Messages</h5>
<md-content class="md-padding" style="min-height:600px">
<h5 class="md-display-5">Total {{paginationConf.totalItems}} Messages</h5>
<div class="row">
<form class="form-inline pull-left col-sm-12">
<form class="form-inline pull-left">
<div class="form-group">
<label>{{'TOPIC' | translate}}:</label>
</div>
@@ -65,7 +65,7 @@
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered">
<table class="table table-bordered text-middle">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
@@ -91,84 +91,87 @@
</md-content>
</md-tab>
<md-tab label="Message Key">
<h5 class="md-display-5">Only Return 64 Messages</h5>
<md-content class="md-padding" style="min-height:600px">
<h5 class="md-display-5">Only Return 64 Messages</h5>
<form class="form-inline pull-left col-sm-12">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
<div class="row">
<form class="form-inline pull-left">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label>Key:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="key"
required/>
</div>
</div>
<div class="form-group">
<label>Key:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="key"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByTopicAndKey()">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByTopicAndKeyResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageByMessageId(item.msgId,item.topic)">Message Detail
</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByTopicAndKey()">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered text-middle">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByTopicAndKeyResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageByMessageId(item.msgId,item.topic)">Message Detail
</button>
</td>
</tr>
</table>
</div>
</md-content>
</md-tab>
<md-tab label="Message ID">
<h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
<md-content class="md-padding" style="min-height:600px">
<form class="form-inline pull-left col-sm-12">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group ">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
<div class="row">
<form class="form-inline pull-left">
<div class="form-group">
<label>Topic:</label>
</div>
</div>
<div class="form-group">
<label>MessageId:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="messageId"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByMessageId(messageId,selectedTopic)">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<div class="form-group ">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label>MessageId:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="messageId"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByMessageId(messageId,selectedTopic)">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
</div>
</md-content>
</md-tab>
</md-tabs>

View File

@@ -15,8 +15,8 @@
~ limitations under the License.
-->
<div class="container-fluid" id="deployHistoryList">
<div class="modal-header">
<div class="row">
<div class="modal-header" style="border-bottom: 0px">
<div class="row" style="margin-left: 0px">
<label style="color: #000000">{{ 'TRACE_TOPIC' | translate }}:</label>
<div style="display: inline-block; min-width: 300px">
<select name="mySelect" chosen
@@ -34,105 +34,110 @@
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="Message Key">
<h5 class="md-display-5">Only Return 64 Messages</h5>
<md-content class="md-padding" style="min-height:600px">
<h5 class="md-display-5">Only Return 64 Messages</h5>
<div class="row">
<form class="form-inline pull-left col-sm-12">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
<form class="form-inline pull-left">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label>Key:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="key"
required/>
</div>
</div>
<div class="form-group">
<label>Key:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="key"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByTopicAndKey()">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Message Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByTopicAndKeyResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageTraceByMessageId(item.msgId, selectedTraceTopic)">{{ 'MESSAGE_TRACE_DETAIL' | translate }}
</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByTopicAndKey()">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered text-middle">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Message Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByTopicAndKeyResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageTraceByMessageId(item.msgId, selectedTraceTopic)">{{ 'MESSAGE_TRACE_DETAIL' | translate }}
</button>
</td>
</tr>
</table>
</div>
</md-content>
</md-tab>
<md-tab label="Message ID">
<h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
<md-content class="md-padding" style="min-height:600px">
<form class="form-inline pull-left col-sm-12">
<div class="form-group">
<label>Topic:</label>
</div>
<div class="form-group ">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
<div class="row">
<form class="form-inline pull-left">
<div class="form-group">
<label>Topic:</label>
</div>
</div>
<div class="form-group">
<label>MessageId:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="messageId"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByMessageId(messageId,selectedTopic)">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Message Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByMessageIdResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageTraceByMessageId(item.msgId, selectedTraceTopic)">{{ 'MESSAGE_TRACE_DETAIL' | translate }}
</button>
</td>
</tr>
</table>
<div class="form-group ">
<div style="width: 300px">
<select name="mySelectTopic" chosen
ng-model="selectedTopic"
ng-options="item for item in allTopicList"
required>
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label>MessageId:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="messageId"
required/>
</div>
<button type="button" class="btn btn-raised btn-sm btn-primary" data-toggle="modal"
ng-click="queryMessageByMessageId(messageId,selectedTopic)">
<span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
</button>
</form>
<table class="table table-bordered text-middle">
<tr>
<th class="text-center">Message ID</th>
<th class="text-center">Tag</th>
<th class="text-center">Message Key</th>
<th class="text-center">StoreTime</th>
<th class="text-center">Operation</th>
</tr>
<tr ng-repeat="item in queryMessageByMessageIdResult">
<td class="text-center">{{item.msgId}}</td>
<td class="text-center">{{item.properties.TAGS}}</td>
<td class="text-center">{{item.properties.KEYS}}</td>
<td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="queryMessageTraceByMessageId(item.msgId, selectedTraceTopic)">{{ 'MESSAGE_TRACE_DETAIL' | translate }}
</button>
</td>
</tr>
</table>
</div>
</md-content>
</md-tab>
</md-tabs>

View File

@@ -48,7 +48,7 @@
</tr>
<tr ng-repeat="fTopic in topicShowList"
ng-init="sysFlag = fTopic.startsWith('%SYS%'); topic = sysFlag?fTopic.substring(5):fTopic">
<td class="text-left"><font color={{sysFlag?"red":""}}>{{topic}}</font></td>
<td class="text-center"><font color={{sysFlag?"red":""}}>{{topic}}</font></td>
<td class="text-left">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="statsView(topic)">{{'STATUS' | translate}}