[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

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