Refactor network API calls to use centralized authentication context and improve cache handling

- Removed redundant getApiToken function and replaced its usage with getAuthContext in network-api.js, network-events.js, and network-init.js.
- Updated cache handling in network-events.js and network-init.js to use CACHE_KEYS constants for better maintainability.
- Introduced cache.js for centralized cache management functions and constants, including cache initialization and retrieval.
- Added app-init.js for application lifecycle management, including cache orchestration and initialization checks.
- Created app_config.php to securely fetch API token and GraphQL port from configuration.
- Improved error handling and logging throughout the codebase for better debugging and maintenance.
This commit is contained in:
Jokob @NetAlertX
2026-02-26 04:21:29 +00:00
parent 00042ab594
commit 63cef590d6
12 changed files with 915 additions and 682 deletions

View File

@@ -19,40 +19,10 @@ const allLanguages = ["ar_ar","ca_ca","cs_cz","de_de",
"tr_tr","uk_ua","vi_vn","zh_cn"]; // needs to be same as in lang.php
var settingsJSON = {}
// NAX_CACHE_VERSION and CACHE_KEYS moved to cache.js
// -----------------------------------------------------------------------------
// Simple session cache withe expiration managed via cookies
// -----------------------------------------------------------------------------
function getCache(key, noCookie = false)
{
// check cache
cachedValue = localStorage.getItem(key)
// console.log(cachedValue);
if(cachedValue)
{
// // check if not expired
// if(noCookie || getCookie(key + '_session_expiry') != "")
// {
return cachedValue;
// }
}
return "";
}
// -----------------------------------------------------------------------------
function setCache(key, data, expirationMinutes='')
{
localStorage.setItem(key, data);
// // create cookie if expiration set to handle refresh of data
// if (expirationMinutes != '')
// {
// setCookie ('cache_session_expiry', 'OK', 1)
// }
}
// getCache, setCache, fetchJson, getAuthContext moved to cache.js
// -----------------------------------------------------------------------------
@@ -93,288 +63,13 @@ function deleteCookie (cookie) {
document.cookie = cookie + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC';
}
// -----------------------------------------------------------------------------
function deleteAllCookies() {
// Array of cookies
var allCookies = document.cookie.split(";");
// For each cookie
for (var i = 0; i < allCookies.length; i++) {
var cookie = allCookies[i].trim();
var eqPos = cookie.indexOf("=");
var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
}
// cacheApiConfig, cacheSettings, getSettingOptions, getSetting moved to cache.js
// -----------------------------------------------------------------------------
// Get settings from the .json file generated by the python backend
// and cache them, if available, with options
// -----------------------------------------------------------------------------
function cacheSettings()
{
return new Promise((resolve, reject) => {
if(!getCache('cacheSettings_completed') === true)
{
$.get('php/server/query_json.php', { file: 'table_settings.json', nocache: Date.now() }, function(resSet) {
$.get('php/server/query_json.php', { file: 'plugins.json', nocache: Date.now() }, function(resPlug) {
pluginsData = resPlug["data"];
settingsData = resSet["data"];
settingsData.forEach((set) => {
resolvedOptions = createArray(set.setOptions)
resolvedOptionsOld = resolvedOptions
setPlugObj = {};
options_params = [];
resolved = ""
// proceed only if first option item contains something to resolve
if( !set.setKey.includes("__metadata") &&
resolvedOptions.length != 0 &&
resolvedOptions[0].includes("{value}"))
{
// get setting definition from the plugin config if available
setPlugObj = getPluginSettingObject(pluginsData, set.setKey)
// 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
resolved = resolveParams(options_params, resolvedOptions[0])
if(resolved.includes('"')) // check if list of strings
{
resolvedOptions = `[${resolved}]`
} else // one value only
{
resolvedOptions = `["${resolved}"]`
}
}
}
}
setCache(`nax_set_${set.setKey}`, set.setValue)
setCache(`nax_set_opt_${set.setKey}`, resolvedOptions)
});
}).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed"))); // handle AJAX synchronization
})
}
});
}
// -----------------------------------------------------------------------------
// Get a setting options value by key
function getSettingOptions (key) {
// handle initial load to make sure everything is set-up and cached
// handleFirstLoad()
result = getCache(`nax_set_opt_${key}`, true);
if (result == "")
{
// console.log(`Setting options with key "${key}" not found`)
result = []
}
return result;
}
// -----------------------------------------------------------------------------
// Get a setting value by key
function getSetting (key) {
// handle initial load to make sure everything is set-up and cached
// handleFirstLoad()
result = getCache(`nax_set_${key}`, true);
// if (result == "")
// {
// console.log(`Setting with key "${key}" not found`)
// }
return result;
}
// -----------------------------------------------------------------------------
// Get language string
// -----------------------------------------------------------------------------
function cacheStrings() {
return new Promise((resolve, reject) => {
// Create a promise for each language (include en_us by default as fallback)
languagesToLoad = ['en_us']
additionalLanguage = getLangCode()
if(additionalLanguage != 'en_us')
{
languagesToLoad.push(additionalLanguage)
}
console.log(languagesToLoad);
const languagePromises = languagesToLoad.map((language_code) => {
return new Promise((resolveLang, rejectLang) => {
// Fetch core strings and translations
$.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`)
.done((res) => {
// Iterate over each key-value pair and store the translations
Object.entries(res).forEach(([key, value]) => {
setCache(`pia_lang_${key}_${language_code}`, value);
});
// Fetch strings and translations from plugins
$.get('php/server/query_json.php', { file: 'table_plugins_language_strings.json', nocache: Date.now() })
.done((pluginRes) => {
const data = pluginRes["data"];
// Store plugin translations
data.forEach((langString) => {
setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value);
});
// Handle successful completion of language processing
handleSuccess(`cacheStrings`, resolveLang);
})
.fail((pluginError) => {
// Handle failure in plugin strings fetching
rejectLang(pluginError);
});
})
.fail((error) => {
// Handle failure in core strings fetching
rejectLang(error);
});
});
});
// Wait for all language promises to complete
Promise.all(languagePromises)
.then(() => {
// All languages processed successfully
resolve();
})
.catch((error) => {
// Handle failure in any of the language processing
handleFailure('cacheStrings', reject);
});
});
}
// -----------------------------------------------------------------------------
// Get translated language string
function getString(key) {
function fetchString(key) {
lang_code = getLangCode();
let result = getCache(`pia_lang_${key}_${lang_code}`, true);
if (isEmpty(result)) {
result = getCache(`pia_lang_${key}_en_us`, true);
}
return result;
}
if (isAppInitialized()) {
return fetchString(key);
} else {
callAfterAppInitialized(() => fetchString(key));
}
}
// -----------------------------------------------------------------------------
// Get current language ISO code
// below has to match exactly the values in /front/php/templates/language/lang.php & /front/js/common.js
function getLangCode() {
UI_LANG = getSetting("UI_LANG");
let lang_code = 'en_us';
switch (UI_LANG) {
case 'English (en_us)':
lang_code = 'en_us';
break;
case 'Spanish (es_es)':
lang_code = 'es_es';
break;
case 'German (de_de)':
lang_code = 'de_de';
break;
case 'Farsi (fa_fa)':
lang_code = 'fa_fa';
break;
case 'French (fr_fr)':
lang_code = 'fr_fr';
break;
case 'Norwegian (nb_no)':
lang_code = 'nb_no';
break;
case 'Polish (pl_pl)':
lang_code = 'pl_pl';
break;
case 'Portuguese (pt_br)':
lang_code = 'pt_br';
break;
case 'Portuguese (pt_pt)':
lang_code = 'pt_pt';
break;
case 'Turkish (tr_tr)':
lang_code = 'tr_tr';
break;
case 'Swedish (sv_sv)':
lang_code = 'sv_sv';
break;
case 'Italian (it_it)':
lang_code = 'it_it';
break;
case 'Japanese (ja_jp)':
lang_code = 'ja_jp';
break;
case 'Russian (ru_ru)':
lang_code = 'ru_ru';
break;
case 'Chinese (zh_cn)':
lang_code = 'zh_cn';
break;
case 'Czech (cs_cz)':
lang_code = 'cs_cz';
break;
case 'Arabic (ar_ar)':
lang_code = 'ar_ar';
break;
case 'Catalan (ca_ca)':
lang_code = 'ca_ca';
break;
case 'Ukrainian (uk_uk)':
lang_code = 'uk_ua';
break;
case 'Vietnamese (vi_vn)':
lang_code = 'vi_vn';
break;
}
return lang_code;
}
// cacheStrings, getString, getLangCode moved to cache.js
const tz = getSetting("TIMEZONE") || 'Europe/Berlin';
const LOCALE = getSetting('UI_LOCALE') || 'en-GB';
@@ -718,14 +413,13 @@ function numberArrayFromString(data)
// -----------------------------------------------------------------------------
// Update network parent/child relationship (network tree)
function updateNetworkLeaf(leafMac, parentMac) {
const apiBase = getApiBase();
const apiToken = getSetting("API_TOKEN");
const { apiBase, authHeader } = getAuthContext();
const url = `${apiBase}/device/${leafMac}/update-column`;
$.ajax({
method: "POST",
url: url,
headers: { "Authorization": `Bearer ${apiToken}` },
headers: authHeader,
data: JSON.stringify({ columnName: "devParentMAC", columnValue: parentMac }),
contentType: "application/json",
success: function(response) {
@@ -1157,72 +851,7 @@ function isRandomMAC(mac)
return options;
}
// -----------------------------------------------------------------------------
// A function to get a device property using the mac address as key and DB column nakme as parameter
// for the value to be returned
function getDevDataByMac(macAddress, dbColumn) {
const sessionDataKey = 'devicesListAll_JSON';
const devicesCache = getCache(sessionDataKey);
if (!devicesCache || devicesCache == "") {
console.error(`Session variable "${sessionDataKey}" not found.`);
return null;
}
const devices = JSON.parse(devicesCache);
for (const device of devices) {
if (device["devMac"].toLowerCase() === macAddress.toLowerCase()) {
if(dbColumn)
{
return device[dbColumn];
}
else
{
return device
}
}
}
console.error("⚠ Device with MAC not found:" + macAddress)
return null; // Return a default value if MAC address is not found
}
// -----------------------------------------------------------------------------
// Cache the devices as one JSON
function cacheDevices()
{
return new Promise((resolve, reject) => {
$.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(data) {
// console.log(data)
devicesListAll_JSON = data["data"]
devicesListAll_JSON_str = JSON.stringify(devicesListAll_JSON)
if(devicesListAll_JSON_str == "")
{
showSpinner()
setTimeout(() => {
cacheDevices()
}, 1000);
}
// console.log(devicesListAll_JSON_str);
setCache('devicesListAll_JSON', devicesListAll_JSON_str)
// 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
// getDevDataByMac, cacheDevices, devicesListAll_JSON moved to cache.js
// -----------------------------------------------------------------------------
function isEmpty(value)
@@ -1369,18 +998,13 @@ function updateApi(apiEndpoints)
// value has to be in format event|param. e.g. run|ARPSCAN
action = `${getGuid()}|update_api|${apiEndpoints}`
// Get data from the server
const apiToken = getSetting("API_TOKEN");
const apiBaseUrl = getApiBase();
const { token: apiToken, apiBase: apiBaseUrl, authHeader } = getAuthContext();
const url = `${apiBaseUrl}/logs/add-to-execution-queue`;
$.ajax({
method: "POST",
url: url,
headers: {
"Authorization": "Bearer " + apiToken,
"Content-Type": "application/json"
},
headers: { ...authHeader, "Content-Type": "application/json" },
data: JSON.stringify({ action: action }),
success: function(data, textStatus) {
console.log(data)
@@ -1548,16 +1172,11 @@ function hideUIelements(setKey) {
function getDevicesList()
{
// Read cache (skip cookie expiry check)
devicesList = getCache('devicesListAll_JSON', true);
if (devicesList != '') {
devicesList = JSON.parse (devicesList);
} else {
devicesList = [];
}
const cached = getCache(CACHE_KEYS.DEVICES_ALL);
let devicesList = parseDeviceCache(cached);
// only loop thru the filtered down list
visibleDevices = getCache("ntx_visible_macs")
visibleDevices = getCache(CACHE_KEYS.VISIBLE_MACS)
if(visibleDevices != "") {
visibleDevicesMACs = visibleDevices.split(',');
@@ -1616,18 +1235,14 @@ function restartBackend() {
modalEventStatusId = 'modal-message-front-event'
const apiToken = getSetting("API_TOKEN");
const apiBaseUrl = getApiBase();
const { token: apiToken, apiBase: apiBaseUrl, authHeader } = getAuthContext();
const url = `${apiBaseUrl}/logs/add-to-execution-queue`;
// Execute
$.ajax({
method: "POST",
url: url,
headers: {
"Authorization": "Bearer " + apiToken,
"Content-Type": "application/json"
},
headers: { ...authHeader, "Content-Type": "application/json" },
data: JSON.stringify({ action: `cron_restart_backend` }),
success: function(data, textStatus) {
// showModalOk ('Result', data );
@@ -1642,237 +1257,8 @@ function restartBackend() {
})
}
// -----------------------------------------------------------------------------
// initialize
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// Define a unique key for storing the flag in sessionStorage
const sessionStorageKey = "myScriptExecuted_common_js";
var completedCalls = []
var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
var lang_completedCalls = 0;
// -----------------------------------------------------------------------------
// Clearing all the caches
function clearCache() {
showSpinner();
sessionStorage.clear();
localStorage.clear();
setTimeout(() => {
console.warn("clearChache called");
window.location.reload();
}, 500);
}
// ===================================================================
// DEPRECATED: checkSettingChanges() - Replaced by SSE-based manager
// Settings changes are now handled via SSE events
// Kept for backward compatibility, will be removed in future version
// ===================================================================
function checkSettingChanges() {
// SSE manager handles settings_changed events now
if (typeof netAlertXStateManager !== 'undefined' && netAlertXStateManager.initialized) {
return; // SSE handles this now
}
// Fallback for backward compatibility
$.get('php/server/query_json.php', { file: 'app_state.json', nocache: Date.now() }, function(appState) {
const importedMilliseconds = parseInt(appState["settingsImported"] * 1000);
const lastReloaded = parseInt(sessionStorage.getItem(sessionStorageKey + '_time'));
if (importedMilliseconds > lastReloaded) {
console.log("Cache needs to be refreshed because of setting changes");
setTimeout(() => {
clearCache();
}, 500);
}
});
}
// ===================================================================
// Display spinner and reload page if not yet initialized
async function handleFirstLoad(callback) {
if (!isAppInitialized()) {
await new Promise(resolve => setTimeout(resolve, 1000));
callback();
}
}
// ===================================================================
// Execute callback once the app is initialized and GraphQL server is running
async function callAfterAppInitialized(callback) {
if (!isAppInitialized() || !(await isGraphQLServerRunning())) {
setTimeout(() => {
callAfterAppInitialized(callback);
}, 500);
} else {
callback();
}
}
// ===================================================================
// Polling function to repeatedly check if the server is running
async function waitForGraphQLServer() {
const pollInterval = 2000; // 2 seconds between each check
let serverRunning = false;
while (!serverRunning) {
serverRunning = await isGraphQLServerRunning();
if (!serverRunning) {
console.log("GraphQL server not running, retrying in 2 seconds...");
await new Promise(resolve => setTimeout(resolve, pollInterval));
}
}
console.log("GraphQL server is now running.");
}
// -----------------------------------------------------------------------------
// Returns 1 if running, 0 otherwise
async function isGraphQLServerRunning() {
try {
const response = await $.get('php/server/query_json.php', { file: 'app_state.json', nocache: Date.now()});
console.log("graphQLServerStarted: " + response["graphQLServerStarted"]);
setCache("graphQLServerStarted", response["graphQLServerStarted"]);
return response["graphQLServerStarted"];
} catch (error) {
console.error("Failed to check GraphQL server status:", error);
return false;
}
}
// -----------------------------------------------------------------------------
// Check if the code has been executed before by checking sessionStorage
function isAppInitialized() {
lang_shouldBeCompletedCalls = getLangCode() == 'en_us' ? 1 : 2;
// check if each ajax call completed succesfully
$.each(completedCalls_final, function(index, call_name){
if(getCache(call_name + "_completed") != "true")
{
console.log(`[isAppInitialized] AJAX call ${call_name} unsuccesful: ${getCache(call_name + "_completed")}`)
return false;
}
});
// check if all required languages chached
if(parseInt(getCache("cacheStringsCountCompleted")) != lang_shouldBeCompletedCalls)
{
console.log(`[isAppInitialized] AJAX call cacheStrings unsuccesful: ${getCache("cacheStringsCountCompleted")} out of ${lang_shouldBeCompletedCalls}`)
return false;
}
return true;
}
// -----------------------------------------------------------------------------
// Main execution logic
async function executeOnce() {
showSpinner();
if (!isAppInitialized()) {
try {
await waitForGraphQLServer(); // Wait for the server to start
await cacheDevices();
await cacheSettings();
await cacheStrings();
console.log("All AJAX callbacks have completed");
onAllCallsComplete();
} catch (error) {
console.error("Error:", error);
}
}
}
// -----------------------------------------------------------------------------
// Function to handle successful completion of an AJAX call
const handleSuccess = (callName) => {
console.log(`AJAX call successful: ${callName}`);
if(callName.includes("cacheStrings"))
{
completed_tmp = getCache("cacheStringsCountCompleted");
completed_tmp == "" ? completed_tmp = 0 : completed_tmp = completed_tmp;
completed_tmp++;
setCache("cacheStringsCountCompleted", completed_tmp);
}
setCache(callName + "_completed", true)
};
// -----------------------------------------------------------------------------
// Function to handle failure of an AJAX call
const handleFailure = (callName, callback) => {
msg = `AJAX call ${callName} failed`
console.error(msg);
// Implement retry logic here if needed
// write_notification(msg, 'interrupt')
};
// -----------------------------------------------------------------------------
// Function to execute when all AJAX calls have completed
const onAllCallsComplete = () => {
completedCalls = mergeUniqueArrays(getCache('completedCalls').split(','), completedCalls);
setCache('completedCalls', completedCalls);
// Check if all necessary strings are initialized
if (areAllStringsInitialized()) {
sessionStorage.setItem(sessionStorageKey, "true");
const millisecondsNow = Date.now();
sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
console.log('✔ Cache initialized');
// setTimeout(() => {
// location.reload()
// }, 10);
} else {
// If not all strings are initialized, retry initialization
console.log('❌ Not all strings are initialized. Retrying...');
executeOnce();
return;
}
// Call any other initialization functions here if needed
};
// Function to check if all necessary strings are initialized
const areAllStringsInitialized = () => {
// Implement logic to check if all necessary strings are initialized
// Return true if all strings are initialized, false otherwise
return getString('UI_LANG_name') != ""
};
// Call the function to execute the code
executeOnce();
// Set timer for regular UI refresh if enabled
setTimeout(() => {
// page refresh if configured
const refreshTime = getSetting("UI_REFRESH");
if (refreshTime && refreshTime !== "0" && refreshTime !== "") {
console.log("Refreshing page becasue UI_REFRESH setting enabled.");
newTimerRefreshData(clearCache, parseInt(refreshTime)*1000);
}
// Check if page needs to refresh due to setting changes
checkSettingChanges()
}, 10000);
console.log("init common.js");
// App lifecycle (completedCalls, executeOnce, handleSuccess, clearCache, etc.) moved to app-init.js