vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 01:26:11 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

First load optimization 🔄

Browse Source
This commit is contained in:
Jokob-sk
2024-03-24 18:43:06 +11:00
parent 634e6a7499
commit d7af5d6611
4 changed files with 178 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
front/devices.php
View File

@@ -138,7 +138,15 @@
var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>]; var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>]; var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
var pia_js_online_history_ardev = [<?php pia_graph_devices_data($Pia_Graph_Device_Arch); ?>]; var pia_js_online_history_ardev = [<?php pia_graph_devices_data($Pia_Graph_Device_Arch); ?>];
pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev, pia_js_online_history_ardev);
setTimeout(() => {
pia_draw_graph_online_history(
pia_js_online_history_time,
pia_js_online_history_ondev,
pia_js_online_history_dodev,
pia_js_online_history_ardev);
}, 500);
</script> </script>
<!-- datatable ------------------------------------------------------------- --> <!-- datatable ------------------------------------------------------------- -->
@@ -230,6 +238,7 @@
]; ];
// Read parameters & Initialize components // Read parameters & Initialize components
showSpinner();
main(); main();
@@ -300,7 +309,7 @@ function main () {
// check if dat outdated and show spinner if so // check if data outdated and show spinner if so
handleLoadingDialog() handleLoadingDialog()
@@ -689,6 +698,7 @@ function initializeDatatable (status) {
}); });
hideSpinner();
}); });
}; };
@@ -741,25 +751,30 @@ function getNumberOfChildren(mac, devices)
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
function handleLoadingDialog() function handleLoadingDialog(needsReload = false)
{ {
$.get('log/execution_queue.log?nocache=' + Date.now(), function(data) {
// console.log('needsReload:');
// console.log(needsReload);
$.get('log/execution_queue.log?nocache=' + Date.now(), function(data) {
if(data.includes("update_api|devices")) if(data.includes("update_api|devices"))
{ {
showSpinner("devices_old") showSpinner("devices_old")
setTimeout("handleLoadingDialog()", 1000); setTimeout(handleLoadingDialog(true), 1000);
} else if ($("#loadingSpinner").is(":visible")) } else if (needsReload)
{
location.reload();
}else
{ {
hideSpinner(); // hideSpinner();
location.reload();
} }
}) })
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------

284
front/js/pialert_common.js
View File

@@ -15,11 +15,6 @@ var UI_LANG = "English";
var settingsJSON = {} var settingsJSON = {}
// urlParams = new Proxy(new URLSearchParams(window.location.search), {
// get: (searchParams, prop) => searchParams.get(prop.toString()),
// });
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Simple session cache withe expiration managed via cookies // Simple session cache withe expiration managed via cookies
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -116,47 +111,51 @@ function deleteAllCookies() {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
function cacheSettings() function cacheSettings()
{ {
return new Promise((resolve, reject) => {
$.get('api/table_settings.json?nocache=' + Date.now(), function(resSet) { if(!getCache('completedCalls').includes('cacheSettings'))
{
$.get('api/table_settings.json?nocache=' + Date.now(), function(resSet) {
$.get('api/plugins.json?nocache=' + Date.now(), function(resPlug) { $.get('api/plugins.json?nocache=' + Date.now(), function(resPlug) {
pluginsData = resPlug["data"]; pluginsData = resPlug["data"];
settingsData = resSet["data"]; settingsData = resSet["data"];
settingsData.forEach((set) => { settingsData.forEach((set) => {
resolvedOptions = createArray(set.Options) resolvedOptions = createArray(set.Options)
setPlugObj = {}; setPlugObj = {};
options_params = []; options_params = [];
// proceed only if first option item contains something to resolve // proceed only if first option item contains something to resolve
if( !set.Code_Name.includes("__metadata") && if( !set.Code_Name.includes("__metadata") &&
resolvedOptions.length != 0 && resolvedOptions.length != 0 &&
resolvedOptions[0].includes("{value}")) resolvedOptions[0].includes("{value}"))
{
// get setting definition from the plugin config if available
setPlugObj = getPluginSettingObject(pluginsData, set.Code_Name)
// check if options contains parameters and resolve
if(setPlugObj != {} && setPlugObj["options_params"])
{
// get option_params for {value} resolution
options_params = setPlugObj["options_params"]
if(options_params != [])
{ {
// handles only strings of length == 1 // get setting definition from the plugin config if available
resolvedOptions = `["${resolveParams(options_params, resolvedOptions[0])}"]` setPlugObj = getPluginSettingObject(pluginsData, set.Code_Name)
}
}
}
setCache(`pia_set_${set.Code_Name}`, set.Value) // check if options contains parameters and resolve
setCache(`pia_set_opt_${set.Code_Name}`, resolvedOptions) if(setPlugObj != {} && setPlugObj["options_params"])
}); {
}).then(() => handleSuccess('cacheSettings')).catch(() => handleFailure('cacheSettings', cacheSettings)); // handle AJAX synchronization // get option_params for {value} resolution
}) options_params = setPlugObj["options_params"]
if(options_params != [])
{
// handles only strings of length == 1
resolvedOptions = `["${resolveParams(options_params, resolvedOptions[0])}"]`
}
}
}
setCache(`pia_set_${set.Code_Name}`, set.Value)
setCache(`pia_set_opt_${set.Code_Name}`, resolvedOptions)
});
}).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed"))); // handle AJAX synchronization
})
}
});
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -197,32 +196,35 @@ function getSetting (key) {
// Get language string // Get language string
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
function cacheStrings() function cacheStrings()
{ {
return new Promise((resolve, reject) => {
if(!getCache('completedCalls').includes('cacheStrings'))
{
// handle core strings and translations
var allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "ru_ru", "nb_no"]; // needs to be same as in lang.php
// handle core strings and translations allLanguages.forEach(function (language_code) {
var allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "ru_ru", "nb_no"]; // needs to be same as in lang.php $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`, function (res) {
// Iterate over each language
Object.entries(res).forEach(([key, value]) => {
// Store translations for each key-value pair
setCache(`pia_lang_${key}_${language_code}`, value)
});
allLanguages.forEach(function (language_code) { // handle strings and translations from plugins
$.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`, function (res) { $.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`, function(res) {
// Iterate over each language
Object.entries(res).forEach(([key, value]) => { data = res["data"];
// Store translations for each key-value pair
setCache(`pia_lang_${key}_${language_code}`, value) data.forEach((langString) => {
setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value)
});
}).then(() => handleSuccess('cacheStrings', resolve())).catch(() => handleFailure('cacheStrings', reject("cacheStrings already completed"))); // handle AJAX synchronization
});
}); });
}); }
}); });
// handle strings and translations from plugins
$.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`, function(res) {
data = res["data"];
data.forEach((langString) => {
setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value)
});
}).then(() => handleSuccess('cacheStrings')).catch(() => handleFailure('cacheStrings', cacheStrings)); // handle AJAX synchronization
} }
// Get translated language string // Get translated language string
@@ -233,12 +235,6 @@ function getString (key) {
UI_LANG = getSetting("UI_LANG"); UI_LANG = getSetting("UI_LANG");
// //
// if(UI_LANG == "")
// {
// }
lang_code = 'en_us'; lang_code = 'en_us';
switch(UI_LANG) switch(UI_LANG)
@@ -865,36 +861,38 @@ function getDeviceDataByMacAddress(macAddress, dbColumn) {
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Cache teh devices as one JSON
function initDeviceListAll_JSON() function cacheDevices()
{ {
$.get('api/table_devices.json', function(data) { return new Promise((resolve, reject) => {
// console.log(data)
devicesListAll_JSON = data["data"] if(!getCache('completedCalls').includes('cacheDevices'))
devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
if(devicesListAll_JSON_str == "")
{ {
showSpinner() $.get('api/table_devices.json', function(data) {
// console.log(data)
setTimeout(() => { devicesListAll_JSON = data["data"]
initDeviceListAll_JSON()
}, 5000);
}
devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
// console.log("devicesListAll_JSON_str"); if(devicesListAll_JSON_str == "")
// console.log(devicesListAll_JSON_str); {
showSpinner()
setCache('devicesListAll_JSON', devicesListAll_JSON_str) setTimeout(() => {
cacheDevices()
}, 1000);
}
// console.log(devicesListAll_JSON_str);
// console.log(getCache('devicesListAll_JSON')) setCache('devicesListAll_JSON', devicesListAll_JSON_str)
}).then(() => handleSuccess('initDeviceListAll_JSON')).catch(() => handleFailure('initDeviceListAll_JSON', initDeviceListAll_JSON)); // handle AJAX synchronization
// console.log(getCache('devicesListAll_JSON'))
}).then(() => handleSuccess('cacheDevices', resolve())).catch(() => handleFailure('cacheDevices', reject("cacheDevices already completed"))); // handle AJAX synchronization
}
});
} }
var devicesListAll_JSON = []; // this will contain a list off all devices var devicesListAll_JSON = []; // this will contain a list off all devices
@@ -905,6 +903,18 @@ function isEmpty(value)
return emptyArr.includes(value) return emptyArr.includes(value)
} }
// -----------------------------------------------------------------------------
function mergeUniqueArrays(arr1, arr2) {
let mergedArray = [...arr1]; // Make a copy of arr1
arr2.forEach(element => {
if (!mergedArray.includes(element)) {
mergedArray.push(element);
}
});
return mergedArray;
}
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Generate a GUID // Generate a GUID
@@ -1079,8 +1089,14 @@ function resolveParams(params, template) {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// check if two arrays contain same values even if out of order // check if two arrays contain same values even if out of order
function arraysContainSameValues(arr1, arr2) { function arraysContainSameValues(arr1, arr2) {
// Sort and stringify arrays, then compare // Check if both parameters are arrays
return JSON.stringify(arr1.slice().sort()) === JSON.stringify(arr2.slice().sort()); if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
return false;
} else
{
// Sort and stringify arrays, then compare
return JSON.stringify(arr1.slice().sort()) === JSON.stringify(arr2.slice().sort());
}
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -1150,41 +1166,52 @@ function handleFirstLoad(callback)
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Check if the code has been executed before by checking sessionStorage // Check if the code has been executed before by checking sessionStorage
var pialert_common_init = sessionStorage.getItem(sessionStorageKey) === "true"; var pialert_common_init = sessionStorage.getItem(sessionStorageKey) === "true";
var completedCalls = []
var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
// Define a function that will execute the code only once // Define a function that will execute the code only once
function executeOnce() { function executeOnce() {
if (!pialert_common_init) { if (!arraysContainSameValues(getCache(completedCalls), completedCalls_final)) {
resetInitializedFlag()
showSpinner() showSpinner()
// to keep track of completed AJAX calls // Use cache to keep track of completed AJAX calls
completedCalls = [] var tmp_completedCalls = getCache("completedCalls")
completedCalls_final = ['cacheSettings', 'cacheStrings', 'initDeviceListAll_JSON'];
// Your initialization code here // initialize from cache if values present
cacheSettings(); if(tmp_completedCalls != "")
cacheStrings(); {
initDeviceListAll_JSON(); completedCalls = tmp_completedCalls.split(',');
}
// reload ONCE after all caches initialized // cache everything in the right order
setTimeout(() => { cacheStrings()
// console.log('reload ONCE after all caches initialized'); .then(cacheSettings)
location.reload() .then(cacheDevices)
}, 500); .then(() => {
// All callbacks have completed
console.log("✅ All AJAX callbacks have completed");
// location.reload()
onAllCallsComplete();
})
.catch((error) => {
console.error("Error:", error);
});
} }
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Function to handle successful completion of an AJAX call // Function to handle successful completion of an AJAX call
const handleSuccess = (callName) => { const handleSuccess = (callName) => {
console.log(`AJAX call ${callName} successful`); console.log(`AJAX call successful: ${callName} `);
// store completed call // store completed call
completedCalls.push(callName) completedCalls.push(callName)
onAllCallsComplete();
setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]))
}; };
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -1194,56 +1221,33 @@ const handleFailure = (callName, callback) => {
console.error(`AJAX call ${callName} failed`); console.error(`AJAX call ${callName} failed`);
// try until successful // try until successful
callback() // callback()
}; };
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Function to execute when all AJAX calls have completed // Function to execute when all AJAX calls have completed
const onAllCallsComplete = () => { const onAllCallsComplete = () => {
// Get completed calls from cache
let completedCalls_tmp = getCache('completedCalls');
let completedCalls_cached = [];
// Merge local completedCalls with completedCalls_cached array - ensure uniqueness // Merge local completedCalls with completedCalls_cached array - ensure uniqueness
// if cache contains values, merge those two arrays // if cache contains values, merge those two arrays
if (completedCalls_tmp != "") { completedCalls = mergeUniqueArrays(getCache('completedCalls').split(','), completedCalls)
// create array from comma-separated values
completedCalls_cached = completedCalls_tmp.split(',');
$.each(completedCalls_cached,function(index, completedCall){
// append the cached value to the current completedCalls array if value is missing
if(completedCalls.includes(completedCall) == false)
{
completedCalls.push(completedCall)
}
});
}
// Update cache with merged completedCalls // Update cache with merged completedCalls
setCache('completedCalls', completedCalls); setCache('completedCalls', completedCalls);
// console.log(completedCalls_cached); // Set the flag in sessionStorage to indicate that the code has been executed
// console.log(completedCalls); // and save time when last time the page was initialized
sessionStorage.setItem(sessionStorageKey, "true");
const millisecondsNow = Date.now();
sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
// Check if all three AJAX calls have completed console.log('✔ Cache intialized');
if (arraysContainSameValues(completedCalls, completedCalls_final)) {
// Set the flag in sessionStorage to indicate that the code has been executed
// and save time when last time the page was initialized
sessionStorage.setItem(sessionStorageKey, "true");
const millisecondsNow = Date.now();
sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
console.log("init pialert_common.js");
}
}; };
// Call the function to execute the code // Call the function to execute the code
executeOnce(); executeOnce();
console.log("init pialert_common.js");

0
front/php/templates/language/ru_ru.json Normal file → Executable file
View File

10
front/presence.php
View File

@@ -132,7 +132,15 @@
var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>]; var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>]; var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
var pia_js_online_history_ardev = [<?php pia_graph_devices_data($Pia_Graph_Device_Arch); ?>]; var pia_js_online_history_ardev = [<?php pia_graph_devices_data($Pia_Graph_Device_Arch); ?>];
pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev, pia_js_online_history_ardev);
setTimeout(() => {
pia_draw_graph_online_history(
pia_js_online_history_time,
pia_js_online_history_ondev,
pia_js_online_history_dodev,
pia_js_online_history_ardev);
}, 500);
</script> </script>
<!-- /.row --> <!-- /.row -->