ui: add 'show connection information' button for datastores

this has a similar functionality as the 'show fingerprint' button,
but for repository strings that are needed e.g. for the cli

included with and without the current user for convenience

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
 [ TL: squash in window title rename and iconCls fix for light-mode ]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/Makefile b/www/Makefile
index 04c12b318e9eabb33d642025f4d41326e6bc21c7..be7e27abefb0f6f836cde52068e95041c9bc81da 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -86,6 +86,7 @@ JSSRC=                                                        \
        window/VerifyAll.js                             \
        window/ZFSCreate.js                             \
        window/InfluxDbEdit.js                          \
+       window/DatastoreRepoInfo.js                     \
        dashboard/DataStoreStatistics.js                \
        dashboard/LongestTasks.js                       \
        dashboard/RunningTasks.js                       \

diff --git a/www/Utils.js b/www/Utils.js
index 7592d1bd958b1e112c97784671c76cc75713881b..f464b250f15f1bf02cde2edbcf64836378b34471 100644 (file)
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -751,5 +751,4 @@ Ext.define('PBS.Utils', {
 
        return options.join(', ');
     },
-
 });

diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index d67e81cca07953c937d1913820c189defa2210d6..9299c03f59d7a619c5d0bf5f649be72be57e1895 100644 (file)
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -218,7 +218,24 @@ Ext.define('PBS.DataStoreSummary', {
        padding: 5,
     },
 
-    tbar: ['->', { xtype: 'proxmoxRRDTypeSelector' }],
+    tbar: [
+       {
+           xtype: 'button',
+           text: gettext('Show Connection Information'),
+           handler: function() {
+               let me = this;
+               let datastore = me.up('panel').datastore;
+               Ext.create('PBS.window.DatastoreRepoInfo', {
+                   datastore,
+                   autoShow: true,
+               });
+           },
+       },
+       '->',
+       {
+           xtype: 'proxmoxRRDTypeSelector',
+       },
+    ],
 
     items: [
        {

diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
new file mode 100644 (file)
index 0000000..a4e5bbc
--- /dev/null
+++ b/www/window/DatastoreRepoInfo.js
@@ -0,0 +1,126 @@
+Ext.define('PBS.window.DatastoreRepoInfo', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.pbsDatastoreRepoInfo',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    title: gettext('Connection Information'),
+
+    modal: true,
+    resizable: false,
+    width: 600,
+    layout: 'anchor',
+    bodyPadding: 10,
+
+    cbindData: function() {
+       let me = this;
+       let host = window.location.hostname;
+       let hostname = host;
+       if (window.location.port.toString() !== "8007") {
+           host += `:${window.location.port}`;
+       }
+       let datastore = me.datastore;
+       let user = Proxmox.UserName;
+       let repository = `${host}:${datastore}`;
+       let repositoryWithUser = `${user}@${host}:${datastore}`;
+
+       return {
+           datastore,
+           hostname,
+           repository,
+           repositoryWithUser,
+       };
+    },
+
+    defaults: {
+       xtype: 'pbsCopyField',
+       labelWidth: 120,
+    },
+
+    items: [
+       {
+           fieldLabel: gettext('Datastore'),
+           cbind: {
+               value: '{datastore}',
+           },
+       },
+       {
+           fieldLabel: gettext('Hostname/IP'),
+           cbind: {
+               value: '{hostname}',
+           },
+       },
+       {
+           xtype: 'displayfield',
+           value: '',
+           labelWidth: 500,
+           fieldLabel: gettext('Repository for CLI and API'),
+           padding: '10 0 0 0',
+       },
+       {
+           fieldLabel: gettext('Repository'),
+           cbind: {
+               value: '{repository}',
+           },
+       },
+       {
+           fieldLabel: gettext('With Current User'),
+           cbind: {
+               value: '{repositoryWithUser}',
+           },
+       },
+    ],
+    buttons: [
+       {
+           xtype: 'proxmoxHelpButton',
+           onlineHelp: 'client_repository',
+           hidden: false,
+       },
+       '->',
+       {
+           text: gettext('Ok'),
+           handler: function() {
+               this.up('window').close();
+           },
+       },
+    ],
+});
+
+Ext.define('PBS.form.CopyField', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pbsCopyField',
+
+    layout: 'hbox',
+
+    items: [
+       {
+           xtype: 'textfield',
+           itemId: 'inputField',
+           editable: false,
+           flex: 1,
+       },
+       {
+           xtype: 'button',
+           margin: '0 0 0 10',
+           iconCls: 'fa fa-clipboard x-btn-icon-el-default-toolbar-small',
+           baseCls: 'x-btn',
+           cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+           handler: function() {
+               let me = this;
+               let field = me.up('pbsCopyField');
+               let el = field.getComponent('inputField')?.inputEl;
+               if (!el?.dom) {
+                   return;
+               }
+               el.dom.select();
+               document.execCommand("copy");
+           },
+           text: gettext('Copy'),
+       },
+    ],
+
+    initComponent: function() {
+       let me = this;
+       me.callParent();
+       me.getComponent('inputField').setValue(me.value);
+    },
+});