Merge pull request #5211 from springfall2008/feat/apps-tab-filter-box-5210

Add a filter box to the Apps tab of the web console

Author: springfall2008

apps/predbat/tests/test_web_apps_edit.py

@@ -14,8 +14,10 @@
 """
 
 import asyncio
+import html
 import json
 import os
+import re
 import shutil
 import tempfile
 
@@ -507,3 +509,146 @@ def run_web_apps_edit_tests(my_predbat):
     if failed:
         print("**** ERROR: {} apps.yaml editor add/delete test(s) failed ****".format(failed))
     return failed
+
+
+def _parent_row_path(path):
+    """Return the path of the row a nested path sits under, or '' when it sits at the top level."""
+    # A dict key may itself end in ']' (giving "parent.weird]", which has no '[' to split on),
+    # so index rather than assume - the helper must report a parent, never raise
+    if path.endswith("]"):
+        bracket = path.rfind("[")
+        if bracket != -1:
+            return path[:bracket]
+    if "." in path:
+        return path.rsplit(".", 1)[0]
+    return ""
+
+
+def _attribute_values(text, pattern):
+    """Return the set of values an attribute pattern matches, as the browser would decode them."""
+    return set(html.unescape(value) for value in re.findall(pattern, text))
+
+
+def _render_apps_page(my_predbat, args=None):
+    """Render the /apps page against the given args, or the nested fixture's, and return its HTML."""
+    # Built the way _reset_fixture() does: the full constructor would alias .args to the live
+    # shared args and build AnnualPage/WebChat before the rebinding below, which rendering
+    # needs none of - and which would leave this test sensitive to whatever initialize() picks up
+    web_interface = WebInterface.__new__(WebInterface)
+    web_interface.base = my_predbat
+    web_interface.log = my_predbat.log
+    web_interface.prefix = my_predbat.prefix
+    if args is None:
+        yaml = YAML()
+        yaml.preserve_quotes = True
+        # Render the fixture's nested structures rather than whatever the live test args hold
+        args = yaml.load(APPS_YAML_FIXTURE)["pred_bat"]
+    web_interface.args = args
+    return asyncio.run(web_interface.html_apps(None)).text
+
+
+def run_web_apps_filter_tests(my_predbat):
+    """Unit tests for the apps.yaml page filter box (issue #5210)."""
+    failed = 0
+    print("**** Running apps.yaml page filter tests ****")
+
+    text = _render_apps_page(my_predbat)
+
+    # -------------------------------------------------------------------------
+    print("Test: the apps page carries a filter box wired to filterApps()")
+    for expected in ('id="appsFilter"', 'class="filter-input"', 'oninput="filterApps()"'):
+        if expected not in text:
+            print("  ERROR: the apps page should carry {} so the long settings list can be filtered".format(expected))
+            failed += 1
+    if "function filterApps(" not in text:
+        print("  ERROR: the apps page should define filterApps()")
+        failed += 1
+    if "document.getElementById('appsFilter').value=''; filterApps();" not in text:
+        print("  ERROR: the filter box should have a Clear button, as the Config page does")
+        failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: the filter box is styled on the apps page, not only on the config page")
+    # .filter-container / .filter-input were defined only in get_html_config_css(), which the
+    # apps page does not load - an unstyled box would be the whole of the bug here
+    for style in (".filter-container {", ".filter-input {"):
+        if style not in text:
+            print("  ERROR: the apps page is missing the {} styling for its filter box".format(style))
+            failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: the filter survives the apps page's own auto-refresh")
+    if "localStorage.setItem('appsFilterValue'" not in text or "localStorage.getItem('appsFilterValue')" not in text:
+        print("  ERROR: the filter value should persist in localStorage, as the apps page refreshes every 5 minutes")
+        failed += 1
+    if "document.addEventListener('DOMContentLoaded', restoreAppsFilterValue)" not in text:
+        print("  ERROR: the saved filter should be re-applied once the page has loaded")
+        failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: the rows the filter selects on are the rows the page renders")
+    if "tr[data-arg-name], tr[data-nested-path]" not in text:
+        print("  ERROR: filterApps() should select rows by the data-arg-name / data-nested-path attributes the page renders")
+        failed += 1
+
+    arg_rows = _attribute_values(text, r'data-arg-name="([^"]+)"')
+    nested_rows = _attribute_values(text, r"data-nested-path='([^']+)'")
+    for expected in ("compare_list", "chat", "forecast_solar", "nested_matrix"):
+        if expected not in arg_rows:
+            print("  ERROR: expected a top-level row for {}, got: {}".format(expected, sorted(arg_rows)))
+            failed += 1
+    # The deeply nested rows are exactly the ones scrolling makes hardest to find
+    for expected in ("chat.providers.openrouter.api_key", "forecast_solar[0].declination", "nested_matrix[0][1]"):
+        if expected not in nested_rows:
+            print("  ERROR: expected a nested row for {}, got: {}".format(expected, sorted(nested_rows)))
+            failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: every nested row sits under a row of its own prefix")
+    # filterApps() leaves the subtree of a matching row alone and only walks back up to re-show
+    # parents, which holds because a nested path always extends the path of the row above it
+    for path in sorted(nested_rows):
+        parent = _parent_row_path(path)
+        if parent and parent not in nested_rows and parent not in arg_rows:
+            print("  ERROR: nested row {} has no row for its parent {} - filtering on a parent name would hide it".format(path, parent))
+            failed += 1
+        if not path.startswith(parent):
+            print("  ERROR: nested row {} does not extend its parent path {}".format(path, parent))
+            failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: a key holding a quote cannot truncate the attributes the filter reads")
+    # data-nested-path is delimited with apostrophes and data-arg-name/data-path with quotes, so
+    # an unescaped key such as "it's" ends its attribute early: the browser then reports a path
+    # that is not the row's, and filtering on a parent name no longer keeps the row visible
+    quoted_args = {"chat": {"providers": {"it's": {"api_key": "sk-quoted-credential"}}}, 'say "hi"': 1}
+    quoted_text = _render_apps_page(my_predbat, quoted_args)
+    quoted_nested = _attribute_values(quoted_text, r"data-nested-path='([^']+)'")
+    quoted_top = _attribute_values(quoted_text, r'data-arg-name="([^"]+)"')
+    quoted_edit_paths = _attribute_values(quoted_text, r'data-path="([^"]+)"')
+    for expected, found, attribute in (
+        ("chat.providers.it's", quoted_nested, "data-nested-path"),
+        ("chat.providers.it's.api_key", quoted_nested, "data-nested-path"),
+        ('say "hi"', quoted_top, "data-arg-name"),
+        ("chat.providers.it's.api_key", quoted_edit_paths, "data-path"),
+    ):
+        if expected not in found:
+            print("  ERROR: {} should carry the whole path {}, got: {}".format(attribute, expected, sorted(found)))
+            failed += 1
+    # The truncated attribute the unescaped form produced, named directly so the test still fails
+    # if the escaping is dropped in favour of something that only looks right after unescaping
+    if "data-nested-path='chat.providers.it'" in quoted_text:
+        print("  ERROR: an apostrophe in a key truncated data-nested-path to its prefix")
+        failed += 1
+
+    # -------------------------------------------------------------------------
+    print("Test: the parent-path helper handles a key that ends in a bracket")
+    # "parent.weird]" ends with ']' but holds no '[' - the helper must still report a parent
+    for path, expected_parent in (("parent.weird]", "parent"), ("nested_matrix[0][1]", "nested_matrix[0]"), ("chat", "")):
+        if _parent_row_path(path) != expected_parent:
+            print("  ERROR: the parent of {} should be '{}', got '{}'".format(path, expected_parent, _parent_row_path(path)))
+            failed += 1
+
+    if failed:
+        print("**** ERROR: {} apps.yaml page filter test(s) failed ****".format(failed))
+    return failed

