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

@@ -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		\

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;

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();
+    },
+});