v3.4.4

core/class/Monitoring.class.php

@@ -2627,11 +2627,12 @@ public function getCmdReplace(string $cmdName, array $cmdOptions, &$replace) {
 				$replace[$cmdNamePrefix . '_averageHistory#'] = $isCmdObject ? $cmd->getConfiguration($cmdName . '_averageHistory') : '-';
 				$replace[$cmdNamePrefix . '_minHistory#'] = $isCmdObject ? $cmd->getConfiguration($cmdName . '_minHistory') : '-';
 				$replace[$cmdNamePrefix . '_maxHistory#'] = $isCmdObject ? $cmd->getConfiguration($cmdName . '_maxHistory') : '-';
-				// Utiliser htmlspecialchars pour échapper les attributs HTML afin d'éviter les conflits avec les guillemets
-				$tendanceIcon = ($isCmdObject && $cmd->getConfiguration($cmdName . '_tendance', '') !== '') 
-					? ' <i style=&quot;color: var(--al-info-color) !important;&quot; class=&quot;fas fa-' . $cmd->getConfiguration($cmdName . '_tendance') . '&quot;></i>' 
+				// Stocker seulement la classe CSS (arrow-up, arrow-down, minus), pas le HTML complet
+				// Le JavaScript construira l'icône à partir de cette classe
+				$tendanceClass = ($isCmdObject && $cmd->getConfiguration($cmdName . '_tendance', '') !== '') 
+					? $cmd->getConfiguration($cmdName . '_tendance')
 					: '';
-				$replace[$cmdNamePrefix . '_tendance#'] = $tendanceIcon;
+				$replace[$cmdNamePrefix . '_tendance#'] = $tendanceClass;
 			}
 		];
 

core/template/dashboard/Monitoring.html

@@ -117,19 +117,21 @@
 			<span
 				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
 				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
-			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+			<span id="load_avg_1mn#id#" data-load-avg-1mn-tendance="#load_avg_1mn_tendance#"></span><span
+				id="load_avg_5mn#id#" data-load-avg-5mn-tendance="#load_avg_5mn_tendance#"></span><span
+				id="load_avg_15mn#id#" data-load-avg-15mn-tendance="#load_avg_15mn_tendance#"></span>
 		</div>
 		<div class="tooltips" style="display: #memory_display#;">
 			<span
 				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
 				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
-			<span id="memory_available_percent#id#"></span>
+			<span id="memory_available_percent#id#" data-memory-available-percent-tendance="#memory_available_percent_tendance#"></span>
 		</div>
 		<div class="tooltips" style="display: #swap_display#;">
 			<span
 				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
 				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
-			<span id="swap_free_percent#id#"></span>
+			<span id="swap_free_percent#id#" data-swap-free-percent-tendance="#swap_free_percent_tendance#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_infos_display#;">
 			<span
@@ -149,13 +151,13 @@
 			<span
 				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
 				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
-			<span id="hdd#id#"></span>
+			<span id="hdd#id#" data-hdd-free-percent-tendance="#hdd_free_percent_tendance#"></span>
 		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
 			<span
 				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
 				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
-			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+			<span id="cpu#id#"></span><span id="cpu_temp#id#" data-cpu-temp-tendance="#cpu_temp_tendance#"></span>
 		</div>
 		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
 			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
@@ -264,9 +266,12 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
-				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+				// Construire l'icône HTML à partir de la classe CSS (arrow-up, arrow-down, minus)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) 
+					? ` <i style='color: var(--al-info-color) !important;' class='fas fa-${tendance}'></i>` 
+					: ''
 
