mirror of
https://github.com/apache/rocketmq-dashboard.git
synced 2025-09-12 13:39:10 +08:00
ef7b97e96a
* [ISSUE #30]Supports batch resending and batch exporting dlq messages. * Optimize the code Co-authored-by: zhangjidi2016 <zhangjidi@cmss.chinamobile.com>
282 lines
17 KiB
HTML
282 lines
17 KiB
HTML
<!--
|
|
~ Licensed to the Apache Software Foundation (ASF) under one or more
|
|
~ contributor license agreements. See the NOTICE file distributed with
|
|
~ this work for additional information regarding copyright ownership.
|
|
~ The ASF licenses this file to You under the Apache License, Version 2.0
|
|
~ (the "License"); you may not use this file except in compliance with
|
|
~ the License. You may obtain a copy of the License at
|
|
~
|
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
~
|
|
~ Unless required by applicable law or agreed to in writing, software
|
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
~ See the License for the specific language governing permissions and
|
|
~ limitations under the License.
|
|
-->
|
|
<div class="container-fluid" id="deployHistoryList">
|
|
<div class="modal-body">
|
|
<div ng-cloak="" class="tabsdemoDynamicHeight">
|
|
<md-content>
|
|
<md-tabs md-dynamic-height="" md-border-bottom="">
|
|
<md-tab label="Consumer">
|
|
<h5 class="md-display-5">Total {{paginationConf.totalItems}} Messages</h5>
|
|
<md-content class="md-padding" style="min-height:600px">
|
|
<div class="row">
|
|
<form class="form-inline pull-left">
|
|
<div class="form-group">
|
|
<label>{{'CONSUMER' | translate}}:</label>
|
|
</div>
|
|
<div class="form-group ">
|
|
<div style="width: 300px">
|
|
<select name="mySelectGroup" chosen
|
|
ng-model="selectedConsumerGroup"
|
|
ng-options="item for item in allConsumerGroupList"
|
|
ng-change="onChangeQueryCondition()"
|
|
required>
|
|
<option value=""></option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group ">
|
|
<label>{{'BEGIN' | translate}}:</label>
|
|
<div class="input-group">
|
|
<input class="form-control" datetimepicker
|
|
ng-change="onChangeQueryCondition()" ng-model="timepickerBegin"
|
|
options="timepickerOptions"/>
|
|
<span class="input-group-addon"><span
|
|
class="glyphicon glyphicon-calendar"></span></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{'END' | translate}}:</label>
|
|
<div class="input-group">
|
|
<input class="form-control" datetimepicker
|
|
ng-change="onChangeQueryCondition()" ng-model="timepickerEnd"
|
|
options="timepickerOptions"/>
|
|
<span class="input-group-addon"><span
|
|
class="glyphicon glyphicon-calendar"></span></span>
|
|
</div>
|
|
</div>
|
|
<button id="searchAppsButton" type="button"
|
|
class="btn btn-raised btn-sm btn-primary"
|
|
data-toggle="modal"
|
|
ng-click="queryDlqMessageByConsumerGroup()">
|
|
<span class="glyphicon glyphicon-search"></span> {{ 'SEARCH' | translate}}
|
|
</button>
|
|
<button type="button" id="batchResendBtn"
|
|
class="btn btn-raised btn-sm btn-primary disabled"
|
|
data-toggle="modal"
|
|
ng-click="batchResendDlqMessage(selectedConsumerGroup)">
|
|
<span class="glyphicon glyphicon-send"></span> {{ 'BATCH_RESEND' | translate}}
|
|
</button>
|
|
<button type="button" id="batchExportBtn"
|
|
class="btn btn-raised btn-sm btn-primary disabled"
|
|
data-toggle="modal"
|
|
ng-click="batchExportDlqMessage(selectedConsumerGroup)">
|
|
<span class="glyphicon glyphicon-export"></span> {{ 'BATCH_EXPORT' | translate}}
|
|
</button>
|
|
</form>
|
|
<table class="table table-bordered text-middle">
|
|
<tr>
|
|
<th class="text-center"><input type="checkbox" ng-model='checkedAll' ng-change="selectAll()"/></th>
|
|
<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 style="display: none" id="noMsgTip">
|
|
<td colspan="6" style="text-align: center">{{'NO_MATCH_RESULT' | translate}}</td>
|
|
</tr>
|
|
<tr ng-repeat="item in messageShowList">
|
|
<td class="text-center">
|
|
<input type="checkbox" ng-model='item.checked' ng-change="selectItem()"/>
|
|
</td>
|
|
<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="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
|
|
{{'MESSAGE_DETAIL' | translate}}
|
|
</button>
|
|
<button class="btn btn-raised btn-sm btn-primary" type="button"
|
|
ng-click="resendDlqMessage(item, selectedConsumerGroup)">
|
|
{{'RESEND_MESSAGE' | translate}}
|
|
</button>
|
|
<button class="btn btn-raised btn-sm btn-primary" type="button"
|
|
ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
|
|
{{'EXPORT' | translate}}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<tm-pagination conf="paginationConf"></tm-pagination>
|
|
</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">
|
|
<div class="row">
|
|
<form class="form-inline pull-left">
|
|
<div class="form-group">
|
|
<label>{{'CONSUMER' | translate}}:</label>
|
|
</div>
|
|
<div class="form-group ">
|
|
<div style="width: 300px">
|
|
<select name="mySelectGroup" chosen
|
|
ng-model="selectedConsumerGroup"
|
|
ng-options="item for item in allConsumerGroupList"
|
|
ng-change="onChangeQueryCondition()"
|
|
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="queryDlqMessageByMessageId(messageId, selectedConsumerGroup)">
|
|
<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 queryDlqMessageByMessageIdResult">
|
|
<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="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
|
|
{{'MESSAGE_DETAIL' | translate}}
|
|
</button>
|
|
<button class="btn btn-raised btn-sm btn-primary" type="button"
|
|
ng-click="resendDlqMessage(item, selectedConsumerGroup)">
|
|
{{'RESEND_MESSAGE' | translate}}
|
|
</button>
|
|
<button class="btn btn-raised btn-sm btn-primary" type="button"
|
|
ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
|
|
{{'EXPORT' | translate}}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</md-content>
|
|
</md-tab>
|
|
</md-tabs>
|
|
</md-content>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/ng-template" id="dlqMessageDetailViewDialog">
|
|
<md-content class="md-padding">
|
|
<div>
|
|
<form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Message ID:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.msgId}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Topic:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.topic}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Properties:</label>
|
|
<div class="col-sm-10">
|
|
<textarea class="form-control"
|
|
style="min-height:100px; resize: none"
|
|
readonly>{{ngDialogData.messageView.properties}}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">ReconsumeTimes:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.reconsumeTimes}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Tag:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.properties.TAGS}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Key:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.properties.KEYS}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Storetime:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">StoreHost:</label>
|
|
<div class="col-sm-10">
|
|
<label class="form-control">{{ngDialogData.messageView.storeHost}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-2">Message body:</label>
|
|
<div class="col-sm-10">
|
|
<textarea class="form-control"
|
|
ng-model="ngDialogData.messageView.messageBody"
|
|
style="min-height:100px; resize: none"
|
|
readonly></textarea>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</md-content>
|
|
<div class="modal-footer">
|
|
<div class="ngdialog-buttons">
|
|
<button type="button" class="ngdialog-button ngdialog-button-secondary"
|
|
ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="operationResultDialog">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Result</h4>
|
|
</div>
|
|
<div class="modal-body ">
|
|
<form class="form-horizontal" novalidate>
|
|
{{ngDialogData.result}}
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="ngdialog-buttons">
|
|
<button type="button" class="ngdialog-button ngdialog-button-secondary"
|
|
ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</script> |