Skip to content

Commit 52b6368

Browse files
committed
[change] Load leaflet from django-leaflet in dashboard map #709
The dashboard map was loading netjsongraph.min.js which bundled both ECharts and Leaflet, while django-leaflet was already loading Leaflet separately on device/location detail pages. Switched to the ECharts-only build of netjsongraph.js and load Leaflet JS from django-leaflet instead, avoiding bundling it twice and reducing the page load size. Closes #709
1 parent f7d7945 commit 52b6368

File tree

6 files changed

+26
-15
lines changed

6 files changed

+26
-15
lines changed

openwisp_monitoring/device/admin.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -588,8 +588,8 @@ class MapPageAdmin(MultitenantAdminMixin, admin.ModelAdmin):
588588

589589
class Media:
590590
js = [
591-
"monitoring/js/lib/netjsongraph.min.js",
592591
"monitoring/js/lib/leaflet.fullscreen.min.js",
592+
"monitoring/js/lib/netjsongraph.echarts.min.js",
593593
]
594594
css = {
595595
"all": [

openwisp_monitoring/device/apps.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,8 +378,8 @@ def register_dashboard_items(self):
378378
"monitoring/css/netjsongraph.css",
379379
),
380380
"js": (
381-
"monitoring/js/lib/netjsongraph.min.js",
382381
"monitoring/js/lib/leaflet.fullscreen.min.js",
382+
"monitoring/js/lib/netjsongraph.echarts.min.js",
383383
"monitoring/js/device-map.js",
384384
"monitoring/js/floorplan.js",
385385
),

openwisp_monitoring/device/static/monitoring/js/lib/netjsongraph.echarts.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

openwisp_monitoring/device/tests/test_admin.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -900,8 +900,8 @@ def test_dashboard(self):
900900
"monitoring/css/leaflet.fullscreen.css",
901901
"monitoring/css/netjsongraph.css",
902902
"leaflet/leaflet.css",
903-
"monitoring/js/lib/netjsongraph.min.js",
904903
"monitoring/js/lib/leaflet.fullscreen.min.js",
904+
"monitoring/js/lib/netjsongraph.echarts.min.js",
905905
"monitoring/js/device-map.js",
906906
"monitoring/js/floorplan.js",
907907
]
@@ -1241,8 +1241,8 @@ def test_mappage_admin_media_files(self):
12411241
response = self.client.get(url)
12421242
self.assertEqual(response.status_code, 200)
12431243
static_files = [
1244-
"monitoring/js/lib/netjsongraph.min.js",
12451244
"monitoring/js/lib/leaflet.fullscreen.min.js",
1245+
"monitoring/js/lib/netjsongraph.echarts.min.js",
12461246
"monitoring/css/device-map.css",
12471247
"leaflet/leaflet.css",
12481248
"monitoring/css/leaflet.fullscreen.css",

openwisp_monitoring/device/tests/test_apps.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ def test_device_map_template_registered(self):
3030
self.assertEqual(
3131
template_config[0].get("js"),
3232
(
33-
"monitoring/js/lib/netjsongraph.min.js",
3433
"monitoring/js/lib/leaflet.fullscreen.min.js",
34+
"monitoring/js/lib/netjsongraph.echarts.min.js",
3535
"monitoring/js/device-map.js",
3636
"monitoring/js/floorplan.js",
3737
),

openwisp_monitoring/tests/test_selenium.py

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -806,15 +806,17 @@ def test_mobile_location_updates_on_dashboard_map(self):
806806
location.save()
807807
try:
808808
series_value = WebDriverWait(self.web_driver, 5).until(
809-
lambda d: d.execute_script("""
809+
lambda d: d.execute_script(
810+
"""
810811
const options = window._owGeoMap.echarts.getOption();
811812
const series = options.series.find(
812813
(s) => s.type === "scatter" || s.type === "effectScatter",
813814
);
814815
const item = series.data.find(d => d.name === "Test-Location");
815816
if (!item) return false;
816817
return item.value;
817-
""")
818+
"""
819+
)
818820
)
819821
except TimeoutException:
820822
self.fail("Failed to retrieve mobile location data")
@@ -828,15 +830,17 @@ def test_mobile_location_updates_on_dashboard_map(self):
828830
location.save()
829831
try:
830832
series_value = WebDriverWait(self.web_driver, 5).until(
831-
lambda d: d.execute_script("""
833+
lambda d: d.execute_script(
834+
"""
832835
const options = window._owGeoMap.echarts.getOption();
833836
const series = options.series.find(
834837
(s) => s.type === "scatter" || s.type === "effectScatter",
835838
);
836839
const item = series.data.find(d => d.name === "Test-Location");
837840
if (!item) return false;
838841
return item.value;
839-
""")
842+
"""
843+
)
840844
)
841845
except TimeoutException:
842846
self.fail("Failed to retrieve updated mobile location data")
@@ -889,7 +893,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
889893
sleep(0.3) # Wait for JS animation
890894
try:
891895
series_locations = WebDriverWait(self.web_driver, 5).until(
892-
lambda d: d.execute_script("""
896+
lambda d: d.execute_script(
897+
"""
893898
const options = window._owGeoMap.echarts.getOption();
894899
const series = options.series.find(
895900
(s) => s.type === "scatter" || s.type === "effectScatter",
@@ -898,7 +903,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
898903
const org2_location = series.data.find(l => l.name === "Org2-Location")
899904
if (!org1_location || !org2_location) return false;
900905
return {org1_location, org2_location}
901-
""")
906+
"""
907+
)
902908
)
903909
except TimeoutException:
904910
self.fail("Failed to retrieve org location data from superuser")
@@ -926,7 +932,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
926932
sleep(0.3) # Wait for JS animation
927933
try:
928934
series_locations = WebDriverWait(org1_driver, 5).until(
929-
lambda d: d.execute_script("""
935+
lambda d: d.execute_script(
936+
"""
930937
const options = window._owGeoMap.echarts.getOption();
931938
const series = options.series.find(
932939
(s) => s.type === "scatter" || s.type === "effectScatter",
@@ -936,7 +943,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
936943
if (!org1_location) return false;
937944
if (org2_location !== undefined) return false;
938945
return {org1_location, org2_location}
939-
""")
946+
"""
947+
)
940948
)
941949
except TimeoutException:
942950
self.fail("Failed to retrieve org1 location data from org1 user")
@@ -963,7 +971,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
963971
sleep(0.3) # Wait for JS animation
964972
try:
965973
series_locations = WebDriverWait(org2_driver, 5).until(
966-
lambda d: d.execute_script("""
974+
lambda d: d.execute_script(
975+
"""
967976
const options = window._owGeoMap.echarts.getOption();
968977
const series = options.series.find(
969978
(s) => s.type === "scatter" || s.type === "effectScatter",
@@ -973,7 +982,8 @@ def test_mobile_location_updates_on_dashboard_map_with_org_isolation(self):
973982
if (org1_location !== undefined) return false;
974983
if (!org2_location) return false;
975984
return {org1_location, org2_location}
976-
""")
985+
"""
986+
)
977987
)
978988
except TimeoutException:
979989
self.fail("Failed to retrieve org2 location data from org2 user")

0 commit comments

Comments
 (0)