[pbs-devel] [PATCH proxmox-backup 0/6] make node info panel similar to pve

[pbs-devel] [PATCH proxmox-backup 0/6] make node info panel similar to pve

[Dominik Csapak]

depends on a bumped widget-toolkit after the patches from
https://lists.proxmox.com/pipermail/pve-devel/2021-April/047694.html
are applied

Dominik Csapak (6):
  api2/types: add necessary types for node status
  api2/nodes/status: use NodeStatus struct
  api2/node/status: extend node status
  ui: factor out NodeInfoPanel
  ui: panel/NodeInfo: make it like in pve
  ui: window/Settings: add summarycolumns settings

 src/api2/node/status.rs  | 112 ++++++++++++------------
 src/api2/types/mod.rs    |  98 ++++++++++++++++++++-
 www/Dashboard.js         | 139 ++++--------------------------
 www/Makefile             |   1 +
 www/ServerStatus.js      |  13 +++
 www/datastore/Summary.js |  11 +++
 www/panel/NodeInfo.js    | 180 +++++++++++++++++++++++++++++++++++++++
 www/window/Settings.js   |  26 ++++++
 8 files changed, 398 insertions(+), 182 deletions(-)
 create mode 100644 www/panel/NodeInfo.js

-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 1/6] api2/types: add necessary types for node status

[Dominik Csapak]

we want to use concrete types instead of value

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/api2/types/mod.rs | 49 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/api2/types/mod.rs b/src/api2/types/mod.rs
index 19186ea2..ac4957ac 100644
--- a/src/api2/types/mod.rs
+++ b/src/api2/types/mod.rs
@@ -751,9 +751,8 @@ impl Default for GarbageCollectionStatus {
     }
 }
 
-
 #[api()]
-#[derive(Serialize, Deserialize)]
+#[derive(Default, Serialize, Deserialize)]
 /// Storage space usage information.
 pub struct StorageStatus {
     /// Total space (bytes).
@@ -1504,3 +1503,49 @@ pub struct JobScheduleStatus {
     #[serde(skip_serializing_if="Option::is_none")]
     pub last_run_endtime: Option<i64>,
 }
+
+#[api]
+#[derive(Serialize, Deserialize, Default)]
+#[serde(rename_all = "kebab-case")]
+/// Node memory usage counters
+pub struct NodeMemoryCounters {
+    /// Total memory
+    pub total: u64,
+    /// Used memory
+    pub used: u64,
+    /// Free memory
+    pub free: u64,
+}
+
+#[api]
+#[derive(Serialize,Deserialize,Default)]
+#[serde(rename_all = "kebab-case")]
+/// Contains general node information such as the fingerprint`
+pub struct NodeInformation {
+    /// The SSL Fingerprint
+    pub fingerprint: String,
+}
+
+#[api(
+    properties: {
+        memory: {
+            type: NodeMemoryCounters,
+        },
+        root: {
+            type: StorageStatus,
+        },
+        info: {
+            type: NodeInformation,
+        }
+    },
+)]
+#[derive(Serialize, Deserialize, Default)]
+#[serde(rename_all = "kebab-case")]
+/// The Node status
+pub struct NodeStatus {
+    pub memory: NodeMemoryCounters,
+    pub root: StorageStatus,
+    /// Total CPU usage since last query.
+    pub cpu: f64,
+    pub info: NodeInformation,
+}
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 1/6] api2/types: add necessary types for node status

[Thomas Lamprecht]

On 19.04.21 13:02, Dominik Csapak wrote:
> we want to use concrete types instead of value
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/api2/types/mod.rs | 49 +++++++++++++++++++++++++++++++++++++++++--
>  1 file changed, 47 insertions(+), 2 deletions(-)
> 
>

applied, thanks!

[pbs-devel] [PATCH proxmox-backup 2/6] api2/nodes/status: use NodeStatus struct

[Dominik Csapak]

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/api2/node/status.rs | 77 +++++++++--------------------------------
 1 file changed, 17 insertions(+), 60 deletions(-)

diff --git a/src/api2/node/status.rs b/src/api2/node/status.rs
index 14d4b587..d5df05ff 100644
--- a/src/api2/node/status.rs
+++ b/src/api2/node/status.rs
@@ -2,7 +2,7 @@ use std::process::Command;
 use std::path::Path;
 
 use anyhow::{Error, format_err, bail};
-use serde_json::{json, Value};
+use serde_json::Value;
 
 use proxmox::sys::linux::procfs;
 
