Handle 400 Bad Request on event updates (#49)

* Upgrade htmx to 1.9.10

* Fix config of htmx extensions

* Add generic 400 error message element

* Add 400 error handler

* Drop using multi-swap extension in modal

As due to some bug multi-swap and response-targets extensions do not work together. Response-targets ext is necessary for error handling and is ignored in components that use multi-swap.

* Display 400 error message in event update modals

src/howitz/__init__.py

@@ -7,12 +7,12 @@
 from flask.logging import default_handler
 from flask_assets import Bundle, Environment
 from flask_login import LoginManager, logout_user
-from werkzeug.exceptions import HTTPException
+from werkzeug.exceptions import HTTPException, BadRequest
 
 from howitz.config.utils import load_config
 from howitz.config.zino1 import make_zino1_config
 from howitz.config.howitz import make_howitz_config
-from howitz.error_handlers import handle_generic_exception, handle_generic_http_exception
+from howitz.error_handlers import handle_generic_exception, handle_generic_http_exception, handle_400
 from howitz.users.db import UserDB
 from howitz.users.commands import user_cli
 from zinolib.controllers.zino1 import Zino1EventManager
@@ -27,6 +27,7 @@ def create_app(test_config=None):
     # register error handlers
     app.register_error_handler(Exception, handle_generic_exception)
     app.register_error_handler(HTTPException, handle_generic_http_exception)
+    app.register_error_handler(BadRequest, handle_400)
 
     # load config
     app = load_config(app, test_config)

src/howitz/endpoints.py

@@ -17,7 +17,8 @@
 
 from datetime import datetime, timezone
 
-from zinolib.controllers.zino1 import Zino1EventManager, RetryError
+from werkzeug.exceptions import BadRequest
+from zinolib.controllers.zino1 import Zino1EventManager, RetryError, EventClosedError
 from zinolib.event_types import Event, AdmState, PortState, BFDState, ReachabilityState
 from zinolib.compat import StrEnum
 from zinolib.ritz import NotConnectedError
@@ -391,8 +392,12 @@ def update_event_status(event_id):
         new_state = request.form['event-state']
         new_history = request.form['event-history']
 
-        if not current_state == new_state:
-            set_state_res = current_app.event_manager.change_admin_state_for_id(event_id, AdmState(new_state))
+        try:
+            if not current_state == new_state:
+                set_state_res = current_app.event_manager.change_admin_state_for_id(event_id, AdmState(new_state))
+        except EventClosedError as closedErr:
+            current_app.logger.exception('EventClosedError %s', closedErr)
+            raise BadRequest(description=closedErr.args[0]) from closedErr
 
         if new_history:
             add_history_res = current_app.event_manager.add_history_entry_for_id(event_id, new_history)
@@ -423,8 +428,12 @@ def bulk_update_events_status():
 
     # Update each selected event with new values
     for event_id in selected_events:
-        if new_state:
-            set_state_res = current_app.event_manager.change_admin_state_for_id(int(event_id), AdmState(new_state))
+        try:
+            if new_state:
+                set_state_res = current_app.event_manager.change_admin_state_for_id(int(event_id), AdmState(new_state))
+        except EventClosedError as closedErr:
+            current_app.logger.exception('EventClosedError %s', closedErr)
+            raise BadRequest(description=closedErr.args[0]) from closedErr
 
         if new_history:
             add_history_res = current_app.event_manager.add_history_entry_for_id(int(event_id), new_history)

src/howitz/error_handlers.py

@@ -41,3 +41,10 @@ def handle_generic_exception(e):
 
     return render_template('/components/popups/alerts/error/error-alert.html',
                            alert_id=alert_random_id, short_err_msg=short_err_msg)
+
+
+def handle_400(e):
+    current_app.logger.exception("400 Bad Request has occurred %s", e)
+
+    return render_template('/responses/400-generic.html',
+                           err_msg=e.description), 400

src/howitz/templates/components/popups/modals/update-event-status-modal.html

@@ -3,6 +3,7 @@
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
+     hx-target-error="body"
 >
     <div
             class="modal-underlay inset-0 bg-gray-500 bg-opacity-50 transition-opacity"
@@ -74,6 +75,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                         hx-swap="innerHTML"
                                         hx-trigger="click"
                                         hx-indicator="#bulk-update-indicator"
+                                        hx-target-400="#generic-400-error"
                                         class="mr-1 inline-flex items-center py-2.5 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                                     Update events
 
@@ -83,6 +85,9 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                    class="flex-inline mt-2 animate-pulse text-white bulk-update-htmx-indicator">
                                     Updating selected events...
                                 </p>
+
+                                <div id="generic-400-error"></div>
+
                             </form>
                         </div>
                     </div>

src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html

@@ -3,6 +3,7 @@
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
+     hx-target-error="body"
 >
     <div
             class="modal-underlay inset-0 bg-gray-500 bg-opacity-50 transition-opacity"
@@ -71,8 +72,10 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                 <button
                                         type="submit"
                                         hx-post="/event/{{ id }}/update_status"
-                                        hx-swap="multi:#event-details-row-{{ id }}:outerHTML,#event-accordion-row-{{ id }}:outerHTML,#update-event-{{ id }}-status-modal:delete show:#ol-event-{{ id }}:bottom"
+                                        hx-target="#event-accordion-row-{{ id }}"
+                                        hx-swap="outerHTML show:#ol-event-{{ id }}:bottom"
                                         hx-indicator="#bulk-update-indicator"
+                                        hx-target-400="#generic-400-error"
                                         class="mr-1 inline-flex items-center py-2.5 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                                     Update event
                                 </button>
@@ -81,6 +84,9 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                    class="flex-inline mt-2 animate-pulse text-white bulk-update-htmx-indicator">
                                     Updating event #{{ id }}...
                                 </p>
+
+                                <div id="generic-400-error"></div>
+
                             </form>
                         </div>
                     </div>

src/howitz/templates/includes/configs.html

@@ -1,3 +1,4 @@
 <!-- HTMX Config -->
-<meta name="htmx-config" content='{"defaultFocusScroll":"true", "useTemplateFragments":"true"}'>
+<meta name="htmx-config"
+      content='{"defaultFocusScroll":"true", "useTemplateFragments":"true", "responseTargetUnsetsError":"false"}'>
 

src/howitz/templates/layouts/base.html

@@ -9,8 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- HTMX -->
-    <script src="https://unpkg.com/[email protected].5"
-            integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
+    <script src="https://unpkg.com/[email protected].10"
+            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
             crossorigin="anonymous"></script>
 
     <!-- Tailwind CSS -->
@@ -24,7 +24,7 @@
 
 </head>
 <body
-        hx-ext="[{% block extensions %}{% endblock %}]"
+        hx-ext="{% block extensions %}{% endblock %}"
         class="h-full"
 >
 {% block content %} {% endblock content %}

src/howitz/templates/responses/400-generic.html

@@ -0,0 +1,5 @@
+<p
+   class="flex-inline text-red-400"
+>
+    Error: {{ err_msg }}
+</p>

src/howitz/templates/responses/update-event-response.html

@@ -1,4 +1,78 @@
-{% include "/components/row/expanded-row.html" %}
+<tr
+        class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+        id="event-accordion-row-{{ id }}"
+        hx-get="/events/{{ id }}/collapse_row"
+        hx-trigger="dblclick"
+        hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+        hx-target-error="body"
+>
 
-<div id="update-event-{{ id }}-status-modal">
+    {% with padding='px-3 py-2' %}
+
+        {% with color=event.color if event.color %}
+            {% if is_selected %}
+                {% include "/components/row/event-checked-box.html" %}
+            {% else %}
+                {% include "/components/row/event-unchecked-box.html" %}
+            {% endif %}
+        {% endwith %}
+
+
+
+        {% with event=event %}
+            {% include "/components/row/data-cells.html" %}
+        {% endwith %}
+
+        {% with id=id, color=event.color %}
+            {% include "/components/row/collapse-btn.html" %}
+        {% endwith %}
+
+    {% endwith %}
+
+</tr>
+
+<tr
+        id="event-details-row-{{ id }}"
+        hx-swap-oob="outerHTML"
+        class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+
+>
+    <td colspan="100">
+
+        <div
+                id="accordion-body-{{ id }}"
+                aria-labelledby="event-accordion-row-{{ id }}"
+                class="p-2 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+
+            <div
+                    class="grid grid-cols-1 content-between"
+            >
+
+                {% with id=id %}
+                    {% include "/components/accordion/event-actions-buttons.html" %}
+                {% endwith %}
+
+                <div
+                        class="flex grow-0 gap-5 justify-evenly"
+                >
+                    <div class="flex flex-col basis-4/12">
+                        {% with event_attr=event_attr %}
+                            {% include "/components/accordion/event-attributes.html" %}
+                        {% endwith %}
+                    </div>
+
+                    <div class="flex flex-col basis-8/12">
+                        {% with id=id, event_msgs=event_msgs %}
+                            {% include "/components/accordion/event-messages-block.html" %}
+                        {% endwith %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </td>
+</tr>
+
+<div id="update-event-{{ id }}-status-modal"
+     hx-swap-oob="delete"
+>
 </div>