[pve-devel] [PATCH manager 1/2] add tooltip hashmap/generator for help button

[Dominik Csapak]

instead of manually setting the onlineHelpTooltip property
we now have a method which maps links to the docs to
titles

for now this uses a static hashmap, but in the future
we want to generate this by the pve-docs package

also most of the subheaders we can generate instead of
saving them because they simply have each word capitalized
(e.g. '_container_network' => 'Container Network')

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Utils.js             | 64 +++++++++++++++++++++++++++++++++++++++
 www/manager6/button/HelpButton.js | 11 ++++++-
 www/manager6/panel/ConfigPanel.js | 12 ++------
 3 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index a31beb9..07c3ef7 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -63,6 +63,40 @@ var HostPort_match = new RegExp("^(" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")(:
 var HostPortBrackets_match = new RegExp("^\\[(?:" + IPV6_REGEXP + "|" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")\\](:\\d+)?$");
 var IP6_dotnotation_match = new RegExp("^" + IPV6_REGEXP + "(\\.\\d+)?$");
 
+var DocsPages = {
+    'pve-admin-guide.html':'Proxmox VE Administration Guide',
+    'chapter-sysadmin.html':'Host System Administration',
+    'chapter-pvecm.html':'Cluster Manager',
+    'chapter-pmxcfs.html':'Proxmox Cluster File System (pmxcfs)',
+    'chapter-pvesm.html':'Proxmox VE Storage',
+    'chapter-qm.html': 'Qemu/KVM Virtual Machines',
+    'chapter-pve-firewall.html': 'Proxmox VE Firewall',
+    'chapter-pveum.html': 'User Management',
+    'chapter-pct.html': 'Proxmox Container Toolkit',
+    'chapter-ha-manager.html': 'High Availability',
+    'chapter-vzdump.html': 'Backup and Restore',
+    'chapter-pve-faq.html': 'Frequently Asked Questions',
+    'chapter-pve-bibliography.html': 'Bibliography',
+    'qm.1.html': 'qm',
+    'qmrestore.1.html': 'qmrestore',
+    'pct.1.html': 'pct',
+    'pveam.1.html': 'pveam',
+    'pveceph.1.html': 'pveceph',
+    'pvecm.1.html': 'pvecm',
+    'pveum.1.html': 'pveum',
+    'pvesm.1.html': 'pvesm',
+    'pvesubscription.1.html': 'pvesubscription',
+    'vzdump.1.html': 'vzdump',
+    'ha-manager.1.html': 'ha-manager',
+    'index.html':'',
+    'datacenter.cfg.5.html':'Proxmox VE Datacenter Configuration'
+};
+
+var DocsSubTitles = {
+    '_vm_container_configuration':'VM/Container configuration',
+    '_ip_aliases':'IP Aliases',
+    '_ip_sets':'IP Sets'
+};
 Ext.define('PVE.Utils', { statics: {
 
     // this class only contains static functions
@@ -1275,6 +1309,36 @@ Ext.define('PVE.Utils', { statics: {
 	}
 
 	menu.showAt(event.getXY());
+    },
+
+    mapDocsUrlToTitle: function(url) {
+	var title, subtitle;
+	// if there is a subtitle
+	if (url.indexOf('#') !== -1) {
+	    title = DocsPages[url.split('#')[0]] || '';
+	    subtitle = DocsSubTitles[url.split('#')[1]];
+
+	    // if we do not find the subtitle,
+	    // capitalize the beginning of every word
+	    // and replace '_' with ' '
+	    // e.g.:
+	    // '_my_text' -> 'My Text'
+	    if (!subtitle) {
+		subtitle = url.split('#')[1].replace(/_(\w)/gi, function(match,p1){
+		    return ' ' + p1.toUpperCase();
+		}).slice(1);
+	    }
+
+	    if (title !== '') {
+		title += ' - ';
+	    }
+
+	    title += subtitle;
+	} else {
+	    title = DocsPages[url] || '';
+	}
+
+	return title;
     }
 }});
 
diff --git a/www/manager6/button/HelpButton.js b/www/manager6/button/HelpButton.js
index 4c2e07a..5afed1f 100644
--- a/www/manager6/button/HelpButton.js
+++ b/www/manager6/button/HelpButton.js
@@ -21,7 +21,7 @@ Ext.define('PVE.button.Help', {
 	onPveShowHelp: function(helpLink) {
 	    var me = this.getView();
 	    if (me.listenToGlobalEvent === true) {
-		me.onlineHelp = helpLink;
+		me.setOnlineHelp(helpLink);
 		me.show();
 	    }
 	},
@@ -32,6 +32,15 @@ Ext.define('PVE.button.Help', {
 	    }
 	}
     },
+
+    // this sets the link and
+    // sets the tooltip text
+    setOnlineHelp:function(link) {
+	var me = this;
+	me.onlineHelp = link;
+	me.setTooltip(PVE.Utils.mapDocsUrlToTitle(link));
+    },
+
     handler: function() {
 	var me = this;
 	if (me.onlineHelp) {
diff --git a/www/manager6/panel/ConfigPanel.js b/www/manager6/panel/ConfigPanel.js
index fe1a7d1..84c3c10 100644
--- a/www/manager6/panel/ConfigPanel.js
+++ b/www/manager6/panel/ConfigPanel.js
@@ -113,14 +113,7 @@ Ext.define('PVE.panel.Config', {
 	if (me.savedItems[cardid]) {
 	    var curcard = me.getLayout().getActiveItem();
 	    var newcard = me.add(me.savedItems[cardid]);
-	    me.helpButton.onlineHelp = newcard.onlineHelp || me.onlineHelp;
-	    var tooltip = '';
-	    if (newcard.onlineHelp) {
-		tooltip = newcard.onlineHelpTooltip || newcard.title;
-	    } else if (me.onlineHelpTooltip) {
-		tooltip = me.onlineHelpTooltip;
-	    }
-	    me.helpButton.setTooltip(tooltip);
+	    me.helpButton.setOnlineHelp(newcard.onlineHelp || me.onlineHelp);
 	    if (curcard) {
 		me.setActiveItem(cardid);
 		me.remove(curcard, true);
@@ -185,8 +178,7 @@ Ext.define('PVE.panel.Config', {
 	me.helpButton = Ext.create('PVE.button.Help', {
 	    hidden: false,
 	    listenToGlobalEvent: false,
-	    onlineHelp: me.onlineHelp || undefined,
-	    tooltip: me.onlineHelpTooltip
+	    onlineHelp: me.onlineHelp || undefined
 	});
 
 	tbar.push(me.helpButton);
-- 
2.1.4