[pbs-devel] [PATCH proxmox-backup 4/6] ui: factor out NodeInfoPanel

[Dominik Csapak]

so that Dashboard.js will be less cluttered when we add more information
there.

No functional change, but reworked the fingerprint button disabling to
use a property of the view instead of a viewmodel

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/Dashboard.js      | 123 ++--------------------------------
 www/Makefile          |   1 +
 www/panel/NodeInfo.js | 151 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 156 insertions(+), 119 deletions(-)
 create mode 100644 www/panel/NodeInfo.js

diff --git a/www/Dashboard.js b/www/Dashboard.js
index 52107a8e..88f3cd5d 100644
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -69,72 +69,6 @@ Ext.define('PBS.Dashboard', {
 	    me.lookup('subscription').setSubStatus(subStatus);
 	},
 
-	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;
-	    viewmodel.set('fingerprint', res.info.fingerprint || Proxmox.Utils.unknownText);
-
-	    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);
-	},
-
-	showFingerPrint: function() {
-	    let me = this;
-	    let vm = me.getViewModel();
-	    let fingerprint = vm.get('fingerprint');
-	    Ext.create('Ext.window.Window', {
-		modal: true,
-		width: 600,
-		title: gettext('Fingerprint'),
-		layout: 'form',
-		bodyPadding: '10 0',
-		items: [
-		    {
-			xtype: 'textfield',
-			inputId: 'fingerprintField',
-			value: fingerprint,
-			editable: false,
-		    },
-		],
-		buttons: [
-		    {
-			xtype: 'button',
-			iconCls: 'fa fa-clipboard',
-			handler: function(b) {
-			    var el = document.getElementById('fingerprintField');
-			    el.select();
-			    document.execCommand("copy");
-			},
-			text: gettext('Copy'),
-		    },
-		    {
-			text: gettext('Ok'),
-			handler: function() {
-			    this.up('window').close();
-			},
-		    },
-		],
-	    }).show();
-	},
-
 	updateTasks: function(store, records, success) {
 	    if (!success) return;
 	    let me = this;
@@ -182,31 +116,14 @@ Ext.define('PBS.Dashboard', {
 
     viewModel: {
 	data: {
-	    fingerprint: "",
 	    days: 30,
 	},
 
 	formulas: {
-	    disableFPButton: (get) => get('fingerprint') === "",
 	    sinceEpoch: (get) => (Date.now()/1000 - get('days') * 24*3600).toFixed(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',
-		},
-		listeners: {
-		    load: 'updateUsageStats',
-		},
-	    },
 	    subscription: {
 		storeid: 'dash-subscription',
 		type: 'update',
@@ -271,43 +188,11 @@ Ext.define('PBS.Dashboard', {
 
     items: [
 	{
-	    height: 250,
-	    iconCls: 'fa fa-tasks',
-	    title: gettext('Server Resources'),
-	    bodyPadding: '0 20 0 20',
-	    tools: [
-		{
-		    xtype: 'button',
-		    text: gettext('Show Fingerprint'),
-		    handler: 'showFingerPrint',
-		    bind: {
-			disabled: '{disableFPButton}',
-		    },
-		},
-	    ],
-	    layout: {
-		type: 'hbox',
-		align: 'center',
-	    },
-	    defaults: {
-		xtype: 'proxmoxGauge',
-		spriteFontSize: '20px',
-		flex: 1,
+	    xtype: 'pbsNodeInfoPanel',
+	    bind: {
+		store: '{stores.usage}',
 	    },
-	    items: [
-		{
-		    title: gettext('CPU'),
-		    reference: 'cpu',
-		},
-		{
-		    title: gettext('Memory'),
-		    reference: 'mem',
-		},
-		{
-		    title: gettext('Root Disk'),
-		    reference: 'root',
-		},
-	    ],
+	    height: 250,
 	},
 	{
 	    xtype: 'pbsDatastoresStatistics',
diff --git a/www/Makefile b/www/Makefile
index 2b847e74..e01b8ddf 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -81,6 +81,7 @@ JSSRC=							\
 	panel/AccessControl.js				\
 	panel/StorageAndDisks.js			\
 	panel/UsageChart.js				\
+	panel/NodeInfo.js				\
 	ZFSList.js					\
 	DirectoryList.js				\
 	LoginView.js					\
diff --git a/www/panel/NodeInfo.js b/www/panel/NodeInfo.js
new file mode 100644
index 00000000..ca9ebb21
--- /dev/null
+++ b/www/panel/NodeInfo.js
@@ -0,0 +1,151 @@
+Ext.define('PBS.NodeInfoPanel', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pbsNodeInfoPanel',
+
+    iconCls: 'fa fa-tasks',
+    title: gettext('Server Resources'),
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	showFingerPrint: function() {
+	    let me = this;
+	    let view = me.getView();
+	    let fingerprint = view.fingerprint;
+	    Ext.create('Ext.window.Window', {
+		modal: true,
+		width: 600,
+		title: gettext('Fingerprint'),
+		layout: 'form',
+		bodyPadding: '10 0',
+		items: [
+		    {
+			xtype: 'textfield',
+			inputId: 'fingerprintField',
+			value: fingerprint,
+			editable: false,
+		    },
+		],
+		buttons: [
+		    {
+			xtype: 'button',
+			iconCls: 'fa fa-clipboard',
+			handler: function(b) {
+			    var el = document.getElementById('fingerprintField');
+			    el.select();
+			    document.execCommand("copy");
+			},
+			text: gettext('Copy'),
+		    },
+		    {
+			text: gettext('Ok'),
+			handler: function() {
+			    this.up('window').close();
+			},
+		    },
+		],
+	    }).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',
+	    reference: 'fpButton',
+	    text: gettext('Show Fingerprint'),
+	    handler: 'showFingerPrint',
+	    disabled: true,
+	},
+    ],
+
+    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('Root Disk'),
+	    reference: 'root',
+	},
+    ],
+});
-- 
2.20.1