Update Admin Panel to work via iframes

src/meshapi/admin/urls.py

@@ -7,11 +7,13 @@
     AdminPasswordResetDoneView,
     AdminPasswordResetView,
 )
+from meshdb.views import admin_iframe_view
 
 urlpatterns = [
     path("password_reset/", AdminPasswordResetView.as_view(), name="admin_password_reset"),
     path("password_reset/done/", AdminPasswordResetDoneView.as_view(), name="password_reset_done"),
     path("password_reset/<uidb64>/<token>/", AdminPasswordResetConfirmView.as_view(), name="password_reset_confirm"),
     path("password_reset/done/", AdminPasswordResetCompleteView.as_view(), name="password_reset_complete"),
+    path("iframe_wrapper/", admin_iframe_view),
     path("", admin.site.urls),
 ]

src/meshapi/tests/test_admin_panel.py

@@ -0,0 +1,107 @@
+import datetime
+
+from bs4 import BeautifulSoup
+from django.contrib.auth.models import Group, User
+from django.test import Client, TestCase
+from rest_framework.authtoken.models import TokenProxy
+
+from meshapi.models import LOS, AccessPoint, Building, Device, Install, Link, Member, Node, Sector
+from meshapi.tests.sample_data import sample_building, sample_device, sample_install, sample_member, sample_node
+from meshapi_hooks.hooks import CelerySerializerHook
+
+
+class TestAdminPanel(TestCase):
+    c = Client()
+
+    def setUp(self) -> None:
+        sample_install_copy = sample_install.copy()
+        self.building_1 = Building(**sample_building)
+        self.building_1.save()
+        sample_install_copy["building"] = self.building_1
+
+        self.building_2 = Building(**sample_building)
+        self.building_2.save()
+
+        self.los = LOS(
+            from_building=self.building_1,
+            to_building=self.building_2,
+            analysis_date=datetime.date(2024, 1, 1),
+            source=LOS.LOSSource.HUMAN_ANNOTATED,
+        )
+        self.los.save()
+
+        self.member = Member(**sample_member)
+        self.member.save()
+        sample_install_copy["member"] = self.member
+
+        self.install = Install(**sample_install_copy)
+        self.install.save()
+
+        self.node1 = Node(**sample_node)
+        self.node1.save()
+        self.node2 = Node(**sample_node)
+        self.node2.save()
+
+        self.device1 = Device(**sample_device)
+        self.device1.node = self.node1
+        self.device1.save()
+
+        self.device2 = Device(**sample_device)
+        self.device2.node = self.node2
+        self.device2.save()
+
+        self.sector = Sector(
+            radius=1,
+            azimuth=45,
+            width=180,
+            **sample_device,
+        )
+        self.sector.node = self.node2
+        self.sector.save()
+
+        self.access_point = AccessPoint(
+            **sample_device,
+            latitude=0,
+            longitude=0,
+        )
+        self.access_point.node = self.node2
+        self.access_point.save()
+
+        self.link = Link(
+            from_device=self.device1,
+            to_device=self.device2,
+            status=Link.LinkStatus.ACTIVE,
+        )
+        self.link.save()
+
+        self.admin_user = User.objects.create_superuser(
+            username="admin", password="admin_password", email="admin@example.com"
+        )
+        self.c.login(username="admin", password="admin_password")
+
+        self.test_group = Group.objects.create(name="Test group")
+
+        self.test_auth_token = TokenProxy.objects.create(user=self.admin_user)
+
+        self.test_webhook = CelerySerializerHook.objects.create(
+            user=self.admin_user, target="http://example.com", event="building.created", headers=""
+        )
+
+    def test_iframe_loads(self):
+        route = "/admin/iframe_wrapper/"
+        code = 200
+        response = self.c.get(route)
+        self.assertEqual(code, response.status_code, f"Could not view {route} in the admin panel.")
+
+        decoded_panel = response.content.decode()
+        soup = BeautifulSoup(decoded_panel, "html.parser")
+        iframe = soup.find(id="admin_panel_iframe")
+        iframe_src = iframe.attrs["src"]
+        self.assertEqual("/admin/", iframe_src)
+        iframe_response = self.c.get(iframe_src)
+        self.assertEqual(code, iframe_response.status_code, f"Could not view {route} in the admin panel.")
+
+    # TODO (wdn): Add more tests checking if navigating to xyz page works
+    # Unfortunately, because that is a lot of javascript, it's tricky to test.
+    # It may be possible to run selenium integration tests or something to validate
+    # that functionality

