| <!-- |
| ~ 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="Message Key"> |
| <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> |
| </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,item.topic)">Message Trace Detail |
| </button> |
| </td> |
| </tr> |
| </table> |
| </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> |
| </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,item.topic)">Message Trace Detail |
| </button> |
| </td> |
| </tr> |
| </table> |
| </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="ngdialog-buttons"> |
| <button type="button" class="ngdialog-button ngdialog-button-secondary" |
| ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }} |
| </button> |
| </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> |