feat(node_info): compact UPS status row with native progress bar

Replace the one-line UPS summary with a two-row layout: pipe-separated metrics on the left and the same pmxInfoWidget progress bar used by CPU/memory/SWAP/I/O delay on the right. Derive ups.realpower from load or V×I when the UPS does not publish it, and drop non-date battery.mfr.date values such as OPEN.

Fixes #138

src/modules/node_info/files/PveMod_pvemanagerlib.js

@@ -391,7 +391,6 @@ Ext.define('PVE.node.StatusView', {
                     this.hide();
                     return '';
                 } else if (!gpuStats || !gpuStats.Graphics) {
-                    this.hide();
                     return '';
                 }
 
@@ -509,12 +508,9 @@ Ext.define('PVE.node.StatusView', {
                 }
 
                 html += '</table>';
-                if (html.indexOf('<tr>') <= 0) {
+                return html.indexOf('<tr>') > 0
-                    this.hide();
+                    ? '<div style="padding-left: 20px; box-sizing: border-box;">' + html + '</div>'
-                    return '';
+                    : '';
-                }
-                this.show();
-                return '<div style="padding-left: 20px; box-sizing: border-box;">' + html + '</div>';
             },
         },
         {
@@ -869,7 +865,6 @@ Ext.define('PVE.node.StatusView', {
                     this.hide();
                     return '';
                 } else if (!gpuStats || !gpuStats.Graphics || !gpuStats.Graphics.NVIDIA) {
-                    this.hide();
                     return '';
                 }
 
@@ -897,10 +892,8 @@ Ext.define('PVE.node.StatusView', {
                 });
                 
                 if (rows.length === 0) {
-                    this.hide();
                     return '';
                 }
-                this.show();
 
                 return '<div style="padding-left: 20px; box-sizing: border-box;"><table style="width: 100%; border-collapse: collapse; table-layout: fixed;">' + rows.join('') + '</table></div>';
             },
@@ -908,10 +901,133 @@ Ext.define('PVE.node.StatusView', {
         {
 			itemId: 'upsc',
 			colspan: 2,
-			printBar: false,
 			title: gettext('UPS Status'),
 			iconCls: 'fa fa-fw fa-battery-three-quarters',
-			textField: 'PveMod_upsInfo',
+			valueField: 'PveMod_upsInfo',
+			printBar: true,
+			warningThreshold: 1.1,
+			criticalThreshold: 1.2,
+			layout: {
+				type: 'vbox',
+				align: 'stretch',
+			},
+			items: [
+				{
+					xtype: 'component',
+					itemId: 'label',
+					data: {
+						title: '',
+						usage: '',
+						iconCls: undefined,
+					},
+					tpl: [
+						'<div class="left-aligned">',
+						'<tpl if="iconCls">',
+						'<i class="{iconCls}"></i> ',
+						'</tpl>',
+						'{title}</div>',
+					],
+				},
+				{
+					xtype: 'container',
+					layout: {
+						type: 'hbox',
+						align: 'middle',
+					},
+					items: [
+						{
+							xtype: 'component',
+							itemId: 'usageText',
+							flex: 1,
+							minWidth: 0,
+							margin: '0 16 0 0',
+						},
+						{
+							xtype: 'progressbar',
+							itemId: 'progress',
+							flex: 1,
+							minWidth: 0,
+							height: 5,
+							value: 0,
+							animate: true,
+						},
+					],
+				},
+			],
+			initComponent: function() {
+				var me = this;
+				if (!me.title) {
+					throw 'no title defined';
+				}
+				Ext.container.Container.prototype.initComponent.call(me);
+				var progress = me.down('#progress');
+				if (progress) {
+					progress.setVisible(!!me.printBar);
+				}
+				me.updateValue(me.text, me.value);
+				me.setIconCls(me.iconCls);
+			},
+			setPrintBar: function(enable) {
+				var me = this;
+				me.printBar = enable;
+				var progress = me.down('#progress');
+				if (progress) {
+					progress.setVisible(enable);
+				}
+			},
+			updateValue: function(text, usage) {
+				var me = this;
+				if (me.lastText === text && me.lastUsage === usage) {
+					return;
+				}
+				me.lastText = text;
+				me.lastUsage = usage;
+
+				var label = me.getComponent('label');
+				if (label) {
+					label.update(Ext.apply(label.data, { title: me.title, usage: '' }));
+				}
+
+				var usageText = me.down('#usageText');
+				if (usageText) {
+					if (usageText.setHtml) {
+						usageText.setHtml(text || '');
+					} else {
+						usageText.update(text || '');
+					}
+				}
+
+				var progressBar = me.down('#progress');
+				if (usage !== undefined && me.printBar && Ext.isNumeric(usage) && usage >= 0 && progressBar) {
+					progressBar.updateProgress(usage, '');
+					if (usage > me.criticalThreshold) {
+						progressBar.removeCls('warning');
+						progressBar.addCls('critical');
+					} else if (usage > me.warningThreshold) {
+						progressBar.removeCls('critical');
+						progressBar.addCls('warning');
+					} else {
+						progressBar.removeCls('warning');
+						progressBar.removeCls('critical');
+					}
+				}
+			},
+			calculate: function(used) {
+				if (!used || used.disabled === true || typeof used !== 'object') {
+					return 0;
+				}
+				let charge = NaN;
+				Object.keys(used).forEach(function(k) {
+					const row = used[k];
+					if (row && typeof row === 'object' && row['battery.charge'] != null) {
+						charge = parseFloat(row['battery.charge']);
+					}
+				});
+				if (isNaN(charge)) {
+					return 0;
+				}
+				return Math.max(0, Math.min(1, charge / 100));
+			},
 			renderer: function(value) {
 				let objValue;
 				try {
@@ -922,169 +1038,98 @@ Ext.define('PVE.node.StatusView', {
 
 				if (objValue.disabled === true) {
 					this.hide();
+					this.setPrintBar(false);
 					return '';
-                } else if (!objValue || Object.keys(objValue).length === 0) {
-                    return 'N/A';
 				}
 
-                // Helper function to get status color
+				const upsKeys = Object.keys(objValue).filter(function(k) {
-                function getStatusColor(status) {
+					return objValue[k] && typeof objValue[k] === 'object' && !Array.isArray(objValue[k]);
-                    if (!status) return '#999';
+				});
-                    const statusUpper = status.toUpperCase();
+				if (!upsKeys.length) {
-                    if (statusUpper.includes('OL')) return null;
+					this.hide();
-                    if (statusUpper.includes('OB')) return '#d9534f';
+					this.setPrintBar(false);
-                    if (statusUpper.includes('LB')) return '#d9534f';
+					return '';
-                    return '#f0ad4e';
 				}
+				this.show();
+				this.setPrintBar(true);
 
-                // Helper function to get load/charge color
-                function getPercentageColor(value, isLoad = false) {
-                    if (!value || isNaN(value)) return '#999';
-                    const num = parseFloat(value);
-                    if (isLoad) {
-                        if (num >= 80) return '#d9534f';
-                        if (num >= 60) return '#f0ad4e';
-                        return null;
-                    } else {
-                        if (num <= 20) return '#d9534f';
-                        if (num <= 50) return '#f0ad4e';
-                        return null;
-                    }
-                }
-
-                // Helper function to format runtime
 				function formatRuntime(seconds) {
-                    if (!seconds || isNaN(seconds)) return 'N/A';
+					const s = parseInt(seconds, 10);
-                    const mins = Math.floor(seconds / 60);
+					if (!s || isNaN(s)) {
-                    const secs = seconds % 60;
+						return null;
-                    return `${mins}m ${secs}s`;
+					}
+					const h = Math.floor(s / 3600);
+					const m = Math.floor((s % 3600) / 60);
+					if (h > 0) {
+						return h + 'h ' + m + 'm';
+					}
+					return m + 'm';
 				}
 
-                // Process each UPS in the data
+				function statusText(upsStatus) {
-                let allDisplayItems = [];
+					const u = String(upsStatus || '').toUpperCase();
-                
+					if (u.indexOf('LB') >= 0) {
-                Object.keys(objValue).forEach(upsKey => {
+						return { text: 'Low Battery', color: '#d9534f' };
-                    const upsData = objValue[upsKey];
+					}
-                    
+					if (u.indexOf('OB') >= 0) {
-                    // Extract key UPS information
+						return { text: 'On Battery', color: '#d9534f' };
-                    const batteryCharge = upsData['battery.charge'];
+					}
-                    const batteryRuntime = upsData['battery.runtime'];
+					if (u.indexOf('FSD') >= 0) {
-                    const inputVoltage = upsData['input.voltage'];
+						return { text: 'Shutdown', color: '#d9534f' };
-                    const upsLoad = upsData['ups.load'];
+					}
-                    const upsStatus = upsData['ups.status'];
+					if (u.indexOf('OL') >= 0) {
-                    const upsModel = upsData['ups.model'] || upsData['device.model'];
+						return {
-                    const testResult = upsData['ups.test.result'];
+							text: u.indexOf('CHRG') >= 0 ? 'Online, charging' : 'Online',
-                    const batteryChargeLow = upsData['battery.charge.low'];
+							color: null,
-                    const batteryRuntimeLow = upsData['battery.runtime.low'];
+						};
-                    const upsRealPower = upsData['ups.realpower'];
+					}
-                    const batteryMfrDate = upsData['battery.mfr.date'];
+					return { text: upsStatus || 'Unknown', color: '#f0ad4e' };
-
-                    // Main status line with all metrics
-                    let statusLine = '';
-
-                    // Status
-                    if (upsStatus) {
-                        const statusUpper = upsStatus.toUpperCase();
-                        let statusText = 'Unknown';
-                        let statusColor = '#f0ad4e';
-
-                        if (statusUpper.includes('OL')) {
-                            statusText = 'Online';
-                            statusColor = null;
-                        } else if (statusUpper.includes('OB')) {
-                            statusText = 'On Battery';
-                            statusColor = '#d9534f';
-                        } else if (statusUpper.includes('LB')) {
-                            statusText = 'Low Battery';
-                            statusColor = '#d9534f';
-                        } else {
-                            statusText = upsStatus;
-                            statusColor = '#f0ad4e';
 				}
 
-                        let statusStyle = statusColor ? ('color: ' + statusColor + ';') : '';
+				function colorize(label, color) {
-                        statusLine += 'Status: <span style="' + statusStyle + '">' + statusText + '</span>';
+					if (!color) {
-                    } else {
+						return label;
-                        statusLine += 'Status: <span>N/A</span>';
+					}
+					return '<span style="color:' + color + ';">' + label + '</span>';
 				}
 
-                    // Battery charge
+				const lines = [];
-                    if (statusLine) statusLine += ' | ';
+				upsKeys.forEach(function(upsKey) {
-                    if (batteryCharge) {
+					const upsData = objValue[upsKey] || {};
-                        const chargeColor = getPercentageColor(batteryCharge, false);
+					const charge = parseFloat(upsData['battery.charge']);
-                        let chargeStyle = chargeColor ? ('color: ' + chargeColor + ';') : '';
+					const runtime = formatRuntime(upsData['battery.runtime']);
-                        statusLine += 'Battery: <span style="' + chargeStyle + '">' + batteryCharge + '%</span>';
+					const inputVoltage = parseFloat(upsData['input.voltage']);
-                    } else {
+					const load = parseFloat(upsData['ups.load']);
-                        statusLine += 'Battery: <span>N/A</span>';
+					const watts = parseFloat(upsData['ups.realpower']);
+					const model = upsData['ups.model'] || upsData['device.model'] || upsKey;
+					const st = statusText(upsData['ups.status']);
+					const bits = [];
+					if (model) {
+						bits.push(model);
 					}
-
+					if (st.text) {
-                    // Load percentage
+						bits.push(colorize(st.text, st.color));
-                    if (statusLine) statusLine += ' | ';
-                    if (upsLoad) {
-                        const loadColor = getPercentageColor(upsLoad, true);
-                        let loadStyle = loadColor ? ('color: ' + loadColor + ';') : '';
-                        statusLine += 'Load: <span style="' + loadStyle + '">' + upsLoad + '%</span>';
-                    } else {
-                        statusLine += 'Load: <span>N/A</span>';
 					}
-
+					if (!isNaN(charge)) {
-                    // Runtime
+						bits.push('Battery ' + Math.round(charge) + '%');
-                    if (statusLine) statusLine += ' | ';
-                    if (batteryRuntime) {
-                        const runtime = parseInt(batteryRuntime);
-                        const runtimeLowThreshold = batteryRuntimeLow ? parseInt(batteryRuntimeLow) : 600;
-                        let runtimeColor = null;
-                        if (runtime <= runtimeLowThreshold / 2) runtimeColor = '#d9534f';
-                        else if (runtime <= runtimeLowThreshold) runtimeColor = '#f0ad4e';
-                        let runtimeStyle = runtimeColor ? ('color: ' + runtimeColor + ';') : '';
-                        statusLine += 'Runtime: <span style="' + runtimeStyle + '">' + formatRuntime(runtime) + '</span>';
-                    } else {
-                        statusLine += 'Runtime: <span>N/A</span>';
 					}
-
+					if (!isNaN(watts)) {
-                    // Input voltage
+						bits.push(Math.round(watts) + ' W');
-                    if (statusLine) statusLine += ' | ';
-                    if (inputVoltage) {
-                        statusLine += 'Input: <span>' + parseFloat(inputVoltage).toFixed(0) + 'V</span>';
-                    } else {
-                        statusLine += 'Input: <span>N/A</span>';
 					}
-
+					if (!isNaN(load)) {
-                    // Calculate actual watt usage
+						bits.push('Load ' + Math.round(load) + '%');
-                    if (statusLine) statusLine += ' | ';
-                    let actualWattage = null;
-                    if (upsRealPower && !isNaN(parseFloat(upsRealPower))) {
-                        actualWattage = Math.round(parseFloat(upsRealPower));
 					}
-
+					if (runtime) {
-                    // Real power (calculated watt usage)
+						bits.push(runtime + ' left');
-                    if (actualWattage !== null) {
-                        statusLine += 'Output: <span>' + actualWattage + 'W</span>';
-                    } else {
-                        statusLine += 'Output: <span>N/A</span>';
 					}
-
+					if (!isNaN(inputVoltage)) {
-                    // Append battery MFD + last test to the same line (single-line UPS summary)
+						const places = inputVoltage >= 50 ? 0 : 1;
-                    statusLine += ' | Battery MFD: ' + (batteryMfrDate || 'N/A');
+						bits.push(inputVoltage.toFixed(places) + ' V in');
-                    if (testResult && !testResult.toLowerCase().includes('no test')) {
-                        const testColor = testResult.toLowerCase().includes('passed') ? null : '#d9534f';
-                        let testStyle = testColor ? ('color: ' + testColor + ';') : '';
-                        statusLine += ' | <span style="' + testStyle + '">Test: ' + testResult + '</span>';
-                    } else {
-                        statusLine += ' | Test: N/A';
 					}
-                    
+					lines.push(bits.join(' | '));
-                    // Build UPS display with model on left, details on right
-                    let upsHtml = '<tr>';
-                    upsHtml += '<td style="padding: 2px 10px 2px 0; text-align: left; width: 30%; vertical-align: top; overflow-wrap: anywhere; word-break: break-word;">' + (upsModel || upsKey) + '</td>';
-                    upsHtml += '<td style="padding: 2px 0 2px 10px; text-align: right; width: 70%; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; white-space: normal;">' + statusLine + '</td>';
-                    upsHtml += '</tr>';
-                    
-                    allDisplayItems.push(upsHtml);
 				});
 
-                // Format the final output for all UPS devices
+				return lines.join('<br>');
-                return '<div style="padding-left: 20px; box-sizing: border-box;"><table style="width: 100%; border-collapse: collapse; table-layout: fixed;">' + allDisplayItems.join('') + '</table></div>';
 			}
 		},
         {