src/meshdb/settings.py

@@ -61,6 +61,8 @@
 
 USE_X_FORWARDED_HOST = True
 
+X_FRAME_OPTIONS = "SAMEORIGIN"
+
 SECURE_HSTS_SECONDS = 31536000
 SECURE_HSTS_PRELOAD = False
 SECURE_HSTS_INCLUDE_SUBDOMAINS = False
@@ -167,6 +169,7 @@
 
     CORS_ALLOWED_ORIGINS += [
         "http://127.0.0.1:3000",
+        "http://127.0.0.1:3001",
         "http://localhost:3000",
         "http://127.0.0.1:80",
         "http://localhost:80",

src/meshdb/templates/admin/base.html

@@ -2,6 +2,9 @@
 {% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
 <html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
 <head>
+<script>const PANEL_URL = "/admin/iframe_wrapper/";</script>
+<script src="{% static '/admin/mobile_check.js' %}"></script>
+<script src="{% static 'admin/iframe_check.js' %}"></script>
 <title>{% block title %}{% endblock %}</title>
 <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
 {% block dark-mode-vars %}
@@ -82,40 +85,35 @@
     {% endblock %}
     {% endif %}
 
-    <div id="map-wrapper">
-        <div class="main flex" id="main">
-          {% if not is_popup and is_nav_sidebar_enabled %}
-            {% block nav-sidebar %}
-              {% include "admin/nav_sidebar.html" %}
-            {% endblock %}
+    <div class="main flex" id="main">
+      {% if not is_popup and is_nav_sidebar_enabled %}
+        {% block nav-sidebar %}
+          {% include "admin/nav_sidebar.html" %}
+        {% endblock %}
+      {% endif %}
+      <div id="content-start" class="content" tabindex="-1">
+        {% block messages %}
+          {% if messages %}
+            <ul class="messagelist">{% for message in messages %}
+              <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
+            {% endfor %}</ul>
           {% endif %}
-          <div id="content-start" class="content" tabindex="-1">
-            {% block messages %}
-              {% if messages %}
-                <ul class="messagelist">{% for message in messages %}
-                  <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
-                {% endfor %}</ul>
-              {% endif %}
-            {% endblock messages %}
-            <!-- Content -->
-            <div id="content" class="{% block coltype %}colM{% endblock %}">
-              {% block pretitle %}{% endblock %}
-              {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
-              {% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
-              {% block content %}
-                {% block object-tools %}{% endblock %}
-                {{ content }}
-              {% endblock %}
-              {% block sidebar %}{% endblock %}
-              <br class="clear">
-            </div>
-            <!-- END Content -->
-            {% block footer %}<div id="footer"></div>{% endblock %}
-          </div>
+        {% endblock messages %}
+        <!-- Content -->
+        <div id="content" class="{% block coltype %}colM{% endblock %}">
+          {% block pretitle %}{% endblock %}
+          {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
+          {% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
+          {% block content %}
+            {% block object-tools %}{% endblock %}
+            {{ content }}
+          {% endblock %}
+          {% block sidebar %}{% endblock %}
+          <br class="clear">
         </div>
-        {% block map_sidebar %}
-            {% include "admin/map_sidebar.html" %}
-        {% endblock %}
+        <!-- END Content -->
+        {% block footer %}<div id="footer"></div>{% endblock %}
+      </div>
     </div>
 
 </div>

src/meshdb/templates/admin/base_site.html

@@ -17,9 +17,6 @@ <h1 id="site-name"><a href="{% url 'admin:index' %}"><img src="{% static 'meshwe
 
 {% block userlinks %}
     {{ block.super }}
-    <a href="#" class="hidden" style="margin-left: 5px; vertical-align: middle; border: none;" id="show_map_button">
-        <img src="{% static '/admin/map/img/map.png' %}" height="16px" title="Show Map">
-    </a>
 {% endblock %}
 
 {% block footer %}

src/meshdb/templates/admin/iframed.html

@@ -0,0 +1,84 @@
+{% load static %}
+
+{% load env_extras %}
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+      const MAP_BASE_URL = "{% get_env_var 'ADMIN_MAP_BASE_URL' %}";
+      // FIXME (wdn): This is inherited from the admin panel this document
+      // replaces. Is that desired? Do we need to get rid of that?
+      //const PANEL_URL = "/admin/iframe_wrapper/";
+    </script>
+    <!--We don't want people navigating to this URL, so we're gonna redirect them
+    if they find themselves here-->
+    <script src="{% static 'admin/panel_url_check.js' %}"></script>
+    <script src="{% static '/admin/mobile_check.js' %}"></script>
+    <!--Script that powers this iframed view and communicates between the admin panel
+    and the map-->
+    <script src="{% static '/admin/map.js' %}" defer></script>
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
+    {% block dark-mode-vars %}
+      <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
+      <script src="{% static "admin/js/theme.js" %}" defer></script>
+    {% endblock %}
+    {% if not is_popup and is_nav_sidebar_enabled %}
+      <link rel="stylesheet" href="{% static "admin/css/nav_sidebar.css" %}">
+      <script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>
+    {% endif %}
+    {% block extrastyle %}{% endblock %}
+    <link rel="stylesheet" href="{% static "admin/admin_ext.css" %}">
+    {% if LANGUAGE_BIDI %}<link rel="stylesheet" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
+    {% block extrahead %}{% endblock %}
+    {% block responsive %}
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
+        <link rel="stylesheet" href="{% static "admin/css/responsive.css" %}">
+        {% if LANGUAGE_BIDI %}<link rel="stylesheet" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
+    {% endblock %}
+    {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
+    <link rel="stylesheet" href="{% static '/admin/iframed.css'%}"/> 
+  </head>
+  <body>
+    <div id="page_container">
+      <div id="admin_panel_div" class="frameGrow">
+        <iframe src="/admin/" id="admin_panel_iframe" class="frameGrow"></iframe>
+      </div>
+
+      <div class="floating-button-above">
+        <a href="#" class="button" style="display: inline-block" id="show_map_button">
+          <img src="{% static '/admin/map/img/map.png' %}" height="16px" title="Show Map">
+        </a>
+      </div>
+
+      <div id="map_controls">
+        <!-- This handle is always visible, unless you're resizing, in which case
+        goes big and invisible to block the iframes from stealing focus -->
+        <div class="handle" id="handle">
+          <span class="vert-align-helper"></span>
+          <img class="handlebar" id="handlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
+        </div>
+        <!-- Only shows up during resizes -->
+        <div class="handle hidden" id="substituteHandle">
+          <span class="vert-align-helper"></span>
+          <img class="handlebar" id="substituteHandlebar" src="{% static '/admin/map/img/handlebar.svg' %}" height="60px"/>
+        </div>
+        <div class="floating-button">
+            <a href="#" class="button" style="display: inline-block" id="map_hide_button">
+                <img src="{% static '/admin/map/img/cross.png' %}" height="24px" title="Hide Map">
+            </a>
+        </div>
+        <div class="floating-button-below">
+            <a href="#" class="button" style="display: inline-block" id="map_recenter_button">
+                <img src="{% static '/admin/map/img/recenter.png' %}" height="24px" title="Recenter map">
+            </a>
+        </div>
+      </div>
+
+      <div id="map_panel_div">
+      <iframe src="{% get_env_var 'ADMIN_MAP_BASE_URL' %}" id="map_panel"></iframe>
+      </div>
+    </div>
+  </body>
+</html>

src/meshdb/templates/admin/login.html

@@ -9,5 +9,3 @@ <h1 id="site-name"><a href="{% url 'admin:index' %}"><img src="{% static 'meshwe
 {% endif %}
 {% endblock %}
 
-
-{% block map_sidebar %}{% endblock %}

src/meshdb/views.py

@@ -0,0 +1,8 @@
+from django.contrib.admin.views.decorators import staff_member_required
+from django.http import HttpRequest, HttpResponse
+from django.shortcuts import render
+
+
+@staff_member_required
+def admin_iframe_view(request: HttpRequest) -> HttpResponse:
+    return render(request, "admin/iframed.html")