[pbs-devel] [PATCH proxmox-backup 0/8] improve datstore ux

[pbs-devel] [PATCH proxmox-backup 0/8] improve datstore ux

[Dominik Csapak]

this series aims to improve the datastore ux by
* moving all datastore relevant settings/options/views into the
  datastore tabpanel
* adding a 'Summary' panel with some important information
* improving tab selection between datastores/browser reloads/etc.

this needs my previous series: "improve and extend admin/datastore/status api"
to work

some things are still to be improved, namely:
* multiline comments for datastores
* automatic ids for sync/verify jobs
* improved prune/gc panel (e.g. with status of last run)
* comments for backup snapshots

Dominik Csapak (8):
  api/{verify,syncjobs}: add optional datastore parameter
  ui: DataStoreContent: add 'Verify All' button
  ui: add DataStorePruneAndGC panel and add it to datastore panel
  ui: add DataStoreSummary and move Statistics into it
  ui: move sync/verify jobs to the datastores
  ui: NavigationTree: add 'Add Datastore' button below datastore list
  ui: MainView/NavigationTree: improve tree selection handling
  ui: DataStorePanel: save active tab statefully

 src/api2/admin/sync.rs        |  19 ++-
 src/api2/admin/verify.rs      |  19 ++-
 www/DataStoreContent.js       |  23 +++
 www/DataStoreNotes.js         | 104 ++++++++++++
 www/DataStorePanel.js         |  52 +++++-
 www/DataStorePruneAndGC.js    | 164 +++++++++++++++++++
 www/DataStoreStatistic.js     | 104 ------------
 www/DataStoreSummary.js       | 296 ++++++++++++++++++++++++++++++++++
 www/MainView.js               |  70 ++++----
 www/Makefile                  |   5 +-
 www/NavigationTree.js         | 101 ++++++++----
 www/config/DataStoreConfig.js | 227 --------------------------
 www/config/SyncView.js        |  14 +-
 www/config/VerifyView.js      |  20 ++-
 www/window/DataStoreEdit.js   | 147 +++++++++--------
 www/window/SyncJobEdit.js     |   6 +-
 www/window/VerifyJobEdit.js   |   6 +-
 17 files changed, 898 insertions(+), 479 deletions(-)
 create mode 100644 www/DataStoreNotes.js
 create mode 100644 www/DataStorePruneAndGC.js
 delete mode 100644 www/DataStoreStatistic.js
 create mode 100644 www/DataStoreSummary.js
 delete mode 100644 www/config/DataStoreConfig.js

-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 1/8] api/{verify, syncjobs}: add optional datastore parameter

[Dominik Csapak]

to limit the lists to the given datastores

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/api2/admin/sync.rs   | 19 +++++++++++++++++--
 src/api2/admin/verify.rs | 19 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/api2/admin/sync.rs b/src/api2/admin/sync.rs
