From: Stefan Sterz <s.sterz@proxmox.com>
To: pbs-devel@lists.proxmox.com, pve-devel@lists.proxmox.com
Subject: Re: [pbs-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit
Date: Wed, 6 Apr 2022 10:26:43 +0200 [thread overview]
Message-ID: <e849acca-942e-0fd0-9cd5-2c14860890ae@proxmox.com> (raw)
In-Reply-To: <20220401101908.1154385-3-s.sterz@proxmox.com>
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.sterz@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',
> + },
> + },
> +});
next prev parent reply other threads:[~2022-04-06 8:27 UTC|newest]
Thread overview: 7+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-04-01 10:19 [pbs-devel] [PATCH SERIES v4 0/4] add notes to functionality to pbs webui Stefan Sterz
2022-04-01 10:19 ` [pbs-devel] [PATCH proxmox-backup v4 1/4] fix #3067: docs: add markdown primer from pve to pbs Stefan Sterz
2022-04-01 10:19 ` [pbs-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit Stefan Sterz
2022-04-06 8:26 ` Stefan Sterz [this message]
2022-04-06 11:39 ` Thomas Lamprecht
2022-04-01 10:19 ` [pbs-devel] [PATCH proxmox-backup v4 3/4] fix #3067: ui: add a separate notes view for longer markdown notes Stefan Sterz
2022-04-01 10:19 ` [pbs-devel] [PATCH manager v4 4/4] ui: move NotesView panel and NotesEdit window to widget kit Stefan Sterz
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=e849acca-942e-0fd0-9cd5-2c14860890ae@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox