[pve-devel] [PATCH SERIES v3 0/6] fix #3607: add notes to functionality in webui

[pve-devel] [PATCH SERIES v3 0/6] fix #3607: add notes to 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 commit for proxmox-backup and pve-manager need to be
applied and bumped with or after the toolkit.

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 (4):
  fix #3067: api: add support for multi-line comments in node.cfg
  fix #3607: docs: add markdown primer from pve to pbs
  fix #3607: ui: add a separate notes view for longer markdown notes
  fix #3607: ui: refactor notes by moving the panel/window to widget kit

 docs/index.rst           |   1 +
 docs/markdown-primer.rst | 178 +++++++++++++++++++++++++++++++++++++++
 pbs-api-types/src/lib.rs |   9 ++
 src/api2/node/config.rs  |   4 +
 src/config/node.rs       |  14 ++-
 src/tools/config.rs      |  56 +++++++++++-
 www/Makefile             |   1 +
 www/NavigationTree.js    |   6 ++
 www/NodeNotes.js         |  22 +++++
 9 files changed, 288 insertions(+), 3 deletions(-)
 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  | 155 ++++++++++++++++++++++++++++++++++++++++
 src/window/NotesEdit.js |  38 ++++++++++
 3 files changed, 195 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 v3 1/6] fix #3067: api: add support for multi-line comments in node.cfg

[Stefan Sterz]

add support for multi-line comments to node.cfg and the api, similar to
how pve handles multi-line comments

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 pbs-api-types/src/lib.rs |  9 +++++++
 src/api2/node/config.rs  |  4 +++
 src/config/node.rs       | 14 +++++++++-
 src/tools/config.rs      | 56 ++++++++++++++++++++++++++++++++++++++--
 4 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/pbs-api-types/src/lib.rs b/pbs-api-types/src/lib.rs
index 754e7b22..3b1fad2c 100644
--- a/pbs-api-types/src/lib.rs
+++ b/pbs-api-types/src/lib.rs
@@ -137,6 +137,8 @@ const_regex! {
 
     pub SINGLE_LINE_COMMENT_REGEX = r"^[[:^cntrl:]]*$";
 
+    pub MULTI_LINE_COMMENT_REGEX = r"(?m)^([[:^cntrl:]]*)$";
+
     pub BACKUP_REPO_URL_REGEX = concat!(
         r"^^(?:(?:(",
         USER_ID_REGEX_STR!(), "|", APITOKEN_ID_REGEX_STR!(),
@@ -273,6 +275,13 @@ pub const SINGLE_LINE_COMMENT_SCHEMA: Schema = StringSchema::new("Comment (singl
     .format(&SINGLE_LINE_COMMENT_FORMAT)
     .schema();
 
+pub const MULTI_LINE_COMMENT_FORMAT: ApiStringFormat =
+    ApiStringFormat::Pattern(&MULTI_LINE_COMMENT_REGEX);
+
+pub const MULTI_LINE_COMMENT_SCHEMA: Schema = StringSchema::new("Comment (multiple lines).")
+    .format(&MULTI_LINE_COMMENT_FORMAT)
+    .schema();
+
 pub const SUBSCRIPTION_KEY_SCHEMA: Schema = StringSchema::new("Proxmox Backup Server subscription key.")
     .format(&SUBSCRIPTION_KEY_FORMAT)
     .min_length(15)
diff --git a/src/api2/node/config.rs b/src/api2/node/config.rs
index 0a119354..3b267adc 100644
--- a/src/api2/node/config.rs
+++ b/src/api2/node/config.rs
@@ -64,6 +64,8 @@ pub enum DeletableProperty {
     ciphers_tls_1_2,
     /// Delete the default-lang property.
     default_lang,
+    /// Delete any description
+    description,
 }
 
 #[api(
@@ -124,6 +126,7 @@ pub fn update_node_config(
                 DeletableProperty::ciphers_tls_1_3 => { config.ciphers_tls_1_3 = None; },
                 DeletableProperty::ciphers_tls_1_2 => { config.ciphers_tls_1_2 = None; },
                 DeletableProperty::default_lang => { config.default_lang = None; },
+                DeletableProperty::description => { config.description = None; },
             }
         }
     }
@@ -139,6 +142,7 @@ pub fn update_node_config(
     if update.ciphers_tls_1_3.is_some() { config.ciphers_tls_1_3 = update.ciphers_tls_1_3; }
     if update.ciphers_tls_1_2.is_some() { config.ciphers_tls_1_2 = update.ciphers_tls_1_2; }
     if update.default_lang.is_some() { config.default_lang = update.default_lang; }
+    if update.description.is_some() { config.description = update.description; }
 
     crate::config::node::save_config(&config)?;
 
diff --git a/src/config/node.rs b/src/config/node.rs
index 0ba87450..ac6774e3 100644
--- a/src/config/node.rs
+++ b/src/config/node.rs
@@ -8,7 +8,11 @@ use proxmox_schema::{api, ApiStringFormat, ApiType, Updater};
 
 use proxmox_http::ProxyConfig;
 
-use pbs_api_types::{EMAIL_SCHEMA, OPENSSL_CIPHERS_TLS_1_2_SCHEMA, OPENSSL_CIPHERS_TLS_1_3_SCHEMA};
+use pbs_api_types::{
+    EMAIL_SCHEMA, MULTI_LINE_COMMENT_SCHEMA, OPENSSL_CIPHERS_TLS_1_2_SCHEMA,
+    OPENSSL_CIPHERS_TLS_1_3_SCHEMA,
+};
+
 use pbs_buildcfg::configdir;
 use pbs_config::{open_backup_lockfile, BackupLockGuard};
 
@@ -167,6 +171,10 @@ pub enum Translation {
         "default-lang" : {
             schema: Translation::API_SCHEMA,
             optional: true,
+        },
+        "description" : {
+            optional: true,
+            schema: MULTI_LINE_COMMENT_SCHEMA,
         }
     },
 )]
