[pve-devel] [PATCH SERIES v4 0/4] add notes to functionality to pbs webui

[pve-devel] [PATCH SERIES v4 0/4] add notes to functionality to pbs webui

[Stefan Sterz]

adds support for markdown-based notes to pbs. It also refactors the
pve `NotesView` panel and `NotesEdit` window so that we can move it
to the widget toolkit and maintain a single version of the two.
hence, the last commits for proxmox-backup and pve-manager need to be
applied and bumped with or after the toolkit.

changes v4 (thanks @ Thomas Lamprecht):

* several improvements to NotesView
* makes onlineHelp of the NotesEdit window used by NotesView
  configurable

changes v3 (thanks @ Dominik Csapak):

* refactored NotesView and NotesEdit
* removed notes from dashboard
* several javascrpt improvements

changes v2 (thanks @ Wolfgang Bumiller):

* performance improvements when parsing/writing a node configuration
* adjusted multi-line regex to remove superfluous "\s*"
* better formatting of rust code

proxmox-backup:
Stefan Sterz (2):
  fix #3067: docs: add markdown primer from pve to pbs
  fix #3067: ui: add a separate notes view for longer markdown notes

 docs/index.rst           |   1 +
 docs/markdown-primer.rst | 178 +++++++++++++++++++++++++++++++++++++++
 www/Makefile             |   1 +
 www/NavigationTree.js    |   6 ++
 www/NodeNotes.js         |  23 +++++
 5 files changed, 209 insertions(+)
 create mode 100644 docs/markdown-primer.rst
 create mode 100644 www/NodeNotes.js

widget-toolkit:
Stefan Sterz (1):
  toolkit: add markdown based NotesView and NotesEdit

 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

pve-manager:
Stefan Sterz (1):
  ui: move NotesView panel and NotesEdit window to widget kit

 www/manager6/Makefile              |   2 -
 www/manager6/dc/Config.js          |   2 +-
 www/manager6/node/Config.js        |   2 +-
 www/manager6/panel/GuestSummary.js |   2 +-
 www/manager6/panel/NotesView.js    | 129 -----------------------------
 www/manager6/window/NotesEdit.js   |  38 ---------
 6 files changed, 3 insertions(+), 172 deletions(-)
 delete mode 100644 www/manager6/panel/NotesView.js
 delete mode 100644 www/manager6/window/NotesEdit.js

-- 
2.30.2

[pve-devel] [PATCH proxmox-backup v4 1/4] fix #3067: docs: add markdown primer from pve to pbs

[Stefan Sterz]

this copies the markdown primer from the pve docs to allow access to
it via the help buttons in the gui

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 docs/index.rst           |   1 +
 docs/markdown-primer.rst | 178 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 docs/markdown-primer.rst

diff --git a/docs/index.rst b/docs/index.rst
index daa61249..713b09d8 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -50,6 +50,7 @@ in the section entitled "GNU Free Documentation License".
    file-formats.rst
    backup-protocol.rst
    calendarevents.rst
+   markdown-primer.rst
    glossary.rst
    GFDL.rst
 
