From 799a53be094e99b4285d6e5ce947e915b1f19750 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 12 Sep 2022 10:02:29 +0200
Subject: [eventlog] Improve sample data displaying when editing a filter rule

---
 .../eventlog/templates/page-filters-edit-rule.html | 43 +++++++++++++++-------
 1 file changed, 29 insertions(+), 14 deletions(-)

(limited to 'modules-available/eventlog/templates/page-filters-edit-rule.html')

diff --git a/modules-available/eventlog/templates/page-filters-edit-rule.html b/modules-available/eventlog/templates/page-filters-edit-rule.html
index 2c8c9b29..a7886397 100644
--- a/modules-available/eventlog/templates/page-filters-edit-rule.html
+++ b/modules-available/eventlog/templates/page-filters-edit-rule.html
@@ -30,7 +30,7 @@
 		</div>
 	</div>
 	{{#filter}}
-	<div class="form-group row">
+	<div class="form-group row filter-rule-row">
 		<div class="col-md-1 col-sm-3">
 			<label>{{lang_index}}</label>
 			<span class="form-control">{{index}}</span>
@@ -60,12 +60,10 @@
 			<input id="arg-{{index}}" class="form-control op-arg" name="filter[{{index}}][arg]" value="{{arg}}"
 					 data-index="{{index}}">
 		</div>
-		<div class="col-md-5 col-sm-12 small" id="sample-{{index}}" style="word-break:break-all">
+		<div class="col-md-5 col-sm-12 small">
+			<label>{{lang_sampleData}}</label>
+			<div id="sample-{{index}}" style="word-break:break-all"></div>
 		</div>
-		<!--label>
-			{{lang_filterResult}}
-			<input class="form-control" name="filter[{{index}}][result]" value="{{result}}">
-		</label-->
 	</div>
 	{{/filter}}
 	<datalist id="filter-keys">
@@ -123,12 +121,10 @@
 		var $type = $('#i-type');
 		var $list = $('#filter-keys');
 		var $fkInputs = $('.filter-key');
-		// Flag if type changed
-		$type.change(function () {
-			typeChanged = true;
-		});
+		var $filterRows = $('.filter-rule-row');
+
 		// If type changed, fetch sample data, or use cached, and populate autocomplete
-		$fkInputs.focus(function () {
+		var typeFieldChangeUpdate = function () {
 			if (!typeChanged)
 				return;
 			typeChanged = false;
@@ -145,7 +141,12 @@
 				typeSamples[typeVal] = data;
 				setAutocomplete(typeVal);
 			});
-		});
+		};
+
+		// Flag if type changed
+		$type.change(function () {
+			typeChanged = true;
+		}).blur(typeFieldChangeUpdate);
 
 		// Population function
 		function setAutocomplete(type) {
@@ -162,8 +163,9 @@
 				if (k === 'machineuuid') m = true;
 			}
 			if (m) {
-				$list.append($('#machine-filter-keys').clone());
+				//$list.append($('#machine-filter-keys').clone());
 			}
+			$fkInputs.change();
 		}
 
 		// Display sample data
@@ -180,7 +182,20 @@
 			}
 			var index = $this.data('index');
 			$('#sample-' + index).text(wat);
+			var empties = 0;
+			$filterRows.each(function() {
+				var $this = $(this);
+				if ($this.find('.filter-key').val().length === 0) {
+					empties++;
+					if (empties > 2) {
+						$this.hide();
+					} else {
+						$this.show();
+					}
+				}
+			});
 		};
-		$fkInputs.on('input', chFn).change(chFn).change();
+		$fkInputs.on('input', chFn).change(chFn);
+		typeFieldChangeUpdate();
 	});
 </script>
-- 
cgit v1.2.3-55-g7522