@@ -210,6 +218,10 @@ pub struct NodeConfig {
     /// Default language used in the GUI
     #[serde(skip_serializing_if = "Option::is_none")]
     pub default_lang: Option<String>,
+
+    /// Node description
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub description: Option<String>,
 }
 
 impl NodeConfig {
diff --git a/src/tools/config.rs b/src/tools/config.rs
index f666a8ab..cc722094 100644
--- a/src/tools/config.rs
+++ b/src/tools/config.rs
@@ -31,8 +31,19 @@ pub fn value_from_str(input: &str, schema: &'static Schema) -> Result<Value, Err
     let schema = object_schema(schema)?;
 
     let mut config = Object::new();
+    let mut lines = input.lines().enumerate().peekable();
+    let mut description = String::new();
 
-    for (lineno, line) in input.lines().enumerate() {
+    while let Some((_, line)) = lines.next_if(|(_, line)| line.starts_with('#')) {
+        description.push_str(&line[1..]);
+        description.push('\n');
+    }
+
+    if !description.is_empty() {
+        config.insert("description".to_string(), Value::String(description));
+    }
+
+    for (lineno, line) in lines {
         let line = line.trim();
         if line.starts_with('#') || line.is_empty() {
             continue;
@@ -133,9 +144,17 @@ pub fn value_to_bytes(value: &Value, schema: &'static Schema) -> Result<Vec<u8>,
 
 /// Note: the object must have already been verified at this point.
 fn object_to_writer(output: &mut dyn Write, object: &Object) -> Result<(), Error> {
+    // special key `description` for multi-line notes, must be written before everything else
+    if let Some(Value::String(description)) = object.get("description") {
+        for lines in description.lines() {
+            writeln!(output, "#{}", lines)?;
+        }
+    }
+
     for (key, value) in object.iter() {
         match value {
-            Value::Null => continue, // delete this entry
+            _ if key == "description" => continue, // skip description as we handle it above
+            Value::Null => continue,           // delete this entry
             Value::Bool(v) => writeln!(output, "{}: {}", key, v)?,
             Value::String(v) => {
                 if v.as_bytes().contains(&b'\n') {
@@ -172,3 +191,36 @@ fn test() {
 
     assert_eq!(config, NODE_CONFIG.as_bytes());
 }
+
+#[test]
+fn test_with_comment() {
+    use proxmox_schema::ApiType;
+
+    // let's just reuse some schema we actually have available:
+    use crate::config::node::NodeConfig;
+
+    const NODE_INPUT: &str = "\
+        #this should\n\
+        #be included\n\
+        acme: account=pebble\n\
+        # this should not\n\
+        acmedomain0: test1.invalid.local,plugin=power\n\
+        acmedomain1: test2.invalid.local\n\
+    ";
+
+    const NODE_OUTPUT: &str = "\
+        #this should\n\
+        #be included\n\
+        acme: account=pebble\n\
+        acmedomain0: test1.invalid.local,plugin=power\n\
+        acmedomain1: test2.invalid.local\n\
+    ";
+
+    let data: NodeConfig = from_str(NODE_INPUT, &NodeConfig::API_SCHEMA)
+        .expect("failed to parse multi-line notes node config");
+
+    let config = to_bytes(&data, &NodeConfig::API_SCHEMA)
+        .expect("failed to serialize multi-line notes node config");
+
+    assert_eq!(config, NODE_OUTPUT.as_bytes());
+}
-- 
2.30.2

[pve-devel] [PATCH proxmox-backup v3 2/6] fix #3607: 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 proxmox-backup v3 3/6] fix #3607: 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.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 www/Makefile               |   2 +
 www/NavigationTree.js      |   6 ++
 www/NodeNotes.js           |  22 +++++++
 www/panel/MarkdownNotes.js | 130 +++++++++++++++++++++++++++++++++++++
 4 files changed, 160 insertions(+)
 create mode 100644 www/NodeNotes.js
 create mode 100644 www/panel/MarkdownNotes.js

diff --git a/www/Makefile b/www/Makefile
index 455fbeec..aff0c901 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -81,6 +81,7 @@ JSSRC=							\
 	panel/StorageAndDisks.js			\
 	panel/UsageChart.js				\
 	panel/NodeInfo.js				\
+	panel/MarkdownNotes.js			        \
 	ZFSList.js					\
 	DirectoryList.js				\
 	LoginView.js					\
@@ -98,6 +99,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..7fa3f2e6
--- /dev/null
+++ b/www/NodeNotes.js
@@ -0,0 +1,22 @@
+// 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: 'pbsMarkdownNotes',
+		tools: false,
+		border: false,
+		node: 'localhost',
+		enableTbar: true,
+	    }],
+	},
+    ],
+});
diff --git a/www/panel/MarkdownNotes.js b/www/panel/MarkdownNotes.js
new file mode 100644
index 00000000..6d601401
--- /dev/null
+++ b/www/panel/MarkdownNotes.js
@@ -0,0 +1,130 @@
+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 (!me.node) {
+	    throw 'no node provided, cannot construct url';
+	}
+
+	me.url = `/api2/extjs/nodes/${me.node}/config`;
+	return {};
+    },
+
+    run_editor: function() {
+	let me = this;
+	Ext.create('Proxmox.window.Edit', {
+	    title: gettext('Notes'),
+	    onlineHelp: 'markdown_basics',
+	    width: 800,
+	    height: 600,
+	    resizable: true,
+	    layout: 'fit',
+	    defaultButton: undefined,
+	    items: {
+		xtype: 'textarea',
+		maxLength: me.maxLength,
+		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',
+		},
+	    },
+	    url: me.url,
+	    listeners: {
+		destroy: function() {
+		    me.load();
+		},
+	    },
+	    autoShow: true,
+	    autoLoad: true,
+	});
+    },
+
+    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.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();
+	},
+    }],
+
+    tbar: {
+	itemId: 'tbar',
+	hidden: true,
+	items: [
+	    {
+		text: gettext('Edit'),
+		handler: function() {
+		    this.up('panel').run_editor();
+		},
+	    },
+	],
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.callParent();
+
+	if (me.enableTbar === true) {
+	    me.down('#tbar').setVisible(true);
+	}
+
+	me.load();
+    },
+});
-- 
2.30.2

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