diff --git a/docs/markdown-primer.rst b/docs/markdown-primer.rst
new file mode 100644
index 00000000..01ce1d6d
--- /dev/null
+++ b/docs/markdown-primer.rst
@@ -0,0 +1,178 @@
+.. _markdown-primer:
+
+Markdown Primer
+===============
+
+  "Markdown is a text-to-HTML conversion tool for web writers. Markdown allows
+  you to write using an easy-to-read, easy-to-write plain text format, then
+  convertit to structurally valid XHTML (or HTML)."
+
+  --  John Gruber, https://daringfireball.net/projects/markdown/
+
+
+The Proxmox Backup Server (PBS) web-interface has support for using Markdown to
+rendering rich text formatting in node and virtual guest notes.
+
+PBS supports CommonMark with most extensions of GFM (GitHub Flavoured Markdown),
+like tables or task-lists.
+
+.. _markdown_basics:
+
+Markdown Basics
+---------------
+
+Note that we only describe the basics here, please search the web for more
+extensive resources, for example on https://www.markdownguide.org/
+
+Headings
+~~~~~~~~
+
+.. code-block:: md
+
+  # This is a Heading h1
+  ## This is a Heading h2
+  ##### This is a Heading h5
+
+
+Emphasis
+~~~~~~~~
+
+Use ``*text*`` or ``_text_`` for emphasis.
+
+Use ``**text**`` or ``__text__`` for bold, heavy-weight text.
+
+Combinations are also possible, for example:
+
+.. code-block:: md
+
+  _You **can** combine them_
+
+
+Links
+~~~~~
+
+You can use automatic detection of links, for example,
+``https://forum.proxmox.com/`` would transform it into a clickable link.
+
+You can also control the link text, for example:
+
+.. code-block:: md
+
+  Now, [the part in brackets will be the link text](https://forum.proxmox.com/).
+
+Lists
+~~~~~
+
+Unordered Lists
+^^^^^^^^^^^^^^^
+
+Use ``*`` or ``-`` for unordered lists, for example:
+
+.. code-block:: md
+
+  * Item 1
+  * Item 2
+  * Item 2a
+  * Item 2b
+
+
+Adding an indentation can be used to created nested lists.
+
+Ordered Lists
+^^^^^^^^^^^^^
+
+.. code-block:: md
+
+  1. Item 1
+  1. Item 2
+  1. Item 3
+    1. Item 3a
+    1. Item 3b
+
+NOTE: The integer of ordered lists does not need to be correct, they will be numbered automatically.
+
+Task Lists
+^^^^^^^^^^
+
+Task list use a empty box ``[ ]`` for unfinished tasks and a box with an `X` for finished tasks.
+
+For example:
+
+
+.. code-block:: md
+
+  - [X] First task already done!
+  - [X] Second one too
+  - [ ] This one is still to-do
+  - [ ] So is this one
+
+Tables
+~~~~~~
+
+Tables use the pipe symbol ``|`` to separate columns, and ``-`` to separate the
+table header from the table body, in that separation one can also set the text
+alignment, making one column left-, center-, or right-aligned.
+
+
+.. code-block:: md
+
+  | Left columns  | Right columns |  Some  | More | Cols.| Centering Works Too
+  | ------------- |--------------:|--------|------|------|:------------------:|
+  | left foo      | right foo     | First  | Row  | Here | >center<           |
+  | left bar      | right bar     | Second | Row  | Here | 12345              |
+  | left baz      | right baz     | Third  | Row  | Here | Test               |
+  | left zab      | right zab     | Fourth | Row  | Here | ☁️☁️☁️              |
+  | left rab      | right rab     | And    | Last | Here | The End            |
+
+Note that you do not need to align the columns nicely with white space, but that makes
+editing tables easier.
+
+Block Quotes
+~~~~~~~~~~~~
+
+You can enter block quotes by prefixing a line with ``>``, similar as in plain-text emails.
+
+.. code-block:: md
+
+  > Markdown is a lightweight markup language with plain-text-formatting syntax,
+  > created in 2004 by John Gruber with Aaron Swartz.
+  >
+  >> Markdown is often used to format readme files, for writing messages in online discussion forums,
+  >> and to create rich text using a plain text editor.
+
+Code and Snippets
+~~~~~~~~~~~~~~~~~
+
+You can use backticks to avoid processing for a few word or paragraphs. That is useful for
+avoiding that a code or configuration hunk gets mistakenly interpreted as markdown.
+
+Inline code
+^^^^^^^^^^^
+
+Surrounding part of a line with single backticks allows to write code inline,
+for examples:
+
+.. code-block:: md
+
+  This hosts IP address is `10.0.0.1`.
+
+Whole blocks of code
+^^^^^^^^^^^^^^^^^^^^
+
+For code blocks spanning several lines you can use triple-backticks to start
+and end such a block, for example:
+
+.. code-block:: md
+
+  ```
+  # This is the network config I want to remember here
+  auto vmbr2
+  iface vmbr2 inet static
+          address 10.0.0.1/24
+          bridge-ports ens20
+          bridge-stp off
+          bridge-fd 0
+          bridge-vlan-aware yes
+          bridge-vids 2-4094
+
+  ```
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit

[Stefan Sterz]

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

Re: [pve-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit

[Stefan Sterz]

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

Re: [pve-devel] [pbs-devel] [PATCH widget-toolkit v4 2/4] toolkit: add markdown based NotesView and NotesEdit

[Thomas Lamprecht]

On 06.04.22 10:26, Stefan Sterz wrote:
> 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.

maybe use that to keep the changes separate from the move, i.e., do a 1:1
move (as close as possible/sensible) and then do the changes/optimizations
in a separate patch.

[pve-devel] [PATCH proxmox-backup v4 3/4] fix #3067: ui: add a separate notes view for longer markdown notes

[Stefan Sterz]

since markdown notes might be rather long, this commit adds a tab
similar to pve's datacenter or node notes. requires a bump of the
widget toolkit in order to use the `pmxNotesView`.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
the maxLength of a note in pbs is chosen to be 1022*64 because the
server allows at most 1024*64 bytes of form data per request, which
are distributed as follows:

equal signs:             2
the word "digest":       7
digest:                  64
the word "description":  12
description:             65451

so by setting the limit to 1024*64 some users might encounter an
error telling them that the message body was too large even though the
front-end said the description was fine. i wanted to approximate
the 1024*64 limit here as close as possible so i chose:
65451 / 64 ~ 1022.

note that afaict due to the way maxLength is implemented the limit
will still sometimes not be correct. this is due to character
encodings and how javascript's string length property works.

 www/Makefile          |  1 +
 www/NavigationTree.js |  6 ++++++
 www/NodeNotes.js      | 23 +++++++++++++++++++++++
 3 files changed, 30 insertions(+)
 create mode 100644 www/NodeNotes.js

diff --git a/www/Makefile b/www/Makefile
index 455fbeec..922d8de9 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -98,6 +98,7 @@ JSSRC=							\
 	datastore/DataStoreList.js			\
 	ServerStatus.js					\
 	ServerAdministration.js				\
+	NodeNotes.js				        \
 	Dashboard.js					\
 	${TAPE_UI_FILES}				\
 	NavigationTree.js				\
diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 576d05ab..916582ef 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -32,6 +32,12 @@ Ext.define('PBS.store.NavigationStore', {
 		path: 'pbsDashboard',
 		leaf: true,
 	    },
+	    {
+		text: gettext('Notes'),
+		iconCls: 'fa fa-sticky-note-o',
+		path: 'pbsNodeNotes',
+		leaf: true,
+	    },
 	    {
 		text: gettext('Configuration'),
 		iconCls: 'fa fa-gears',
diff --git a/www/NodeNotes.js b/www/NodeNotes.js
new file mode 100644
index 00000000..f8b253c4
--- /dev/null
+++ b/www/NodeNotes.js
@@ -0,0 +1,23 @@
+// Needs to be its own xtype for `path` to work in `NavigationTree`
+Ext.define('PBS.NodeNotes', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pbsNodeNotes',
+
+    scrollable: true,
+    layout: 'fit',
+
+    items: [
+	{
+	    xtype: 'container',
+	    layout: 'fit',
+	    items: [{
+		xtype: 'pmxNotesView',
+		tools: false,
+		border: false,
+		node: 'localhost',
+		enableTBar: true,
+		maxLength: 1022*64,
+	    }],
+	},
+    ],
+});
-- 
2.30.2

[pve-devel] [PATCH manager v4 4/4] ui: move NotesView panel and NotesEdit window to widget kit

[Stefan Sterz]

this removes the NotesView panel and NotesEdit and replaces them with
with the version from the widget kit.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 www/manager6/Makefile              |   2 -
 www/manager6/dc/Config.js          |   2 +-
 www/manager6/node/Config.js        |   2 +-
 www/manager6/panel/GuestSummary.js |   2 +-
 www/manager6/panel/NotesView.js    | 129 -----------------------------
 www/manager6/window/NotesEdit.js   |  38 ---------
 6 files changed, 3 insertions(+), 172 deletions(-)
 delete mode 100644 www/manager6/panel/NotesView.js
 delete mode 100644 www/manager6/window/NotesEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index e6e01bd1..af026413 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -84,7 +84,6 @@ JSSRC= 							\
 	panel/BackupJobPrune.js				\
 	panel/HealthWidget.js				\
 	panel/IPSet.js					\
-	panel/NotesView.js				\
 	panel/RunningChart.js				\
 	panel/StatusPanel.js				\
 	panel/GuestStatusView.js			\
@@ -102,7 +101,6 @@ JSSRC= 							\
 	window/FirewallLograteEdit.js			\
 	window/LoginWindow.js				\
 	window/Migrate.js				\
-	window/NotesEdit.js				\
 	window/Prune.js					\
 	window/Restore.js				\
 	window/SafeDestroyGuest.js			\
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index 9c54b19d..13ded12e 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -28,7 +28,7 @@ Ext.define('PVE.dc.Config', {
 		itemId: 'summary',
 	    },
 	    {
-		xtype: 'pveNotesView',
+		xtype: 'pmxNotesView',
 		title: gettext('Notes'),
 		iconCls: 'fa fa-sticky-note-o',
 		itemId: 'notes',
diff --git a/www/manager6/node/Config.js b/www/manager6/node/Config.js
index 68f80391..52357df8 100644
--- a/www/manager6/node/Config.js
+++ b/www/manager6/node/Config.js
@@ -129,7 +129,7 @@ Ext.define('PVE.node.Config', {
 		    itemId: 'summary',
 		},
 		{
-		    xtype: 'pveNotesView',
+		    xtype: 'pmxNotesView',
 		    title: gettext('Notes'),
 		    iconCls: 'fa fa-sticky-note-o',
 		    itemId: 'notes',
diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index 82cc7a7f..35721419 100644
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -40,7 +40,7 @@ Ext.define('PVE.qemu.Summary', {
 		rstore: rstore,
 	    },
 	    {
-		xtype: 'pveNotesView',
+		xtype: 'pmxNotesView',
 		flex: 1,
 		padding: template ? '5' : '0 0 0 5',
 		itemId: 'notesview',
diff --git a/www/manager6/panel/NotesView.js b/www/manager6/panel/NotesView.js
deleted file mode 100644
index 7c8299d0..00000000
--- a/www/manager6/panel/NotesView.js
+++ /dev/null
@@ -1,129 +0,0 @@
-Ext.define('PVE.panel.NotesView', {
-    extend: 'Ext.panel.Panel',
-    xtype: 'pveNotesView',
-
-    title: gettext("Notes"),
-    bodyPadding: 10,
-    scrollable: true,
-    animCollapse: false,
-    maxLength: 64 * 1024,
-
-    tbar: {
-	itemId: 'tbar',
-	hidden: true,
-	items: [
-	    {
-		text: gettext('Edit'),
-		handler: function() {
-		    let view = this.up('panel');
-		    view.run_editor();
-		},
-	    },
-	],
-    },
-
-    run_editor: function() {
-	let me = this;
-	Ext.create('PVE.window.NotesEdit', {
-	    pveSelNode: me.pveSelNode,
-	    url: me.url,
-	    listeners: {
-		destroy: () => me.load(),
-	    },
-	    autoShow: true,
-	}).setMaxLength(me.maxLength);
-    },
-
-    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: function(response, opts) {
-		var data = response.result.data.description || '';
-
-		let mdHTML = Proxmox.Markdown.parse(data);
-		me.update(mdHTML);
-
-		if (me.collapsible && me.collapseMode === 'auto') {
-		    me.setCollapsed(data === '');
-		}
-	    },
-	});
-    },
-
-    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() {
-	    let view = this.up('panel');
-	    view.run_editor();
-	},
-    }],
-
-    initComponent: function() {
-	const me = this;
-	const type = me.pveSelNode.data.type;
-
-	if (me.pveSelNode.data.id === 'root') {
-	    me.url = '/api2/extjs/cluster/options';
-	} else {
-	    const nodename = me.pveSelNode.data.node;
-	    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.callParent();
-	if (type === 'node' || type === '') { // '' is for datacenter
-	    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/www/manager6/window/NotesEdit.js b/www/manager6/window/NotesEdit.js
deleted file mode 100644
index 4649843e..00000000
--- a/www/manager6/window/NotesEdit.js
+++ /dev/null
@@ -1,38 +0,0 @@
-Ext.define('PVE.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',
-	},
-    },
-});
-- 
2.30.2