apps/predbat/unit_test.py

@@ -112,7 +112,7 @@
 from tests.test_hainterface_websocket import run_hainterface_websocket_tests
 from tests.test_history_chunking import run_history_chunking_tests
 from tests.test_web_if import run_test_web_if
-from tests.test_web_apps_edit import run_web_apps_edit_tests
+from tests.test_web_apps_edit import run_web_apps_edit_tests, run_web_apps_filter_tests
 from tests.test_web_chart_currency import test_rates_chart_series_names_use_currency_symbol, test_pv_chart_forecast_history_is_uncalibrated
 from tests.test_web_debug_history_routes import test_web_debug_history_routes
 from tests.test_agent_tools import run_agent_tools_tests
@@ -523,6 +523,7 @@ def main():
         ("manual_select", run_test_manual_select, "Manual select tests", False),
         ("web_if", run_test_web_if, "Web interface tests", False),
         ("web_apps_edit", run_web_apps_edit_tests, "Apps.yaml editor add/delete tests (issue #4714)", False),
+        ("web_apps_filter", run_web_apps_filter_tests, "Apps.yaml page filter box tests (issue #5210)", False),
         ("web_chart_currency", test_rates_chart_series_names_use_currency_symbol, "Rates chart series names follow currency_symbols tests", False),
         ("web_chart_pv_forecast", test_pv_chart_forecast_history_is_uncalibrated, "PV chart plots the uncalibrated forecast history tests", False),
         ("web_debug_history_routes", test_web_debug_history_routes, "Debug-history web routes tests (#4438 review items 4, 6, 21)", False),