[Stefan Sterz]

move these from pve to the widget toolkit to be ablte to use them in
pbs

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/Makefile            |   2 +
 src/panel/NotesView.js  | 155 ++++++++++++++++++++++++++++++++++++++++
 src/window/NotesEdit.js |  38 ++++++++++
 3 files changed, 195 insertions(+)
 create mode 100644 src/panel/NotesView.js
 create mode 100644 src/window/NotesEdit.js

diff --git a/src/Makefile b/src/Makefile
index de34531..ae20947 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -65,6 +65,7 @@ JSSRC=					\
 	panel/ACMEDomains.js		\
 	panel/StatusView.js		\
 	panel/TfaView.js		\
+	panel/NotesView.js		\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
 	window/SafeDestroy.js		\
@@ -86,6 +87,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..df5e688
--- /dev/null
+++ b/src/panel/NotesView.js
@@ -0,0 +1,155 @@
+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,
+
+    cbindData: function(initalConfig) {
+	let me = this;
+
+	if (me.node) {
+	    me.url = `/api2/extjs/nodes/${me.node}/config`;
+	    me.maxLength = 64 * 1022;
+	}
+
+	return {};
+    },
+
+
+    run_editor: function() {
+	let me = this;
+	Ext.create('Proxmox.window.NotesEdit', {
+	    url: me.url,
+	    listeners: {
+		destroy: () => me.load(),
+	    },
+	    autoShow: true,
+	}).setMaxLength(me.maxLength);
+    },
+
+    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) {
+		me.update(gettext('Error') + " " + response.htmlStatus);
+		me.setCollapsed(false);
+	    },
+	    success: function(response, opts) {
+		let text = response.result.data.description;
+		me.setNotes(text);
+	    },
+	});
+    },
+
+    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();
+	},
+    }],
+
+    tbar: {
+	itemId: 'tbar',
+	hidden: true,
+	items: [
+	    {
+		text: gettext('Edit'),
+		handler: function() {
+		    this.up('panel').run_editor();
+		},
+	    },
+	],
+    },
+
+    initComponent: function() {
+	const me = this;
+	let type = '';
+
+	if (!me.node) {
+	    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.callParent();
+
+	if (me.enableTbar === true || 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..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

[pve-devel] [PATCH proxmox-backup v3 5/6] fix #3607: ui: refactor notes by moving the panel/window to widget kit

[Stefan Sterz]

for better re-use between pbs and pve move the markdown notes panel
and editor window to the widget kit and unify them there.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 www/Makefile               |   1 -
 www/NodeNotes.js           |   2 +-
 www/panel/MarkdownNotes.js | 130 -------------------------------------
 3 files changed, 1 insertion(+), 132 deletions(-)
 delete mode 100644 www/panel/MarkdownNotes.js

diff --git a/www/Makefile b/www/Makefile
index aff0c901..922d8de9 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -81,7 +81,6 @@ JSSRC=							\
 	panel/StorageAndDisks.js			\
 	panel/UsageChart.js				\
 	panel/NodeInfo.js				\
-	panel/MarkdownNotes.js			        \
 	ZFSList.js					\
 	DirectoryList.js				\
 	LoginView.js					\
diff --git a/www/NodeNotes.js b/www/NodeNotes.js
index 7fa3f2e6..f237f556 100644
--- a/www/NodeNotes.js
+++ b/www/NodeNotes.js
@@ -11,7 +11,7 @@ Ext.define('PBS.NodeNotes', {
 	    xtype: 'container',
 	    layout: 'fit',
 	    items: [{
-		xtype: 'pbsMarkdownNotes',
+		xtype: 'pmxNotesView',
 		tools: false,
 		border: false,
 		node: 'localhost',
diff --git a/www/panel/MarkdownNotes.js b/www/panel/MarkdownNotes.js
deleted file mode 100644
index 6d601401..00000000
--- a/www/panel/MarkdownNotes.js
+++ /dev/null
@@ -1,130 +0,0 @@
-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 (!me.node) {
-	    throw 'no node provided, cannot construct url';
-	}
-
-	me.url = `/api2/extjs/nodes/${me.node}/config`;
-	return {};
-    },
-
-    run_editor: function() {
-	let me = this;
-	Ext.create('Proxmox.window.Edit', {
-	    title: gettext('Notes'),
-	    onlineHelp: 'markdown_basics',
-	    width: 800,
-	    height: 600,
-	    resizable: true,
-	    layout: 'fit',
-	    defaultButton: undefined,
-	    items: {
-		xtype: 'textarea',
-		maxLength: me.maxLength,
-		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',
-		},
-	    },
-	    url: me.url,
-	    listeners: {
-		destroy: function() {
-		    me.load();
-		},
-	    },
-	    autoShow: true,
-	    autoLoad: true,
-	});
-    },
-
-    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.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();
-	},
-    }],
-
-    tbar: {
-	itemId: 'tbar',
-	hidden: true,
-	items: [
-	    {
-		text: gettext('Edit'),
-		handler: function() {
-		    this.up('panel').run_editor();
-		},
-	    },
-	],
-    },
-
-    initComponent: function() {
-	var me = this;
-
-	me.callParent();
-
-	if (me.enableTbar === true) {
-	    me.down('#tbar').setVisible(true);
-	}
-
-	me.load();
-    },
-});
-- 
2.30.2