-				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>${tendanceStr}`
 			}
 
 			/**
@@ -278,7 +283,7 @@
 			 * @param {string} cmdId - Command ID
 			 * @param {object} history - History stats {min, avg, max}
 			 * @param {string} tendance - Trend indicator
-			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
+			 * @param {string} prefix - Prefix text (e.g., "#memory#")
 			 * @param {string} unit - Unit (e.g., "%")
 			 * @param {boolean} reversed - If true, higher values are better
 			 * @returns {string} HTML string
@@ -291,16 +296,19 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
-				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+				// Construire l'icône HTML à partir de la classe CSS (arrow-up, arrow-down, minus)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) 
+					? ` <i style='color: var(--al-info-color) !important;' class='fas fa-${tendance}'></i>` 
+					: ''
 
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-				const unitSpan = `<span>${unit}${tendanceStr}</span>`
+				const unitSpan = `<span>${unit}</span>`
 
 				// Only add prefix if it exists and is not a placeholder
 				if (prefix && !prefix.startsWith('#')) {
-					return `${prefix}${valueSpan}${unitSpan})`
+					return `${prefix} (${valueSpan}${unitSpan}${tendanceStr})`
 				}
-				return `${valueSpan}${unitSpan}`
+				return `${valueSpan}${unitSpan}${tendanceStr}`
 			}
 
 			// ========================================
@@ -482,35 +490,38 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
+						const tendance1mn = loadAvg1mn.getAttribute('data-load-avg-1mn-tendance') || ''
 						const html1mn = buildThresholdHTML(
 							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
 							'Charge Système (1min)', '#load_avg_1mn_id#',
 							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-							'#load_avg_1mn_tendance#'
+							tendance1mn
 						)
 						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
 					}
 
 					// Load avg 5mn
 					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
 					if (loadAvg5mn) {
+						const tendance5mn = loadAvg5mn.getAttribute('data-load-avg-5mn-tendance') || ''
 						const html5mn = buildThresholdHTML(
 							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
 							'Charge Système (5min)', '#load_avg_5mn_id#',
 							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-							'#load_avg_5mn_tendance#'
+							tendance5mn
 						)
 						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
 					}
 
 					// Load avg 15mn
 					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
 					if (loadAvg15mn) {
+						const tendance15mn = loadAvg15mn.getAttribute('data-load-avg-15mn-tendance') || ''
 						const html15mn = buildThresholdHTML(
 							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
 							'Charge Système (15min)', '#load_avg_15mn_id#',
 							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-							'#load_avg_15mn_tendance#'
+							tendance15mn
 						)
 						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
@@ -535,11 +546,12 @@
 						return
 					}
 
+				const tendance = memoryEl.dataset.memoryAvailablePercentTendance || ''
 					memoryEl.innerHTML = buildPercentageHTML(
 						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
 						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
 						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-						'#memory_available_percent_tendance#', '#memory# (', '%', true
+						tendance, '#memory#', '%', true
 					)
 				} catch (e) {
 					console.error('[Monitoring] Error in initMemory:', e)
@@ -562,11 +574,12 @@
 						return
 					}
 
+					const tendance = swapEl.dataset.swapFreePercentTendance || ''
 					swapEl.innerHTML = buildPercentageHTML(
 						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
 						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
 						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-						'#swap_free_percent_tendance#', '#swap# (', '%', true
+						tendance, '#swap#', '%', true
 					)
 				} catch (e) {
 					console.error('[Monitoring] Error in initSwap:', e)
@@ -589,11 +602,12 @@
 						return
 					}
 
+					const tendance = hddEl.dataset.hddFreePercentTendance || ''
 					hddEl.innerHTML = buildPercentageHTML(
 						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
 						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
 						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+						tendance, '#hdd#', '%', true
 					)
 				} catch (e) {
 					console.error('[Monitoring] Error in initHDD:', e)
@@ -618,8 +632,13 @@
 						const high = parseFloat('#cpu_temp_colorhigh#')
 						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
 						const color = getColorStyle(temp, low, high, false)
+						const tendance = tempEl.dataset.cpuTempTendance || ''
+					// Construire l'icône HTML à partir de la classe CSS (arrow-up, arrow-down, minus)
+					const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) 
+						? ` <i style='color: var(--al-info-color) !important;' class='fas fa-${tendance}'></i>` 
+						: ''
 
-						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C</span>${tendanceStr})`
 					} else {
 						cpuEl.innerHTML = '<span>#cpu#</span>'
 					}
@@ -653,8 +672,12 @@
 					const history = safeJSONParse(dataset.persoHistory)
 					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 					const color = getColorStyle(val, low, high, false)
+				// Construire l'icône HTML à partir de la classe CSS (arrow-up, arrow-down, minus)
+				const tendanceStr = (dataset.persoTendance && dataset.persoTendance !== '' && !dataset.persoTendance.startsWith('#')) 
+					? ` <i style='color: var(--al-info-color) !important;' class='fas fa-${dataset.persoTendance}'></i>` 
+					: ''
 
-					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}</span>${tendanceStr}`
 				} catch (e) {
 					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
 				}