From: Stefan Sterz <s.sterz@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH proxmox-backup 4/5] fix #3607: ui: make dashboard notes markdown capable
Date: Tue, 22 Feb 2022 12:25:55 +0100 [thread overview]
Message-ID: <20220222112556.3747239-5-s.sterz@proxmox.com> (raw)
In-Reply-To: <20220222112556.3747239-1-s.sterz@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
www/Dashboard.js | 2 +-
www/Makefile | 3 +-
www/panel/MarkdownNotes.js | 134 +++++++++++++++++++++++++++++++++++++
3 files changed, 137 insertions(+), 2 deletions(-)
create mode 100644 www/panel/MarkdownNotes.js
diff --git a/www/Dashboard.js b/www/Dashboard.js
index a78ad375..a76660ff 100644
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -230,7 +230,7 @@ Ext.define('PBS.Dashboard', {
margin: '0 20 0 0',
},
{
- xtype: 'pbsNotes',
+ xtype: 'pbsMarkdownNotes',
reference: 'nodeNotes',
node: 'localhost',
loadOnInit: true,
diff --git a/www/Makefile b/www/Makefile
index 636d4a57..2d55d39d 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -81,7 +81,8 @@ JSSRC= \
panel/StorageAndDisks.js \
panel/UsageChart.js \
panel/NodeInfo.js \
- panel/Notes.js \
+ panel/Notes.js \
+ panel/MarkdownNotes.js \
ZFSList.js \
DirectoryList.js \
LoginView.js \
diff --git a/www/panel/MarkdownNotes.js b/www/panel/MarkdownNotes.js
new file mode 100644
index 00000000..83119d36
--- /dev/null
+++ b/www/panel/MarkdownNotes.js
@@ -0,0 +1,134 @@
+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 (('node' in me && 'datastore' in me) ||
+ (!('node' in me) && !('datastore' in me))) {
+ throw 'either both a node and a datastore were given or neither. please provide one.';
+ } else if ('node' in me) {
+ me.url = `/api2/extjs/nodes/${me.node}/config`;
+ } else {
+ me.url = `/api2/extjs/config/datastore/${me.datastore}`;
+ }
+
+ return {};
+ },
+
+ run_editor: function() {
+ let me = this;
+ let win = Ext.create('Proxmox.window.Edit', {
+ title: gettext('Notes'),
+ width: 800,
+ height: 600,
+ resizable: true,
+ layout: 'fit',
+ defaultButton: undefined,
+ setMaxLength: function(maxLength) {
+ let area = win.down('textarea[name="comment"]');
+ area.maxLength = maxLength;
+ area.validate();
+
+ return me;
+ },
+ items: {
+ xtype: 'textarea',
+ name: 'comment',
+ 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();
+ },
+ },
+ }).show();
+ win.setMaxLength(me.maxLength);
+ win.load();
+ },
+
+ 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.comment);
+ },
+ });
+ },
+
+ 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();
+ },
+ }],
+
+ collapsible: true,
+ collapseDirection: 'right',
+
+ initComponent: function() {
+ var me = this;
+
+ me.callParent();
+
+ let sp = Ext.state.Manager.getProvider();
+ me.collapseMode = sp.get('notes-collapse', 'never');
+
+ if (me.loadOnInit === true) {
+ me.load();
+ }
+
+ if (me.collapseMode === 'auto') {
+ me.setCollapsed(true);
+ }
+ },
+});
--
2.30.2
next prev parent reply other threads:[~2022-02-22 11:26 UTC|newest]
Thread overview: 8+ messages / expand[flat|nested] mbox.gz Atom feed top
2022-02-22 11:25 [pbs-devel] [PATCH proxmox-backup 0/5] fix #3067: add notes functionality to webui Stefan Sterz
2022-02-22 11:25 ` [pbs-devel] [PATCH proxmox-backup 1/5] fix #3067: api: add support for a comment field in node.cfg Stefan Sterz
2022-02-22 11:25 ` [pbs-devel] [PATCH proxmox-backup 2/5] fix #3067: pbs ui: add support for a notes field in the dashboard Stefan Sterz
2022-02-22 11:25 ` [pbs-devel] [PATCH proxmox-backup 3/5] fix #3067: api: add multi-line comments to node.cfg Stefan Sterz
2022-02-23 10:28 ` Wolfgang Bumiller
2022-02-23 14:41 ` Stefan Sterz
2022-02-22 11:25 ` Stefan Sterz [this message]
2022-02-22 11:25 ` [pbs-devel] [PATCH proxmox-backup 5/5] fix #3607: ui: add a separate notes view for longer markdown notes Stefan Sterz
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20220222112556.3747239-5-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox