add EOL notice component

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

cherry-picked from stable-6 as we can have this in the master branch
full time

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

diff --git a/src/Makefile b/src/Makefile
index de34531f25ae6d46e1d1bd5708ec1582817ea5b4..abafc2c87d7bfc05c0e104832834acc407931146 100644 (file)
--- a/src/Makefile
+++ b/src/Makefile
@@ -50,6 +50,7 @@ JSSRC=                                        \
        grid/PendingObjectGrid.js       \
        panel/AuthView.js               \
        panel/DiskList.js               \
+       panel/EOLNotice.js              \
        panel/InputPanel.js             \
        panel/InfoWidget.js             \
        panel/LogView.js                \

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index ff035734d131b8d0bebf7787c83627a266774b1e..1d815c61e169636b84023c1d20f946d7b3397ed2 100644 (file)
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -52,6 +52,14 @@
     color: #3892d4;
 }
 
+.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 (file)
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();
+    },
+});