From e584593cb5b90b70d5a33dcfc2cfce32b2e37674 Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Mon, 19 Apr 2021 13:02:04 +0200 Subject: [PATCH] ui: factor out NodeInfoPanel 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 --- 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: [ { + xtype: 'pbsNodeInfoPanel', + bind: { + store: '{stores.usage}', + }, 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, - }, - items: [ - { - title: gettext('CPU'), - reference: 'cpu', - }, - { - title: gettext('Memory'), - reference: 'mem', - }, - { - title: gettext('Root Disk'), - reference: 'root', - }, - ], }, { xtype: 'pbsDatastoresStatistics', diff --git a/www/Makefile b/www/Makefile index 015fbfd4..4aec6e2c 100644 --- a/www/Makefile +++ b/www/Makefile @@ -82,6 +82,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', + }, + ], +});