Skip to content

Commit 308deff

Browse files
AntwnisAntwnis
committed
improve connector view
1 parent 442a69c commit 308deff

File tree

2 files changed

+25
-25
lines changed

2 files changed

+25
-25
lines changed

‎src/kafka-connect/view/connector-view.html‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,28 +62,26 @@ <h4>{{connectorDetails.isSource ? 'SOURCE : ' : 'SINK : '}} {{connectorDetails.n
6262
<md-card-content style="padding-bottom: 0px;" >
6363
<div layout="row">
6464
<h4 style="margin-top: 0px;width:70px"><i class="grey" aria-hidden="true"></i> TASKS</h4>
65-
<div layout="column">
6665
<p ng-show="showTaskSpinner"> Reloading configuration wont take more than 2 minutes. Please wait... </p>
67-
<div style="float:left;" ng-hide="showTaskSpinner">
68-
<div ng-repeat="task in connectorDetails.tasks" ng-click="showTaskDetails(task)"
69-
style="margin-bottom:5px;">
70-
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline; padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
71-
ng-show="task.state == 'PAUSED'" class="fa fa-pause-circle grey" aria-hidden="true" aria-label="Running"></i>
72-
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
73-
ng-show="task.state == 'RUNNING'" class="fa fa-cog green" aria-hidden="true" aria-label="Paused"></i>
74-
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
75-
ng-show="task.state == 'FAILED'" class="fa fa-exclamation-circle red" aria-hidden="true" aria-label="Failed"></i>
76-
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
77-
ng-show="task.state == 'UNASSIGNED'" class="fa fa-ban" aria-hidden="true" aria-label="Unassigned"></i>
78-
<div style="float:left;font-size: 0.83em;border: 1px solid {{ task.id == selectedTask.taskStatus.id ? 'purple' : '#cccccc' }};; ;padding-left: 6px;padding-right: 6px;padding-top: 3px;padding-bottom: 3px;background: {{ task.id == selectedTask.taskStatus.id ? 'purple;color:white' : '' }}">
79-
{{task.id}}
66+
<div layout="column" ng-repeat="task in connectorDetails.tasks" ng-hide="showTaskSpinner" style="padding-right:10px; float:left;">
67+
<div ng-click="showTaskDetails(task)"
68+
style="margin-bottom:5px;">
69+
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline; padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
70+
ng-show="task.state == 'PAUSED'" class="fa fa-pause-circle grey" aria-hidden="true" aria-label="Running"></i>
71+
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
72+
ng-show="task.state == 'RUNNING'" class="fa fa-cog green" aria-hidden="true" aria-label="Paused"></i>
73+
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
74+
ng-show="task.state == 'FAILED'" class="fa fa-exclamation-circle red" aria-hidden="true" aria-label="Failed"></i>
75+
<i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
76+
ng-show="task.state == 'UNASSIGNED'" class="fa fa-ban" aria-hidden="true" aria-label="Unassigned"></i>
77+
<div style="float:left;font-size: 0.83em;border: 1px solid {{ task.id == selectedTask.taskStatus.id ? 'purple' : '#cccccc' }};; ;padding-left: 6px;padding-right: 6px;padding-top: 3px;padding-bottom: 3px;background: {{ task.id == selectedTask.taskStatus.id ? 'purple;color:white' : '' }}">
78+
{{task.id}}
79+
</div>
80+
<div style="float:left;border-top-right-radius: 0.25em;border-bottom-right-radius: 0.25em;font-size: 0.83em;border: 1px solid #cccccc; border-left:none;padding-left: 6px;padding-right: 10px;padding-top: 3px;padding-bottom: 2px;">
81+
<b>[{{task.worker_id}}] </b>
82+
</div>
8083
</div>
81-
<div style="float:left;border-top-right-radius: 0.25em;border-bottom-right-radius: 0.25em;font-size: 0.83em;border: 1px solid #cccccc; border-left:none;padding-left: 6px;padding-right: 10px;padding-top: 3px;padding-bottom: 2px;">
82-
<b>[{{task.worker_id}}] </b>
83-
</div>
84-
</div>
8584
</div>
86-
</div>
8785
</div>
8886
<div ng-if="selectedTask" style="font-size:11px;padding-left: 10px;border: 1px solid #ccc;margin-top: -5px;margin-left: 70px;margin-bottom: 10px;width:70%">
8987
<md-button class="md-mini md-primary" ng-click="invalidateSelectedTask()" style="color:black;float:right;margin:0;">close</md-button>
@@ -108,15 +106,14 @@ <h5 ng-if="selectedTask.taskStatus.trace">TRACE:</h5>
108106
<!--TOPICS-->
109107
<div layout="row">
110108
<h4 style="margin-top: 0px;width:70px"><i class="grey" aria-hidden="true"></i> TOPICS</h4>
111-
<!--fa fa-bullhorn-->
112-
<div layout="column">
113-
<h5 ng-show="connectorDetails.topics != undefined && connectorDetails.topics.length == 0" style="padding:0; margin:0px;">
114-
No related topics found for this connector.
115-
</h5>
109+
<h5 ng-show="connectorDetails.topics != undefined && connectorDetails.topics.length == 0" style="padding:0; margin:0px;">
110+
No related topics found for this connector.
111+
</h5>
112+
<div ng-repeat="topic in connectorDetails.topics" layout="column" style="padding-right:10px">
116113
<h5 ng-hide="connectorDetails.topics != undefined && connectorDetails.topics.length == 0" style="padding:0; margin:0px;">
117114
<!--{{ connectorDetails.topics }}-->
118115
<div style="float:left;">
119-
<div ng-repeat="topic in connectorDetails.topics" >
116+
<div>
120117
<img src="src/assets/icons/kafka.png" class="label-img" style="float:left;background-color: #ccc;width: 15px;height: 11px;display: inline;padding: 5px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;">
121118
<div style="float:left;border-top-right-radius: 0.25em;border-bottom-right-radius: 0.25em;border: 1px solid #cccccc; padding-left: 6px;padding-right: 10px;padding-top: 2px;padding-bottom: 3px;">
122119
{{topic}}
@@ -125,6 +122,7 @@ <h5 ng-hide="connectorDetails.topics != undefined && connectorDetails.topics.len
125122
</div>
126123

127124
</h5>
125+
<!--
128126
<md-chips style="float:left;">
129127
<md-chip ng-if="kafkaTopicsUIEnabled" ng-repeat="topic in connectorDetails.topics">
130128
<a style="text-decoration:none;" ng-href="{{kafkaTopicsUI}}/#/topic/n/{{topic}}/"
@@ -139,6 +137,7 @@ <h5 ng-hide="connectorDetails.topics != undefined && connectorDetails.topics.len
139137
{{topic}}
140138
</md-chip>
141139
</md-chips>
140+
-->
142141
</div>
143142
</div>
144143

‎src/kafka-connect/view/view.controller.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ angularAPP.controller('ConnectorDetailCtrl', function ($rootScope, $scope, $rout
3030
} else {
3131
$scope.selectedTask = getSelectedTask($scope.connectorDetails.detailedTasks, task);
3232
}
33+
console.log(getSelectedTask($scope.connectorDetails.detailedTasks, task));
3334
};
3435

3536
$scope.invalidateSelectedTask = function() {

0 commit comments

Comments
 (0)