[pve-devel] [PATCH manager v3 6/6] 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

Re: [pve-devel] [pbs-devel] [PATCH proxmox-backup v3 1/6] fix #3067: api: add support for multi-line comments in node.cfg

[Wolfgang Bumiller]

On Fri, Mar 04, 2022 at 12:31:57PM +0100, Stefan Sterz wrote:
> add support for multi-line comments to node.cfg and the api, similar to
> how pve handles multi-line comments
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>

Acked-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

[pve-devel] applied: [pbs-devel] [PATCH proxmox-backup v3 1/6] fix #3067: api: add support for multi-line comments in node.cfg

[Thomas Lamprecht]

On 04.03.22 12:31, Stefan Sterz wrote:
> add support for multi-line comments to node.cfg and the api, similar to
> how pve handles multi-line comments
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  pbs-api-types/src/lib.rs |  9 +++++++
>  src/api2/node/config.rs  |  4 +++
>  src/config/node.rs       | 14 +++++++++-
>  src/tools/config.rs      | 56 ++++++++++++++++++++++++++++++++++++++--
>  4 files changed, 80 insertions(+), 3 deletions(-)
> 
>

applied, with Wolfgang's A-b tag, thanks!

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

[Thomas Lamprecht]

On 04.03.22 12:32, Stefan Sterz wrote:
> move these from pve to the widget toolkit to be ablte to use them in
> pbs
> 

