[chores] Misc improvements to geo & indoor map features

- Refined gifs in docs
- Improved documentation structure
- Fixed indoor-coordinates API path and reduced sleep in tests.
- Increased test coverage for map page admin
- Removed calls to sleep() in browser tests

Co-authored-by: Federico Capoano <f.capoano@openwisp.io>

Author: nemesifier

docs/user/geo-indoor-maps.rst

@@ -1,66 +1,92 @@
-Geographic and Indoor Maps
-==========================
+Geographic & Indoor Maps
+========================
 
 .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/intro.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/intro.gif
     :alt: Intro
 
 OpenWISP provides a unified web interface to monitor network status across
 all scales: start with a global geographic overview, drill down into
 specific buildings via indoor maps, and switch between floors to track
 devices in real time.
 
-- **Indoor Map View with Floor Navigation:** The dashboard map includes an
-  indoor view with floor switching and fullscreen mode.
+.. contents:: **Table of contents**:
+    :depth: 1
+    :local:
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/indoor-map-view.gif
-      :alt: Indoor map view
+Indoor Map View with Floor Navigation
+-------------------------------------
 
-- **Location View on Dedicated Map Page from Device Details Page:** The
-  device detail page provides navigation to a full-page geographic map for
-  the associated location.
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/indoor-map-view.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/indoor-map-view.gif
+    :alt: Indoor map view
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-general-map-button.gif
-      :alt: Location View from Device Details Page
+The dashboard map includes an indoor view with floor switching and
+full-screen mode.
 
-- **Indoor Device View on Dedicated Map Page from Device Details Page:**
-  The device detail page provides navigation to a full-page indoor map
-  showing the device position.
+Shareable Geographic Map URLs
+-----------------------------
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-indoor-map-button.gif
-      :alt: Indoor Device View from Device Details Page
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-map.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-map.gif
+    :alt: Shareable Geographic Map URLs
 
-- **Shareable Geographic Map URLs:** Interactions with location or device
-  nodes on the geographic map update the URL.
+Interactions with location or device nodes on the geographic map update
+the URL, which can be bookmarked or shared.
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-map.gif
-      :alt: Shareable Geographic Map URLs
+Shareable Indoor Map URLs
+-------------------------
 
-- **Shareable Indoor Map URLs:** Interactions with indoor device nodes
-  update the URL.
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-indoor-map.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-indoor-map.gif
+    :alt: Shareable Indoor Map URLs
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/bookmark-url-indoor-map.gif
-      :alt: Shareable Indoor Map URLs
+Interactions with indoor device nodes update the URL, which can be
+bookmarked or shared.
 
-- **Real-Time Device Position Updates:** Device positions on the map are
-  updated when new location data is received.
+Jump from Device Detail to General Map
+--------------------------------------
 
-  .. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/moving-devices.gif
-      :alt: Real-Time Device Position Updates
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-general-map-button.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-general-map-button.gif
+    :alt: Location View from Device Details Page
 
-- **WebSocket-Based Real-Time Location Updates:** Real-time map updates
-  are delivered using WebSocket connections, allowing the frontend to
-  receive live location data without polling. The common location
-  broadcast channel is available at ``/ws/loci/location/`` and is used to
-  push device location updates to geographic map views as soon as new data
-  is received.
+Easily jump from the device detail page to the full geographic map, where
+the current device is already in focus and nearby devices are visible.
 
-  The location broadcast channel requires authentication. Access is
-  controlled based on organization membership:
+Jump from Device Detail to Full Indoor View
+-------------------------------------------
 
-  - **Superusers:** Can receive location updates for all organizations.
-  - **Regular Users:** Can only receive location updates for organizations
-    they manage.
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-indoor-map-button.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/view-on-indoor-map-button.gif
+    :alt: Indoor Device View from Device Details Page
 
