eol notice: escalate to warning only shortly before EOL

The EOL message is positioned quite noticeable already in all our
products, being always visible. So use a notice-style for the icon
and its color until three weeks before EOL, when we switch to a
critical warning.

As it can be OK to run a, e.g., PVE 7 setup shortly before its EOL,
if, for example, one plans to replace it completely and decommission
the old one (so upgrade before EOL would be just extra work).

Using three weeks for the cut-off has no in-depth, heavily thought
out Good Reason™, but was rather chosen as it's likely to be noticed
before the actual EOL in somewhat actively maintained setups (e.g.,
admin checking in every week or two) and can give admins further
means to escalate things with higher ups. Also weeks are always 7
days, while months aren't uniform, so the former is easier to
communicate.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

debian/changelog

@@ -1,3 +1,31 @@
+proxmox-widget-toolkit (3.7.3) bullseye; urgency=medium
+
+  * apt repositories: fix typo for getting the default unknown text
+
+  * apt repositories: avoid potential type error in classifyOrigin helper
+
+ -- Proxmox Support Team <support@proxmox.com>  Tue, 13 Jun 2023 12:25:28 +0200
+
+proxmox-widget-toolkit (3.7.2) bullseye; urgency=medium
+
+  * apt repositories: actually ignore ignore-pre-upgrade-warning
+
+  * apt repositories: add classifyOrigin helper
+
+  * apt repositories: just ignore unknown info rather than throwing an error
+
+  * apt repositories: detect mixed suites before major upgrade
+
+ -- Proxmox Support Team <support@proxmox.com>  Fri, 09 Jun 2023 13:00:41 +0200
+
+proxmox-widget-toolkit (3.7.1) bullseye; urgency=medium
+
+  * tfa: paperkey: cleanup iframes for printing after window close
+
+  * apt repositoires: allow major upgrade
+
+ -- Proxmox Support Team <support@proxmox.com>  Wed, 07 Jun 2023 17:25:57 +0200
+
 proxmox-widget-toolkit (3.7.0) bullseye; urgency=medium
 
   * dark-mode:

src/css/ext6-pmx.css

@@ -113,12 +113,14 @@
     color: #3892d4;
 }
 
