ui: NavigationTree: add 'Add Datastore' button below datastore list

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

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

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) => a.id.localeCompare(b.id));
-	    records.sort((a, b) => {
-		if (a.id > b.id) return 1;
-		if (a.id < b.id) return -1;
-		return 0;
-	    });
 
-	    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;
 	},
     },
 

www/config/DataStoreConfig.js

@@ -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',
-    },
-});