From b1c2c8154d62fc47fa29eeeaa5173a32da863eee Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Tue, 15 Mar 2022 17:05:16 +0100
Subject: [PATCH] add EOL notice component

to avoid copying the same thing to three different product's GUIs
this year..

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 src/Makefile           |  1 +
 src/css/ext6-pmx.css   |  8 ++++++++
 src/panel/EOLNotice.js | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/panel/EOLNotice.js

diff --git a/src/Makefile b/src/Makefile
index 5efe767..266b252 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -40,6 +40,7 @@ JSSRC=					\
 	button/HelpButton.js		\
 	grid/ObjectGrid.js		\
 	grid/PendingObjectGrid.js	\
+	panel/EOLNotice.js		\
 	panel/DiskList.js		\
 	panel/InputPanel.js		\
 	panel/InfoWidget.js		\
diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 97e5018..2b97cf1 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -43,6 +43,14 @@
     color: #FF6C59;
 }
 
+.pwt-eol-icon {
+    position: relative;
+    float: left;
+    margin-right: 5px;
+    font-size: 1.3em;
+    color: #FF6C59;
+}
+
 /* reduce chart legend space usage to something more sane */
 .x-legend-item {
 	padding: 0.4em 0.8em 0.4em 1.8em;
diff --git a/src/panel/EOLNotice.js b/src/panel/EOLNotice.js
new file mode 100644
index 0000000..f384bb0
--- /dev/null
+++ b/src/panel/EOLNotice.js
@@ -0,0 +1,33 @@
+// not realy a panel descendant, but its the best (existing) place for this
+Ext.define('Proxmox.EOLNotice', {
+    extend: 'Ext.Component',
+    alias: 'widget.proxmoxEOLNotice',
+
+    padding: '0 5',
+
+    config: {
+	product: '',
+	version: '',
+	eolDate: '',
+	href: '',
+    },
+
+    autoEl: {
+	tag: 'div',
+	'data-qtip': gettext("You won't get any security fixes after the End-Of-Life date. Please consider upgrading."),
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	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>
+	    <a href="${href}" target="_blank">${message} <i class="fa fa-external-link"></i></a>
+	`;
+
+	me.callParent();
+    },
+});