apps/predbat/web.py

@@ -50,6 +50,8 @@
     get_apps_css,
     get_html_config_css,
     get_apps_js,
+    get_apps_filter_js,
+    get_filter_css,
     get_components_css,
     get_discovery_css,
     get_entity_modal_css,
@@ -2878,6 +2880,10 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
             text += "<table>"
             for idx, item in enumerate(value):
                 nested_path = f"{list_path}[{idx}]"
+                # An apps.yaml key can hold any character, including the quotes the attributes
+                # below are delimited with - escape once here so a key such as "it's" cannot
+                # truncate data-nested-path/data-path and hand the browser a wrong path
+                nested_path_attr = html_module.escape(nested_path, quote=True)
 
                 # Check if this list item is editable
                 can_edit = self.is_editable_value(item)
@@ -2891,9 +2897,9 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
                     if can_edit:
                         if isinstance(item, bool):
                             toggle_class = "toggle-button active" if item else "toggle-button"
-                            actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(item).lower()}" data-path="{nested_path}"></button>'
+                            actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(item).lower()}" data-path="{nested_path_attr}"></button>'
                         else:
-                            actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path}">Edit</button>'
+                            actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path_attr}">Edit</button>'
 
                         # Store the nested value info for later processing
                         if not hasattr(self, "_nested_values"):
@@ -2906,7 +2912,7 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
                 raw_value = self.resolve_value_raw(arg, item)
 
                 if nested_row_id is not None:
-                    text += f"<tr id='nested_row_{nested_row_id}' data-nested-path='{nested_path}' data-nested-original='{html_module.escape(str(raw_value))}'><td>- </td><td id='nested_value_{nested_row_id}'>{self.render_type(arg, item, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
+                    text += f"<tr id='nested_row_{nested_row_id}' data-nested-path='{nested_path_attr}' data-nested-original='{html_module.escape(str(raw_value))}'><td>- </td><td id='nested_value_{nested_row_id}'>{self.render_type(arg, item, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
                 else:
                     text += "<tr><td>- {}</td></tr>\n".format(self.render_type(arg, item, nested_path, row_counter))
             text += self.render_add_row("addListItem", [list_path, arg], "Add item", row_counter)
@@ -2916,6 +2922,7 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
             text += "<table>"
             for key in value:
                 nested_path = f"{dict_path}.{key}"
+                nested_path_attr = html_module.escape(nested_path, quote=True)
                 nested_value = value[key]
 
                 # Check if this nested value is editable
@@ -2930,9 +2937,9 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
                     if can_edit:
                         if isinstance(nested_value, bool):
                             toggle_class = "toggle-button active" if nested_value else "toggle-button"
-                            actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(nested_value).lower()}" data-path="{nested_path}"></button>'
+                            actions_cell = f'<button class="{toggle_class}" onclick="toggleNestedValue({nested_row_id})" data-value="{str(nested_value).lower()}" data-path="{nested_path_attr}"></button>'
                         else:
-                            actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path}">Edit</button>'
+                            actions_cell = f'<button class="edit-button" onclick="editNestedValue({nested_row_id})" data-path="{nested_path_attr}">Edit</button>'
 
                         # Store the nested value info for later processing
                         if not hasattr(self, "_nested_values"):
@@ -2945,7 +2952,7 @@ def render_type(self, arg, value, parent_path="", row_counter=None):
                 raw_value = self.resolve_value_raw(key, nested_value)
 
                 if nested_row_id is not None:
-                    text += f"<tr id='nested_row_{nested_row_id}' data-nested-path='{nested_path}' data-nested-original='{html_module.escape(str(raw_value))}'><td><b>{key}: </b></td><td id='nested_value_{nested_row_id}'>{self.render_type(key, nested_value, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
+                    text += f"<tr id='nested_row_{nested_row_id}' data-nested-path='{nested_path_attr}' data-nested-original='{html_module.escape(str(raw_value))}'><td><b>{key}: </b></td><td id='nested_value_{nested_row_id}'>{self.render_type(key, nested_value, nested_path, row_counter)}</td><td>{actions_cell}</td></tr>\n"
                 else:
                     text += "<tr><td><b>{}: </b></td><td colspan='2'>{}</td></tr>\n".format(key, self.render_type(key, nested_value, nested_path, row_counter))
             text += self.render_add_row("addDictKey", [dict_path], "Add setting", row_counter)
@@ -3778,13 +3785,17 @@ async def html_apps(self, request):
             self.log(f"Error serializing all_states for web interface: {e}")
             all_states_json = "{}"
 
-        # Add CSS styles for edit functionality
+        # Add CSS styles for edit functionality and for the filter box
         text += get_apps_css()
+        text += get_filter_css()
         text += "<body>\n"
 
         # JavaScript for edit functionality
         text += get_apps_js(all_states_json)
 
+        # JavaScript for the filter box
+        text += get_apps_filter_js()
+
         # Add message container
         text += '<div id="messageContainer" class="message-container"></div>\n'
 
@@ -3797,6 +3808,15 @@ async def html_apps(self, request):
     <button id="saveAllButton" class="save-all-button" onclick="saveAllChanges()" disabled>Save All Changes</button>
     <button id="discardAllButton" class="discard-all-button" onclick="discardAllChanges()" disabled>Discard Changes</button>
 </div>
+"""
+
+        # Filter box, matching the one on the Config page (issue #5210)
+        text += """
+<div class="filter-container">
+    <label for="appsFilter"><strong>Filter settings:</strong></label>
+    <input type="text" id="appsFilter" class="filter-input" placeholder="Type to filter settings..." oninput="filterApps()" />
+    <button type="button" style="margin-left: 10px; padding: 8px 12px;" onclick="document.getElementById('appsFilter').value=''; filterApps();">Clear</button>
+</div>
 """
 
         warning = ""
@@ -3827,14 +3847,17 @@ async def html_apps(self, request):
             value = args[arg]
             raw_value = self.resolve_value_raw(arg, value)
             arg_errors = self.base.arg_errors.get(arg, "")
+            # The filter box and the editor both read the row back through data-arg-name, so an
+            # apps.yaml key holding a quote must not be able to truncate the attribute
+            arg_attr = html_module.escape(str(arg), quote=True)
 
             # Determine if this value can be edited
             # Lists should not be editable at the top level - only their individual items
             can_edit = self.is_editable_value(value) and not arg_errors and not isinstance(value, list)
 
             if arg_errors:
                 text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td bgcolor=#FF7777><span title="{}">&#9888;{}</span></td><td>{}</td><td></td></tr>\n'.format(
-                    row_id, arg, html_module.escape(str(raw_value)), arg_errors, arg, self.render_type(arg, value, "", row_counter)
+                    row_id, arg_attr, html_module.escape(str(raw_value)), arg_errors, arg, self.render_type(arg, value, "", row_counter)
                 )
             else:
                 actions_cell = ""
@@ -3848,7 +3871,7 @@ async def html_apps(self, request):
                         actions_cell = f'<button class="edit-button" onclick="editValue({row_id})">Edit</button>'
 
                 text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td>{}</td><td id="value_{}">{}</td><td>{}</td></tr>\n'.format(
-                    row_id, arg, html_module.escape(str(raw_value)), arg, row_id, self.render_type(arg, value, "", row_counter), actions_cell
+                    row_id, arg_attr, html_module.escape(str(raw_value)), arg, row_id, self.render_type(arg, value, "", row_counter), actions_cell
                 )
             row_id += 1
 
@@ -3857,7 +3880,7 @@ async def html_apps(self, request):
             value = args[arg]
             raw_value = self.resolve_value_raw(arg, value)
             text += '<tr id="row_{}" data-arg-name="{}" data-original-value="{}"><td>{}</td><td><span style="background-color:#FFAAAA">{}</span></td><td></td></tr>\n'.format(
-                row_id, arg, html_module.escape(str(raw_value)), arg, self.render_type(arg, value, "", row_counter)
+                row_id, html_module.escape(str(arg), quote=True), html_module.escape(str(raw_value)), arg, self.render_type(arg, value, "", row_counter)
             )
             row_id += 1