@@ -21,43 +21,7 @@ use crate::tools::cert::CertInfo;
         },
     },
     returns: {
-        type: Object,
-        description: "Returns node memory, CPU and (root) disk usage",
-        properties: {
-            memory: {
-                type: Object,
-                description: "node memory usage counters",
-                properties: {
-                    total: {
-                        description: "total memory",
-                        type: Integer,
-                    },
-                    used: {
-                        description: "total memory",
-                        type: Integer,
-                    },
-                    free: {
-                        description: "free memory",
-                        type: Integer,
-                    },
-                },
-            },
-            cpu: {
-                type: Number,
-                description: "Total CPU usage since last query.",
-                optional: true,
-            },
-            info: {
-                type: Object,
-                description: "contains node information",
-                properties: {
-                    fingerprint: {
-                        description: "The SSL Fingerprint",
-                        type: String,
-                    },
-                },
-            },
-        },
+        type: NodeStatus,
     },
     access: {
         permission: &Permission::Privilege(&["system", "status"], PRIV_SYS_AUDIT, false),
@@ -68,32 +32,25 @@ fn get_status(
     _param: Value,
     _info: &ApiMethod,
     _rpcenv: &mut dyn RpcEnvironment,
-) -> Result<Value, Error> {
-
+) -> Result<NodeStatus, Error> {
     let meminfo: procfs::ProcFsMemInfo = procfs::read_meminfo()?;
-    let kstat: procfs::ProcFsStat = procfs::read_proc_stat()?;
-    let disk_usage = crate::tools::disks::disk_usage(Path::new("/"))?;
+    let memory = NodeMemoryCounters {
+        total: meminfo.memtotal,
+        used: meminfo.memused,
+        free: meminfo.memfree,
+    };
 
-    // get fingerprint
-    let cert = CertInfo::new()?;
-    let fp = cert.fingerprint()?;
+    let kstat: procfs::ProcFsStat = procfs::read_proc_stat()?;
+    let cpu = kstat.cpu;
 
-    Ok(json!({
-        "memory": {
-            "total": meminfo.memtotal,
-            "used": meminfo.memused,
-            "free": meminfo.memfree,
-        },
-        "cpu": kstat.cpu,
-        "root": {
-            "total": disk_usage.total,
-            "used": disk_usage.used,
-            "free": disk_usage.avail,
-        },
-        "info": {
-            "fingerprint": fp,
+    Ok(NodeStatus {
+        memory,
+        root: crate::tools::disks::disk_usage(Path::new("/"))?,
+        cpu,
+        info: NodeInformation {
+            fingerprint: CertInfo::new()?.fingerprint()?,
         },
-    }))
+    })
 }
 
 #[api(
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 2/6] api2/nodes/status: use NodeStatus struct

[Thomas Lamprecht]

On 19.04.21 13:02, Dominik Csapak wrote:
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/api2/node/status.rs | 77 +++++++++--------------------------------
>  1 file changed, 17 insertions(+), 60 deletions(-)
> 
>

applied, thanks!

[pbs-devel] [PATCH proxmox-backup 3/6] api2/node/status: extend node status

[Dominik Csapak]

to be more on par with pve

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/api2/node/status.rs | 37 +++++++++++++++++++++++++++++++
 src/api2/types/mod.rs   | 49 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/src/api2/node/status.rs b/src/api2/node/status.rs
index d5df05ff..a82c0c8a 100644
--- a/src/api2/node/status.rs
+++ b/src/api2/node/status.rs
@@ -12,6 +12,16 @@ use crate::api2::types::*;
 use crate::config::acl::{PRIV_SYS_AUDIT, PRIV_SYS_POWER_MANAGEMENT};
 use crate::tools::cert::CertInfo;
 
+impl std::convert::From<procfs::ProcFsCPUInfo> for NodeCpuInformation {
+    fn from(info: procfs::ProcFsCPUInfo) -> Self {
+        Self {
+            model: info.model,
+            sockets: info.sockets,
+            cpus: info.cpus,
+        }
+    }
+}
+
 #[api(
     input: {
         properties: {
@@ -40,13 +50,40 @@ fn get_status(
         free: meminfo.memfree,
     };
 
+    let swap = NodeSwapCounters {
+        total: meminfo.swaptotal,
+        used: meminfo.swapused,
+        free: meminfo.swapfree,
+    };
+
     let kstat: procfs::ProcFsStat = procfs::read_proc_stat()?;
     let cpu = kstat.cpu;
+    let wait = kstat.iowait_percent;
+
+    let loadavg = procfs::Loadavg::read()?;
+    let loadavg = [loadavg.one(), loadavg.five(), loadavg.fifteen()];
+
+    let cpuinfo = procfs::read_cpuinfo()?;
+    let cpuinfo = cpuinfo.into();
+
+    let uname = nix::sys::utsname::uname();
+    let kversion = format!(
+        "{} {} {}",
+        uname.sysname(),
+        uname.release(),
+        uname.version()
+    );
 
     Ok(NodeStatus {
         memory,
+        swap,
         root: crate::tools::disks::disk_usage(Path::new("/"))?,
+        uptime: procfs::read_proc_uptime()?.0 as u64,
+        loadavg,
+        kversion,
+        cpuinfo,
         cpu,
+        wait,
         info: NodeInformation {
             fingerprint: CertInfo::new()?.fingerprint()?,
         },
diff --git a/src/api2/types/mod.rs b/src/api2/types/mod.rs
index ac4957ac..aa161fee 100644
--- a/src/api2/types/mod.rs
+++ b/src/api2/types/mod.rs
@@ -1517,6 +1517,19 @@ pub struct NodeMemoryCounters {
     pub free: u64,
 }
 
+#[api]
+#[derive(Serialize, Deserialize, Default)]
+#[serde(rename_all = "kebab-case")]
+/// Node swap usage counters
+pub struct NodeSwapCounters {
+    /// Total swap
+    pub total: u64,
+    /// Used swap
+    pub used: u64,
+    /// Free swap
+    pub free: u64,
+}
+
 #[api]
 #[derive(Serialize,Deserialize,Default)]
 #[serde(rename_all = "kebab-case")]
@@ -1526,6 +1539,19 @@ pub struct NodeInformation {
     pub fingerprint: String,
 }
 
+#[api]
+#[derive(Serialize, Deserialize, Default)]
+#[serde(rename_all = "kebab-case")]
+/// Information about the CPU
+pub struct NodeCpuInformation {
+    /// The CPU model
+    pub model: String,
+    /// The number of CPU sockets
+    pub sockets: usize,
+    /// The number of CPU cores (incl. threads)
+    pub cpus: usize,
+}
+
 #[api(
     properties: {
         memory: {
@@ -1534,6 +1560,19 @@ pub struct NodeInformation {
         root: {
             type: StorageStatus,
         },
+        swap: {
+            type: NodeSwapCounters,
+        },
+        loadavg: {
+            type: Array,
+            items: {
+                type: Number,
+                description: "the load",
+            }
+        },
+        cpuinfo: {
+            type: NodeCpuInformation,
+        },
         info: {
             type: NodeInformation,
         }
@@ -1545,7 +1584,17 @@ pub struct NodeInformation {
 pub struct NodeStatus {
     pub memory: NodeMemoryCounters,
     pub root: StorageStatus,
+    pub swap: NodeSwapCounters,
+    /// The current uptime of the server.
+    pub uptime: u64,
+    /// Load for 1, 5 and 15 minutes.
+    pub loadavg: [f64; 3],
+    /// The current kernel version.
+    pub kversion: String,
     /// Total CPU usage since last query.
     pub cpu: f64,
+    /// Total IO wait since last query.
+    pub wait: f64,
+    pub cpuinfo: NodeCpuInformation,
     pub info: NodeInformation,
 }
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 3/6] api2/node/status: extend node status

[Thomas Lamprecht]

On 19.04.21 13:02, Dominik Csapak wrote:
> to be more on par with pve
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  src/api2/node/status.rs | 37 +++++++++++++++++++++++++++++++
>  src/api2/types/mod.rs   | 49 +++++++++++++++++++++++++++++++++++++++++
>  2 files changed, 86 insertions(+)
> 
>

applied, thanks!

[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@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

[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@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

[pbs-devel] [PATCH proxmox-backup 6/6] ui: window/Settings: add summarycolumns settings

[Dominik Csapak]

like in pve

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/Dashboard.js         | 15 +++++++++++++++
 www/ServerStatus.js      | 13 +++++++++++++
 www/datastore/Summary.js | 11 +++++++++++
 www/window/Settings.js   | 26 ++++++++++++++++++++++++++
 4 files changed, 65 insertions(+)

diff --git a/www/Dashboard.js b/www/Dashboard.js
index c4d2dfa9..18f174fe 100644
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -111,6 +111,13 @@ Ext.define('PBS.Dashboard', {
 	    var sp = Ext.state.Manager.getProvider();
 	    var days = sp.get('dashboard-days') || 30;
 	    me.setDays(days, false);
+
+	    view.mon(sp, 'statechange', function(provider, key, value) {
+		if (key !== 'summarycolumns') {
+		    return;
+		}
+		Proxmox.Utils.updateColumns(view);
+	    });
 	},
     },
 
@@ -162,6 +169,12 @@ Ext.define('PBS.Dashboard', {
 	},
     },
 
+    listeners: {
+	resize: function(panel) {
+	    Proxmox.Utils.updateColumns(panel);
+	},
+    },
+
     title: gettext('Dashboard'),
 
     layout: {
@@ -170,6 +183,8 @@ Ext.define('PBS.Dashboard', {
 
     bodyPadding: '20 0 0 20',
 
+    minWidth: 700,
+
     defaults: {
 	columnWidth: 0.49,
 	xtype: 'panel',
diff --git a/www/ServerStatus.js b/www/ServerStatus.js
index 8cb9f221..d74253d5 100644
--- a/www/ServerStatus.js
+++ b/www/ServerStatus.js
@@ -186,6 +186,11 @@ Ext.define('PBS.ServerStatus', {
 	    itemId: 'itemcontainer',
 	    layout: 'column',
 	    minWidth: 700,
+	    listeners: {
+		resize: function(panel) {
+		    Proxmox.Utils.updateColumns(panel);
+		},
+	    },
 	    defaults: {
 		minHeight: 320,
 		padding: 5,
@@ -267,6 +272,14 @@ Ext.define('PBS.ServerStatus', {
 	};
 
 	me.callParent();
+
+	let sp = Ext.state.Manager.getProvider();
+	me.mon(sp, 'statechange', function(provider, key, value) {
+	    if (key !== 'summarycolumns') {
+		return;
+	    }
+	    Proxmox.Utils.updateColumns(me.getComponent('itemcontainer'));
+	});
     },
 
 });
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index 25a7b6e5..80f82409 100644
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -244,6 +244,9 @@ Ext.define('PBS.DataStoreSummary', {
 	activate: function() { this.rrdstore.startUpdate(); },
 	deactivate: function() { this.rrdstore.stopUpdate(); },
 	destroy: function() { this.rrdstore.stopUpdate(); },
+	resize: function(panel) {
+	    Proxmox.Utils.updateColumns(panel);
+	},
     },
 
     initComponent: function() {
@@ -256,6 +259,14 @@ Ext.define('PBS.DataStoreSummary', {
 
 	me.callParent();
 
+	let sp = Ext.state.Manager.getProvider();
+	me.mon(sp, 'statechange', function(provider, key, value) {
+	    if (key !== 'summarycolumns') {
+		return;
+	    }
+	    Proxmox.Utils.updateColumns(me);
+	});
+
 	Proxmox.Utils.API2Request({
 	    url: `/config/datastore/${me.datastore}`,
 	    waitMsgTarget: me.down('pbsDataStoreInfo'),
diff --git a/www/window/Settings.js b/www/window/Settings.js
index ee8464be..763cefab 100644
--- a/www/window/Settings.js
+++ b/www/window/Settings.js
@@ -30,6 +30,9 @@ Ext.define('PBS.window.Settings', {
 	    let username = sp.get('login-username') || Proxmox.Utils.noneText;
 	    me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
 
+	    let summarycolumns = sp.get('summarycolumns', 'auto');
+	    me.lookup('summarycolumns').setValue(summarycolumns);
+
 	    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
 	    settings.forEach(function(setting) {
 		let val = localStorage.getItem('pve-xterm-' + setting);
@@ -114,6 +117,12 @@ Ext.define('PBS.window.Settings', {
 		    sp.clear('login-username');
 		},
 	    },
+	    'field[reference=summarycolumns]': {
+		change: function(el, newValue) {
+		    var sp = Ext.state.Manager.getProvider();
+		    sp.set('summarycolumns', newValue);
+		},
+	    },
 	},
     },
 
@@ -174,6 +183,23 @@ Ext.define('PBS.window.Settings', {
 		    },
 		],
 	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'proxmoxKVComboBox',
+		fieldLabel: gettext('Summary/Dashboard columns') + ':',
+		labelWidth: 150,
+		stateId: 'summarycolumns',
+		reference: 'summarycolumns',
+		comboItems: [
+		    ['auto', 'auto'],
+		    ['1', '1'],
+		    ['2', '2'],
+		    ['3', '3'],
+		],
+	    },
 	],
     },
     {
-- 
2.20.1

Re: [pbs-devel] [PATCH proxmox-backup 0/6] make node info panel similar to pve

[Thomas Lamprecht]

On 19.04.21 13:02, Dominik Csapak wrote:
>   ui: factor out NodeInfoPanel
>   ui: panel/NodeInfo: make it like in pve
>   ui: window/Settings: add summarycolumns settings

waiting a bit for above ones, as IMO the current state of where graphs/status is
placed is slightly weird, or at least a bit inconsistent.

I'd rather like to think that true in calm than rushing a quite visible UI change
now, only to change/move it later again - the PBS beta time when this was no issue
is sadly over :-)