ui: add simple dashboard

just a starting point, code ported initially over from PMG, some
minor things are handled differently though, we have not multiple
nodes (for now) so it's very 'localhost' centric.

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

diff --git a/www/Dashboard.js b/www/Dashboard.js
new file mode 100644 (file)
index 0000000..ac7a458
--- /dev/null
+++ b/www/Dashboard.js
@@ -0,0 +1,268 @@
+Ext.define('PBS.Dashboard', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pbsDashboard',
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       openDashboardOptions: function() {
+           var me = this;
+           var viewModel = me.getViewModel();
+           Ext.create('Ext.window.Window', {
+               modal: true,
+               width: 300,
+               title: gettext('Dashboard Options'),
+               layout: {
+                   type: 'auto'
+               },
+               items: [{
+                   xtype: 'form',
+                   bodyPadding: '10 10 10 10',
+                   defaultButton: 'savebutton',
+                   items: [{
+                       xtype: 'proxmoxintegerfield',
+                       itemId: 'hours',
+                       labelWidth: 100,
+                       anchor: '100%',
+                       allowBlank: false,
+                       minValue: 1,
+                       maxValue: 24,
+                       value: viewModel.get('hours'),
+                       fieldLabel: gettext('Hours to show')
+                   }],
+                   buttons: [{
+                       text: gettext('Save'),
+                       reference: 'loginButton',
+                       formBind: true,
+                       handler: function() {
+                           var win = this.up('window');
+                           var hours = win.down('#hours').getValue();
+                           me.setHours(hours, true);
+                           win.close();
+                       }
+                   }]
+               }]
+           }).show();
+       },
+
+       setHours: function(hours, setState) {
+           var me = this;
+           var viewModel = me.getViewModel();
+           viewModel.set('hours', hours);
+           viewModel.notify();
+
+           if (setState) {
+               var sp = Ext.state.Manager.getProvider();
+               sp.set('dashboard-hours', hours);
+           }
+       },
+
+
+       updateSubscription: function(store, records, success) {
+           if (!success) {
+               return;
+           }
+           var me = this;
+           var viewmodel = me.getViewModel();
+
+           var subStatus = 2; // 2 = all good, 1 = different leves, 0 = none
+           var subLevel = "";
+       },
+
+       updateUsageStats: function(store, records, success) {
+           if (!success) {
+               return;
+           }
+           if (records === undefined || records.length < 1) {
+               return;
+           }
+           let me = this;
+           let viewmodel = me.getViewModel();
+
+           let res = records[0].data;
+
+           let cpu = res.cpu,
+               mem = res.memory,
+               hd = 0;
+
+           var cpuPanel = me.lookup('cpu');
+           cpuPanel.updateValue(cpu);
+
+           var memPanel = me.lookup('mem');
+           memPanel.updateValue(mem.used / mem.total);
+
+           //var hdPanel = me.lookup('hd');
+           //hdPanel.updateValue(hd);
+       },
+
+       init: function(view) {
+           var me = this;
+           var sp = Ext.state.Manager.getProvider();
+           var hours = sp.get('dashboard-hours') || 12;
+           me.setHours(hours, false);
+       }
+    },
+
+    viewModel: {
+       data: {
+           timespan: 300, // in seconds
+           hours: 12, // in hours
+           error_shown: false,
+           'bytes_in': 0,
+           'bytes_out': 0,
+           'avg_ptime': 0.0
+       },
+
+       stores: {
+           usage: {
+               storeid: 'dash-usage',
+               type: 'update',
+               interval: 3000,
+               autoStart: true,
+               autoLoad: true,
+               autoDestroy: true,
+               proxy: {
+                   type: 'proxmox',
+                   url: '/api2/json/nodes/localhost/status/usage'
+               },
+               listeners: {
+                   load: 'updateUsageStats'
+               }
+           },
+           subscription: {
+               storeid: 'dash-subscription',
+               type: 'update',
+               interval: 10000,
+               autoStart: true,
+               autoLoad: true,
+               autoDestroy: true,
+               proxy: {
+                   type: 'proxmox',
+                   url: '/api2/json/subscription'
+               },
+               listeners: {
+                   load: 'updateSubscription'
+               }
+           },
+       }
+    },
+
+    title: gettext('Dashboard') + ' - WIP',
+
+    layout: {
+       type: 'column'
+    },
+
+    bodyPadding: '20 0 0 20',
+
+    defaults: {
+       columnWidth: 0.49,
+       xtype: 'panel',
+       margin: '0 20 20 0'
+    },
+
+    scrollable: true,
+
+    items: [
+       {
+           height: 250,
+           iconCls: 'fa fa-tasks',
+           title: gettext('Server Resources'),
+           bodyPadding: '0 20 0 20',
+           layout: {
+               type: 'hbox',
+               align: 'center'
+           },
+           defaults: {
+               xtype: 'proxmoxGauge',
+               spriteFontSize: '20px',
+               flex: 1
+           },
+           items: [
+               {
+                   title: gettext('CPU'),
+                   reference: 'cpu'
+               },
+               {
+                   title: gettext('Memory'),
+                   reference: 'mem'
+               },
+               {
+                   title: gettext('Storage'),
+                   reference: 'hd'
+               }
+           ]
+       },
+       {
+           xtype: 'container',
+           height: 250,
+           layout: {
+               type: 'vbox',
+               align: 'stretch'
+           },
+           items: [
+               {
+                   iconCls: 'fa fa-ticket',
+                   title: 'Subscription',
+                   reference: 'subscription',
+                   xtype: 'pmgSubscriptionInfo',
+                   height: 110
+               }
+           ]
+       },
+    ]
+});
+
+Ext.define('PMG.dashboard.SubscriptionInfo', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pmgSubscriptionInfo',
+
+    data: {
+       icon: 'question-circle',
+       message: gettext('Unknown')
+    },
+
+    style: {
+       cursor: 'pointer'
+    },
+
+    setSubStatus: function(status) {
+       var me = this;
+       var data = {};
+
+       switch (status) {
+           case 2:
+               data.icon = 'check green';
+               data.message = gettext('Your subscription status is valid.');
+               break;
+           case 1: 
+               data.icon = 'exclamation-triangle yellow';
+               data.message = gettext('Warning: Your subscription levels are not the same.');
+               break;
+           case 0: 
+               data.icon = 'times-circle red';
+               data.message = gettext('You have at least one node without subscription.');
+               break;
+           default:
+               throw 'invalid subscription status';
+       }
+       me.update(data);
+    },
+    tpl: [
+       '<table style="height: 100%;" class="dash">',
+       '<tr><td class="center">',
+       '<i class="fa fa-3x fa-{icon}"></i>',
+       '</td><td class="center">{message}</td></tr>',
+       '</table>'
+    ],
+
+    listeners: {
+       click: {
+           element: 'body',
+           fn: function() {
+               var mainview = this.component.up('mainview');
+               mainview.getController().redirectTo('pmgSubscription');
+           }
+       }
+    }
+});

diff --git a/www/Makefile b/www/Makefile
index 64eb867c25f29168470ce332086e0197f4b99678..6e34c89fd3740d859dbf5ec77c95fa9405e52be7 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -13,6 +13,7 @@ JSSRC=                                                        \
        Subscription.js                                 \
        DataStoreConfig.js                              \
        ServerAdministration.js                         \
+       Dashboard.js                                    \
        NavigationTree.js                               \
        Application.js                                  \
        MainView.js

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 8903f2142393e8be4e93edd27ce24ce76f65eaf1..75587b0d2a4ecc5a7e11ecbcc2cc1936ebc0f3e3 100644 (file)
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -6,6 +6,12 @@ Ext.define('PBS.store.NavigationStore', {
     root: {
        expanded: true,
        children: [
+           {
+               text: gettext('Dashboard'),
+               iconCls: 'fa fa-tachometer',
+               path: 'pbsDashboard',
+               leaf: true
+           },
            {
                text: gettext('Configuration'),
                iconCls: 'fa fa-gears',