-  This ensures that location data is properly scoped and users can only
-  receive real-time updates for locations within their managed
-  organizations.
+Easily jump from the device detail page to the full indoor map, where the
+current device is already in focus and nearby devices are visible.
+
+Real-Time Device Position Updates
+---------------------------------
+
+.. image:: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/moving-devices.gif
+    :target: https://raw.githubusercontent.com/openwisp/openwisp-monitoring/docs/docs/1.3/moving-devices.gif
+    :alt: Real-Time Device Position Updates
+
+Device positions on the map are updated when new location data is
+received.
+
+Real-time map updates are delivered using WebSocket connections, allowing
+the frontend to receive live location data without polling. The common
+location broadcast channel is available at ``/ws/loci/location/`` and is
+used to push device location updates to geographic map views as soon as
+new data is received.
+
+The location broadcast channel requires authentication. Access is
+controlled based on organization membership:
+
+- **Superusers:** Can receive location updates for all organizations.
+- **Regular Users:** Can only receive location updates for organizations
+  they manage.
+
+This ensures that location data is properly scoped and users can only
+receive real-time updates for locations within their managed
+organizations.

docs/user/rest-api.rst

@@ -255,22 +255,22 @@ Here's a few examples:
 List Device Indoor Coordinates in a Location
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Returns a list of indoor coordinates of network devices deployed in the
-specified location, along with device details and available floors.
-
 .. code-block:: text
 
     GET /api/v1/monitoring/location/{pk}/indoor-coordinates/
 
+Returns a list of indoor coordinates of network devices deployed in the
+specified location, along with device details and available floors.
+
 **Available filters**
 
-- ``floor`` (floor number of the floorplan)
+- ``floor`` (floor number of the floor plan)
 
 Here's a few examples:
 
 .. code-block:: text
 
-    GET /api/v1/monitoring/location/5/indoor-coordinates/?floor=2
+    GET /api/v1/monitoring/location/{pk}/indoor-coordinates/?floor=2
 
 List WiFi Session
 ~~~~~~~~~~~~~~~~~

openwisp_monitoring/device/admin.py

@@ -1,4 +1,3 @@
-import json
 import uuid
 from urllib.parse import urljoin
 
@@ -9,7 +8,7 @@
 from django.contrib.contenttypes.models import ContentType
 from django.forms import ModelForm
 from django.templatetags.static import static
-from django.urls import resolve, reverse, reverse_lazy
+from django.urls import resolve, reverse
 from django.utils import timezone
 from django.utils.formats import localize
 from django.utils.html import format_html
@@ -598,6 +597,7 @@ class Media:
                 "leaflet/leaflet.css",
                 "monitoring/css/leaflet.fullscreen.css",
                 "monitoring/css/netjsongraph.css",
+                "monitoring/css/monitoring.css",
             ]
         }
 
@@ -606,32 +606,10 @@ def has_module_permission(self, request):
         return False
 
     def changelist_view(self, request, extra_context=None):
-        loc_geojson_url = reverse_lazy(
-            "monitoring:api_location_geojson", urlconf=MONITORING_API_URLCONF
-        )
-        device_list_url = reverse_lazy(
-            "monitoring:api_location_device_list",
-            urlconf=MONITORING_API_URLCONF,
-            args=["000"],
-        )
-        indoor_coordinates_list_url = reverse_lazy(
-            "monitoring:api_indoor_coordinates_list",
-            urlconf=MONITORING_API_URLCONF,
-            args=["000"],
-        )
-        if MONITORING_API_BASEURL:
-            loc_geojson_url = urljoin(MONITORING_API_BASEURL, str(loc_geojson_url))
-            device_list_url = urljoin(MONITORING_API_BASEURL, str(device_list_url))
-            indoor_coordinates_list_url = urljoin(
-                MONITORING_API_BASEURL, str(indoor_coordinates_list_url)
-            )
         extra_context = extra_context or {}
         extra_context.update(
             {
-                "monitoring_device_list_url": device_list_url,
-                "monitoring_location_geojson_url": loc_geojson_url,
-                "monitoring_indoor_coordinates_list": indoor_coordinates_list_url,
-                "monitoring_labels": json.dumps(app_settings.HEALTH_STATUS_LABELS),
+                "monitoring_labels": app_settings.HEALTH_STATUS_LABELS,
                 # By default shows 'Select Map to change' heading making it empty to hide it
                 "title": "",
             }

openwisp_monitoring/device/api/serializers.py

@@ -12,8 +12,6 @@
 Device = load_model("config", "Device")
 DeviceMonitoring = load_model("device_monitoring", "DeviceMonitoring")
 DeviceData = load_model("device_monitoring", "DeviceData")
-Device = load_model("config", "Device")
-DeviceLocation = load_model("geo", "DeviceLocation")
 WifiSession = load_model("device_monitoring", "WifiSession")
 WifiClient = load_model("device_monitoring", "WifiClient")
 

openwisp_monitoring/device/api/urls.py

@@ -40,8 +40,8 @@
         views.wifi_session_detail,
         name="api_wifi_session_detail",
     ),
