[pbs-devel] [PATCH proxmox-backup 5/6] ui: panel/NodeInfo: make it like in pve

[Dominik Csapak]

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 at proxmox.com>
---
 www/Dashboard.js      |   7 +-
 www/panel/NodeInfo.js | 199 ++++++++++++++++++++++++------------------
 2 files changed, 116 insertions(+), 90 deletions(-)

diff --git a/www/Dashboard.js b/www/Dashboard.js
index 88f3cd5d..c4d2dfa9 100644
--- 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 ca9ebb21..17bf3812 100644
--- 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(); });
+    },
 });
-- 
2.20.1