[pve-devel] [PATCH proxmox-backup v5 0/5] fix 3067: add notes functionality in webui

[pve-devel] [PATCH proxmox-backup v5 0/5] fix 3067: add notes functionality in 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 v5:

* split commit adding NotesEdit and NotesView to widget kit into two
  commits
* several minort improvements to NotesEdit and NotesView

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

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

Stefan Sterz (2):
  toolkit: add NotesView panel and NotesEdit window
  toolkit: refactor markdown based NotesView and NotesEdit

 src/Makefile            |   2 +
 src/panel/NotesView.js  | 152 ++++++++++++++++++++++++++++++++++++++++
 src/window/NotesEdit.js |  38 ++++++++++
 3 files changed, 192 insertions(+)
 create mode 100644 src/panel/NotesView.js
 create mode 100644 src/window/NotesEdit.js

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 v5 1/5] 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] applied: [pbs-devel] [PATCH proxmox-backup v5 1/5] fix #3067: docs: add markdown primer from pve to pbs

[Thomas Lamprecht]

On 12.04.22 12:34, Stefan Sterz wrote:
> 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
> 
>

applied, thanks!

[pve-devel] [PATCH widget-toolkit v5 2/5] toolkit: add NotesView panel and NotesEdit window

[Stefan Sterz]

move them here from pve so we can maintain them across several
products

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/Makefile            |   2 +
 src/panel/NotesView.js  | 129 ++++++++++++++++++++++++++++++++++++++++
 src/window/NotesEdit.js |  38 ++++++++++++
 3 files changed, 169 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..7c8299d
--- /dev/null
+++ b/src/panel/NotesView.js
@@ -0,0 +1,129 @@
+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/src/window/NotesEdit.js b/src/window/NotesEdit.js
new file mode 100644
index 0000000..4649843
--- /dev/null
+++ b/src/window/NotesEdit.js
@@ -0,0 +1,38 @@
+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

[pve-devel] applied: [pbs-devel] [PATCH widget-toolkit v5 2/5] toolkit: add NotesView panel and NotesEdit window

[Thomas Lamprecht]

On 12.04.22 12:34, Stefan Sterz wrote:
> move them here from pve so we can maintain them across several
> products
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  src/Makefile            |   2 +
>  src/panel/NotesView.js  | 129 ++++++++++++++++++++++++++++++++++++++++
>  src/window/NotesEdit.js |  38 ++++++++++++
>  3 files changed, 169 insertions(+)
>  create mode 100644 src/panel/NotesView.js
>  create mode 100644 src/window/NotesEdit.js
> 
>

applied, thanks! It seems that I have wrongly conveyed that the 1:1 + changes in a
separate patch means a literal 1:1, changes that are required to avoid breakage (e.g.,
due to redefinition of existing source classes) should be still avoided.
So it's more like "move 1:1 as closely as possible without breaking the build and/or
product).

Anyhow, no biggie, so I just moved the class/xtypes renames into widget-toolkit patch
1 and noted in the commit message that I did so.

[pve-devel] [PATCH widget-toolkit v5 3/5] toolkit: refactor markdown based NotesView and NotesEdit

[Stefan Sterz]

refactor them to make them more flexible and, thus, usable in pbs.
adds parameters for enabling the TBar, setting the help section in the
editing dialog and cleans up the code in some places

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/panel/NotesView.js  | 135 +++++++++++++++++++++++-----------------
 src/window/NotesEdit.js |   4 +-
 2 files changed, 81 insertions(+), 58 deletions(-)

diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js
index 7c8299d..21dbdeb 100644
--- a/src/panel/NotesView.js
+++ b/src/panel/NotesView.js
@@ -1,12 +1,15 @@
-Ext.define('PVE.panel.NotesView', {
+Ext.define('Proxmox.panel.NotesView', {
     extend: 'Ext.panel.Panel',
-    xtype: 'pveNotesView',
+    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',
@@ -22,11 +25,55 @@ Ext.define('PVE.panel.NotesView', {
 	],
     },
 
+    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;
+
+	me.load();
+	return {};
+    },
+
     run_editor: function() {
 	let me = this;
-	Ext.create('PVE.window.NotesEdit', {
-	    pveSelNode: me.pveSelNode,
+	Ext.create('Proxmox.window.NotesEdit', {
 	    url: me.url,
+	    onlineHelp: me.onlineHelp,
 	    listeners: {
 		destroy: () => me.load(),
 	    },
@@ -34,32 +81,34 @@ Ext.define('PVE.panel.NotesView', {
 	}).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;
+	let me = this;
 
 	Proxmox.Utils.API2Request({
 	    url: me.url,
 	    waitMsgTarget: me,
-	    failure: function(response, opts) {
+	    failure: (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 === '');
-		}
-	    },
+	    success: ({ result }) => me.setNotes(result.data.description),
 	});
     },
 
     listeners: {
 	render: function(c) {
-	    var me = this;
+	    let me = this;
 	    me.getEl().on('dblclick', me.run_editor, me);
 	},
 	afterlayout: function() {
@@ -71,49 +120,24 @@ Ext.define('PVE.panel.NotesView', {
 	},
     },
 
-    tools: [{
-	type: 'gear',
-	handler: function() {
-	    let view = this.up('panel');
-	    view.run_editor();
+    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';
-	}
-
+	let me = this;
 	me.callParent();
-	if (type === 'node' || type === '') { // '' is for datacenter
+
+	// '' is for datacenter
+	if (me.enableTBar === true || me.pveType === 'node' || me.pveType === '') {
 	    me.down('#tbar').setVisible(true);
-	} else if (me.pveSelNode.data.template !== 1) {
+	} else if (me.pveSelNode?.data?.template !== 1) {
 	    me.setCollapsible(true);
 	    me.collapseDirection = 'right';
 
@@ -124,6 +148,5 @@ Ext.define('PVE.panel.NotesView', {
 		me.setCollapsed(true);
 	    }
 	}
-	me.load();
     },
 });
diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js
index 4649843..2de88f9 100644
--- a/src/window/NotesEdit.js
+++ b/src/window/NotesEdit.js
@@ -1,11 +1,11 @@
-Ext.define('PVE.window.NotesEdit', {
+Ext.define('Proxmox.window.NotesEdit', {
     extend: 'Proxmox.window.Edit',
 
     title: gettext('Notes'),
     onlineHelp: 'markdown_basics',
 
     width: 800,
-    height: '600px',
+    height: 600,
 
     resizable: true,
     layout: 'fit',
-- 
2.30.2

[pve-devel] applied: [pbs-devel] [PATCH widget-toolkit v5 3/5] toolkit: refactor markdown based NotesView and NotesEdit

[Thomas Lamprecht]

On 12.04.22 12:34, Stefan Sterz wrote:
> refactor them to make them more flexible and, thus, usable in pbs.
> adds parameters for enabling the TBar, setting the help section in the
> editing dialog and cleans up the code in some places
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  src/panel/NotesView.js  | 135 +++++++++++++++++++++++-----------------
>  src/window/NotesEdit.js |   4 +-
>  2 files changed, 81 insertions(+), 58 deletions(-)
> 
>

applied, thanks!

[pve-devel] [PATCH manager v5 4/5] 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. requires a bump of the widget
toolkit.

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 d488c3a8..2c7b1e70 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

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

[Thomas Lamprecht]

On 12.04.22 12:34, Stefan Sterz wrote:
> this removes the NotesView panel and NotesEdit and replaces them with
> with the version from the widget kit. requires a bump of the widget
> toolkit.
> 
> 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
> 
>

this got already applied a few weeks back, butt seems I forgot to reply, anyhow:

applied, thanks!

[pve-devel] [PATCH proxmox-backup v5 5/5] 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>
---
i chose the maxLength of a note in pbs 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 frontend
might not report an error when it should. 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