this is no 1:1 move but the commit messages fails to describe the changes
made nor the rationale.

> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  src/Makefile            |   2 +
>  src/panel/NotesView.js  | 155 ++++++++++++++++++++++++++++++++++++++++
>  src/window/NotesEdit.js |  38 ++++++++++
>  3 files changed, 195 insertions(+)
>  create mode 100644 src/panel/NotesView.js
>  create mode 100644 src/window/NotesEdit.js
> 
> diff --git a/src/Makefile b/src/Makefile
> index de34531..ae20947 100644
> --- a/src/Makefile
> +++ b/src/Makefile
> @@ -65,6 +65,7 @@ JSSRC=					\
>  	panel/ACMEDomains.js		\
>  	panel/StatusView.js		\
>  	panel/TfaView.js		\
> +	panel/NotesView.js		\
>  	window/Edit.js			\
>  	window/PasswordEdit.js		\
>  	window/SafeDestroy.js		\
> @@ -86,6 +87,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..df5e688
> --- /dev/null
> +++ b/src/panel/NotesView.js
> @@ -0,0 +1,155 @@
> +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,
> +
> +    cbindData: function(initalConfig) {
> +	let me = this;
> +
> +	if (me.node) {
> +	    me.url = `/api2/extjs/nodes/${me.node}/config`;
> +	    me.maxLength = 64 * 1022;

why factor 1022 ?! And why override it uncoditionally, leaving no control for the
caller?

also half of initialization logic now gets handled by cbind and half by initComponent,
why the split-approach? This could just be an `else` for the initComponent's if (!node)
clause.

> +	}
> +
> +	return {};
> +    },
> +
> +

