[fix] Show all status filter options and fix css

Author: dee077

openwisp_monitoring/device/api/filters.py

@@ -25,9 +25,8 @@ class Meta:
         }
 
 
-class DeviceFilter(filters.FilterSet):
+class MonitoringLocationDeviceFilter(filters.FilterSet):
     search = filters.CharFilter(method="filter_search")
-
     status = filters.MultipleChoiceFilter(
         field_name="monitoring__status",
         choices=DeviceMonitoring.STATUS,

openwisp_monitoring/device/api/views.py

@@ -40,8 +40,8 @@
 from ..signals import device_metrics_received
 from ..tasks import write_device_metrics
 from .filters import (
-    DeviceFilter,
     MonitoringDeviceFilter,
+    MonitoringLocationDeviceFilter,
     MonitoringNearbyDeviceFilter,
     WifiSessionFilter,
 )
@@ -251,7 +251,7 @@ class MonitoringGeoJsonLocationList(GeoJsonLocationList):
 class MonitoringLocationDeviceList(LocationDeviceList):
     serializer_class = MonitoringLocationDeviceSerializer
     filter_backends = [DjangoFilterBackend]
-    filterset_class = DeviceFilter
+    filterset_class = MonitoringLocationDeviceFilter
 
     def get_queryset(self):
         return super().get_queryset().select_related("monitoring").order_by("name")

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

@@ -66,7 +66,7 @@
 .leaflet-popup-content {
   display: flex;
   min-width: fit-content;
-  padding: 11px 0 11px 4px;
+  margin: 24px !important;
 }
 .leaflet-popup-close-button {
   top: 25px !important;
@@ -80,7 +80,7 @@
   box-sizing: border-box;
 }
 .map-detail h2 {
-  margin: 10px 0;
+  margin: 35px 0 10px 0;
   font-size: 18px;
 }
 .input-container {
@@ -117,6 +117,7 @@
   align-items: center;
   margin: 10px 0;
   gap: 10px;
+  justify-content: space-evenly;
 }
 .status-filter {
   cursor: pointer;
@@ -132,7 +133,7 @@
 }
 .table-container {
   height: 120px;
-  width: 400px;
+  width: 350px;
   overflow-y: auto;
   min-width: 300px;
   box-sizing: border-box;
@@ -161,7 +162,7 @@
 }
 .floorplan-btn {
   padding: 10px 25px;
-  margin-top: 10px;
+  margin-top: 20px;
   width: fit-content;
   font-size: 16px;
   border-radius: 8px;

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

@@ -67,22 +67,27 @@
       success: function (data) {
         let devices = data.results;
         let nextUrl = data.next;
-        const uniqueStatus = devices.reduce((acc, device) => {
-          const { status_label, status } = device.monitoring;
-          acc[status_label] = status;
-          return acc;
-        }, {});
-        let statusFiltersBtn = "";
-        Object.entries(uniqueStatus).forEach(([status_label, status]) => {
+        const statusLabelsMap = {
+          ok: "ok",
+          problem: "problem",
+          critical: "critical",
+          unknown: "unknown",
+          deactivated: "deactivated",
+        };
+        devices.forEach(({ monitoring }) => {
+          statusLabelsMap[monitoring.status] = monitoring.status_label;
+        });
+        let statusFilterButtons = "";
+        Object.entries(statusLabelsMap).forEach(([status_label, status]) => {
           const label = gettext(status_label);
-          statusFiltersBtn += `
-            <span 
+          statusFilterButtons += 
+            `<span 
               class="health-status health-${status} status-filter" 
               data-status="${status}"
             >
               ${label}
-            </span>
-          `;
+            </span>`
+          ;
         });
         const has_floorplan = data.has_floorplan;
         const floorplan_btn = has_floorplan
@@ -96,10 +101,10 @@
                               data.count
                             })</h2>
                             <div class="input-container">
-                              <input id="device-search" placeholder="Search for devices by name or mac address" />
+                              <input id="device-search" placeholder="Search for devices" />
                             </div>
                             <div class="label-container">
-                              ${statusFiltersBtn}
+                              ${statusFilterButtons}
                               <input id="status-filter" style="display: none;" type="text" />
                             </div>
                             <div class="table-container">
@@ -180,30 +185,28 @@
             if (url === nextUrl) fetchUrl = url;
             else fetchUrl = queryString ? `${url}?${queryString}` : url;
 
-            $.ajax(
-              {
-                dataType: "json",
-                url: fetchUrl,
-                xhrFields: { withCredentials: true },
+            $.ajax({
+              dataType: "json",
+              url: fetchUrl,
+              xhrFields: { withCredentials: true },
 
-                success(data) {
-                  if (url === nextUrl) {
-                    devices = devices.concat(data.results);
-                  } else {
-                    devices = data.results;
-                  }
-                  nextUrl = data.next;
-                  renderRows(devices);
-                },
-                error() {
-                  console.error("Could not load more devices from", url);
-                },
-                complete() {
-                  loading = false;
-                  spinner.hide();
-                },
+              success(data) {
+                if (url === nextUrl) {
+                  devices = devices.concat(data.results);
+                } else {
+                  devices = data.results;
+                }
+                nextUrl = data.next;
+                renderRows(devices);
               },
-            );
+              error() {
+                console.error("Could not load more devices from", url);
+              },
+              complete() {
+                loading = false;
+                spinner.hide();
+              },
+            });
           }, ms);
         }
         renderRows();

openwisp_monitoring/device/static/monitoring/js/floorplan.js

@@ -56,11 +56,11 @@
         success: async (data) => {
           // To make this run only one time as only in the first call floor will not be provided
           // And sort them in decresing order so that neagtive floor show at bottom and postove at top in floor navigation
-          if (!floor){
+          if (!floor) {
             floors = data.floors.sort((a, b) => b - a);
-            floor = data.results[0].floor
-          }             
-          if (!allResults[floor]) allResults[floor] = []
+            floor = data.results[0].floor;
+          }
+          if (!allResults[floor]) allResults[floor] = [];
           allResults[floor] = [...allResults[floor], ...data.results];
           if (!currentFloor && data.results.length) {
             currentFloor = data.results[0].floor;
@@ -177,7 +177,7 @@
 
     await fetchData(url, floor);
 
-    const nodesThisFloor = {nodes: allResults[floor], links: []};
+    const nodesThisFloor = { nodes: allResults[floor], links: [] };
 
     $("#floorplan-heading").text(nodesThisFloor.nodes[0].floor_name);
     const imageUrl = nodesThisFloor.nodes[0].image;
@@ -253,13 +253,15 @@
           L.imageOverlay(imageUrl, bnds).addTo(map);
           map.fitBounds(bnds);
           map.setMaxBounds(bnds);
-          map.setView([0,0], 0)
+          // map.setView([0,0], 0)
         };
         // Todo: Explore some better approach if exists
-        const fullScreen = $('#floorplan-container .leaflet-control-fullscreen-button');
+        const fullScreen = $(
+          "#floorplan-container .leaflet-control-fullscreen-button",
+        );
         fullScreen.off("click.zoomOnFullscreen"); // avoid duplicates
         fullScreen.on("click.zoomOnFullscreen", () => {
-            map.setZoom(map.getZoom() + 1);
+          map.setZoom(map.getZoom() + 1);
         });
       },
     });

openwisp_monitoring/device/templates/admin/dashboard/device_map.html

@@ -4,7 +4,7 @@
 <script type="text/javascript">
   window._owGeoMapConfig = {
     geoJsonUrl: '{{ monitoring_location_geojson_url }}',
-    locationDeviceUrl: '{{ monitoring_device_list_url }}?page_size=5',
+    locationDeviceUrl: '{{ monitoring_device_list_url }}',
     indoorCoordinatesUrl: '{{ monitoring_indoor_coordinates_list }}'
   }
 </script>