ui: datastore: show comment, allow to edit notes

the "comment" is the first line of the "notes" field from a manifest,
show it in the grid and allow editing the full notes.

Hack the click event listener a bit together for the right aligned
edit action button, but it works out well and is efficient (only one
event listener is much cheaper than per-buttons ones).

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/DataStoreContent.js b/www/DataStoreContent.js
index 7b4e9eaeeb54bdfdd5243020ab2d5d0a841ed623..9da18845d5b7c632546d32be9f1da1c74c794d1c 100644 (file)
--- a/www/DataStoreContent.js
+++ b/www/DataStoreContent.js
@@ -8,6 +8,7 @@ Ext.define('pbs-data-store-snapshots', {
            type: 'date',
            dateFormat: 'timestamp',
        },
+       'comment',
        'files',
        'owner',
        'verification',
@@ -342,6 +343,22 @@ Ext.define('PBS.DataStoreContent', {
            });
        },
 
+       onNotesEdit: function(view, data) {
+           let me = this;
+
+           let url = `/admin/datastore/${view.datastore}/notes`;
+           Ext.create('PBS.window.NotesEdit', {
+               url: url,
+               autoShow: true,
+               apiCallDone: () => me.reload(), // FIXME: do something more efficient?
+               extraRequestParams: {
+                   "backup-type": data["backup-type"],
+                   "backup-id": data["backup-id"],
+                   "backup-time": (data['backup-time'].getTime()/1000).toFixed(0),
+               },
+           });
+       },
+
        onForget: function(view, rI, cI, item, e, rec) {
            let me = this;
            view = this.getView();
@@ -512,6 +529,49 @@ Ext.define('PBS.DataStoreContent', {
            dataIndex: 'text',
            flex: 1,
        },
+       {
+           text: gettext('Comment'),
+           dataIndex: 'comment',
+           flex: 1,
+           renderer: (v, meta, record) => {
+               let data = record.data;
+               if (!data || data.leaf || record.parentNode.id === 'root') {
+                   return '';
+               }
+               if (v === undefined || v === null) {
+                   v = '';
+               }
+               v = Ext.String.htmlEncode(v);
+               let icon = 'fa fa-fw fa-pencil';
+
+               return `<span class="snapshot-comment-column">${v}</span>
+                   <i data-qtip="${gettext('Edit')}" style="float: right;" class="${icon}"></i>`;
+           },
+           listeners: {
+               afterrender: function(component) {
+                   // a bit of a hack, but relatively easy, cheap and works out well.
+                   // more efficient to use one handler for the whole column than for each icon
+                   component.on('click', function(tree, cell, rowI, colI, e, rec) {
+                       let el = e.target;
+                       if (el.tagName !== "I" || !el.classList.contains("fa-pencil")) {
+                           return;
+                       }
+                       let view = tree.up();
+                       let controller = view.controller;
+                       controller.onNotesEdit(view, rec.data);
+                   });
+               },
+               dblclick: function(tree, el, row, col, ev, rec) {
+                   let data = rec.data || {};
+                   if (data.leaf || rec.parentNode.id === 'root') {
+                       return;
+                   }
+                   let view = tree.up();
+                   let controller = view.controller;
+                   controller.onNotesEdit(view, rec.data);
+               },
+           },
+       },
        {
            header: gettext('Actions'),
            xtype: 'actioncolumn',

diff --git a/www/Makefile b/www/Makefile
index 75d389d9ed797accdd08e6a9a728aad1a2d7a542..cba8bed543da50dc28ecf62f31e448b4b31a49ad 100644 (file)
--- a/www/Makefile
+++ b/www/Makefile
@@ -17,17 +17,18 @@ JSSRC=                                                      \
        config/ACLView.js                               \
        config/SyncView.js                              \
        config/VerifyView.js                            \
+       window/ACLEdit.js                               \
+       window/BackupFileDownloader.js                  \
+       window/CreateDirectory.js                       \
+       window/DataStoreEdit.js                         \
+       window/FileBrowser.js                           \
+       window/NotesEdit.js                             \
+       window/RemoteEdit.js                            \
+       window/SyncJobEdit.js                           \
        window/UserEdit.js                              \
        window/UserPassword.js                          \
        window/VerifyJobEdit.js                         \
-       window/RemoteEdit.js                            \
-       window/SyncJobEdit.js                           \
-       window/ACLEdit.js                               \
-       window/DataStoreEdit.js                         \
-       window/CreateDirectory.js                       \
        window/ZFSCreate.js                             \
-       window/FileBrowser.js                           \
-       window/BackupFileDownloader.js                  \
        dashboard/DataStoreStatistics.js                \
        dashboard/LongestTasks.js                       \
        dashboard/RunningTasks.js                       \

diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index d81d6619d241ee51328d9893e8633a9c4fc5fc7e..6325c076735e10b9033f8b8201ef42ffe7d3b519 100644 (file)
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -213,6 +213,13 @@ p.logs {
     cursor: default;
 }
 
+span.snapshot-comment-column {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline-block;
+    width: calc(100% - 18px);
+}
+
 .x-action-col-icon.good:before {
     color: #21BF4B;
 }

diff --git a/www/window/NotesEdit.js b/www/window/NotesEdit.js
new file mode 100644 (file)
index 0000000..47a63d9
--- /dev/null
+++ b/www/window/NotesEdit.js
@@ -0,0 +1,38 @@
+Ext.define('PBS.window.NotesEdit', {
+    extend: 'Proxmox.window.Edit',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    title: gettext('Notes'),
+
+    width: 600,
+    height: '400px',
+    resizable: true,
+    layout: 'fit',
+
+    autoLoad: true,
+
+    defaultButton: undefined,
+
+    notesFieldName: 'notes',
+
+    setValues: function(values) {
+       let me = this;
+       if (typeof values === "string") {
+           let v = values;
+           values = {};
+           values[me.notesFieldName] = v;
+       }
+       me.callParent([values]);
+    },
+
+    items: {
+       xtype: 'textarea',
+       name: 'notes',
+       cbind: {
+           name: '{notesFieldName}',
+       },
+       height: '100%',
+       value: '',
+       hideLabel: true,
+    },
+});