Improve layout of thermal state items

- move CPU summary item and make it to a logical group for CPU temperatures
- add a new group/header for drives temperatures
- disable the default limit of items per row (can be still set if needed)

pve-mod-gui-temp.sh

@@ -6,9 +6,10 @@
 ################### Configuration #############
 
 # Display configuration for HDD, NVME, CPU
-CPU_ITEMS_PER_ROW=4;
+# Set to 0 to disable line breaks
-NVME_ITEMS_PER_ROW=4;
+CPU_ITEMS_PER_ROW=0;
-HDD_ITEMS_PER_ROW=4;
+NVME_ITEMS_PER_ROW=0;
+HDD_ITEMS_PER_ROW=0;
 
 # Known CPU sensor names. They can be full or partial but should ensure unambiguous identification.
 # Should new ones be added, also update logic in configure() function.
@@ -198,12 +199,12 @@ function install_mod {
 			:a;
 			/items:/!{N;ba;}
 			:b;
-			/swap.*},/!{N;bb;}
+			/cpus.*},/!{N;bb;}
 			a\
 			\\
 	{\n\
 		itemId: 'thermalCpu',\n\
-		colspan: 1,\n\
+		colspan: 2,\n\
 		printBar: false,\n\
 		title: gettext('CPU Thermal State'),\n\
 		iconCls: 'fa fa-fw fa-thermometer-half',\n\
@@ -240,8 +241,8 @@ function install_mod {
 						})\n\
 					} catch(e) { /*_*/ }\n\
 				});\n\
-				const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? ((index + 1) % itemsPerRow === 0 ? '<br>' : ' | ') : '')});\n\
+				const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? (itemsPerRow > 0 && (index + 1) % itemsPerRow === 0 ? '<br>' : '&nbsp;| ') : '')});\n\
-				return result.length > 0 ? result.join('') : 'N/A';\n\
+				return '<div style=\"text-align: left; margin-left: 28px;\">' + (result.length > 0 ? result.join('') : 'N/A') + '</div>';\n\
 			}\n\
 		}\n\
 	},
@@ -260,7 +261,7 @@ function install_mod {
 				\\
 	{\n\
 		itemId: 'thermalHdd',\n\
-		colspan: 1,\n\
+		colspan: 2,\n\
 		printBar: false,\n\
 		title: gettext('HDD/SSD Thermal State'),\n\
 		iconCls: 'fa fa-fw fa-thermometer-half',\n\
@@ -285,8 +286,8 @@ function install_mod {
 					})\n\
 				} catch(e) { /*_*/ }\n\
 			});\n\
-			const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? ((index + 1) % itemsPerRow === 0 ? '<br>' : ' | ') : ''); });\n\
+			const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? ((index + 1) % itemsPerRow === 0 ? '<br>' : '&nbsp;| ') : ''); });\n\
-			return result.length > 0 ? result.join('') : 'N/A';\n\
+			return '<div style=\"text-align: left; margin-left: 28px;\">' + (result.length > 0 ? result.join('') : 'N/A') + '</div>';\n\
 		}\n\
 	},
 		}" "$pvemanagerlibjs"
@@ -302,7 +303,7 @@ function install_mod {
 				\\
 	{\n\
 		itemId: 'thermalNvme',\n\
-		colspan: 1,\n\
+		colspan: 2,\n\
 		printBar: false,\n\
 		title: gettext('NVMe Thermal State'),\n\
 		iconCls: 'fa fa-fw fa-thermometer-half',\n\
@@ -327,22 +328,48 @@ function install_mod {
 					})\n\
 				} catch(e) { /*_*/ }\n\
 			});\n\
-			const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? ((index + 1) % itemsPerRow === 0 ? '<br>' : ' | ') : ''); });\n\
+			const result = temps.map((strTemp, index, arr) => { return strTemp + (index + 1 < arr.length ? ((index + 1) % itemsPerRow === 0 ? '<br>' : '&nbsp;| ') : ''); });\n\
-			return result.length > 0 ? result.join('') : 'N/A';\n\
+			return '<div style=\"text-align: left; margin-left: 28px;\">' + (result.length > 0 ? result.join('') : 'N/A') + '</div>';\n\
 		}\n\
 	},
 			}" "$pvemanagerlibjs"
 		fi
 
-		if [ $enableNvmeTemp = true -a $enableHddTemp = true ]; then
+		if [ $enableNvmeTemp = true -o $enableHddTemp = true ]; then
 			sed -i "/^Ext.define('PVE.node.StatusView',/ {
 			:a;
-			/^.*{.*'thermalNvme'.*},/!{N;ba;}
+				/items:/!{N;ba;}
+				:b;
+				/'thermal.*},/!{N;bb;}
 			a\
 			\\
 	{\n\
 		xtype: 'box',\n\
-		colspan: 1,\n\
+		colspan: 2,\n\
+		html: gettext('Drive(s)'),\n\
+	},
+		}" "$pvemanagerlibjs"
+		fi
+		
+
+		# Add an empty line to separate modified items as a visual group
+		# NOTE: Check for the presence of items in the reverse order of display
+		local lastItemId=""
+		if [ $enableHddTemp = true ]; then
+			lastItemId="thermalHdd"
+		elif [ $enableNvmeTemp = true ]; then
+			lastItemId="thermalNvme"
+		fi
+		
+		if [ -n "$lastItemId" ]; then
+			sed -i "/^Ext.define('PVE.node.StatusView',/ {
+			:a;
+			/^.*{.*'$lastItemId'.*},/!{N;ba;}
+			a\
+			\\
+	{\n\
+		xtype: 'box',\n\
+		colspan: 2,\n\
 		padding: '0 0 20 0',\n\
 	},
 		}" "$pvemanagerlibjs"

readme.md

@@ -4,7 +4,7 @@ A small collection of script and mods for Proxmox
 If you find this helpful, a small donation is appreciated, [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=K8XPMSEBERH3W).
 
 ## Node temperature view
-(Tested compatibility: 7.x, 8.0.x, 8.1.3)
+(Tested compatibility: 7.x, 8.0.x, 8.1.4)
 
 This bash script installs a modification to the Proxmox Virtual Environment (PVE) web user interface (UI) to display temperature information in a flexible manner for CPU, NVME and HDDs/SSDs.