From 117da97c7d49d425b50554cdc90e3313aa3d5142 Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Mon, 19 Oct 2026 12:18:00 +0300
Subject: [PATCH] fix(console): the console error is an alert under the navbar
 that closes

A script built the console page's error alert as HTML text, with a broken
class attribute (role="alert" ended up in it), a close button without a
handler on a danger alert that never fades, and placed it above the
viewport-high console container, cutting off its bottom. The template now
renders the message (autoescaped) as a dismissible Bootstrap alert inside
the container, under the navbar; the log_* functions had no other caller.
---
 console/templates/console-base.html | 36 +++++------------------------
 console/tests/test_views.py         |  4 ++++
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/console/templates/console-base.html b/console/templates/console-base.html
index e5d33d0e..583a1793 100644
--- a/console/templates/console-base.html
+++ b/console/templates/console-base.html
@@ -102,41 +102,17 @@
                 </div>
             </div>
         </nav>
+        {% if console_error %}
+        <div class="alert alert-danger alert-dismissible rounded-0 m-0" role="alert">
+            {{ console_error }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans "Close" %}"></button>
+        </div>
+        {% endif %}
         {% block content %}{% endblock %}
     </div>
     <script src="{% static "js/jquery.js" %}"></script>
     <script src="{% static "js/bootstrap.bundle.min.js" %}"></script>
 
-    <script>
-        function log_message(msg, type) {
-            var exist = $('#status').is('div');
-            status_div = $('<div id="status" class="alert alert-' + type + ' role="alert"><button type="button" class="btn-close" aria-label="Close"></button>' + msg + '</div>');
-            if (exist) {
-                $('#status').remove();
-                $('body').prepend(status_div);
-            }
-            else {
-                status_div.hide();
-                $('body').prepend(status_div);
-                status_div.fadeIn(200);
-            }
-            if (type != 'danger') {
-                status_div.delay(3000).fadeOut(200);
-            }
-        }
-
-        function log_error(msg) {
-            log_message(msg, 'danger');
-        }
-
-        function log_info(msg) {
-            log_message(msg, 'info');
-        }
-        {% if console_error %}
-        log_error('{{ console_error|escapejs }}');
-        {% endif %}
-    </script>
-
     {% block foot %}{% endblock %}
 </body>
 
diff --git a/console/tests/test_views.py b/console/tests/test_views.py
index 19e4758f..df406010 100644
--- a/console/tests/test_views.py
+++ b/console/tests/test_views.py
@@ -14,6 +14,7 @@ from django.urls import reverse
 from django.utils.html import escapejs
 from instances.models import Instance
 from libvirt import libvirtError
+from lxml import html
 
 # Dynamically load console/novncd script for testing
 NOVNCD_PATH = str(Path(__file__).resolve().parent.parent / "novncd")
@@ -151,6 +152,9 @@ class ConsoleViewsTestCase(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertTemplateNotUsed(response, "console-xterm.html")
         self.assertIn("Serial console is disabled", str(response.context["console_error"]))
+        # an element of the page, not a script's string
+        alert = html.fromstring(response.content).xpath("//div[@role='alert']")
+        self.assertIn("Serial console is disabled on this server", alert[0].text_content())
 
     @patch("console.views.wvmInstance")
     def test_console_user_assigned_instance_access(self, mock_wvm):