ui: panel/NodeInfo: make it like in pve

this changes the node info panel to a similar layout as in pve,
with the ksm sharing and version field removed

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

diff --git a/www/Dashboard.js b/www/Dashboard.js
index 88f3cd5d52bf1c35bcbff66b8939498043f11604..c4d2dfa924d77b7102bd59cb746ee51d2ccea309 100644 (file)
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -189,14 +189,11 @@ Ext.define('PBS.Dashboard', {
     items: [
        {
            xtype: 'pbsNodeInfoPanel',
-           bind: {
-               store: '{stores.usage}',
-           },
-           height: 250,
+           height: 280,
        },
        {
            xtype: 'pbsDatastoresStatistics',
-           height: 250,
+           height: 280,
        },
        {
            xtype: 'pbsLongestTasks',

diff --git a/www/panel/NodeInfo.js b/www/panel/NodeInfo.js
index ca9ebb214a08cb10af0d61b91697943eb2497676..17bf3812d6f629f2971ad0813447a363c25e50d0 100644 (file)
--- a/www/panel/NodeInfo.js
+++ b/www/panel/NodeInfo.js
@@ -1,9 +1,24 @@
 Ext.define('PBS.NodeInfoPanel', {
-    extend: 'Ext.panel.Panel',
+    extend: 'Proxmox.panel.StatusView',
     alias: 'widget.pbsNodeInfoPanel',
 
-    iconCls: 'fa fa-tasks',
-    title: gettext('Server Resources'),
+    height: 300,
+    bodyPadding: '20 15 20 15',
+
+    layout: {
+       type: 'table',
+       columns: 2,
+       tableAttrs: {
+           style: {
+               width: '100%',
+           },
+       },
+    },
+
+    defaults: {
+       xtype: 'pmxInfoWidget',
+       padding: '0 15 5 15',
+    },
 
     controller: {
        xclass: 'Ext.app.ViewController',
@@ -46,73 +61,8 @@ Ext.define('PBS.NodeInfoPanel', {
                ],
            }).show();
        },
-
-       updateUsageStats: function(store, records, success) {
-           if (!success) {
-               return;
-           }
-           if (records === undefined || records.length < 1) {
-               return;
-           }
-           let me = this;
-           let view = me.getView();
-
-           let res = records[0].data;
-           view.fingerprint = res.info.fingerprint;
-
-           me.lookup('fpButton').setDisabled(!view.fingerprint);
-
-           let cpu = res.cpu,
-               mem = res.memory,
-               root = res.root;
-
-           var cpuPanel = me.lookup('cpu');
-           cpuPanel.updateValue(cpu);
-
-           var memPanel = me.lookup('mem');
-           memPanel.updateValue(mem.used / mem.total);
-
-           var hdPanel = me.lookup('root');
-           hdPanel.updateValue(root.used / root.total);
-       },
-
-       init: function(view) {
-           let me = this;
-
-           view.store = Ext.create('Proxmox.data.UpdateStore', {
-               interval: 3000,
-               proxy: {
-                   type: 'proxmox',
-                   url: '/api2/json/nodes/localhost/status',
-               },
-           });
-
-           me.mon(view.store, 'load', me.updateUsageStats, me);
-
-           view.store.startUpdate();
-       },
-
-       startStore: function() {
-           let me = this;
-           let view = me.getView();
-           view.store.startUpdate();
-       },
-
-       stopStore: function() {
-           let me = this;
-           let view = me.getView();
-           view.store.stopUpdate();
-       },
-    },
-
-    listeners: {
-       activate: 'startStore',
-       deactivate: 'stopStore',
-       destroy: 'stopStore',
     },
 
-    bodyPadding: '0 20 0 20',
-
     tools: [
        {
            xtype: 'button',
@@ -123,29 +73,108 @@ Ext.define('PBS.NodeInfoPanel', {
        },
     ],
 
-    layout: {
-       type: 'hbox',
-       align: 'center',
-    },
-
-    defaults: {
-       xtype: 'proxmoxGauge',
-       spriteFontSize: '20px',
-       flex: 1,
-    },
-
     items: [
        {
-           title: gettext('CPU'),
-           reference: 'cpu',
+           itemId: 'cpu',
+           iconCls: 'fa fa-fw pmx-itype-icon-processor pmx-icon',
+           title: gettext('CPU usage'),
+           valueField: 'cpu',
+           maxField: 'cpuinfo',
+           renderer: Proxmox.Utils.render_node_cpu_usage,
+       },
+       {
+           itemId: 'wait',
+           iconCls: 'fa fa-fw fa-clock-o',
+           title: gettext('IO delay'),
+           valueField: 'wait',
+       },
+       {
+           xtype: 'box',
+           colspan: 2,
+           padding: '0 0 20 0',
+       },
+       {
+           iconCls: 'fa fa-fw pmx-itype-icon-memory pmx-icon',
+           itemId: 'memory',
+           title: gettext('RAM usage'),
+           valueField: 'memory',
+           maxField: 'memory',
+           renderer: Proxmox.Utils.render_node_size_usage,
+       },
+       {
+           itemId: 'load',
+           iconCls: 'fa fa-fw fa-tasks',
+           title: gettext('Load average'),
+           printBar: false,
+           textField: 'loadavg',
        },
        {
-           title: gettext('Memory'),
-           reference: 'mem',
+           iconCls: 'fa fa-fw fa-hdd-o',
+           itemId: 'rootfs',
+           title: gettext('HD space') + '(root)',
+           valueField: 'root',
+           maxField: 'root',
+           renderer: Proxmox.Utils.render_node_size_usage,
        },
        {
-           title: gettext('Root Disk'),
-           reference: 'root',
+           iconCls: 'fa fa-fw fa-refresh',
+           itemId: 'swap',
+           printSize: true,
+           title: gettext('SWAP usage'),
+           valueField: 'swap',
+           maxField: 'swap',
+           renderer: Proxmox.Utils.render_node_size_usage,
+       },
+       {
+           xtype: 'box',
+           colspan: 2,
+           padding: '0 0 20 0',
+       },
+       {
+           itemId: 'cpus',
+           colspan: 2,
+           printBar: false,
+           title: gettext('CPU(s)'),
+           textField: 'cpuinfo',
+           renderer: Proxmox.Utils.render_cpu_model,
+           value: '',
+       },
+       {
+           itemId: 'kversion',
+           colspan: 2,
+           title: gettext('Kernel Version'),
+           printBar: false,
+           textField: 'kversion',
+           value: '',
        },
     ],
+
+    updateTitle: function() {
+       var me = this;
+       var uptime = Proxmox.Utils.render_uptime(me.getRecordValue('uptime'));
+       me.setTitle(Proxmox.NodeName + ' (' + gettext('Uptime') + ': ' + uptime + ')');
+    },
+
+    initComponent: function() {
+       let me = this;
+
+       me.rstore = Ext.create('Proxmox.data.ObjectStore', {
+           interval: 3000,
+           url: '/api2/json/nodes/localhost/status',
+           autoStart: true,
+       });
+
+       me.callParent();
+
+       me.mon(me.rstore, 'load', function(store, records, success) {
+           if (!success) {
+               return;
+           }
+
+           let info = me.getRecordValue('info');
+           me.fingerprint = info.fingerprint;
+           me.lookup('fpButton').setDisabled(!me.fingerprint);
+       });
+       me.on('destroy', function() { me.rstore.stopUpdate(); });
+    },
 });