fix(templates): the list pages search their rows as text, with one script

The list pages' search (filter-table.js) read what was typed as a
regular expression: a "(" or "[" stopped it with an error. It also
needed jQuery, while the instance list had its own script for the same
search. Both are now static/js/table_filter.js: plain text in any case,
the instance list's state list and host groups where a page has them,
remembered for a day as before. A group's header row is marked as one
(data-group-header) instead of being any row without a state.

instances/templates/allinstances.html

@@ -94,7 +94,7 @@
     </div>
 {% endblock content %}
 {% block script %}
-    <script src="{% static 'js/instance_filter.js' %}"></script>
+    <script src="{% static 'js/table_filter.js' %}"></script>
     <script src="{% static 'js/find_address.js' %}"></script>
     {% if request.user.is_superuser %}
         <script>

instances/templates/allinstances_index_grouped.html

@@ -19,7 +19,7 @@
         {% for compute in computes %}
             <tbody class="searchable" data-host="{{ compute.name }}">
                 {% if compute.instance_set.count > 0 %}
-                    <tr class="table-secondary fw-bold border-bottom border-dark" data-sort-method="none">
+                    <tr class="table-secondary fw-bold border-bottom border-dark" data-sort-method="none" data-group-header>
                         <td>
                             <span id="collapse_host_instances_{{ compute.id }}" onclick="hide_host_instances('{{ compute.id }}');" class="bi bi-chevron-up" ></span>
                         </td>
@@ -96,7 +96,7 @@
 {% block script %}
 <script>
 // a collapsed host's VM rows are hidden by its table body's class, so the
-// search (instance_filter.js, the hidden attribute) can still hide them too
+// search (table_filter.js, the hidden attribute) can still hide them too
 function hide_all_host_instances() {
     $('tbody.searchable').toggleClass('host-collapsed');
     $('span[id^=collapse_host_instances_]').toggleClass("bi bi-chevron-down ").toggleClass("bi bi-chevron-up");

instances/tests/js/table_filter.test.js

@@ -1,20 +1,26 @@
-// node instance_filter.test.js path/to/static/js/instance_filter.js
+// node table_filter.test.js path/to/static/js/table_filter.js
 const assert = require("assert");
-const {filterInstances} = require(process.argv[2]);
+const {filterTable: filterInstances} = require(process.argv[2]);
 
-// A minimal DOM: table bodies of rows; a VM row holds its state mark.
+// A minimal DOM: table bodies of rows; a VM row holds its state mark, a
+// group's header row is marked as one.
 function vm(text, state) {
     const mark = {dataset: {state}};
-    return {textContent: text, hidden: false, querySelector: (s) => (s === "[data-state]" ? mark : null)};
+    return {textContent: text, hidden: false, hasAttribute: () => false,
+            querySelector: (s) => (s === "[data-state]" ? mark : null)};
 }
 function hostRow(text) {
-    return {textContent: text, hidden: false, querySelector: () => null};
+    return {textContent: text, hidden: false, hasAttribute: (a) => a === "data-group-header", querySelector: () => null};
+}
+function plainRow(text) {
+    return {textContent: text, hidden: false, hasAttribute: () => false, querySelector: () => null};
 }
 function group(rows, host) {
     return {dataset: host ? {host} : {}, querySelectorAll: (s) => (s === "tr" ? rows : [])};
 }
 function page(groups, text, state) {
-    const inputs = {filter: {value: text}, "state-filter": {value: state}};
+    // a list without a state list (state undefined) has no such element
+    const inputs = {filter: {value: text}, "state-filter": state === undefined ? undefined : {value: state}};
     return {
         getElementById: (id) => inputs[id],
         querySelectorAll: (s) => (s === ".searchable" ? groups : []),
@@ -49,3 +55,12 @@ filterInstances(page(groups, "host-a", "Off"));
 assert.deepStrictEqual(visible(a), ["host-a Connected", "db-1 Off"], "the state applies to a host's VMs too");
 filterInstances(page(groups, "Connected", ""));
 assert.deepStrictEqual(visible(a), [], "a host row's other text is not its name");
+
+// any other list: no state list, no groups; its rows are filtered by their text
+const plain = [plainRow("alice Active"), plainRow("bob (vda) Blocked"), plainRow("carol Active")];
+filterInstances(page([group(plain)], "ACTIVE"));
+assert.deepStrictEqual(visible(plain), ["alice Active", "carol Active"], "a plain list is searched");
+filterInstances(page([group(plain)], "(vda"));
+assert.deepStrictEqual(visible(plain), ["bob (vda) Blocked"], "a bracket is text there too");
+filterInstances(page([group(plain)], ""));
+assert.deepStrictEqual(visible(plain), ["alice Active", "bob (vda) Blocked", "carol Active"]);

instances/tests/test_states.py

@@ -120,7 +120,7 @@ class StateTests(TestCase):
 
 
     def test_the_list_offers_each_state_and_marks_each_row_and_host(self):
-        # static/js/instance_filter.js filters by these (test_instance_filter_js)
+        # static/js/table_filter.js filters by these (test_table_filter_js)
         AppSettings.objects.filter(key="VIEW_INSTANCES_LIST_STYLE").update(value="grouped")
         page = html.fromstring(self.get(self.admin, reverse("instances:index")))
         options = page.xpath("//select[@id='state-filter']/option/text()")

instances/tests/test_table_filter_js.py

@@ -1,5 +1,5 @@
-"""The instance list's search box and state list (static/js/instance_filter.js).
-Its behaviour is checked with Node."""
+"""The search box of the list pages, with the instance list's state list
+(static/js/table_filter.js). Its behaviour is checked with Node."""
 
 import shutil
 import subprocess
@@ -11,11 +11,11 @@ from django.conf import settings
 BASE = Path(settings.BASE_DIR)
 
 
-class InstanceFilterTestCase(unittest.TestCase):
+class TableFilterTestCase(unittest.TestCase):
     @unittest.skipUnless(shutil.which("node"), "node is not installed")
-    def test_instance_filter_js(self):
+    def test_table_filter_js(self):
         result = subprocess.run(
-            ["node", str(BASE / "instances/tests/js/instance_filter.test.js"), str(BASE / "static/js/instance_filter.js")],
+            ["node", str(BASE / "instances/tests/js/table_filter.test.js"), str(BASE / "static/js/table_filter.js")],
             capture_output=True,
             text=True,
             timeout=60,