mirror of
https://github.com/apache/rocketmq-dashboard.git
synced 2025-09-12 13:39:10 +08:00
349 lines
21 KiB
HTML
349 lines
21 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-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
|
|
ng-model="selectedTraceTopic"
|
|
ng-options="item for item in allTraceTopicList"
|
|
required>
|
|
<option value=""></option>
|
|
</select>
|
|
</div>
|
|
<div style="display: inline-block; color: #BDBDBD">(if no select, it will use RMQ_SYS_TRACE_TOPIC)</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div ng-cloak="" class="tabsdemoDynamicHeight">
|
|
<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">
|
|
<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>
|
|
|
|
<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">
|
|
<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>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>
|
|
</md-content>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/ng-template" id="messageTraceDetailViewDialog">
|
|
<md-content class="md-padding">
|
|
<div class="row">
|
|
<div id="messageTrace" class="container">
|
|
<a>
|
|
<h3 data-toggle="collapse" data-target="#messageTraceGraph">
|
|
Message Trace Graph
|
|
</h3>
|
|
</a>
|
|
<div id="messageTraceGraph" class="collapse in" style="height: 500px; width: 1024px"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="producerSendMessage" class="container">
|
|
<a>
|
|
<h3 data-toggle="collapse" data-target="#sendMessageTrace">
|
|
Send Message Trace
|
|
</h3>
|
|
</a>
|
|
<div id="sendMessageTrace" class="collapse in">
|
|
<div ng-if="ngDialogData.producerNode == null">
|
|
No Producer Trace Data
|
|
</div>
|
|
<div id="producerTrace" ng-if="ngDialogData.producerNode != null">
|
|
<h4>Send Message Info : ( Message Id <b>{{ngDialogData.producerNode.msgId}}</b> )</h4>
|
|
<div class="panel panel-default">
|
|
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-3">
|
|
<label for="topic">Topic</label>
|
|
<input type="text" class="form-control" id="topic" value="{{ngDialogData.producerNode.topic}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="producerGroup">ProducerGroup</label>
|
|
<input type="text" class="form-control" id="producerGroup" value="{{ngDialogData.producerNode.groupName}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="keys">Message Key</label>
|
|
<input type="text" class="form-control" id="keys" value="{{ngDialogData.producerNode.keys}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="tags">Tag</label>
|
|
<input type="text" class="form-control" id="tags" value="{{ngDialogData.producerNode.tags}}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-3">
|
|
<label for="beginTimestamp">BeginTimestamp</label>
|
|
<input type="text" class="form-control" id="beginTimestamp"
|
|
value="{{ngDialogData.producerNode.traceNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="endTimestamp">EndTimestamp</label>
|
|
<input type="text" class="form-control" id="endTimestamp"
|
|
value="{{ngDialogData.producerNode.traceNode.endTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="costTime">CostTime</label>
|
|
<input type="text" class="form-control" id="costTime"
|
|
value="{{ngDialogData.producerNode.traceNode.costTime === 0? '<1':ngDialogData.producerNode.traceNode.costTime}}ms"
|
|
readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="msgType">MsgType</label>
|
|
<input type="text" class="form-control" id="msgType" value="{{ngDialogData.producerNode.traceNode.msgType}}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-3">
|
|
<label for="clientHost">ClientHost</label>
|
|
<input type="text" class="form-control" id="clientHost"
|
|
value="{{ngDialogData.producerNode.traceNode.clientHost}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="storeHost">StoreHost</label>
|
|
<input type="text" class="form-control" id="storeHost"
|
|
value="{{ngDialogData.producerNode.traceNode.storeHost}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="retryTimes">RetryTimes</label>
|
|
<input type="text" class="form-control" id="retryTimes" value="{{ngDialogData.producerNode.traceNode.retryTimes}}" readonly>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="offSetMsgId">OffSetMsgId</label>
|
|
<input type="text" class="form-control" id="offSetMsgId" value="{{ngDialogData.producerNode.offSetMsgId}}" readonly>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="producerTransaction"
|
|
ng-show="ngDialogData.producerNode.transactionNodeList.length > 0">
|
|
<h4>Check Transaction Info : </h4>
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th class="text-center">Timestamp</th>
|
|
<th class="text-center">TransactionState</th>
|
|
<th class="text-center">FromTransactionCheck</th>
|
|
<th class="text-center">ClientHost</th>
|
|
<th class="text-center">StoreHost</th>
|
|
</tr>
|
|
<tr ng-repeat="transactionNode in ngDialogData.producerNode.transactionNodeList">
|
|
<td class="text-center">
|
|
{{transactionNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}
|
|
</td>
|
|
<td class="text-center">{{transactionNode.transactionState}}</td>
|
|
<td class="text-center">{{transactionNode.fromTransactionCheck}}</td>
|
|
<td class="text-center">{{transactionNode.clientHost}}</td>
|
|
<td class="text-center">{{transactionNode.storeHost}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="subscriptionConsumeMessage" class="container">
|
|
<a>
|
|
<h3 data-toggle="collapse" data-target="#consumeMessageTrace">
|
|
Consume Message Trace
|
|
</h3>
|
|
</a>
|
|
<div id="consumeMessageTrace" class="collapse in">
|
|
<div id="consumerTrace" ng-show="ngDialogData.subscriptionNodeList.length > 0">
|
|
<div ng-repeat="subscriptionNode in ngDialogData.subscriptionNodeList">
|
|
<div class="container">
|
|
<a>
|
|
<h3 data-toggle="collapse"
|
|
data-target="#subscriptionNode{{subscriptionNode.subscriptionGroup}}">
|
|
SubscriptionGroup : {{subscriptionNode.subscriptionGroup}}
|
|
</h3>
|
|
</a>
|
|
<div id="subscriptionNode{{subscriptionNode.subscriptionGroup}}" class="collapse in">
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th class="text-center">BeginTimestamp</th>
|
|
<th class="text-center">EndTimestamp</th>
|
|
<th class="text-center">CostTime</th>
|
|
<th class="text-center">Status</th>
|
|
<th class="text-center">RetryTimes</th>
|
|
<th class="text-center">ClientHost</th>
|
|
<th class="text-center">StoreHost</th>
|
|
</tr>
|
|
<tr ng-repeat="consumeNode in subscriptionNode.consumeNodeList">
|
|
<td class="text-center">
|
|
{{consumeNode.beginTimestamp < 0 ? 'N/A' :
|
|
(consumeNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss')}}
|
|
</td>
|
|
<td class="text-center">
|
|
{{consumeNode.endTimestamp < 0 ? 'N/A' :
|
|
(consumeNode.endTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss')}}
|
|
</td>
|
|
<td class="text-center">{{consumeNode.costTime < 0 ? 'N/A' :
|
|
((consumeNode.costTime === 0 ? '<1' : consumeNode.costTime) + 'ms')}}
|
|
</td>
|
|
<td class="text-center">{{consumeNode.status}}</td>
|
|
<td class="text-center">
|
|
{{consumeNode.retryTimes < 0 ? 'N/A' : consumeNode.retryTimes}}
|
|
</td>
|
|
<td class="text-center">{{consumeNode.clientHost}}</td>
|
|
<td class="text-center">{{consumeNode.storeHost}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-show="ngDialogData.subscriptionNodeList.length == 0">
|
|
No Consumer Trace Data
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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> |