ui: add TaskButton in header

opens a grid with the running tasks and a shortcut the the node tasks

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/MainView.js b/www/MainView.js
index cb7a81df7843908b02c542a9f2656f3868be1756..1dd315bd8d5d31af6c0704563f023e0e0b72ea40 100644 (file)
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -224,6 +224,10 @@ Ext.define('PBS.MainView', {
                    href: '/docs/index.html',
                    margin: '0 5 0 0',
                },
+               {
+                   xtype: 'pbsTaskButton',
+                   margin: '0 5 0 0',
+               },
                {
                    reference: 'logoutButton',
                    xtype: 'button',

diff --git a/www/Makefile b/www/Makefile
index b205f6775cda5174f4e8f46271ed6cafbb5a3022..f75082b1777f76572a3d41cbd4eeecfcca8956ed 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -9,6 +9,7 @@ JSSRC=                                                  \
        form/RemoteSelector.js                          \
        form/DataStoreSelector.js                       \
        data/RunningTasksStore.js                       \
+       button/TaskButton.js                            \
        config/UserView.js                              \
        config/RemoteView.js                            \
        config/ACLView.js                               \

diff --git a/www/button/TaskButton.js b/www/button/TaskButton.js
new file mode 100644 (file)
index 0000000..67cc147
--- /dev/null
+++ b/www/button/TaskButton.js
@@ -0,0 +1,92 @@
+Ext.define('PBS.TaskButton', {
+    extend: 'Ext.button.Button',
+    alias: 'widget.pbsTaskButton',
+
+    config: {
+       badgeText: '0',
+       badgeCls: '',
+    },
+
+    iconCls: 'fa fa-list',
+    userCls: 'pmx-has-badge',
+    text: gettext('Tasks'),
+
+    setText: function(value) {
+       let me = this;
+       me.realText = value;
+       let badgeText = me.getBadgeText();
+       let badgeCls = me.getBadgeCls();
+       let text = `${value} <span class="pmx-button-badge ${badgeCls}">${badgeText}</span>`;
+       return me.callParent([text]);
+    },
+
+    getText: function() {
+       let me = this;
+       return me.realText;
+    },
+
+    setBadgeText: function(value) {
+       let me = this;
+       me.badgeText = value.toString();
+       return me.setText(me.getText());
+    },
+
+    setBadgeCls: function(value) {
+       let me = this;
+       let res = me.callParent([value]);
+       let badgeText = me.getBadgeText();
+       me.setBadgeText(badgeText);
+       return res;
+    },
+
+    handler: function() {
+       let me = this;
+       if (me.grid.isVisible()) {
+           me.grid.setVisible(false);
+       } else {
+           me.grid.showBy(me, 'tr-br');
+       }
+    },
+
+    initComponent: function() {
+       let me = this;
+
+       me.grid = Ext.create({
+           xtype: 'pbsRunningTasks',
+           title: '',
+           hideHeaders: false,
+           floating: true,
+
+           width: 600,
+
+           bbar: [
+               '->',
+               {
+                   xtype: 'button',
+                   text: gettext('Show All Tasks'),
+                   handler: function() {
+                       var mainview = me.up('mainview');
+                       mainview.getController().redirectTo('pbsServerAdministration:tasks');
+                       me.grid.hide();
+                   },
+               },
+           ],
+
+           listeners: {
+               'taskopened': function() {
+                   me.grid.hide();
+               },
+           },
+       });
+       me.callParent();
+       me.mon(me.grid.getStore().rstore, 'load', function(store, records, success) {
+           if (!success) return;
+
+           let count = records.length;
+           let text = count > 9 ? '9+' : count.toString();
+           let cls = count > 0 ? 'active': '';
+           me.setBadgeText(text);
+           me.setBadgeCls(cls);
+       });
+    },
+});

diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index e634cfc151ca4336de3f7132390d1baace563d7a..551d1d11afec867806a156cb817f289be86de2af 100644 (file)
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -190,3 +190,22 @@ p.logs {
     visibility: hidden;
     width: 5px;
 }
+
+.pmx-has-badge .x-btn-inner {
+    padding: 0 0 0 5px;
+    min-width: 24px;
+}
+
+.pmx-button-badge {
+    display: inline-block;
+    font-weight: bold;
+    border-radius: 20px;
+    background-color: #AAA;
+    padding: 2px 3px;
+    min-width: 24px;
+    line-height: 1em;
+}
+
+.pmx-button-badge.active {
+    background-color: #F00;
+}

diff --git a/www/dashboard/RunningTasks.js b/www/dashboard/RunningTasks.js
index e31218efaf4bce3f80d4f1aceec2a38fce3655e3..4c1d4d12f8dd664d25ee69b70af37fc281ec019e 100644 (file)
--- a/www/dashboard/RunningTasks.js
+++ b/www/dashboard/RunningTasks.js
@@ -18,6 +18,8 @@ Ext.define('PBS.RunningTasks', {
                upid: record.data.upid,
                endtime: record.data.endtime,
            }).show();
+
+           view.fireEvent('taskopened', view, record.data.upid);
        },
 
        openTaskItemDblClick: function(grid, record) {