-    path(
-        "api/v1/monitoring/location/<str:pk>/indoor-coordinates/",
+    re_path(
+        r"^api/v1/monitoring/location/(?P<pk>[^/]+)/indoor-coordinates/$",
         views.monitoring_indoor_coordinates_list,
         name="api_indoor_coordinates_list",
     ),

openwisp_monitoring/device/apps.py

@@ -1,4 +1,3 @@
-import json
 from urllib.parse import urljoin
 
 from django.apps import AppConfig
@@ -368,30 +367,10 @@ def register_dashboard_items(self):
         )
 
         if app_settings.DASHBOARD_MAP:
-            loc_geojson_url = reverse_lazy(
-                "monitoring:api_location_geojson", urlconf=MONITORING_API_URLCONF
-            )
-            device_list_url = reverse_lazy(
-                "monitoring:api_location_device_list",
-                urlconf=MONITORING_API_URLCONF,
-                args=["000"],
-            )
-            indoor_coordinates_list_url = reverse_lazy(
-                "monitoring:api_indoor_coordinates_list",
-                urlconf=MONITORING_API_URLCONF,
-                args=["000"],
-            )
-            if MONITORING_API_BASEURL:
-                device_list_url = urljoin(MONITORING_API_BASEURL, str(device_list_url))
-                loc_geojson_url = urljoin(MONITORING_API_BASEURL, str(loc_geojson_url))
-                indoor_coordinates_list_url = urljoin(
-                    MONITORING_API_BASEURL, str(indoor_coordinates_list_url)
-                )
-
             register_dashboard_template(
                 position=0,
                 config={
-                    "template": "admin/dashboard/device_map.html",
+                    "template": "admin/map/base_map.html",
                     "css": (
                         "monitoring/css/device-map.css",
                         "leaflet/leaflet.css",
@@ -406,10 +385,7 @@ def register_dashboard_items(self):
                     ),
                 },
                 extra_config={
-                    "monitoring_device_list_url": device_list_url,
-                    "monitoring_location_geojson_url": loc_geojson_url,
-                    "monitoring_indoor_coordinates_list": indoor_coordinates_list_url,
-                    "monitoring_labels": json.dumps(app_settings.HEALTH_STATUS_LABELS),
+                    "monitoring_labels": app_settings.HEALTH_STATUS_LABELS,
                 },
             )
 

openwisp_monitoring/device/static/monitoring/css/device-map.css

@@ -75,7 +75,6 @@
   right: 20px !important;
   font-size: 18px !important;
 }
-.leaflet-popup-close-button:hover,
 .leaflet-popup-close-button:active,
 .leaflet-popup-close-button:hover {
   color: black !important;
@@ -234,7 +233,6 @@
 }
 #floorplan-container {
   position: relative;
-  background: white;
   z-index: 99999;
   padding: 16px;
   border-radius: 12px;
@@ -316,7 +314,6 @@
   width: 45px;
   height: 45px;
   background-color: white;
-  border: 1px solid black;
   border: none;
   font-weight: bold;
   cursor: pointer;
@@ -411,10 +408,3 @@
     min-width: auto;
   }
 }
-
-/* Map Page */
-.dedicated-map-page {
-  width: 100%;
-  height: 87.7vh !important;
-  margin: 15px auto 0 auto !important;
-}

openwisp_monitoring/device/static/monitoring/css/loading.gif

@@ -139,3 +139,10 @@ fieldset.module .view-on-map-btn {
   color: white;
   text-decoration: none !important;
 }
+
+/* Map Page */
+.dedicated-map-page {
+  width: 100%;
+  height: calc(100vh - 126px) !important;
+  margin: 15px auto 0 auto !important;
+}