Improve charts JS (hestiacp#3519)

* Improve charts JS

* Remove unused support for page-specific JS

* Update deprecated flag

* Tidy CSRF error page

* Only load Chart.js bundle when needed

Author: AlecRust

docs/docs/contributing/development.md

@@ -35,7 +35,7 @@ multipass mount $HOME/projects/hestiacp hestia-dev:/home/ubuntu/hestiacp
 1. Create an Ubuntu VM with at least 2G of memory and 15G of disk space
 
    ```bash
-   multipass launch --name hestia-dev --mem 2G --disk 15G
+   multipass launch --name hestia-dev --memory 2G --disk 15G
    ```
 
 1. Map your cloned repository to the VM's home directory

web/inc/main.php

@@ -180,7 +180,6 @@ function check_return_code_redirect($return_var, $output, $location) {
 
 function render_page($user, $TAB, $page) {
 	$__template_dir = dirname(__DIR__) . "/templates/";
-	$__pages_js_dir = dirname(__DIR__) . "/js/pages/";
 
 	// Extract global variables
 	// I think those variables should be passed via arguments
@@ -198,11 +197,6 @@ function render_page($user, $TAB, $page) {
 	// Body
 	include $__template_dir . "pages/" . $page . ".php";
 
-	// Including page specific js file
-	if (file_exists($__pages_js_dir . $page . ".js")) {
-		echo '<script defer src="/js/pages/' . $page . ".js?" . JS_LATEST_UPDATE . '"></script>';
-	}
-
 	// Footer
 	include $__template_dir . "footer.php";
 }

web/inc/prevent_csrf.php

@@ -29,9 +29,9 @@ function checkStrictness($level) {
 		return true;
 	} else {
 		http_response_code(400);
-		echo "<h1>Potential use CSRF detected</h1>\n" .
+		echo "<h1>Potential CSRF use detected</h1>\n" .
 			"<p>Please disable any plugins/add-ons inside your browser or contact your system administrator. If you are the system administrator you can run v-change-sys-config-value 'POLICY_CSRF_STRICTNESS' '0' as root to disable this check.<p>" .
-			"<p>If you followed a bookmark or an static link <a href='/'>please click here</a>";
+			"<p>If you followed a bookmark or an static link please <a href='/'>navigate to root</a>";
 		die();
 	}
 }

web/js/dist/main.min.js

@@ -23,6 +23,7 @@ import handleSyncEmailValues from './syncEmailValues';
 import handleTabPanels from './tabPanels';
 import handleToggleAdvanced from './toggleAdvanced';
 import handleUnlimitedInput from './unlimitedInput';
+import initRrdCharts from './rrdCharts';
 import * as helpers from './helpers';
 
 window.Hestia = { helpers };
@@ -48,6 +49,7 @@ function initListeners() {
 	handleSyncEmailValues();
 	handleTabPanels();
 	handleToggleAdvanced();
+	initRrdCharts();
 }
 
 document.addEventListener('alpine:init', () => {

web/js/dist/main.min.js.map

@@ -1,7 +1,13 @@
-async function init() {
-	const Chart = await loadChartJs();
+// Create Chart.js charts from in-page data on Task Monitor page
+export default async function initRrdCharts() {
 	const chartCanvases = document.querySelectorAll('.js-rrd-chart');
 
+	if (!chartCanvases.length) {
+		return;
+	}
+
+	const Chart = await loadChartJs();
+
 	for (const chartCanvas of chartCanvases) {
 		const service = chartCanvas.dataset.service;
 		const period = chartCanvas.dataset.period;
@@ -18,8 +24,11 @@ async function init() {
 }
 
 async function loadChartJs() {
-	const module = await import('/js/dist/chart.js-auto.min.js');
-	return module.Chart;
+	// NOTE: String expression used to prevent ESBuild from resolving
+	// the import on build (Chart.js is a separate bundle)
+	const chartJsBundlePath = '/js/dist/chart.js-auto.min.js';
+	const chartJsModule = await import(`${chartJsBundlePath}`);
+	return chartJsModule.Chart;
 }
 
 async function fetchRrdData(service, period) {
@@ -103,5 +112,3 @@ function getChartOptions(unit) {
 		},
 	};
 }
-
-init();