index bea52a0a..e1072f72 100644
--- a/src/api2/admin/sync.rs
+++ b/src/api2/admin/sync.rs
@@ -15,7 +15,12 @@ use crate::tools::systemd::time::{
 
 #[api(
     input: {
-        properties: {},
+        properties: {
+            store: {
+                schema: DATASTORE_SCHEMA,
+                optional: true,
+            },
+        },
     },
     returns: {
         description: "List configured jobs and their status.",
@@ -25,13 +30,23 @@ use crate::tools::systemd::time::{
 )]
 /// List all sync jobs
 pub fn list_sync_jobs(
+    store: Option<String>,
     _param: Value,
     mut rpcenv: &mut dyn RpcEnvironment,
 ) -> Result<Vec<SyncJobStatus>, Error> {
 
     let (config, digest) = sync::config()?;
 
-    let mut list: Vec<SyncJobStatus> = config.convert_to_typed_array("sync")?;
+    let mut list: Vec<SyncJobStatus> = config
+        .convert_to_typed_array("sync")?
+        .into_iter()
+        .filter(|job: &SyncJobStatus| {
+            if let Some(store) = &store {
+                &job.store == store
+            } else {
+                true
+            }
+        }).collect();
 
     for job in &mut list {
         let last_state = JobState::load("syncjob", &job.id)
diff --git a/src/api2/admin/verify.rs b/src/api2/admin/verify.rs
index f61373a0..c5d84b43 100644
--- a/src/api2/admin/verify.rs
+++ b/src/api2/admin/verify.rs
@@ -15,7 +15,12 @@ use crate::server::UPID;
 
 #[api(
     input: {
-        properties: {},
+        properties: {
+            store: {
+                schema: DATASTORE_SCHEMA,
+                optional: true,
+            },
+        },
     },
     returns: {
         description: "List configured jobs and their status.",
@@ -25,13 +30,23 @@ use crate::server::UPID;
 )]
 /// List all verification jobs
 pub fn list_verification_jobs(
+    store: Option<String>,
     _param: Value,
     mut rpcenv: &mut dyn RpcEnvironment,
 ) -> Result<Vec<VerificationJobStatus>, Error> {
 
     let (config, digest) = verify::config()?;
 
-    let mut list: Vec<VerificationJobStatus> = config.convert_to_typed_array("verification")?;
+    let mut list: Vec<VerificationJobStatus> = config
+        .convert_to_typed_array("verification")?
+        .into_iter()
+        .filter(|job: &VerificationJobStatus| {
+            if let Some(store) = &store {
+                &job.store == store
+            } else {
+                true
+            }
+        }).collect();
 
     for job in &mut list {
         let last_state = JobState::load("verificationjob", &job.id)
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 2/8] ui: DataStoreContent: add 'Verify All' button

[Dominik Csapak]

to verify the complete datastore

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStoreContent.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
index 28dfd743..870d6328 100644
--- a/www/DataStoreContent.js
+++ b/www/DataStoreContent.js
@@ -285,6 +285,23 @@ Ext.define('PBS.DataStoreContent', {
 	    win.show();
 	},
 
+	verifyAll: function() {
+	    var view = this.getView();
+
+	    Proxmox.Utils.API2Request({
+		url: `/admin/datastore/${view.datastore}/verify`,
+		method: 'POST',
+		failure: function(response) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		},
+		success: function(response, options) {
+		    Ext.create('Proxmox.window.TaskViewer', {
+			upid: response.result.data,
+		    }).show();
+		},
+	    });
+	},
+
 	onVerify: function(view, rI, cI, item, e, rec) {
 	    let me = this;
 	    view = me.getView();
@@ -679,6 +696,12 @@ Ext.define('PBS.DataStoreContent', {
 	    iconCls: 'fa fa-refresh',
 	    handler: 'reload',
 	},
+	'-',
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Verify All'),
+	    handler: 'verifyAll',
+	},
 	'->',
 	{
 	    xtype: 'tbtext',
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 3/8] ui: add DataStorePruneAndGC panel and add it to datastore panel

[Dominik Csapak]

a simple objectgrid to display datastore gc/prune options
needs the prune inputpanel to be refactored in its own class

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStorePanel.js       |   9 ++
 www/DataStorePruneAndGC.js  | 164 ++++++++++++++++++++++++++++++++++++
 www/Makefile                |   1 +
 www/window/DataStoreEdit.js | 147 ++++++++++++++++++--------------
 4 files changed, 256 insertions(+), 65 deletions(-)
 create mode 100644 www/DataStorePruneAndGC.js

diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
index 2739614d..88ef02a8 100644
--- a/www/DataStorePanel.js
+++ b/www/DataStorePanel.js
@@ -18,6 +18,15 @@ Ext.define('PBS.DataStorePanel', {
     items: [
 	{
 	    xtype: 'pbsDataStoreContent',
+	    itemId: 'content',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	},
+	{
+	    title: gettext('Prune & Garbage collection'),
+	    xtype: 'pbsDataStorePruneAndGC',
+	    itemId: 'prunegc',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
diff --git a/www/DataStorePruneAndGC.js b/www/DataStorePruneAndGC.js
new file mode 100644
index 00000000..6ce33248
--- /dev/null
+++ b/www/DataStorePruneAndGC.js
@@ -0,0 +1,164 @@
+Ext.define('PBS.DataStorePruneAndGC', {
+    extend: 'Proxmox.grid.ObjectGrid',
+    alias: 'widget.pbsDataStorePruneAndGC',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cbindData: function(initial) {
+	let me = this;
+
+	me.datastore = encodeURIComponent(me.datastore);
+	me.url = `/api2/json/config/datastore/${me.datastore}`;
+	me.editorConfig = {
+	    url: `/api2/extjs/config/datastore/${me.datastore}`,
+	};
+	return {};
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	edit: function() { this.getView().run_editor(); },
+
+	garbageCollect: function() {
+	    let me = this;
+	    let view = me.getView();
+	    Proxmox.Utils.API2Request({
+		url: `/admin/datastore/${view.datastore}/gc`,
+		method: 'POST',
+		failure: function(response) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		},
+		success: function(response, options) {
+		    Ext.create('Proxmox.window.TaskViewer', {
+			upid: response.result.data,
+		    }).show();
+		},
+	    });
+	},
+    },
+
+    tbar: [
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Edit'),
+	    disabled: true,
+	    handler: 'edit',
+	},
+	'-',
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Start GC'),
+	    selModel: null,
+	    handler: 'garbageCollect',
+	},
+    ],
+
+    listeners: {
+	activate: function() { this.rstore.startUpdate(); },
+	destroy: function() { this.rstore.stopUpdate(); },
+	deactivate: function() { this.rstore.stopUpdate(); },
+	itemdblclick: 'edit',
+    },
+
+    rows: {
+	"gc-schedule": {
+	    required: true,
+	    defaultValue: Proxmox.Utils.NoneText,
+	    header: gettext('GC Schedule'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('GC Schedule'),
+		items: {
+		    xtype: 'pbsCalendarEvent',
+		    name: 'gc-schedule',
+		    fieldLabel: gettext("GC Schedule"),
+		    emptyText: Proxmox.Utils.noneText,
+		    deleteEmpty: true,
+		},
+	    },
+	},
+	"prune-schedule": {
+	    required: true,
+	    defaultValue: Proxmox.Utils.NoneText,
+	    header: gettext('Prune Schedule'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Schedule'),
+		items: {
+		    xtype: 'pbsCalendarEvent',
+		    name: 'prune-schedule',
+		    fieldLabel: gettext("Prune Schedule"),
+		    emptyText: Proxmox.Utils.noneText,
+		    deleteEmpty: true,
+		},
+	    },
+	},
+	"keep-last": {
+	    required: true,
+	    header: gettext('Keep Last'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		    isCreate: false,
+		},
+	    },
+	},
+	"keep-hourly": {
+	    required: true,
+	    header: gettext('Keep Hourly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-daily": {
+	    required: true,
+	    header: gettext('Keep Daily'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-weekly": {
+	    required: true,
+	    header: gettext('Keep Weekly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-monthly": {
+	    required: true,
+	    header: gettext('Keep Monthly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-yearly": {
+	    required: true,
+	    header: gettext('Keep Yearly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+    },
+});
diff --git a/www/Makefile b/www/Makefile
index e04af930..afc240c5 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -40,6 +40,7 @@ JSSRC=							\
 	VersionInfo.js					\
 	SystemConfiguration.js				\
 	Subscription.js					\
+	DataStorePruneAndGC.js				\
 	DataStorePrune.js				\
 	DataStoreStatistic.js				\
 	DataStoreContent.js				\
diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js
index ab2f3175..2499b54a 100644
--- a/www/window/DataStoreEdit.js
+++ b/www/window/DataStoreEdit.js
@@ -1,3 +1,81 @@
+Ext.define('PBS.panel.PruneInputPanel', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pbsPruneInputPanel',
+
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cbindData: function() {
+	let me = this;
+	me.isCreate = !!me.isCreate;
+	return {};
+    },
+
+    column1: [
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Last'),
+	    name: 'keep-last',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Daily'),
+	    name: 'keep-daily',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Monthly'),
+	    name: 'keep-monthly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+    ],
+    column2: [
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Hourly'),
+	    name: 'keep-hourly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Weekly'),
+	    name: 'keep-weekly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Yearly'),
+	    name: 'keep-yearly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+    ],
+
+});
 Ext.define('PBS.DataStoreEdit', {
     extend: 'Proxmox.window.Edit',
     alias: 'widget.pbsDataStoreEdit',
@@ -88,72 +166,11 @@ Ext.define('PBS.DataStoreEdit', {
 	    },
 	    {
 		title: gettext('Prune Options'),
-		xtype: 'inputpanel',
+		xtype: 'pbsPruneInputPanel',
+		cbind: {
+		    isCreate: '{isCreate}',
+		},
 		onlineHelp: 'backup_pruning',
-		column1: [
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Last'),
-			name: 'keep-last',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Daily'),
-			name: 'keep-daily',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Monthly'),
-			name: 'keep-monthly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		],
-		column2: [
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Hourly'),
-			name: 'keep-hourly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Weekly'),
-			name: 'keep-weekly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Yearly'),
-			name: 'keep-yearly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		],
 	    },
 	],
     },
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 4/8] ui: add DataStoreSummary and move Statistics into it

[Dominik Csapak]

this adds a 'Summary' panel to the datastores, similar to what we have
for PVE's nodes/guests/storages

contains an info panel with useful information, a comment field, and
the charts from the statistics panel (which can be deleted since it is
not necessary any more)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStoreNotes.js     | 104 ++++++++++++++
 www/DataStorePanel.js     |  14 +-
 www/DataStoreStatistic.js | 104 --------------
 www/DataStoreSummary.js   | 296 ++++++++++++++++++++++++++++++++++++++
 www/Makefile              |   3 +-
 5 files changed, 410 insertions(+), 111 deletions(-)
 create mode 100644 www/DataStoreNotes.js
 delete mode 100644 www/DataStoreStatistic.js
 create mode 100644 www/DataStoreSummary.js

diff --git a/www/DataStoreNotes.js b/www/DataStoreNotes.js
new file mode 100644
index 00000000..21462805
--- /dev/null
+++ b/www/DataStoreNotes.js
@@ -0,0 +1,104 @@
+Ext.define('PBS.DataStoreNotes', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pbsDataStoreNotes',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    title: gettext("Comment"),
+    bodyStyle: 'white-space:pre',
+    bodyPadding: 10,
+    scrollable: true,
+    animCollapse: false,
+
+    cbindData: function(initalConfig) {
+	let me = this;
+	me.url = `/api2/extjs/config/datastore/${me.datastore}`;
+	return { };
+    },
+
+    run_editor: function() {
+	let me = this;
+	let win = Ext.create('Proxmox.window.Edit', {
+	    title: gettext('Comment'),
+	    width: 600,
+	    resizable: true,
+	    layout: 'fit',
+	    defaultButton: undefined,
+	    items: {
+		xtype: 'textfield',
+		name: 'comment',
+		value: '',
+		hideLabel: true,
+	    },
+	    url: me.url,
+	    listeners: {
+		destroy: function() {
+		    me.load();
+		},
+	    },
+	}).show();
+	win.load();
+    },
+
+    setNotes: function(value) {
+	let me = this;
+	var data = value || '';
+	me.update(Ext.htmlEncode(data));
+
+	if (me.collapsible && me.collapseMode === 'auto') {
+	    me.setCollapsed(data === '');
+	}
+    },
+
+    load: function() {
+	var me = this;
+
+	Proxmox.Utils.API2Request({
+	    url: me.url,
+	    waitMsgTarget: me,
+	    failure: function(response, opts) {
+		me.update(gettext('Error') + " " + response.htmlStatus);
+		me.setCollapsed(false);
+	    },
+	    success: function(response, opts) {
+		me.setNotes(response.result.data.comment);
+	    },
+	});
+    },
+
+    listeners: {
+	render: function(c) {
+	    var me = this;
+	    me.getEl().on('dblclick', me.run_editor, me);
+	},
+	afterlayout: function() {
+	    let me = this;
+	    if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
+		me.setCollapsed(true);
+		me.collapseMode = ''; // only once, on initial load!
+	    }
+	},
+    },
+
+    tools: [{
+	type: 'gear',
+	handler: function() {
+	    this.up('panel').run_editor();
+	},
+    }],
+
+    collapsible: true,
+    collapseDirection: 'right',
+
+    initComponent: function() {
+	var me = this;
+
+	me.callParent();
+
+	let sp = Ext.state.Manager.getProvider();
+	me.collapseMode = sp.get('notes-collapse', 'never');
+
+	if (me.collapseMode === 'auto') {
+	    me.setCollapsed(true);
+	}
+    },
+});
diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
index 88ef02a8..a00ccd47 100644
--- a/www/DataStorePanel.js
+++ b/www/DataStorePanel.js
@@ -17,22 +17,24 @@ Ext.define('PBS.DataStorePanel', {
 
     items: [
 	{
-	    xtype: 'pbsDataStoreContent',
-	    itemId: 'content',
+	    xtype: 'pbsDataStoreSummary',
+	    title: gettext('Summary'),
+	    itemId: 'summary',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
 	},
 	{
-	    title: gettext('Prune & Garbage collection'),
-	    xtype: 'pbsDataStorePruneAndGC',
-	    itemId: 'prunegc',
+	    xtype: 'pbsDataStoreContent',
+	    itemId: 'content',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
 	},
 	{
-	    xtype: 'pbsDataStoreStatistic',
+	    title: gettext('Prune & Garbage collection'),
+	    xtype: 'pbsDataStorePruneAndGC',
+	    itemId: 'prunegc',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
diff --git a/www/DataStoreStatistic.js b/www/DataStoreStatistic.js
deleted file mode 100644
index c22640e4..00000000
--- a/www/DataStoreStatistic.js
+++ /dev/null
@@ -1,104 +0,0 @@
-Ext.define('pve-rrd-datastore', {
-    extend: 'Ext.data.Model',
-    fields: [
-	'used',
-	'total',
-	'read_ios',
-	'read_bytes',
-	'write_ios',
-	'write_bytes',
-        'io_ticks',
-	{
-	    name: 'io_delay', calculate: function(data) {
-		let ios = 0;
-		if (data.read_ios !== undefined) { ios += data.read_ios; }
-		if (data.write_ios !== undefined) { ios += data.write_ios; }
-		if (data.io_ticks === undefined) {
-		    return undefined;
-		} else if (ios === 0) {
-		    return 0;
-		}
-		return (data.io_ticks*1000.0)/ios;
-	    },
-	},
-	{ type: 'date', dateFormat: 'timestamp', name: 'time' },
-    ],
-});
-
-Ext.define('PBS.DataStoreStatistic', {
-    extend: 'Ext.panel.Panel',
-    alias: 'widget.pbsDataStoreStatistic',
-
-    title: gettext('Statistics'),
-
-    scrollable: true,
-
-    initComponent: function() {
-        var me = this;
-
-	if (!me.datastore) {
-	    throw "no datastore specified";
-	}
-
-	me.tbar = ['->', { xtype: 'proxmoxRRDTypeSelector' }];
-
-	var rrdstore = Ext.create('Proxmox.data.RRDStore', {
-	    rrdurl: "/api2/json/admin/datastore/" + me.datastore + "/rrd",
-	    model: 'pve-rrd-datastore',
-	});
-
-	me.items = {
-	    xtype: 'container',
-	    itemId: 'itemcontainer',
-	    layout: 'column',
-	    minWidth: 700,
-	    defaults: {
-		minHeight: 320,
-		padding: 5,
-		columnWidth: 1,
-	    },
-	    items: [
-		{
-		    xtype: 'proxmoxRRDChart',
-		    title: gettext('Storage usage (bytes)'),
-		    fields: ['total', 'used'],
-		    fieldTitles: [gettext('Total'), gettext('Storage usage')],
-		    store: rrdstore,
-		},
-		{
-		    xtype: 'proxmoxRRDChart',
-		    title: gettext('Transfer Rate (bytes/second)'),
-		    fields: ['read_bytes', 'write_bytes'],
-		    fieldTitles: [gettext('Read'), gettext('Write')],
-		    store: rrdstore,
-		},
-		{
-		    xtype: 'proxmoxRRDChart',
-		    title: gettext('Input/Output Operations per Second (IOPS)'),
-		    fields: ['read_ios', 'write_ios'],
-		    fieldTitles: [gettext('Read'), gettext('Write')],
-		    store: rrdstore,
-		},
-		{
-		    xtype: 'proxmoxRRDChart',
-		    title: gettext('IO Delay (ms)'),
-		    fields: ['io_delay'],
-		    fieldTitles: [gettext('IO Delay')],
-		    store: rrdstore,
-		},
-	    ],
-	};
-
-	me.listeners = {
-	    activate: function() {
-		rrdstore.startUpdate();
-	    },
-	    destroy: function() {
-		rrdstore.stopUpdate();
-	    },
-	};
-
-	me.callParent();
-    },
-
-});
diff --git a/www/DataStoreSummary.js b/www/DataStoreSummary.js
new file mode 100644
index 00000000..539075a1
--- /dev/null
+++ b/www/DataStoreSummary.js
@@ -0,0 +1,296 @@
+Ext.define('pve-rrd-datastore', {
+    extend: 'Ext.data.Model',
+    fields: [
+        'used',
+        'total',
+        'read_ios',
+        'read_bytes',
+        'write_ios',
+        'write_bytes',
+        'io_ticks',
+        {
+            name: 'io_delay', calculate: function(data) {
+                let ios = 0;
+                if (data.read_ios !== undefined) { ios += data.read_ios; }
+                if (data.write_ios !== undefined) { ios += data.write_ios; }
+                if (data.io_ticks === undefined) {
+                    return undefined;
+                } else if (ios === 0) {
+                    return 0;
+                }
+                return (data.io_ticks*1000.0)/ios;
+            },
+        },
+        { type: 'date', dateFormat: 'timestamp', name: 'time' },
+    ],
+});
+
+Ext.define('PBS.DataStoreInfo', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pbsDataStoreInfo',
+
+    viewModel: {
+	data: {
+	    countstext: '',
+	    usage: {},
+	    stillbad: 0,
+	    removedbytes: 0,
+	    mountpoint: "",
+	},
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	onLoad: function(store, data, success) {
+	    if (!success) return;
+	    let me = this;
+	    let vm = me.getViewModel();
+
+	    let counts = store.getById('counts').data.value;
+	    let storage = store.getById('storage').data.value;
+
+	    let used = Proxmox.Utils.format_size(storage.used);
+	    let total = Proxmox.Utils.format_size(storage.total);
+	    let percent = 100*storage.used/storage.total;
+	    if (storage.total === 0) {
+		percent = 0;
+	    }
+	    let used_percent = `${percent.toFixed(2)}%`;
+
+	    let usage = used_percent + ' (' +
+		Ext.String.format(gettext('{0} of {1}'),
+				  used, total) + ')';
+	    vm.set('usagetext', usage);
+	    vm.set('usage', storage.used/storage.total);
+
+	    let gcstatus = store.getById('gc-status').data.value;
+
+	    let dedup = (gcstatus['index-data-bytes'] || 0)/
+			(gcstatus['disk-bytes'] || Infinity);
+
+	    let countstext = function(count) {
+		return `${count[0]} ${gettext('Groups')}, ${count[1]} ${gettext('Snapshots')}`;
+	    };
+
+	    vm.set('ctcount', countstext(counts.ct || [0, 0]));
+	    vm.set('vmcount', countstext(counts.vm || [0, 0]));
+	    vm.set('hostcount', countstext(counts.host || [0, 0]));
+	    vm.set('deduplication', dedup.toFixed(2));
+	    vm.set('stillbad', gcstatus['still-bad']);
+	    vm.set('removedbytes', Proxmox.Utils.format_size(gcstatus['removed-bytes']));
+	},
+
+	startStore: function() { this.store.startUpdate(); },
+	stopStore: function() { this.store.stopUpdate(); },
+
+	init: function(view) {
+	    let me = this;
+	    let datastore = encodeURIComponent(view.datastore);
+	    me.store = Ext.create('Proxmox.data.ObjectStore', {
+		interval: 5*1000,
+		url: `/api2/json/admin/datastore/${datastore}/status`,
+	    });
+	    me.store.on('load', me.onLoad, me);
+	},
+    },
+
+    listeners: {
+	activate: 'startStore',
+	destroy: 'stopStore',
+	deactivate: 'stopStore',
+    },
+
+    defaults: {
+	xtype: 'pmxInfoWidget',
+    },
+
+    bodyPadding: 20,
+
+    items: [
+	{
+	    iconCls: 'fa fa-hdd-o',
+	    title: gettext('Usage'),
+	    bind: {
+		data: {
+		    usage: '{usage}',
+		    text: '{usagetext}',
+		},
+	    },
+	},
+	{
+	    xtype: 'box',
+	    html: `<b>${gettext('Backup Count')}</b>`,
+	    padding: '10 0 5 0',
+	},
+	{
+	    iconCls: 'fa fa-cube',
+	    title: gettext('CT'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{ctcount}',
+		},
+	    },
+	},
+	{
+	    iconCls: 'fa fa-building',
+	    title: gettext('Host'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{hostcount}',
+		},
+	    },
+	},
+	{
+	    iconCls: 'fa fa-desktop',
+	    title: gettext('VM'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{vmcount}',
+		},
+	    },
+	},
+	{
+	    xtype: 'box',
+	    html: `<b>${gettext('Stats from last Garbage Collection')}</b>`,
+	    padding: '10 0 5 0',
+	},
+	{
+	    iconCls: 'fa fa-compress',
+	    title: gettext('Deduplication'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{deduplication}',
+		},
+	    },
+	},
+	{
+	    iconCls: 'fa fa-trash-o',
+	    title: gettext('Removed Bytes'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{removedbytes}',
+		},
+	    },
+	},
+	{
+	    iconCls: 'fa critical fa-exclamation-triangle',
+	    title: gettext('Bad Chunks'),
+	    printBar: false,
+	    bind: {
+		data: {
+		    text: '{stillbad}',
+		},
+		visible: '{stillbad}',
+	    },
+	},
+    ],
+});
+
+Ext.define('PBS.DataStoreSummary', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pbsDataStoreSummary',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    layout: 'column',
+    scrollable: true,
+
+    bodyPadding: 5,
+    defaults: {
+	columnWidth: 1,
+	padding: 5,
+    },
+
+    tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
+
+    items: [
+	{
+	    xtype: 'container',
+	    height: 300,
+	    layout: {
+		type: 'hbox',
+		align: 'stretch',
+	    },
+	    items: [
+		{
+		    xtype: 'pbsDataStoreInfo',
+		    flex: 1,
+		    padding: '0 10 0 0',
+		    cbind: {
+			title: '{datastore}',
+			datastore: '{datastore}',
+		    },
+		},
+		{
+		    xtype: 'pbsDataStoreNotes',
+		    flex: 1,
+		    cbind: {
+			datastore: '{datastore}',
+		    },
+		},
+	    ],
+	},
+	{
+	    xtype: 'proxmoxRRDChart',
+	    title: gettext('Storage usage (bytes)'),
+	    fields: ['total', 'used'],
+	    fieldTitles: [gettext('Total'), gettext('Storage usage')],
+	},
+	{
+	    xtype: 'proxmoxRRDChart',
+	    title: gettext('Transfer Rate (bytes/second)'),
+	    fields: ['read_bytes', 'write_bytes'],
+	    fieldTitles: [gettext('Read'), gettext('Write')],
+	},
+	{
+	    xtype: 'proxmoxRRDChart',
+	    title: gettext('Input/Output Operations per Second (IOPS)'),
+	    fields: ['read_ios', 'write_ios'],
+	    fieldTitles: [gettext('Read'), gettext('Write')],
+	},
+	{
+	    xtype: 'proxmoxRRDChart',
+	    title: gettext('IO Delay (ms)'),
+	    fields: ['io_delay'],
+	    fieldTitles: [gettext('IO Delay')],
+	},
+    ],
+
+    listeners: {
+	activate: function() { this.rrdstore.startUpdate(); },
+	deactivate: function() { this.rrdstore.stopUpdate(); },
+	destroy: function() { this.rrdstore.stopUpdate(); },
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	me.rrdstore = Ext.create('Proxmox.data.RRDStore', {
+	    rrdurl: "/api2/json/admin/datastore/" + me.datastore + "/rrd",
+	    model: 'pve-rrd-datastore',
+	});
+
+	me.callParent();
+
+	Proxmox.Utils.API2Request({
+	    url: `/config/datastore/${me.datastore}`,
+	    waitMsgTarget: me.down('pbsDataStoreInfo'),
+	    success: function(response) {
+		let path = Ext.htmlEncode(response.result.data.path);
+		me.down('pbsDataStoreInfo').setTitle(`${me.datastore} (${path})`);
+		me.down('pbsDataStoreNotes').setNotes(response.result.data.comment);
+	    },
+	});
+
+	me.query('proxmoxRRDChart').forEach((chart) => {
+	    chart.setStore(me.rrdstore);
+	});
+
+	me.down('pbsDataStoreInfo').relayEvents(me, ['activate', 'deactivate']);
+    },
+});
diff --git a/www/Makefile b/www/Makefile
index afc240c5..97b9b848 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -40,9 +40,10 @@ JSSRC=							\
 	VersionInfo.js					\
 	SystemConfiguration.js				\
 	Subscription.js					\
+	DataStoreSummary.js				\
+	DataStoreNotes.js				\
 	DataStorePruneAndGC.js				\
 	DataStorePrune.js				\
-	DataStoreStatistic.js				\
 	DataStoreContent.js				\
 	DataStorePanel.js				\
 	ServerStatus.js					\
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 5/8] ui: move sync/verify jobs to the datastores

[Dominik Csapak]

add the datastore as parameter for the store, remove
the datastore selector for the edit windows and give the datastore
to it instead

also remove the autostart from the rstore, since we only want to start
it when we change to the relevant tab

and add icons for all other datastore tabs

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStorePanel.js       | 20 ++++++++++++++++++++
 www/NavigationTree.js       | 12 ------------
 www/config/SyncView.js      | 14 ++++++++++++--
 www/config/VerifyView.js    | 20 ++++++++++++--------
 www/window/SyncJobEdit.js   |  6 ++++--
 www/window/VerifyJobEdit.js |  6 ++++--
 6 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
index a00ccd47..059fd3b2 100644
--- a/www/DataStorePanel.js
+++ b/www/DataStorePanel.js
@@ -20,6 +20,7 @@ Ext.define('PBS.DataStorePanel', {
 	    xtype: 'pbsDataStoreSummary',
 	    title: gettext('Summary'),
 	    itemId: 'summary',
+	    iconCls: 'fa fa-book',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
@@ -27,6 +28,7 @@ Ext.define('PBS.DataStorePanel', {
 	{
 	    xtype: 'pbsDataStoreContent',
 	    itemId: 'content',
+	    iconCls: 'fa fa-th',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
@@ -35,6 +37,23 @@ Ext.define('PBS.DataStorePanel', {
 	    title: gettext('Prune & Garbage collection'),
 	    xtype: 'pbsDataStorePruneAndGC',
 	    itemId: 'prunegc',
+	    iconCls: 'fa fa-trash-o',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	},
+	{
+	    iconCls: 'fa fa-refresh',
+	    itemId: 'syncjobs',
+	    xtype: 'pbsSyncJobView',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	},
+	{
+	    iconCls: 'fa fa-check-circle',
+	    itemId: 'verifyjobs',
+	    xtype: 'pbsVerifyJobView',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
@@ -42,6 +61,7 @@ Ext.define('PBS.DataStorePanel', {
 	{
 	    itemId: 'acl',
 	    xtype: 'pbsACLView',
+	    iconCls: 'fa fa-unlock',
 	    aclExact: true,
 	    cbind: {
 		aclPath: '{aclPath}',
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index a2835cd2..c37e2613 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -36,18 +36,6 @@ Ext.define('PBS.store.NavigationStore', {
 			path: 'pbsRemoteView',
 			leaf: true,
 		    },
-		    {
-			text: gettext('Sync Jobs'),
-			iconCls: 'fa fa-refresh',
-			path: 'pbsSyncJobView',
-			leaf: true,
-		    },
-		    {
-			text: gettext('Verify Jobs'),
-			iconCls: 'fa fa-check-circle',
-			path: 'pbsVerifyJobView',
-			leaf: true,
-		    },
 		    {
 			text: gettext('Subscription'),
 			iconCls: 'fa fa-support',
diff --git a/www/config/SyncView.js b/www/config/SyncView.js
index 679624a8..513ddd9b 100644
--- a/www/config/SyncView.js
+++ b/www/config/SyncView.js
@@ -12,6 +12,7 @@ Ext.define('pbs-sync-jobs-status', {
 		return endtime - task.starttime;
 	    },
 	},
+	'comment',
     ],
     idProperty: 'id',
     proxy: {
@@ -34,7 +35,9 @@ Ext.define('PBS.config.SyncJobView', {
 
 	addSyncJob: function() {
 	    let me = this;
+	    let view = me.getView();
             Ext.create('PBS.window.SyncJobEdit', {
+		datastore: view.datastore,
 		listeners: {
 		    destroy: function() {
 			me.reload();
@@ -50,6 +53,7 @@ Ext.define('PBS.config.SyncJobView', {
 	    if (selection.length < 1) return;
 
             Ext.create('PBS.window.SyncJobEdit', {
+		datastore: view.datastore,
                 id: selection[0].data.id,
 		listeners: {
 		    destroy: function() {
@@ -147,15 +151,22 @@ Ext.define('PBS.config.SyncJobView', {
 	    return Proxmox.Utils.render_timestamp(value);
 	},
 
+	startStore: function() { this.getView().getStore().rstore.startUpdate(); },
+	stopStore: function() { this.getView().getStore().rstore.stopUpdate(); },
+
 	reload: function() { this.getView().getStore().rstore.load(); },
 
 	init: function(view) {
+	    view.getStore().rstore.getProxy().setExtraParams({
+		store: view.datastore,
+	    });
 	    Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
 	},
     },
 
     listeners: {
-	activate: 'reload',
+	activate: 'startStore',
+	deactivate: 'stopStore',
 	itemdblclick: 'editSyncJob',
     },
 
@@ -168,7 +179,6 @@ Ext.define('PBS.config.SyncJobView', {
 	    type: 'update',
 	    storeid: 'pbs-sync-jobs-status',
 	    model: 'pbs-sync-jobs-status',
-	    autoStart: true,
 	    interval: 5000,
 	},
     },
diff --git a/www/config/VerifyView.js b/www/config/VerifyView.js
index db541cf4..7e391226 100644
--- a/www/config/VerifyView.js
+++ b/www/config/VerifyView.js
@@ -12,6 +12,7 @@ Ext.define('pbs-verify-jobs-status', {
 		return endtime - task.starttime;
 	    },
 	},
+	'comment',
     ],
     idProperty: 'id',
     proxy: {
@@ -34,7 +35,9 @@ Ext.define('PBS.config.VerifyJobView', {
 
 	addVerifyJob: function() {
 	    let me = this;
+	    let view = me.getView();
 	    Ext.create('PBS.window.VerifyJobEdit', {
+		datastore: view.datastore,
 		listeners: {
 		    destroy: function() {
 			me.reload();
@@ -50,6 +53,7 @@ Ext.define('PBS.config.VerifyJobView', {
 	    if (selection.length < 1) return;
 
 	    Ext.create('PBS.window.VerifyJobEdit', {
+		datastore: view.datastore,
 		id: selection[0].data.id,
 		listeners: {
 		    destroy: function() {
@@ -147,15 +151,22 @@ Ext.define('PBS.config.VerifyJobView', {
 	    return Proxmox.Utils.render_timestamp(value);
 	},
 
+	startStore: function() { this.getView().getStore().rstore.startUpdate(); },
+	stopStore: function() { this.getView().getStore().rstore.stopUpdate(); },
+
 	reload: function() { this.getView().getStore().rstore.load(); },
 
 	init: function(view) {
+	    view.getStore().rstore.getProxy().setExtraParams({
+		store: view.datastore,
+	    });
 	    Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
 	},
     },
 
     listeners: {
-	activate: 'reload',
+	activate: 'startStore',
+	deactivate: 'stopStore',
 	itemdblclick: 'editVerifyJob',
     },
 
@@ -168,7 +179,6 @@ Ext.define('PBS.config.VerifyJobView', {
 	    type: 'update',
 	    storeid: 'pbs-verify-jobs-status',
 	    model: 'pbs-verify-jobs-status',
-	    autoStart: true,
 	    interval: 5000,
 	},
     },
@@ -219,12 +229,6 @@ Ext.define('PBS.config.VerifyJobView', {
 	    renderer: Ext.String.htmlEncode,
 	    dataIndex: 'id',
 	},
-	{
-	    header: gettext('Datastore'),
-	    width: 100,
-	    sortable: true,
-	    dataIndex: 'store',
-	},
 	{
 	    header: gettext('Days valid'),
 	    width: 125,
diff --git a/www/window/SyncJobEdit.js b/www/window/SyncJobEdit.js
index 08209e64..2002c2fa 100644
--- a/www/window/SyncJobEdit.js
+++ b/www/window/SyncJobEdit.js
@@ -53,10 +53,12 @@ Ext.define('PBS.window.SyncJobEdit', {
 		name: 'remote-store',
 	    },
 	    {
-		fieldLabel: gettext('Local Datastore'),
-		xtype: 'pbsDataStoreSelector',
+		xtype: 'hiddenfield',
 		allowBlank: false,
 		name: 'store',
+		cbind: {
+		    value: '{datastore}',
+		},
 	    },
 	],
 
diff --git a/www/window/VerifyJobEdit.js b/www/window/VerifyJobEdit.js
index 9d29eba7..ddcf355b 100644
--- a/www/window/VerifyJobEdit.js
+++ b/www/window/VerifyJobEdit.js
@@ -41,10 +41,12 @@ Ext.define('PBS.window.VerifyJobEdit', {
 		},
 	    },
 	    {
-		fieldLabel: gettext('Datastore'),
-		xtype: 'pbsDataStoreSelector',
+		xtype: 'hiddenfield',
 		allowBlank: false,
 		name: 'store',
+		cbind: {
+		    value: '{datastore}',
+		},
 	    },
 	    {
 		xtype: 'proxmoxintegerfield',
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 6/8] ui: NavigationTree: add 'Add Datastore' button below datastore list

[Dominik Csapak]

and make 'Datastore' unclickable

since we have all options and information on the relevant datastore panels,
we do not need a datastore config anymore (besides the creation,
which we add here)

this also fixes the sorted insertion and removal of new/old datastores

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/Makefile                  |   1 -
 www/NavigationTree.js         |  67 ++++++++--
 www/config/DataStoreConfig.js | 227 ----------------------------------
 3 files changed, 54 insertions(+), 241 deletions(-)
 delete mode 100644 www/config/DataStoreConfig.js

diff --git a/www/Makefile b/www/Makefile
index 97b9b848..75d389d9 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -17,7 +17,6 @@ JSSRC=							\
 	config/ACLView.js				\
 	config/SyncView.js				\
 	config/VerifyView.js				\
-	config/DataStoreConfig.js			\
 	window/UserEdit.js				\
 	window/UserPassword.js				\
 	window/VerifyJobEdit.js				\
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index c37e2613..54e0adeb 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -1,3 +1,13 @@
+Ext.define('pbs-datastore-list', {
+    extend: 'Ext.data.Model',
+    fields: ['name', 'comment'],
+    proxy: {
+        type: 'proxmox',
+        url: "/api2/json/admin/datastore",
+    },
+    idProperty: 'store',
+});
+
 Ext.define('PBS.store.NavigationStore', {
     extend: 'Ext.data.TreeStore',
 
@@ -76,9 +86,18 @@ Ext.define('PBS.store.NavigationStore', {
 	    {
 		text: gettext('Datastore'),
 		iconCls: 'fa fa-archive',
-		path: 'pbsDataStoreConfig',
+		id: 'datastores',
 		expanded: true,
+		expandable: false,
 		leaf: false,
+		children: [
+		    {
+			text: gettext('Add Datastore'),
+			iconCls: 'fa fa-plus-circle',
+			leaf: true,
+			id: 'addbutton',
+		    },
+		],
 	    },
 	],
     },
@@ -110,21 +129,23 @@ Ext.define('PBS.view.main.NavigationTree', {
 
 	    let root = view.getStore().getRoot();
 
-	    // FIXME: newly added always get appended to the end..
-	    records.sort((a, b) => {
-		if (a.id > b.id) return 1;
-		if (a.id < b.id) return -1;
-		return 0;
-	    });
+	    records.sort((a, b) => a.id.localeCompare(b.id));
 
-	    var list = root.findChild('path', 'pbsDataStoreConfig', false);
+	    var list = root.findChild('id', 'datastores', false);
 	    var length = records.length;
 	    var lookup_hash = {};
-	    for (var i = 0; i < length; i++) {
+	    let j = 0;
+	    for (let i = 0; i < length; i++) {
 		let name = records[i].id;
 		lookup_hash[name] = true;
-		if (!list.findChild('text', name, false)) {
-		    list.appendChild({
+
+		while (name.localeCompare(list.getChildAt(j).data.text) > 0 &&
+		       (j + 1) < list.childNodes.length) {
+		    j++;
+		}
+
+		if (list.getChildAt(j).data.text.localeCompare(name) !== 0) {
+		    list.insertChild(j, {
 			text: name,
 			path: `DataStore-${name}`,
 			iconCls: 'fa fa-database',
@@ -136,12 +157,32 @@ Ext.define('PBS.view.main.NavigationTree', {
 	    var erase_list = [];
 	    list.eachChild(function(node) {
 		let name = node.data.text;
-		if (!lookup_hash[name]) {
+		if (!lookup_hash[name] && node.data.id !== 'addbutton') {
 		    erase_list.push(node);
 		}
 	    });
 
-	    Ext.Array.forEach(erase_list, function(node) { node.erase(); });
+	    Ext.Array.forEach(erase_list, function(node) { list.removeChild(node, true); });
+	},
+    },
+
+    listeners: {
+	itemclick: function(tl, info) {
+	    if (info.node.data.id === 'datastores') {
+		return false;
+	    }
+	    if (info.node.data.id === 'addbutton') {
+		let me = this;
+		Ext.create('PBS.DataStoreEdit', {
+		    listeners: {
+			destroy: function() {
+			    me.rstore.reload();
+			},
+		    },
+		}).show();
+		return false;
+	    }
+	    return true;
 	},
     },
 
diff --git a/www/config/DataStoreConfig.js b/www/config/DataStoreConfig.js
deleted file mode 100644
index 440feea5..00000000
--- a/www/config/DataStoreConfig.js
+++ /dev/null
@@ -1,227 +0,0 @@
-Ext.define('pbs-datastore-list', {
-    extend: 'Ext.data.Model',
-    fields: ['name', 'comment'],
-    proxy: {
-        type: 'proxmox',
-	url: "/api2/json/admin/datastore",
-    },
-    idProperty: 'store',
-});
-
-Ext.define('pbs-data-store-config', {
-    extend: 'Ext.data.Model',
-    fields: [
-	'name', 'path', 'comment', 'gc-schedule', 'prune-schedule',
-	'keep-last', 'keep-hourly', 'keep-daily',
-	'keep-weekly', 'keep-monthly', 'keep-yearly',
-    ],
-    proxy: {
-        type: 'proxmox',
-	url: "/api2/json/config/datastore",
-    },
-    idProperty: 'name',
-});
-
-Ext.define('PBS.DataStoreConfig', {
-    extend: 'Ext.grid.GridPanel',
-    alias: 'widget.pbsDataStoreConfig',
-
-    title: gettext('Datastore Configuration'),
-
-    controller: {
-	xclass: 'Ext.app.ViewController',
-
-	createDataStore: function() {
-	    let me = this;
-	    Ext.create('PBS.DataStoreEdit', {
-		listeners: {
-		    destroy: function() {
-			me.reload();
-		    },
-		},
-	    }).show();
-	},
-
-	editDataStore: function() {
-	    let me = this;
-	    let view = me.getView();
-	    let selection = view.getSelection();
-	    if (selection.length < 1) return;
-
-	    let name = encodeURIComponent(selection[0].data.name);
-	    Ext.create('PBS.DataStoreEdit', {
-		name: name,
-		listeners: {
-		    destroy: function() {
-			me.reload();
-		    },
-		},
-	    }).show();
-	},
-
-	onVerify: function() {
-	    var view = this.getView();
-
-	    let rec = view.selModel.getSelection()[0];
-	    if (!(rec && rec.data)) return;
-	    let data = rec.data;
-
-	    Proxmox.Utils.API2Request({
-		url: `/admin/datastore/${data.name}/verify`,
-		method: 'POST',
-		failure: function(response) {
-		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-		},
-		success: function(response, options) {
-		    Ext.create('Proxmox.window.TaskViewer', {
-			upid: response.result.data,
-		    }).show();
-		},
-	    });
-	},
-
-	garbageCollect: function() {
-	    let me = this;
-	    let view = me.getView();
-	    let selection = view.getSelection();
-	    if (selection.length < 1) return;
-
-	    let name = encodeURIComponent(selection[0].data.name);
-	    Proxmox.Utils.API2Request({
-		url: `/admin/datastore/${name}/gc`,
-		method: 'POST',
-		failure: function(response) {
-		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-		},
-		success: function(response, options) {
-		    Ext.create('Proxmox.window.TaskViewer', {
-			upid: response.result.data,
-		    }).show();
-		},
-	    });
-	},
-
-	reload: function() { this.getView().getStore().rstore.load(); },
-
-	init: function(view) {
-	    Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
-	},
-    },
-
-    store: {
-	type: 'diff',
-	autoDestroy: true,
-	autoDestroyRstore: true,
-	sorters: 'name',
-	rstore: {
-	    type: 'update',
-	    storeid: 'pbs-data-store-config',
-	    model: 'pbs-data-store-config',
-	    autoStart: true,
-	    interval: 10000,
-	},
-    },
-
-    tbar: [
-	{
-	    xtype: 'proxmoxButton',
-	    selModel: false,
-	    text: gettext('Create'),
-	    handler: 'createDataStore',
-	},
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Edit'),
-	    disabled: true,
-	    handler: 'editDataStore',
-	},
-	// remove_btn
-	'-',
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Verify'),
-	    disabled: true,
-	    handler: 'onVerify',
-	},
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Start GC'),
-	    disabled: true,
-	    handler: 'garbageCollect',
-	},
-    ],
-
-    columns: [
-	{
-	    header: gettext('Name'),
-	    sortable: true,
-	    dataIndex: 'name',
-	    flex: 1,
-	},
-	{
-	    header: gettext('Path'),
-	    sortable: true,
-	    dataIndex: 'path',
-	    flex: 1,
-	},
-	{
-	    header: gettext('GC Schedule'),
-	    sortable: false,
-	    width: 120,
-	    dataIndex: 'gc-schedule',
-	},
-	{
-	    header: gettext('Prune Schedule'),
-	    sortable: false,
-	    width: 120,
-	    dataIndex: 'prune-schedule',
-	},
-	{
-	    header: gettext('Keep'),
-	    columns: [
-		{
-		    text: gettext('Last'),
-		    dataIndex: 'keep-last',
-		    width: 70,
-		},
-		{
-		    text: gettext('Hourly'),
-		    dataIndex: 'keep-hourly',
-		    width: 70,
-		},
-		{
-		    text: gettext('Daily'),
-		    dataIndex: 'keep-daily',
-		    width: 70,
-		},
-		{
-		    text: gettext('Weekly'),
-		    dataIndex: 'keep-weekly',
-		    width: 70,
-		},
-		{
-		    text: gettext('Monthly'),
-		    dataIndex: 'keep-monthly',
-		    width: 70,
-		},
-		{
-		    text: gettext('Yearly'),
-		    dataIndex: 'keep-yearly',
-		    width: 70,
-		},
-	    ],
-	},
-	{
-	    header: gettext('Comment'),
-	    sortable: false,
-	    dataIndex: 'comment',
-	    renderer: Ext.String.htmlEncode,
-	    flex: 2,
-	},
-    ],
-
-    listeners: {
-	activate: 'reload',
-	itemdblclick: 'editDataStore',
-    },
-});
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 7/8] ui: MainView/NavigationTree: improve tree selection handling

[Dominik Csapak]

this fixes some bugs related to selection handling in the treelist:
* datastores were not selected after a reload
* reloading when in a tabpanel on any tab but the first, would
  not select a treenode
* changing between datastores on any tab but the first would
  not select the same tab on the new datastore

fixed those by mostly rewriting the changePath handling for
datastores and tabpanels in general

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/MainView.js       | 70 ++++++++++++++++++++++---------------------
 www/NavigationTree.js | 22 ++++++++++++--
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/www/MainView.js b/www/MainView.js
index cfd19058..7998e535 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -67,46 +67,48 @@ Ext.define('PBS.MainView', {
 	    var contentpanel = me.lookupReference('contentpanel');
 	    var lastpanel = contentpanel.getLayout().getActiveItem();
 
-	    var obj;
-	    if (PBS.Utils.isDataStorePath(path)) {
-		let datastore = PBS.Utils.getDataStoreFromPath(path);
-		obj = contentpanel.add({
-		    xtype: 'pbsDataStorePanel',
-		    nodename: 'localhost',
-		    datastore,
-		});
-	    } else {
-		obj = contentpanel.add({
-		    xtype: path,
-		    nodename: 'localhost',
-		    border: false,
-		});
-	    }
+	    let tabChangeListener = function(tp, newc, oldc) {
+		let newpath = path;
 
-	    var treelist = me.lookupReference('navtree');
-
-	    treelist.suspendEvents();
-	    if (subpath === undefined) {
-		treelist.select(path);
-	    } else {
-		treelist.select(path + ':' + subpath);
-	    }
-	    treelist.resumeEvents();
+		// only add the subpath part for the
+		// non-default tabs
+		if (tp.items.findIndex('id', newc.id) !== 0) {
+		    newpath += `:${newc.getItemId()}`;
+		}
 
-	    if (Ext.isFunction(obj.setActiveTab)) {
-		obj.setActiveTab(subpath || 0);
-		obj.addListener('tabchange', function(tabpanel, newc, oldc) {
-		    var newpath = path;
+		me.redirectTo(newpath);
+	    };
 
-		    // only add the subpath part for the
-		    // non-default tabs
-		    if (tabpanel.items.findIndex('id', newc.id) !== 0) {
-			newpath += ":" + newc.getItemId();
+	    let xtype = path;
+	    var obj;
+	    let datastore;
+	    if (PBS.Utils.isDataStorePath(path)) {
+		datastore = PBS.Utils.getDataStoreFromPath(path);
+		if (lastpanel && lastpanel.xtype === 'pbsDataStorePanel' && !subpath) {
+		    let activeTab = lastpanel.getActiveTab();
+		    let newpath = path;
+		    if (lastpanel.items.indexOf(activeTab) !== 0) {
+			subpath = activeTab.getItemId();
+			newpath += `:${subpath}`;
 		    }
-
 		    me.redirectTo(newpath);
-		});
+		}
+		xtype = 'pbsDataStorePanel';
 	    }
+	    obj = contentpanel.add({
+		xtype,
+		datastore,
+		nodename: 'localhost',
+		border: false,
+		activeTab: subpath || 0,
+		listeners: {
+		    tabchange: tabChangeListener,
+		},
+	    });
+
+	    var treelist = me.lookupReference('navtree');
+
+	    treelist.select(path, true);
 
 	    contentpanel.setActiveItem(obj);
 
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 54e0adeb..6524a5c3 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -163,6 +163,12 @@ Ext.define('PBS.view.main.NavigationTree', {
 	    });
 
 	    Ext.Array.forEach(erase_list, function(node) { list.removeChild(node, true); });
+
+	    if (view.pathToSelect !== undefined) {
+		let path = view.pathToSelect;
+		delete view.pathToSelect;
+		view.select(path, true);
+	    }
 	},
     },
 
@@ -186,10 +192,20 @@ Ext.define('PBS.view.main.NavigationTree', {
 	},
     },
 
-    select: function(path) {
+    select: function(path, silent) {
 	var me = this;
-	var item = me.getStore().findRecord('path', path, 0, false, true, true);
-	me.setSelection(item);
+	if (me.rstore.isLoaded()) {
+	    if (silent) {
+		me.suspendEvents(false);
+	    }
+	    var item = me.getStore().findRecord('path', path, 0, false, true, true);
+	    me.setSelection(item);
+	    if (silent) {
+		me.resumeEvents(true);
+	    }
+	} else {
+	    me.pathToSelect = path;
+	}
     },
 
     animation: false,
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 8/8] ui: DataStorePanel: save active tab statefully

[Dominik Csapak]

so that the last selected tab for datastores will get selected
the next time any datastore is selected, even across browser
reloads

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStorePanel.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
index 059fd3b2..0da94361 100644
--- a/www/DataStorePanel.js
+++ b/www/DataStorePanel.js
@@ -10,6 +10,25 @@ Ext.define('PBS.DataStorePanel', {
 	};
     },
 
+    stateId: 'pbs-datastore-panel',
+    stateful: true,
+
+    stateEvents: ['tabchange'],
+
+    applyState: function(state) {
+	let me = this;
+	if (state.tab !== undefined) {
+	    me.setActiveTab(state.tab);
+	}
+    },
+
+    getState: function() {
+	let me = this;
+	return {
+	    tab: me.getActiveTab().getItemId(),
+	};
+    },
+
     border: false,
     defaults: {
 	border: false,
-- 
2.20.1

[pbs-devel] applied-series: [PATCH proxmox-backup 0/8] improve datstore ux

[Thomas Lamprecht]

On 27.10.20 16:20, Dominik Csapak wrote:
> this series aims to improve the datastore ux by
> * moving all datastore relevant settings/options/views into the
>   datastore tabpanel
> * adding a 'Summary' panel with some important information
> * improving tab selection between datastores/browser reloads/etc.
> 
> this needs my previous series: "improve and extend admin/datastore/status api"
> to work
> 
> some things are still to be improved, namely:
> * multiline comments for datastores
> * automatic ids for sync/verify jobs
> * improved prune/gc panel (e.g. with status of last run)
> * comments for backup snapshots
> 
> Dominik Csapak (8):
>   api/{verify,syncjobs}: add optional datastore parameter
>   ui: DataStoreContent: add 'Verify All' button
>   ui: add DataStorePruneAndGC panel and add it to datastore panel
>   ui: add DataStoreSummary and move Statistics into it
>   ui: move sync/verify jobs to the datastores
>   ui: NavigationTree: add 'Add Datastore' button below datastore list
>   ui: MainView/NavigationTree: improve tree selection handling
>   ui: DataStorePanel: save active tab statefully
> 
>  src/api2/admin/sync.rs        |  19 ++-
>  src/api2/admin/verify.rs      |  19 ++-
>  www/DataStoreContent.js       |  23 +++
>  www/DataStoreNotes.js         | 104 ++++++++++++
>  www/DataStorePanel.js         |  52 +++++-
>  www/DataStorePruneAndGC.js    | 164 +++++++++++++++++++
>  www/DataStoreStatistic.js     | 104 ------------
>  www/DataStoreSummary.js       | 296 ++++++++++++++++++++++++++++++++++
>  www/MainView.js               |  70 ++++----
>  www/Makefile                  |   5 +-
>  www/NavigationTree.js         | 101 ++++++++----
>  www/config/DataStoreConfig.js | 227 --------------------------
>  www/config/SyncView.js        |  14 +-
>  www/config/VerifyView.js      |  20 ++-
>  www/window/DataStoreEdit.js   | 147 +++++++++--------
>  www/window/SyncJobEdit.js     |   6 +-
>  www/window/VerifyJobEdit.js   |   6 +-
>  17 files changed, 898 insertions(+), 479 deletions(-)
>  create mode 100644 www/DataStoreNotes.js
>  create mode 100644 www/DataStorePruneAndGC.js
>  delete mode 100644 www/DataStoreStatistic.js
>  create mode 100644 www/DataStoreSummary.js
>  delete mode 100644 www/config/DataStoreConfig.js
> 



applied series, much thanks! FYI, pushed the following small patches on top:

ui: datastore summary: clarify that it's a deduplication factor
ui: datastore: used fixed-width icons for summary
ui: datastore: change GC/Prune title and buttons a bit
ui: datastore: add confirmation message to verify all


Some possible additions and thoughts:

* warning on summary if no GC, prune or verify job is configured (especially verify should
  be an warning-triangle, the other could be "notice-exclamation-mark" level)

* The "Removed Bytes" in the summary is a bit strange to me, I'd rather drop it

* make the backup count thing aligned like a table, with the Groups and Snapshots as column
  header, and maybe a "Total" row at the end with all summed up

* not sure where we'd put the only recently added "verify_new" datastore option, it could be
  possible to rename "Verify Jobs" to "Verification" and add a option panel over the jobs one,
  would only host that setting for now, though.

* onlineHelp buttons for all panels and their edit dialogs please (@Dylan, @Oguz, @all)