Skip to content

Commit 74ccaed

Browse files
CrimCrim
authored
[ISSUE-161] Add dedicated apply and reset button to filters (#211)
1 parent 8464702 commit 74ccaed

File tree

6 files changed

+161
-18
lines changed

6 files changed

+161
-18
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ Expose HealthCheck and App Info endpoints without requiring authentication.
88
#### Internal Dependency Updates
99
-[PR-198](https://github.com/SourceLabOrg/kafka-webview/pull/198) Upgrade from SpringBoot 2.1.9 to 2.1.14.
1010

11-
## 2.5.0 (11/18/2019)
11+
## 2.5.0 (11/19/2019)
1212
#### New Features
1313
- [PR-194](https://github.com/SourceLabOrg/kafka-webview/pull/194) Adds a new built-in deserializer for byte[] that decodes the bytes into HEX values.
14+
- [ISSUE-161](https://github.com/SourceLabOrg/kafka-webview/issues/161) Add dedicated 'Apply' and 'Reset' button to Partition and Record Filters.
1415

1516
#### Bug Fixes
1617
- [ISSUE-184](https://github.com/SourceLabOrg/kafka-webview/issues/184) Cluster Kafka Consumer View for multiple topics. When using Cluster Kafka Consumer view for a specific consumer that is connected to multiple topics the WebView shows diagram and information of only of one topic. First pass effort to allow selecting which topic to view metrics for.

‎kafka-webview-ui/src/main/java/org/sourcelab/kafka/webview/ui/controller/stream/StreamController.java

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ public String newConsumer(
137137
final SessionIdentifier sessionIdentifier = SessionIdentifier.newStreamIdentifier(userId, sessionId);
138138

139139
// Override settings
140+
// TODO View gets flushed and changes are persisted.
140141
final ViewCustomizer viewCustomizer = new ViewCustomizer(view, consumeRequest);
141142
viewCustomizer.overrideViewSettings();
142143
final List<FilterDefinition> configuredFilters = viewCustomizer.getFilterDefinitions();

‎kafka-webview-ui/src/main/resources/templates/fragments/consumerSetting/partitionFilter.html

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<body>
66

77
<!-- Partition Filter -->
8-
<div th:fragment="partitionFilter">
8+
<div th:fragment="partitionFilter(showApplyButton)">
99
<hr class="mx-3 my-0">
10-
<div class="callout callout-info m-0 py-3">
10+
<div class="callout callout-info m-0 py-3" id="container-partitions">
1111
<div>
1212
<div
1313
style="cursor: pointer;"
@@ -26,6 +26,14 @@
2626
</thead>
2727
<tbody id="partitionSelectorTable">
2828
</tbody>
29+
<tfoot>
30+
<tr>
31+
<td colspan="2" style="text-align: center;">
32+
<input th:if="${showApplyButton}" type="button" value="Apply" id="partition-apply"/>
33+
<input type="button" value="Reset" id="partition-reset"/>
34+
</td>
35+
</tr>
36+
</tfoot>
2937
</table>
3038
</div>
3139
</div>
@@ -34,9 +42,37 @@
3442

3543
<script type="application/javascript">
3644

45+
// On load register event listeners.
46+
jQuery(document).ready(function() {
47+
/**
48+
* Called when you click 'Reset' button to toggle all partitions on.
49+
*/
50+
jQuery('input#partition-reset').click(function() {
51+
var shouldReload = false;
52+
jQuery('input.partition-toggle').each(function(index, checkboxEl) {
53+
if (!jQuery(checkboxEl).prop("checked")) {
54+
jQuery(checkboxEl).prop("checked", true);
55+
shouldReload = true;
56+
}
57+
});
58+
59+
if (shouldReload) {
60+
PartitionFilter.reload();
61+
}
62+
});
63+
64+
/**
65+
* Called when you click 'Apply' button to reload current position, but
66+
* with partitions applied.
67+
*/
68+
jQuery('input#partition-apply').click(function() {
69+
PartitionFilter.reload();
70+
});
71+
});
72+
3773
var PartitionFilter = {
3874
/**
39-
* Hit API to determine which views are avialable
75+
* Hit API to determine which views are available.
4076
*/
4177
loadPartitionsForView: function(viewId) {
4278
ApiClient.getPartitionsForView(viewId, PartitionFilter.loadUi);
@@ -72,11 +108,47 @@
72108
* @returns {Array}
73109
*/
74110
getToggledPartitions: function() {
111+
PartitionFilter.updateContainerColor();
112+
75113
var enabledPartitions = [];
76114
jQuery('input.partition-toggle:checked').each(function(index, checkboxEl) {
77115
enabledPartitions.push(jQuery(checkboxEl).val());
78116
});
79117
return enabledPartitions;
118+
},
119+
120+
/**
121+
* Updates container color from 'info' when all partitions are applied,
122+
* to 'warning' when one or more partitions are disabled.
123+
*/
124+
updateContainerColor: function() {
125+
var allSelected = true;
126+
jQuery('input.partition-toggle').each(function(index, checkboxEl) {
127+
if (!jQuery(checkboxEl).prop("checked")) {
128+
allSelected = false;
129+
}
130+
});
131+
132+
if (allSelected) {
133+
// Move to info color
134+
jQuery("div#container-partitions").removeClass("callout-warning");
135+
jQuery("div#container-partitions").addClass("callout-info");
136+
} else {
137+
// Switch to warning color
138+
jQuery("div#container-partitions").removeClass("callout-info");
139+
jQuery("div#container-partitions").addClass("callout-warning");
140+
}
141+
},
142+
143+
/**
144+
* Reload the current page of results.
145+
*/
146+
reload: function() {
147+
if (typeof window.executeConsume === "function") {
148+
executeConsume("next");
149+
} else {
150+
console.error("function executeConsume() does not exist!");
151+
}
80152
}
81153
};
82154
</script>

‎kafka-webview-ui/src/main/resources/templates/fragments/consumerSetting/recordFilter.html

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<body>
66

77
<!-- Record Filters -->
8-
<div th:fragment="recordFilter(view)">
8+
<div th:fragment="recordFilter(view, showApplyButton)">
99
<!-- Optional Record Filters -->
1010
<hr class="mx-3 my-0">
11-
<div class="callout callout-info m-0 py-3">
11+
<div class="callout callout-info m-0 py-3" id="container-filters">
1212
<div>
1313
<div
1414
style="cursor: pointer;"
@@ -50,6 +50,14 @@
5050
</tr>
5151
</th:block>
5252
</tbody>
53+
<tfoot>
54+
<tr>
55+
<td colspan="2" style="text-align: center;">
56+
<input th:if="${showApplyButton}" type="button" value="Apply" id="filter-apply"/>
57+
<input type="button" value="Reset" id="filter-reset"/>
58+
</td>
59+
</tr>
60+
</tfoot>
5361
</table>
5462
</div>
5563
</div>
@@ -69,6 +77,31 @@
6977
var checked = jQuery(this).is(':checked');
7078
jQuery('.filter-options' + filterId).toggle(checked);
7179
});
80+
81+
/**
82+
* Called when you click 'Reset' button to toggle all filters off.
83+
*/
84+
jQuery('input#filter-reset').click(function() {
85+
var shouldReload = false;
86+
jQuery('input.filter-toggle:checked').each(function(index, checkboxEl) {
87+
var filterId = jQuery(checkboxEl).val();
88+
jQuery('.filter-options' + filterId).toggle(false);
89+
jQuery(checkboxEl).prop("checked", false);
90+
shouldReload = true;
91+
});
92+
93+
if (shouldReload) {
94+
RecordFilter.reload();
95+
}
96+
});
97+
98+
/**
99+
* Called when you click 'Apply' button to reload current position, but
100+
* with filters applied.
101+
*/
102+
jQuery('input#filter-apply').click(function() {
103+
RecordFilter.reload();
104+
});
72105
});
73106

74107
var RecordFilter = {
@@ -103,6 +136,8 @@
103136
* Used to build request json parameters for filters.
104137
*/
105138
buildFilterParameters: function() {
139+
RecordFilter.updateContainerColor();
140+
106141
// Get the enabled filters
107142
var filterIds = RecordFilter.getToggledFilters();
108143

@@ -115,6 +150,33 @@
115150
recordFilterDefinitions.push(recordFilterDefinition);
116151
});
117152
return recordFilterDefinitions;
153+
},
154+
155+
/**
156+
* Updates container color from 'info' when no filters applied,
157+
* to 'warning' when one or more filters are applied.
158+
*/
159+
updateContainerColor: function() {
160+
if (RecordFilter.getToggledFilters().length === 0) {
161+
// Move to info color
162+
jQuery("div#container-filters").removeClass("callout-warning");
163+
jQuery("div#container-filters").addClass("callout-info");
164+
} else {
165+
// Switch to warning color
166+
jQuery("div#container-filters").removeClass("callout-info");
167+
jQuery("div#container-filters").addClass("callout-warning");
168+
}
169+
},
170+
171+
/**
172+
* Reload the current page of results.
173+
*/
174+
reload: function() {
175+
if (typeof window.executeConsume === "function") {
176+
executeConsume("next");
177+
} else {
178+
console.error("function executeConsume() does not exist!");
179+
}
118180
}
119181
};
120182

‎kafka-webview-ui/src/main/resources/templates/stream/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,9 @@ <h4 class="alert-heading">Stream Disconnected</h4>
217217
// Merge parameters with start position parameters.
218218
jQuery.extend(params, SocketDetails.getStartPositionParams());
219219

220+
// TODO remove.
221+
console.log("Params: " + JSON.stringify(params));
222+
220223
// Send request down websocket.
221224
SocketDetails.stompClient.send(SocketDetails.getSubscribeUrl(), {}, JSON.stringify(params));
222225
},
@@ -441,12 +444,12 @@ <h4 class="alert-heading">Stream Disconnected</h4>
441444

442445
<!-- Partition Filter -->
443446
<div
444-
th:replace="fragments/consumerSetting/partitionFilter :: partitionFilter">
447+
th:replace="fragments/consumerSetting/partitionFilter :: partitionFilter (showApplyButton=false)">
445448
</div>
446449

447450
<!-- Record Filters -->
448451
<div
449-
th:replace="fragments/consumerSetting/recordFilter :: recordFilter (view=${view})">
452+
th:replace="fragments/consumerSetting/recordFilter :: recordFilter (view=${view},showApplyButton=false)">
450453
</div>
451454

452455
</div>

‎kafka-webview-ui/src/main/resources/templates/view/consume.html

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@
7878
var inputs = jQuery(rows).find('input');
7979

8080
if (inputs.length > 0) {
81-
// Hide icon
82-
jQuery(this).find('i').attr('class', '');
81+
// Check text to edit
82+
jQuery(this).val("Edit");
8383

8484
var partitionOffsetMap = {};
8585
jQuery.each(inputs, function() {
@@ -94,8 +94,8 @@
9494
// Call api
9595
ApiClient.setConsumerState(ConsumerInfo.viewId, partitionOffsetMapJson, handleSeekResults);
9696
} else {
97-
// Change Icon to Save
98-
jQuery(this).find('i').attr('class', 'icon-check');
97+
// Change Text to Save
98+
jQuery(this).val("Save");
9999

100100
jQuery.each(rows, function() {
101101
var partitionCell = this.childNodes[0];
@@ -374,7 +374,7 @@ <h4 style="text-align: center;">
374374
<h4 class="alert-heading">No Results Found</h4>
375375
<p>Looks like we couldn't find any results!</p>
376376
<p>
377-
You're current at the <strong><span id="noResultsFoundDirection"></span></strong> of the topic.
377+
You're currently at the <strong><span id="noResultsFoundDirection"></span></strong> of the topic.
378378
</p>
379379
</div>
380380

@@ -495,9 +495,6 @@ <h4 class="alert-heading">No Results Found</h4>
495495
<th>Partition</th>
496496
<th>
497497
Offset
498-
<a href="#" id="toggleStateEditor">
499-
<i class="icon-pencil"></i>
500-
</a>
501498
</th>
502499
</tr>
503500
</thead>
@@ -506,6 +503,13 @@ <h4 class="alert-heading">No Results Found</h4>
506503
<td colspan="2">Loading...</td>
507504
</tr>
508505
</tbody>
506+
<tfoot>
507+
<tr>
508+
<td colspan="2" style="text-align: left;">
509+
<input type="button" value="Edit" id="toggleStateEditor"/>
510+
</td>
511+
</tr>
512+
</tfoot>
509513
</table>
510514
</div>
511515
</div>
@@ -548,12 +552,12 @@ <h4 class="alert-heading">No Results Found</h4>
548552

549553
<!-- Partition Filter -->
550554
<div
551-
th:replace="fragments/consumerSetting/partitionFilter :: partitionFilter">
555+
th:replace="fragments/consumerSetting/partitionFilter :: partitionFilter(showApplyButton=true)">
552556
</div>
553557

554558
<!-- Record Filters -->
555559
<div
556-
th:replace="fragments/consumerSetting/recordFilter :: recordFilter (view=${view})">
560+
th:replace="fragments/consumerSetting/recordFilter :: recordFilter (view=${view},showApplyButton=true)">
557561
</div>
558562
</div>
559563
</div>

0 commit comments

Comments
 (0)