[pbs-devel] [PATCH proxmox-backup 1/6] ui: add tabs for remotes and move s3 endpoint config to it

[Christian Ebner]

As the s3 endpoint configuration might be considered a remote, move
it to the remotes menu item of the sidebar. To distinguish between
remote Proxmox Backup Server instances and S3 endpoints, create a
tabbed panel.

Further, rename current `Remotes` to `Remote Proxmox Backup Servers`
to distinguish between them.

Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
 www/Makefile                  |  1 +
 www/NavigationTree.js         |  8 +----
 www/config/RemoteView.js      |  2 +-
 www/config/RemotesOverview.js | 55 +++++++++++++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 www/config/RemotesOverview.js

diff --git a/www/Makefile b/www/Makefile
index 4a5cd1ff1..0c081d27f 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -60,6 +60,7 @@ JSSRC=							\
 	config/UserView.js				\
 	config/TokenView.js				\
 	config/RemoteView.js				\
+	config/RemotesOverview.js			\
 	config/TrafficControlView.js			\
 	config/ACLView.js				\
 	config/S3ClientView.js				\
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 6944c78f9..351500e78 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -53,7 +53,7 @@ Ext.define('PBS.store.NavigationStore', {
                     {
                         text: gettext('Remotes'),
                         iconCls: 'fa fa-server',
-                        path: 'pbsRemoteView',
+                        path: 'pbsRemotesOverview',
                         leaf: true,
                     },
                     {
@@ -80,12 +80,6 @@ Ext.define('PBS.store.NavigationStore', {
                         path: 'pbsSubscription',
                         leaf: true,
                     },
-                    {
-                        text: gettext('S3 Remotes'),
-                        iconCls: 'fa fa-cloud-upload',
-                        path: 'pbsS3ClientView',
-                        leaf: true,
-                    },
                 ],
             },
             {
diff --git a/www/config/RemoteView.js b/www/config/RemoteView.js
index ae1e0e90c..8b6d76fad 100644
--- a/www/config/RemoteView.js
+++ b/www/config/RemoteView.js
@@ -36,7 +36,7 @@ Ext.define('PBS.config.RemoteView', {
     stateful: true,
     stateId: 'grid-remotes',
 
-    title: gettext('Remotes'),
+    title: gettext('Remote Proxmox Backup Servers'),
 
     tools: [PBS.Utils.get_help_tool('backup-remote')],
 
diff --git a/www/config/RemotesOverview.js b/www/config/RemotesOverview.js
new file mode 100644
index 000000000..97004f060
--- /dev/null
+++ b/www/config/RemotesOverview.js
@@ -0,0 +1,55 @@
+Ext.define('PBS.config.RemotesOverview', {
+    extend: 'Ext.tab.Panel',
+    alias: 'widget.pbsRemotesOverview',
+
+    title: gettext('Remotes'),
+
+    stateId: 'pbs-remotes-panel',
+    stateful: true,
+
+    stateEvents: ['tabchange'],
+
+    applyState: function (state) {
+        let me = this;
+        if (state.tab !== undefined && me.rendered) {
+            me.setActiveTab(state.tab);
+        } else if (state.tab) {
+            // if we are not rendered yet, defer setting the activetab
+            setTimeout(function () {
+                me.setActiveTab(state.tab);
+            }, 10);
+        }
+    },
+
+    getState: function () {
+        let me = this;
+        return {
+            tab: me.getActiveTab().getItemId(),
+        };
+    },
+
+    border: false,
+    defaults: {
+        border: false,
+    },
+
+    items: [
+        {
+            xtype: 'pbsRemoteView',
+            iconCls: 'fa fa-server',
+        },
+        {
+            xtype: 'pbsS3ClientView',
+            iconCls: 'fa fa-cloud-upload',
+        },
+    ],
+
+    initComponent: function () {
+        let me = this;
+        // remove invalid activeTab settings
+        if (me.activeTab && !me.items.some((item) => item.itemId === me.activeTab)) {
+            delete me.activeTab;
+        }
+        me.callParent();
+    },
+});
-- 
2.47.2