You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by ju...@apache.org on 2019/01/31 09:40:08 UTC
[kylin] branch realtime-streaming updated: KYLIN-3789 Stream
receiver admin page issue fix
This is an automated email from the ASF dual-hosted git repository.
julianpan pushed a commit to branch realtime-streaming
in repository https://gitbox.apache.org/repos/asf/kylin.git
The following commit(s) were added to refs/heads/realtime-streaming by this push:
new f5a6b8d KYLIN-3789 Stream receiver admin page issue fix
f5a6b8d is described below
commit f5a6b8dd2a1d692389fb30f67be0ba45e172e6bb
Author: liapan <li...@ebay.com>
AuthorDate: Thu Jan 31 17:01:50 2019 +0800
KYLIN-3789 Stream receiver admin page issue fix
---
webapp/app/js/services/streaming.js | 13 ++-----------
webapp/app/partials/admin/streaming.html | 18 +++++++++---------
webapp/app/partials/admin/streamingReceiver.html | 8 ++++----
3 files changed, 15 insertions(+), 24 deletions(-)
diff --git a/webapp/app/js/services/streaming.js b/webapp/app/js/services/streaming.js
index 9cb4363..821bbe7 100644
--- a/webapp/app/js/services/streaming.js
+++ b/webapp/app/js/services/streaming.js
@@ -62,18 +62,9 @@ KylinApp.factory('AdminStreamingService', ['$resource', function ($resource, con
clusterState.rs_states.forEach(function(receiverState, rs_ind) {
var assignment = '';
for (var cube in receiverState.assignment) {
- assignment += cube + ': ';
- var assMaxIndex = receiverState.assignment[cube].length -1;
- receiverState.assignment[cube].forEach(function(partition, p_index) {
- assignment += partition.partition_id;
- if (p_index === assMaxIndex) {
- assignment += '<br>';
- } else {
- assignment += ',';
- }
- });
+ assignment += '<br>' + cube;
}
- receiverState.assignmentStr = assignment;
+ receiverState.assignmentStr = assignment.substr(4);
});
return clusterState;
}
diff --git a/webapp/app/partials/admin/streaming.html b/webapp/app/partials/admin/streaming.html
index 3275e53..f4897cc 100644
--- a/webapp/app/partials/admin/streaming.html
+++ b/webapp/app/partials/admin/streaming.html
@@ -41,8 +41,8 @@
<svg id="rs-{{replicaSetState.rs_id}}-re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="100%" height="60"></svg>
<div class="text-center" style="font-size: 9px; cursor: pointer;" tooltip="{{receiverState.info}}">
<a href="/kylin/streaming/receiver/{{receiverState.receiver.host}}_{{receiverState.receiver.port}}" target="_blank">
- <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}">
- <i ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)" class="fa fa-star"></i> {{receiverState.receiver.host}}
+ <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">
+ <i ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)" class="fa fa-star"></i> {{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}
</span>
</a>
</div>
@@ -51,8 +51,8 @@
<svg id="rs-{{replicaSetState.rs_id}}-re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="105%" height="60"></svg>
<div class="text-center" style="font-size: 7px; margin: -5px 0 7px 0; cursor: pointer;" tooltip="{{receiverState.info}}">
<a href="/kylin/streaming/receiver/{{receiverState.receiver.host}}_{{receiverState.receiver.port}}" target="_blank">
- <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}">
- <i class="fa fa-star" ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)"></i> {{receiverState.receiver.host}}
+ <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">
+ <i class="fa fa-star" ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)"></i> {{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}
</span>
</a>
</div>
@@ -73,7 +73,7 @@
<div ng-if="!!availableReceiver.length" class="col-md-1" ng-repeat="(re_ind, receiverState) in availableReceiver">
<svg id="re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="100%" height="60"></svg>
<div class="text-center" style="font-size: 9px;">
- <span class="label" ng-class="{'label-primary': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" ng-bind="receiverState.receiver.host"></span>
+ <span class="label" ng-class="{'label-primary': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">{{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}</span>
</div>
</div>
<div ng-if="!availableReceiver.length" class="col-md-12 text-center">
@@ -105,19 +105,19 @@
</div>
<div class="modal-body">
<div class="row" ng-repeat="receiver in replicaSet.receiver_states">
- <div class="col-sm-4 col-sm-offset-3 text-right">{{receiver.receiver.host}}:{{receiver.receiver.port}}</div>
- <div class="col-sm-5">
+ <div class="col-sm-9 col-sm-offset-1 text-center">{{receiver.receiver.host}}:{{receiver.receiver.port}}</div>
+ <div class="col-sm-2">
<i class="fa fa-minus" style="color: #d2d6de; cursor: pointer;" ng-click="removeReceiver(receiver)"></i>
</div>
</div>
<div class="row">
- <div class="col-sm-4 col-sm-offset-3 text-right">
+ <div class="col-sm-9 col-sm-offset-1 text-center">
<select class="form-control" ng-model="node.selected">
<option value="">Please select Receiver</option>
<option value="{{node.receiver.host}}_{{node.receiver.port}}" ng-repeat="node in availableNodes">{{node.receiver.host}}:{{node.receiver.port}}</option>
</select>
</div>
- <div class="col-sm-5">
+ <div class="col-sm-2">
<i class="fa fa-plus" style="color: #d2d6de; cursor: pointer;" ng-click="addNodeToReplicaSet()"></i>
</div>
</div>
diff --git a/webapp/app/partials/admin/streamingReceiver.html b/webapp/app/partials/admin/streamingReceiver.html
index 20bda08..8a35238 100644
--- a/webapp/app/partials/admin/streamingReceiver.html
+++ b/webapp/app/partials/admin/streamingReceiver.html
@@ -27,7 +27,7 @@
<div class="col-sm-4" ng-repeat="(cubeName, assignment) in receiverStats.assignments">
<div class="box box-solid box-primary">
<div class="box-header with-border" style="padding:5px">
- <h3 class="box-title">{{cubeName}}</h3>
+ <h3 class="box-title">{{cubeName | limitTo: 20}}{{cubeName > 20 ? '...' : ''}}</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" style="padding: 3px 5px;" ng-click="moreDetails(receiverStats.cube_stats[cubeName], cubeName)">
<i class="fa fa-info-circle"></i>
@@ -53,7 +53,7 @@
Assignment:
</div>
<div class="col-sm-8">
- <span class="label label-primary" style="margin-right: 5px;" ng-repeat="partitionBaseInfo in assignment">{{partitionBaseInfo.partition_id}}</span>
+ <span class="label label-primary" style="margin-right: 5px; display: inline-block;" ng-repeat="partitionBaseInfo in assignment">{{partitionBaseInfo.partition_id}}</span>
</div>
</div>
</div>
@@ -63,7 +63,7 @@
Partition:
</div>
<div class="col-sm-8">
- <a ng-repeat="(partitionId, partitionInfo) in consumerStats.partition_consume_stats" href="javascript:void(0);" kylinpopover placement="bottom" title="Partition Info" trigger="focus" content="Partition Id: {{partitionId}}</br>Offset Info: {{consumerStats[partitionId]}}</br>1 Minute Rate: {{partitionInfo.one_min_rate | number:0}} msg/s</br>5 Minute Rate: {{partitionInfo.five_min_rate | number:0}} msg/s</br>15 Minute Rate: {{partitionInfo.fifteen_min_rate | number:0}} msg/s [...]
+ <a ng-repeat="(partitionId, partitionInfo) in consumerStats.partition_consume_stats" href="javascript:void(0);" kylinpopover placement="left" title="Partition Info" trigger="focus" content="Partition Id: {{partitionId}}</br>Offset Info: {{consumerStats[partitionId]}}</br>1 Minute Rate: {{partitionInfo.one_min_rate | number:0}} msg/s</br>5 Minute Rate: {{partitionInfo.five_min_rate | number:0}} msg/s</br>15 Minute Rate: {{partitionInfo.fifteen_min_rate | number:0}} msg/s</ [...]
</div>
</div>
</div>
@@ -73,7 +73,7 @@
Segment:
</div>
<div class="col-sm-8">
- <a href="javascript:void(0);" ng-repeat="(segmentName, segmentInfo) in segmentStats" kylinpopover placement="bottom" class="segment" title="Segment Info" trigger="focus" content="segment name: {{segmentName}}</br>segment state: {{segmentInfo.segment_state}}</br>fragment number: {{segmentInfo.store_stats.num_fragments}}</br>row number in memory: {{segmentInfo.store_stats.num_rows_in_mem}}</br>last event time: {{segmentInfo.store_stats.latest_event_time | reverseToGMT0}}</b [...]
+ <a href="javascript:void(0);" ng-repeat="(segmentName, segmentInfo) in segmentStats" kylinpopover placement="top" class="segment" title="Segment Info" trigger="focus" content="segment name: {{segmentName}}</br>segment state: {{segmentInfo.segment_state}}</br>fragment number: {{segmentInfo.store_stats.num_fragments}}</br>row number in memory: {{segmentInfo.store_stats.num_rows_in_mem}}</br>last event time: {{segmentInfo.store_stats.latest_event_time | reverseToGMT0}}</br>l [...]
</div>
</div>
</div>