^- extra whitespace
> +    run_editor: function() {
> +	let me = this;
> +	Ext.create('Proxmox.window.NotesEdit', {
> +	    url: me.url,
> +	    listeners: {
> +		destroy: () => me.load(),
> +	    },
> +	    autoShow: true,
> +	}).setMaxLength(me.maxLength);
> +    },
> +
> +    setNotes: function(value) {
> +	let me = this;
> +	var data = value || '';

use let for new code, could also just drop intermediate variable and make either the
caller fallback, or  use `value || ''` for the parse and !data for the setCollapsed.

> +
> +	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) {
> +		me.update(gettext('Error') + " " + response.htmlStatus);
> +		me.setCollapsed(false);
> +	    },
> +	    success: function(response, opts) {
> +		let text = response.result.data.description;

useless intermediate variable

> +		me.setNotes(text);

me.setNotes(response.result.data.description || '');

or alternatively:

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();
> +	},
> +    }],
> +
> +    tbar: {

no hard feelings on moving tbar from top of file here, but it makes slightly diff'ing harder.

> +	itemId: 'tbar',
> +	hidden: true,
> +	items: [
> +	    {
> +		text: gettext('Edit'),
> +		handler: function() {
> +		    this.up('panel').run_editor();

I'd keep the `let view = `

> +		},
> +	    },
> +	],
> +    },
> +
> +    initComponent: function() {
> +	const me = this;
> +	let type = '';
> +
> +	if (!me.node) {
> +	    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.callParent();
> +
> +	if (me.enableTbar === true || type === 'node' || type === '') { // '' is for datacenter


s/enableTbar/enableTBar/ and please also set the default option value on top, as
it's needlessly hard to make devs pull any possible config out from the code.

> +	    me.down('#tbar').setVisible(true);
> +	} else if (me.pveSelNode.data.template !== 1) {

use ?. for accessing properties that may not be defined, this can easily break if used in
a context where the if evaluates false.

> +	    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',

it could be better to let the caller set the onlineHelp, so that the reference
existence is correctly checked in pve-manage/proxmox-backup.

> +
> +    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] [PATCH proxmox-backup v3 3/6] fix #3607: ui: add a separate notes view for longer markdown notes

[Thomas Lamprecht]

On 04.03.22 12:31, Stefan Sterz wrote:
> since markdown notes might be rather long, this commit adds a tab
> similar to pve's datacenter or node notes.
> 
> Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
> ---
>  www/Makefile               |   2 +
>  www/NavigationTree.js      |   6 ++
>  www/NodeNotes.js           |  22 +++++++
>  www/panel/MarkdownNotes.js | 130 +++++++++++++++++++++++++++++++++++++
>  4 files changed, 160 insertions(+)
>  create mode 100644 www/NodeNotes.js
>  create mode 100644 www/panel/MarkdownNotes.js
> 

> diff --git a/www/panel/MarkdownNotes.js b/www/panel/MarkdownNotes.js
> new file mode 100644
> index 00000000..6d601401
> --- /dev/null
> +++ b/www/panel/MarkdownNotes.js> @@ -0,0 +1,130 @@
> +Ext.define('PBS.panel.MarkdownNotes', {
> +    extend: 'Ext.panel.Panel',
> +    xtype: 'pbsMarkdownNotes',
> +    mixins: ['Proxmox.Mixin.CBind'],
> +

why add this if we move a almost identical one to widget toolkit?

If there are some changes required that cannot be easily passed via a config, we should still
reuse most by extending the NotesView wtk component, and not panel.Panel

Re: [pve-devel] [PATCH proxmox-backup v3 5/6] fix #3607: ui: refactor notes by moving the panel/window to widget kit

[Thomas Lamprecht]

On 04.03.22 12:32, Stefan Sterz wrote:
> for better re-use between pbs and pve move the markdown notes panel
> and editor window to the widget kit and unify them there.
> 

ah ok, now I get it, rather please just leave the intermediate addition of
a notes view and directly use the wtk version and just note here that a wtk
bump is required.