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>

diff --git a/www/Makefile b/www/Makefile
index 97b9b848d76f86adec3864e060f99179a90824eb..75d389d9ed797accdd08e6a9a728aad1a2d7a542 100644 (file)
--- 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 c37e26130c6099737be56a758acc93643f0f520c..54e0adeb64f96c35702f3e7bedac7b5c733a2ce0 100644 (file)
--- 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 (file)
index 440feea..0000000
--- 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',
-    },
-});