From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 3E09364081 for ; Tue, 1 Mar 2022 11:41:31 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 336171E38B for ; Tue, 1 Mar 2022 11:41:31 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 6B3A41E37F for ; Tue, 1 Mar 2022 11:41:30 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 3E24846B51; Tue, 1 Mar 2022 11:41:30 +0100 (CET) Message-ID: Date: Tue, 1 Mar 2022 11:41:20 +0100 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:98.0) Gecko/20100101 Thunderbird/98.0 Content-Language: en-US To: Proxmox Backup Server development discussion , Stefan Sterz References: <20220224141854.3153101-1-s.sterz@proxmox.com> <20220224141854.3153101-5-s.sterz@proxmox.com> From: Dominik Csapak In-Reply-To: <20220224141854.3153101-5-s.sterz@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.156 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -0.001 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record T_SCC_BODY_TEXT_LINE -0.01 - Subject: Re: [pbs-devel] [PATCH proxmox-backup v2 4/5] fix #3607: ui: make dashboard notes markdown capable X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 01 Mar 2022 10:41:31 -0000 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 > --- > 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); > + } > + }, > +});