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>

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',

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			\

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;
 }

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