[pbs-devel] [PATCH proxmox-backup v2 4/5] fix #3607: ui: make dashboard notes markdown capable

[Dominik Csapak]

high level comment:

seems mostly copy&pasted, so would it not be better to try
to refactor the panels/windows from pve into widget toolkit?

otherwise comments inline

On 2/24/22 15:18, Stefan Sterz wrote:
> Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
> ---
>   www/Dashboard.js           |   2 +-
>   www/Makefile               |   3 +-
>   www/panel/MarkdownNotes.js | 134 +++++++++++++++++++++++++++++++++++++
>   3 files changed, 137 insertions(+), 2 deletions(-)
>   create mode 100644 www/panel/MarkdownNotes.js
> 
> diff --git a/www/Dashboard.js b/www/Dashboard.js
> index a78ad375..a76660ff 100644
> --- a/www/Dashboard.js
> +++ b/www/Dashboard.js
> @@ -230,7 +230,7 @@ Ext.define('PBS.Dashboard', {
>   		margin: '0 20 0 0',
>   	    },
>   	    {
> -		xtype: 'pbsNotes',
> +		xtype: 'pbsMarkdownNotes',

does that not make the changes to the 'pbsNotes' from 2/5 irrelevant ?

>   		reference: 'nodeNotes',
>   		node: 'localhost',
>   		loadOnInit: true,
> diff --git a/www/Makefile b/www/Makefile
> index 636d4a57..2d55d39d 100644
> --- a/www/Makefile
> +++ b/www/Makefile
> @@ -81,7 +81,8 @@ JSSRC=							\
>   	panel/StorageAndDisks.js			\
>   	panel/UsageChart.js				\
>   	panel/NodeInfo.js				\
> -	panel/Notes.js				    \
> +	panel/Notes.js				        \
> +	panel/MarkdownNotes.js			        \
>   	ZFSList.js					\
>   	DirectoryList.js				\
>   	LoginView.js					\
> diff --git a/www/panel/MarkdownNotes.js b/www/panel/MarkdownNotes.js
> new file mode 100644
> index 00000000..83119d36
> --- /dev/null
> +++ b/www/panel/MarkdownNotes.js
> @@ -0,0 +1,134 @@
> +Ext.define('PBS.panel.MarkdownNotes', {
> +    extend: 'Ext.panel.Panel',
> +    xtype: 'pbsMarkdownNotes',
> +    mixins: ['Proxmox.Mixin.CBind'],
> +
> +    title: gettext("Notes"),
> +    bodyPadding: 10,
> +    scrollable: true,
> +    animCollapse: false,
> +    maxLength: 64*1022,
> +
> +    cbindData: function(initalConfig) {
> +	let me = this;
> +
> +	if (('node' in me && 'datastore' in me) ||
> +	    (!('node' in me) && !('datastore' in me))) {
> +	    throw 'either both a node and a datastore were given or neither. please provide one.';
> +	} else if ('node' in me) {
> +	    me.url = `/api2/extjs/nodes/${me.node}/config`;
> +	} else {
> +	    me.url = `/api2/extjs/config/datastore/${me.datastore}`;
> +	}

same hints as in 2/5

> +
> +	return {};
> +    },
> +
> +    run_editor: function() {
> +	let me = this;
> +	let win = Ext.create('Proxmox.window.Edit', {
> +	    title: gettext('Notes'),
> +	    width: 800,
> +	    height: 600,
> +	    resizable: true,
> +	    layout: 'fit',
> +	    defaultButton: undefined,
> +	    setMaxLength: function(maxLength) {
> +		let area = win.down('textarea[name="comment"]');
> +		area.maxLength = maxLength;
> +		area.validate();
> +
> +		return me;

i don't understand that?
why not simply setting maxLength of the area down below?

> +	    },
> +	    items: {
> +		xtype: 'textarea',
> +		name: 'comment',
> +		height: '100%',
> +		value: '',
> +		hideLabel: true,
> +		emptyText: gettext('You can use Markdown for rich text formatting.'),
> +		fieldStyle: {
> +		    'white-space': 'pre-wrap',
> +		    'font-family': 'monospace',
> +		},
> +	    },
> +	    url: me.url,
> +	    listeners: {
> +		destroy: function() {
> +		    me.load();
> +		},
> +	    },
> +	}).show();
> +	win.setMaxLength(me.maxLength);
> +	win.load();

with the remark above and 'autoLoad' you can omit the whole 'win' variable

> +    },
> +
> +    setNotes: function(value) {
> +	let me = this;
> +	var data = value || '';
> +
> +	let mdHtml = Proxmox.Markdown.parse(data);
> +	me.update(mdHtml);
> +
> +	if (me.collapsible && me.collapseMode === 'auto') {
> +	    me.setCollapsed(data === '');
> +	}
> +    },
> +
> +    load: function() {
> +	var me = this;
> +
> +	Proxmox.Utils.API2Request({
> +	    url: me.url,
> +	    waitMsgTarget: me,
> +	    failure: function(response, opts) {
> +		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
> +		me.setCollapsed(false);
> +	    },
> +	    success: function(response, opts) {
> +		me.setNotes(response.result.data.comment);
> +	    },
> +	});
> +    },
> +
> +    listeners: {
> +	render: function(c) {
> +	    var me = this;
> +	    me.getEl().on('dblclick', me.run_editor, me);
> +	},
> +	afterlayout: function() {
> +	    let me = this;
> +	    if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
> +		me.setCollapsed(true);
> +		me.collapseMode = ''; // only once, on initial load!
> +	    }
> +	},
> +    },
> +
> +    tools: [{
> +	type: 'gear',
> +	handler: function() {
> +	    this.up('panel').run_editor();
> +	},
> +    }],
> +
> +    collapsible: true,
> +    collapseDirection: 'right',
> +
> +    initComponent: function() {
> +	var me = this;
> +
> +	me.callParent();
> +
> +	let sp = Ext.state.Manager.getProvider();
> +	me.collapseMode = sp.get('notes-collapse', 'never');
> +
> +	if (me.loadOnInit === true) {
> +	    me.load();
> +	}
> +
> +	if (me.collapseMode === 'auto') {
> +	    me.setCollapsed(true);
> +	}
> +    },
> +});