Merge pull request #23 from Meliox/integration-eremem

Host summary layout optimization

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,26 +328,86 @@ 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"
+		else
+			lastItemId="thermalCpu"
+		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"
 		fi
+		
+		# Move the node summary box into its own container
+		sed -i "/^\s*nodeStatus: nodeStatus,/ {
+			:a
+			/items: \[/ !{N;ba;}
+			a\
+			\\
+		{\n\
+		    xtype: 'container',\n\
+		    itemId: 'summarycontainer',\n\
+		    layout: 'column',\n\
+		    minWidth: 700,\n\
+		    defaults: {\n\
+				minHeight: 350,\n\
+				padding: 5,\n\
+				columnWidth: 1,\n\
+		    },\n\
+		    items: [\n\
+				nodeStatus,\n\
+		    ]\n\
+		},
+		}" "$pvemanagerlibjs"
+		
+		# Deactivate the original box instance
+		sed -i "/^\s*nodeStatus: nodeStatus,/ {
+			:a
+			/itemId: 'itemcontainer',/ !{N;ba;}
+			n;
+			:b
+			/nodeStatus,/ !{N;bb;}
+			s/nodeStatus/\/\/nodeStatus/
+		}" "$pvemanagerlibjs"
 
 		msg "New temperature display items added to the summary panel in \"$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.x)
 
 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.
 
@@ -30,7 +30,7 @@ Or use git clone.
 Adjustments are available in the first part of the script, where paths can be edited, cpucore offset and display information.
 
 ## Nag screen deactivation
-(Tested compatibility: 7.x & 8.0)
+(Tested compatibility: 7.x, 8.0.x, 8.1.x)
 This bash script installs a modification to the Proxmox Virtual Environment (PVE) web user interface (UI) which deactivates the subscription nag screen.
 
 The script provides two options: `install` and `uninstall`. The `install` option installs the modification, while the `uninstall` option removes it by copying the backup files to their original location.