-.pwt-eol-icon {
+.eol-notice a:visited {
+    color: inherit;
+}
+.eol-notice > i.fa {
     position: relative;
     float: left;
     margin-right: 5px;
     font-size: 1.3em;
-    color: #FF6C59;
 }
 
 /* reduce chart legend space usage to something more sane */

src/node/APTRepositories.js

@@ -343,14 +343,15 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
 	    header: gettext('Origin'),
 	    dataIndex: 'Origin',
 	    width: 120,
-	    renderer: (value, meta, rec) => {
+	    renderer: function(value, meta, rec) {
 		if (typeof value !== 'string' || value.length === 0) {
 		    value = gettext('Other');
 		}
 		let cls = 'fa fa-fw fa-question-circle-o';
-		if (value.match(/^\s*Proxmox\s*$/i)) {
+		let originType = this.up('proxmoxNodeAPTRepositories').classifyOrigin(value);
+		if (originType === 'Proxmox') {
 		    cls = 'pmx-itype-icon pmx-itype-icon-proxmox-x';
-		} else if (value.match(/^\s*Debian\s*(:?Backports)?$/i)) {
+		} else if (originType === 'Debian') {
 		    cls = 'pmx-itype-icon pmx-itype-icon-debian-swirl';
 		}
 		return `<i class='${cls}'></i> ${value}`;
@@ -404,6 +405,16 @@ Ext.define('Proxmox.node.APTRepositories', {
 
     product: 'Proxmox VE', // default
 
+    classifyOrigin: function(origin) {
+	origin ||= '';
+	if (origin.match(/^\s*Proxmox\s*$/i)) {
+	    return 'Proxmox';
+	} else if (origin.match(/^\s*Debian\s*(:?Backports)?$/i)) {
+	    return 'Debian';
+	}
+	return 'Other';
+    },
+
     controller: {
 	xclass: 'Ext.app.ViewController',
 
@@ -450,6 +461,7 @@ Ext.define('Proxmox.node.APTRepositories', {
 	    let nosubscription = vm.get('noSubscriptionRepo');
 	    let test = vm.get('testRepo');
 	    let wrongSuites = vm.get('suitesWarning');
+	    let mixedSuites = vm.get('mixedSuites');
 
 	    if (!enterprise && !nosubscription && !test) {
 		addCritical(
@@ -467,6 +479,10 @@ Ext.define('Proxmox.node.APTRepositories', {
 		addWarn(gettext('Some suites are misconfigured'));
 	    }
 
+	    if (mixedSuites) {
+		addWarn(gettext('Detected mixed suites before upgrade'));
+	    }
+
 	    if (!activeSubscription && enterprise) {
 		addWarn(gettext('The enterprise repository is enabled, but there is no active subscription!'));
 	    }
@@ -497,6 +513,7 @@ Ext.define('Proxmox.node.APTRepositories', {
 	    product: 'Proxmox VE', // default
 	    errors: [],
 	    suitesWarning: false,
+	    mixedSuites: false, // used before major upgrade
 	    subscriptionActive: '',
 	    noSubscriptionRepo: '',
 	    enterpriseRepo: '',
@@ -569,7 +586,7 @@ Ext.define('Proxmox.node.APTRepositories', {
 		nodename: '{nodename}',
 		onlineHelp: '{onlineHelp}',
 	    },
-	    majorUpgradeAllowed: false, // TODO get release information from an API call?
+	    majorUpgradeAllowed: true, // TODO get release information from an API call?
 	    listeners: {
 		selectionchange: 'selectionChange',
 	    },
@@ -631,6 +648,11 @@ Ext.define('Proxmox.node.APTRepositories', {
 	    let digest;
 	    let suitesWarning = false;
 
+	    // Usually different suites will give errors anyways, but before a major upgrade the
+	    // current and the next suite are allowed, so it makes sense to check for mixed suites.
+	    let checkMixedSuites = false;
+	    let mixedSuites = false;
+
 	    if (success && records.length > 0) {
 		let data = records[0].data;
 		let files = data.files;
@@ -649,17 +671,23 @@ Ext.define('Proxmox.node.APTRepositories', {
 			infos[path][idx] = {
 			    origin: '',
 			    warnings: [],
+			    // Used as a heuristic to detect mixed repositories pre-upgrade. The
+			    // warning is set on all repositories that do configure the next suite.
+			    gotIgnorePreUpgradeWarning: false,
 			};
 		    }
 
 		    if (info.kind === 'origin') {
 			infos[path][idx].origin = info.message;
-		    } else if (info.kind === 'warning' ||
-			(info.kind === 'ignore-pre-upgrade-warning' && !repoGrid.majorUpgradeAllowed)
-		    ) {
+		    } else if (info.kind === 'warning') {
 			infos[path][idx].warnings.push(info);
-		    } else {
-			throw 'unknown info';
+		    } else if (info.kind === 'ignore-pre-upgrade-warning') {
+			infos[path][idx].gotIgnorePreUpgradeWarning = true;
+			if (!repoGrid.majorUpgradeAllowed) {
+			    infos[path][idx].warnings.push(info);
+			} else {
+			    checkMixedSuites = true;
+			}
 		    }
 		}
 
@@ -670,11 +698,24 @@ Ext.define('Proxmox.node.APTRepositories', {
 			repo.Path = file.path;
 			repo.Index = n;
 			if (infos[file.path] && infos[file.path][n]) {
-			    repo.Origin = infos[file.path][n].origin || Proxmox.Utils.UnknownText;
+			    repo.Origin = infos[file.path][n].origin || Proxmox.Utils.unknownText;
 			    repo.warnings = infos[file.path][n].warnings || [];
 
-			    if (repo.Enabled && repo.warnings.some(w => w.property === 'Suites')) {
-				suitesWarning = true;
+			    if (repo.Enabled) {
+				if (repo.warnings.some(w => w.property === 'Suites')) {
+				    suitesWarning = true;
+				}
+
+				let originType = me.classifyOrigin(repo.Origin);
+				// Only Proxmox and Debian repositories checked here, because the
+				// warning can be missing for others for a different reason (e.g.
+				// using 'stable' or non-Debian code names).
+				if (checkMixedSuites && repo.Types.includes('deb') &&
+				    (originType === 'Proxmox' || originType === 'Debian') &&
+				    !infos[file.path][n].gotIgnorePreUpgradeWarning
+				) {
+				    mixedSuites = true;
+				}
 			    }
 			}
 			gridData.push(repo);
@@ -690,6 +731,7 @@ Ext.define('Proxmox.node.APTRepositories', {
 
 	    vm.set('errors', errors);
 	    vm.set('suitesWarning', suitesWarning);
+	    vm.set('mixedSuites', mixedSuites);
 	    me.getController().updateState();
 	});
 

src/panel/EOLNotice.js

@@ -3,6 +3,7 @@ Ext.define('Proxmox.EOLNotice', {
     extend: 'Ext.Component',
     alias: 'widget.proxmoxEOLNotice',
 
+    userCls: 'eol-notice',
     padding: '0 5',
 
     config: {
@@ -17,14 +18,25 @@ Ext.define('Proxmox.EOLNotice', {
 	'data-qtip': gettext("You won't get any security fixes after the End-Of-Life date. Please consider upgrading."),
     },
 
+    getIconCls: function() {
+	let me = this;
+
+	const now = new Date();
+	const eolDate = new Date(me.eolDate);
+	const warningCutoff = new Date(eolDate.getTime() - (21 * 24 * 60 * 60 * 1000)); // 3 weeks
+
+	return now > warningCutoff ? 'critical fa-exclamation-triangle' : 'info-blue fa-info-circle';
+    },
+
     initComponent: function() {
 	let me = this;
 
+	let iconCls = me.getIconCls();
 	let href = me.href.startsWith('http') ? me.href : `https://${me.href}`;
 	let message = Ext.String.format(
 	    gettext('Support for {0} {1} ends on {2}'), me.product, me.version, me.eolDate);
 
-	me.html = `<i class="fa pwt-eol-icon fa-exclamation-triangle"></i>
+	me.html = `<i class="fa ${iconCls}"></i>
 	    <a href="${href}" target="_blank">${message} <i class="fa fa-external-link"></i></a>
 	`;
 

src/window/AddTfaRecovery.js

@@ -220,5 +220,6 @@ ${keyString}
 
 	printFrame.src = "data:text/html;base64," + btoa(html);
 	document.body.appendChild(printFrame);
+	me.on('destroy', () => document.body.removeChild(printFrame));
     },
 });