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>

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index e2c30c95cd2dad6793c4a36b0c55b82c11a8fd53..64b815fe48cd98f06cfab1d5d26b99437810afd9 100644 (file)
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -121,7 +121,6 @@
     float: left;
     margin-right: 5px;
     font-size: 1.3em;
-    color: #FF6C59;
 }
 
 /* reduce chart legend space usage to something more sane */

diff --git a/src/panel/EOLNotice.js b/src/panel/EOLNotice.js
index 43119d165bcaf75328579f1b1c15cbb4d48ad440..a514d1dc5245d2ba345f1a59b1a6f59ed918ddbd 100644 (file)
--- a/src/panel/EOLNotice.js
+++ b/src/panel/EOLNotice.js
@@ -18,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 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>
        `;