I realized that there are some more improvements to be made here, I'll send an updated version in a bit. Sorry for the inconvenience.
On 01.04.22 12:19, Stefan Sterz wrote: > adds a universal version of NotesView and NotesEdit to the widget > toolkit that is compatible with pve and pbs. this avoids maintaining > duplicate code in pve and pbs, but since the original versions were > very tightly integrated with pve-manager, changes are required to > make them compatible with pbs. changes include: making the tbar > configurable, setting the url differently in a pbs context, and > allowing the caller to set the onlineHelp field. > > Signed-off-by: Stefan Sterz <s.st...@proxmox.com> > --- > src/Makefile | 2 + > src/panel/NotesView.js | 149 ++++++++++++++++++++++++++++++++++++++++ > src/window/NotesEdit.js | 38 ++++++++++ > 3 files changed, 189 insertions(+) > create mode 100644 src/panel/NotesView.js > create mode 100644 src/window/NotesEdit.js > > diff --git a/src/Makefile b/src/Makefile > index abafc2c..dd7729e 100644 > --- a/src/Makefile > +++ b/src/Makefile > @@ -66,6 +66,7 @@ JSSRC= \ > panel/ACMEDomains.js \ > panel/StatusView.js \ > panel/TfaView.js \ > + panel/NotesView.js \ > window/Edit.js \ > window/PasswordEdit.js \ > window/SafeDestroy.js \ > @@ -87,6 +88,7 @@ JSSRC= \ > window/AddWebauthn.js \ > window/AddYubico.js \ > window/TfaEdit.js \ > + window/NotesEdit.js \ > node/APT.js \ > node/APTRepositories.js \ > node/NetworkEdit.js \ > diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js > new file mode 100644 > index 0000000..d1c902f > --- /dev/null > +++ b/src/panel/NotesView.js > @@ -0,0 +1,149 @@ > +Ext.define('Proxmox.panel.NotesView', { > + extend: 'Ext.panel.Panel', > + xtype: 'pmxNotesView', > + mixins: ['Proxmox.Mixin.CBind'], > + > + title: gettext("Notes"), > + bodyPadding: 10, > + scrollable: true, > + animCollapse: false, > + maxLength: 64 * 1024, > + enableTBar: false, > + onlineHelp: 'markdown_basics', > + > + tbar: { > + itemId: 'tbar', > + hidden: true, > + items: [ > + { > + text: gettext('Edit'), > + handler: function() { > + let view = this.up('panel'); > + view.run_editor(); > + }, > + }, > + ], > + }, > + > + cbindData: function(initalConfig) { > + let me = this; > + let type = ''; > + > + if (me.node) { > + me.url = `/api2/extjs/nodes/${me.node}/config`; > + } else if (me.pveSelNode?.data?.id === 'root') { > + me.url = '/api2/extjs/cluster/options'; > + type = me.pveSelNode?.data?.type; > + } else { > + const nodename = me.pveSelNode?.data?.node; > + type = me.pveSelNode?.data?.type; > + > + if (!nodename) { > + throw "no node name specified"; > + } > + > + if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) { > + throw 'invalid type specified'; > + } > + > + const vmid = me.pveSelNode?.data?.vmid; > + > + if (!vmid && type !== 'node') { > + throw "no VM ID specified"; > + } > + > + me.url = `/api2/extjs/nodes/${nodename}/`; > + > + // add the type specific path if qemu/lxc and set the backend's > maxLen > + if (type === 'qemu' || type === 'lxc') { > + me.url += `${type}/${vmid}/`; > + me.maxLength = 8 * 1024; > + } > + > + me.url += 'config'; > + } > + > + me.pveType = type; > + return {}; > + }, > + > + run_editor: function() { > + let me = this; > + Ext.create('Proxmox.window.NotesEdit', { > + url: me.url, > + onlineHelp: me.onlineHelp, > + listeners: { > + destroy: () => me.load(), > + }, > + autoShow: true, > + }).setMaxLength(me.maxLength); > + }, > + > + setNotes: function(value) { > + let me = this; > + > + let mdHtml = Proxmox.Markdown.parse(value || ''); > + me.update(mdHtml); > + > + if (me.collapsible && me.collapseMode === 'auto') { > + me.setCollapsed(!value); > + } > + }, > + > + load: function() { > + var me = this; > + > + Proxmox.Utils.API2Request({ > + url: me.url, > + waitMsgTarget: me, > + failure: function(response, opts) { > + me.update(gettext('Error') + " " + response.htmlStatus); > + me.setCollapsed(false); > + }, > + success: ({ result }) => me.setNotes(result.data.description), > + }); > + }, > + > + 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(); > + }, > + }], > + > + initComponent: function() { > + const me = this; > + me.callParent(); > + > + // '' is for datacenter > + if (me.enableTBar === true || me.pveType === 'node' || me.pveType === > '') { > + me.down('#tbar').setVisible(true); > + } else if (me.pveSelNode?.data?.template !== 1) { > + me.setCollapsible(true); > + me.collapseDirection = 'right'; > + > + let sp = Ext.state.Manager.getProvider(); > + me.collapseMode = sp.get('guest-notes-collapse', 'never'); > + > + if (me.collapseMode === 'auto') { > + me.setCollapsed(true); > + } > + } > + > + me.load(); > + }, > +}); > diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js > new file mode 100644 > index 0000000..ab5254d > --- /dev/null > +++ b/src/window/NotesEdit.js > @@ -0,0 +1,38 @@ > +Ext.define('Proxmox.window.NotesEdit', { > + extend: 'Proxmox.window.Edit', > + > + title: gettext('Notes'), > + onlineHelp: 'markdown_basics', > + > + width: 800, > + height: '600px', > + > + resizable: true, > + layout: 'fit', > + > + autoLoad: true, > + defaultButton: undefined, > + > + setMaxLength: function(maxLength) { > + let me = this; > + > + let area = me.down('textarea[name="description"]'); > + area.maxLength = maxLength; > + area.validate(); > + > + return me; > + }, > + > + items: { > + xtype: 'textarea', > + name: 'description', > + height: '100%', > + value: '', > + hideLabel: true, > + emptyText: gettext('You can use Markdown for rich text formatting.'), > + fieldStyle: { > + 'white-space': 'pre-wrap', > + 'font-family': 'monospace', > + }, > + }, > +}); _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel