You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2016/01/30 04:38:37 UTC

[12/29] incubator-brooklyn git commit: Concertina in managing, glossary & refactored names

Concertina in managing, glossary & refactored names


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/ed7a510b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/ed7a510b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/ed7a510b

Branch: refs/heads/master
Commit: ed7a510b5b191c4c3d2d2eaea61c516add36cda8
Parents: 4b864fa
Author: Duncan Godwin <du...@cloudsoftcorp.com>
Authored: Fri Jan 22 14:44:45 2016 +0000
Committer: Duncan Godwin <du...@cloudsoftcorp.com>
Committed: Fri Jan 22 14:44:45 2016 +0000

----------------------------------------------------------------------
 brooklyn-docs/_includes/base-head.html  |  13 +
 brooklyn-docs/guide/glossary.json       |  18 ++
 brooklyn-docs/guide/start/blueprints.md |   1 +
 brooklyn-docs/guide/start/managing.md   | 123 ++++++---
 brooklyn-docs/style/deps/glossarizer.js | 379 +++++++++++++++++++++++++++
 brooklyn-docs/style/deps/tooltip.css    |  64 +++++
 brooklyn-docs/style/deps/tooltip.js     |  86 ++++++
 7 files changed, 646 insertions(+), 38 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/_includes/base-head.html
----------------------------------------------------------------------
diff --git a/brooklyn-docs/_includes/base-head.html b/brooklyn-docs/_includes/base-head.html
index dc1d31f..0773dc2 100644
--- a/brooklyn-docs/_includes/base-head.html
+++ b/brooklyn-docs/_includes/base-head.html
@@ -7,11 +7,24 @@
 <link href="{% dependency_url bootstrap.css %}" rel="stylesheet">
 <link href="{{site.path.style}}/deps/octicons/octicons.css" rel="stylesheet">
 <link href="{{site.path.style}}/deps/bootstrap-theme.css" rel="stylesheet">
+<link href="{{site.path.style}}/deps/tooltip.css" rel="stylesheet">
 
 <link rel="stylesheet" href="{{ site.path.style }}/css/code.css" type="text/css" media="screen" />
 
 <link href="{{site.path.style}}/css/website.css" rel="stylesheet">
 
 <script src="{% dependency_url jquery.js %}"></script>
+<script src="{% dependency_url glossarizer.js %}"></script>
 <script src="{% dependency_url bootstrap.js %}"></script>
+<script src="{% dependency_url tooltip.js %}"></script>
 <script type="text/javascript" src="{{ site.path.style }}/deps/jquery.cookie.js"></script>
+<script>
+$(function(){
+  $('body').glossarizer({
+    sourceURL: '/guide/glossary.json?'+Math.random(),
+    caseSensitive : true,
+    lookupTagName : 'p, ul',
+    callback: function(){ new tooltip(); }
+  });
+});
+</script>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/guide/glossary.json
----------------------------------------------------------------------
diff --git a/brooklyn-docs/guide/glossary.json b/brooklyn-docs/guide/glossary.json
new file mode 100644
index 0000000..1f8b19d
--- /dev/null
+++ b/brooklyn-docs/guide/glossary.json
@@ -0,0 +1,18 @@
+[
+  {
+    "term": "location, !location:",
+    "description": "A server or resource to which Apache Brooklyn can deploy applications"
+  },
+  {
+    "term": "blueprint",
+    "description": "A descriptor or pattern which describes how Apache Brooklyn should deploy applications"
+  },
+  {
+    "term": "entity",
+    "description": "A software package or service Apache Brooklyn can interact with"
+  },
+  {
+    "term": "sensor, !<code>sensor",
+    "description": "A sensor is a property of an Apache Brooklyn entity, updated in real-time"
+  }
+]

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/guide/start/blueprints.md
----------------------------------------------------------------------
diff --git a/brooklyn-docs/guide/start/blueprints.md b/brooklyn-docs/guide/start/blueprints.md
index 4f271cc..7d9a0e2 100644
--- a/brooklyn-docs/guide/start/blueprints.md
+++ b/brooklyn-docs/guide/start/blueprints.md
@@ -19,6 +19,7 @@ hover your mouse over the right side of the text box below to get a Javascript "
 name: Tomcat
 services:
 - type: org.apache.brooklyn.entity.webapp.tomcat.TomcatServer
+  name: tomcatServer
 location: <your-location-definition-goes-here>
 {% endhighlight %}
 

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/guide/start/managing.md
----------------------------------------------------------------------
diff --git a/brooklyn-docs/guide/start/managing.md b/brooklyn-docs/guide/start/managing.md
index bb9cd3a..be6ccce 100644
--- a/brooklyn-docs/guide/start/managing.md
+++ b/brooklyn-docs/guide/start/managing.md
@@ -41,8 +41,20 @@ A full list of abbreviations such as this can be found in the [CLI reference gui
 
 In the above example the Id `hTPAF19s` and the Name `Tomcat` are shown. You can use either of these handles to monitor and control the application. The Id shown for your application will be different to this but the name should be the same, note that if you are running multiple applications the Name may not be unique.
 
+#### Things we might want to do
+
+<div class="panel-group" id="accordion">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Get the application details</a>
+                </h4>
+            </div>
+            <div id="collapseOne" class="panel-collapse collapse in">
+                <div class="panel-body">
+<p>     
 Using the name `Tomcat` we can get the application details:
-
+</p>
 {% highlight bash %}
 $ br app Tomcat
 {% endhighlight %}
@@ -57,28 +69,63 @@ $ br app Tomcat
   LocationName:    FixedListMachineProvisioningLocation:ajVV   
   LocationSpec:    vagrantbyon   
   LocationType:    org.apache.brooklyn.location.byon.FixedListMachineProvisioningLocation  
-</pre>
-
+</pre>        
+                </div>
+            </div>
+        </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Explore the hierarchy of all applications</a>
+                </h4>
+            </div>
+            <div id="collapseTwo" class="panel-collapse collapse">
+                <div class="panel-body">
+<p>              
 We can explore the management hierarchy of all applications, which will show us the entities they are composed of.
+</p>
 {% highlight bash %}
 $ br tree
 {% endhighlight %}
 <pre>
 |- Tomcat
 +- org.apache.brooklyn.entity.stock.BasicApplication
-  |- TomcatServer:Wx7r
+  |- tomcatServer
   +- org.apache.brooklyn.entity.webapp.tomcat.TomcatServer
 </pre>
-
+                </div>
+            </div>
+        </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">View our application's blueprint</a>
+                </h4>
+            </div>
+            <div id="collapseThree" class="panel-collapse collapse">
+                <div class="panel-body">
+<p>
 You can view the blueprint for the application again:
+</p>
 {% highlight bash %}
 $ br app tomcat spec
 {% endhighlight %}
 <pre>
 "name: Tomcat\nlocation:\n  mylocation\nservices:\n- serviceType: brooklyn.entity.webapp.tomcat.TomcatServer\n"
-</pre>
-
-You can view the config of the application:
+</pre>                </div>
+            </div>
+        </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">View our application's configuration</a>
+                </h4>
+            </div>
+            <div id="collapseFour" class="panel-collapse collapse">
+                <div class="panel-body">
+<p>
+You can view the configuration of the application:
+</p>
 {% highlight bash %}
 $ br app tomcat config
 {% endhighlight %}
@@ -87,6 +134,10 @@ Key                    Value
 camp.template.id       l67i25CM   
 brooklyn.wrapper_app   true   
 </pre>
+                </div>
+            </div>
+        </div>
+    </div>
 
 ## Entities
 
@@ -99,27 +150,29 @@ $ br app Tomcat entity
 {% endhighlight %}
 <pre>
 Id         Name                Type   
-Wx7r1C4e   TomcatServer:Wx7r   org.apache.brooklyn.entity.webapp.tomcat.TomcatServer      
+Wx7r1C4e   tomcatServer   org.apache.brooklyn.entity.webapp.tomcat.TomcatServer      
 </pre>
 
-You can get summary information for an entity by providing its name (or ID).
+This shows one entity is available: `tomcatServer`. Note that this is the name we gave the entity in the YAML in [Launching from a Blueprint](./blueprints.html#launching-from-a-blueprint) on the previous page.
+
+You can get summary information for this entity by providing its name (or ID).
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r
+$ br app Tomcat ent tomcatServer
 {% endhighlight %}
 <pre>
 Id:              Wx7r1C4e   
-Name:            TomcatServer:Wx7r   
+Name:            tomcatServer   
 Status:          RUNNING   
 ServiceUp:       true   
 Type:            org.apache.brooklyn.entity.webapp.tomcat.TomcatServer   
 CatalogItemId:   null   
 </pre>
 
-Also you can see the config of the entity with the ```config``` command.
+Also you can see the configuration of this entity with the ```config``` command.
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r config
+$ br app Tomcat ent tomcatServer config
 {% endhighlight %}
 <pre>
 Key                       Value   
@@ -131,12 +184,6 @@ onbox.base.dir.resolved   true
 install.unique_label      TomcatServer_7.0.65   
 </pre>
 
-If an entity name is annoyingly long to type, the entity can be renamed:
-
-{% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r rename server
-{% endhighlight %}
-
 ## Sensors
 
 *Sensors* are properties which reflect the state of an *entity* and provide a real-time picture of an *entity* in an application.
@@ -155,11 +202,11 @@ service.state              Actual lifecycle state of the service
 service.state.expected     Last controlled change to service state, indicating what the expected state should be   "running @ 1450356994928 / Thu Dec 17 12:56:34 GMT 2015"
 </pre>
 
-To explore all sensors available on an entity use the sensor command with an entity scope.
+To explore all sensors available on an entity use the `sensor` command with an entity scope.
 Note, again, the name of the application or entity can be used or the ID:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r sensor
+$ br app Tomcat ent tomcatServer sensor
 {% endhighlight %}
 <pre>
 Name                                            Description                                                                                                      Value   
@@ -178,7 +225,7 @@ host.subnet.hostname                            Host name as known internally in
 To study selected sensors, give the command the sensor name as an argument
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r sensor webapp.url  
+$ br app Tomcat ent tomcatServer sensor webapp.url  
 {% endhighlight %}
 <pre>
 "http://10.10.10.101:8080/"
@@ -203,7 +250,7 @@ stop            Stop the process/service represented by an entity
 For an entity supply the entity scope:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r effector
+$ br app Tomcat ent tomcatServer effector
 {% endhighlight %}
 <pre>
 Name                              Description                                                                               Parameters   
@@ -218,7 +265,7 @@ undeploy                          Undeploys the given context/artifact
 To view just one effector's documentation, supply its name to the show command:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r effector deploy
+$ br app Tomcat ent tomcatServer effector deploy
 {% endhighlight %}
 <pre>
 Name            Description                                                                                                                                                                            Parameters   
@@ -233,7 +280,7 @@ application and return any cloud machines that were being used. Do the invocatio
 the scope, and using the command ```invoke```. 
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r eff stop invoke
+$ br app Tomcat ent tomcatServer eff stop invoke
 {% endhighlight %}
 
 Note that the three "lifecycle" related effectors, ```start```, ```stop```, and ```restart```, are common to all software process 
@@ -241,13 +288,13 @@ entities in Brooklyn. They are so commonly used that they have their own aliases
 by:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r stop
+$ br app Tomcat ent tomcatServer stop
 {% endhighlight %}
 
 Some effectors require parameters for their invocation, as in the example of ```deploy``` above.  
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r effector deploy
+$ br app Tomcat ent tomcatServer effector deploy
 {% endhighlight %}
 <pre>
 Name     Description                                                                             Parameters   
@@ -261,8 +308,8 @@ sensor, and the index page is fetched. Note that at present a ```tr``` command i
 quotation characters from the returned sensor value. 
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r effector deploy invoke -P url=https://tomcat.apache.org/tomcat-6.0-doc/appdev/sample/sample.war -P targetName=sample
-$ webapp=$(br app Tomcat ent TomcatServer:Wx7r sensor webapp.url | tr -d '"')
+$ br app Tomcat ent tomcatServer effector deploy invoke -P url=https://tomcat.apache.org/tomcat-6.0-doc/appdev/sample/sample.war -P targetName=sample
+$ webapp=$(br app Tomcat ent tomcatServer sensor webapp.url | tr -d '"')
 $ curl $webapp/sample/
 {% endhighlight %}
     <html>
@@ -278,7 +325,7 @@ The ```activity``` command allows us to investigate the activities of an entity.
 To view a list of all activities associated with an entity simply use
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r activity
+$ br app Tomcat ent tomcatServer activity
 {% endhighlight %}
 <pre>
 Id         Task                                       Submitted                      Status      Streams   
@@ -293,7 +340,7 @@ jwwcJWmF   start (processes)                          Thu Dec 17 15:04:43 GMT 20
 To view the details of an individual activity provide its ID:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r activity jwwcJWmF
+$ br app Tomcat ent tomcatServer activity jwwcJWmF
 {% endhighlight %}
 <pre>
 Id:                  jwwcJWmF   
@@ -320,7 +367,7 @@ Adding the ```--children``` or ```-c``` parameter will show the activity's child
 of the activities to be investigated:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r activity -c jwwcJWmF
+$ br app Tomcat ent tomcatServer activity -c jwwcJWmF
 {% endhighlight %}
 <pre>
 Id         Task                         Submitted                      Status   
@@ -344,7 +391,7 @@ using the commands, ```env```, ```stdin```, ```stdout```, and ```stderr```.  For
 activity from the result of the earlier example,
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r act KLTxDkoa stdout
+$ br app Tomcat ent tomcatServer act KLTxDkoa stdout
 BASE_DIR_RESULT:/home/vagrant/brooklyn-managed-processes:BASE_DIR_RESULT
 {% endhighlight %}
 
@@ -352,7 +399,7 @@ BASE_DIR_RESULT:/home/vagrant/brooklyn-managed-processes:BASE_DIR_RESULT
 To monitor progress on an application as it deploys, for example, one could use a shell loop:
 
 {% highlight bash %}
-$ while br app Tomcat ent TomcatServer:Wx7r activity | grep 'In progress' ; do 
+$ while br app Tomcat ent tomcatServer activity | grep 'In progress' ; do 
   sleep 1; echo ; date; 
 done
 {% endhighlight %}
@@ -360,7 +407,7 @@ This loop will exit when the application has deployed successfully or has failed
 command may provide information about what happened in any activities that have associated streams:
 
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r act KLTxDkoa stderr
+$ br app Tomcat ent tomcatServer act KLTxDkoa stderr
 {% endhighlight %}
 
 
@@ -381,9 +428,9 @@ as follows (values in brackets are aliases for the scope):
 
 For example
 {% highlight bash %}
-$ br app Tomcat ent TomcatServer:Wx7r config
+$ br app Tomcat ent tomcatServer config
 {% endhighlight %}
-runs the ```config``` command with application scope of ```Tomcat``` and entity scope of ```TomcatServer:Wx7r```.
+runs the ```config``` command with application scope of ```Tomcat``` and entity scope of ```tomcatServer```.
 
 
 ## Next

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/style/deps/glossarizer.js
----------------------------------------------------------------------
diff --git a/brooklyn-docs/style/deps/glossarizer.js b/brooklyn-docs/style/deps/glossarizer.js
new file mode 100644
index 0000000..cdc5dbc
--- /dev/null
+++ b/brooklyn-docs/style/deps/glossarizer.js
@@ -0,0 +1,379 @@
+/**
+ * Plugin Name: Glossarizer
+ * Author : Vinay @Pebbleroad
+ * Date: 02/04/2013
+ * Description: Takes glossary terms from a JSON object -> Searches for terms in your html -> Wraps a abbr tag around the matched word
+ * 1. Fixed IE8 bug where whitespace get removed - Had to change `abbr` tag to a block element `div`
+ */
+
+;(function($){
+
+	/**
+	 * Defaults
+	 */
+	
+	var pluginName = 'glossarizer',
+		defaults = {
+			sourceURL     : '', /* URL of the JSON file with format {"term": "", "description": ""} */	
+			replaceTag    : 'abbr', /* Matching words will be wrapped with abbr tags by default */
+			lookupTagName : 'p, ul, a, div', /* Lookup in either paragraphs or lists. Do not replace in headings */
+			callback      : null, /* Callback once all tags are replaced: Call or tooltip or anything you like */
+			replaceOnce   : false /* Replace only once in a TextNode */,
+			replaceClass  : 'glossarizer_replaced',
+			caseSensitive : false
+		}
+
+	/**
+	 * Constructor
+	 */
+	
+	function Glossarizer(el, options){
+
+		var base = this
+
+		base.el = el;
+
+		/* Element */
+		base.$el = $(el)
+
+		/* Extend options */
+
+		base.options = $.extend({}, defaults, options)
+
+		/* Terms */
+		
+		base.terms = [];
+
+		/* Excludes array */
+
+		base.excludes = [];
+
+		/* Replaced words array */
+
+		base.replaced = [];
+		
+
+		/* Regex Tags */
+		
+		base.regexOption = (base.options.caseSensitive? '': 'i') + (base.options.replaceOnce? '': 'g');
+
+		
+		/* Fetch glossary JSON */
+
+		$.getJSON(this.options.sourceURL).then(function(data){
+
+			base.glossary = data;
+			
+			if(!base.glossary.length || base.glossary.length == 0) return;			
+			
+			/**
+			 * Get all terms
+			 */
+			
+			for(var i =0; i< base.glossary.length; i++){
+				
+				var terms = base.glossary[i].term.split(',');
+
+				for(var j = 0; j < terms.length; j++){
+
+					/* Trim */
+
+					var trimmed = terms[j].replace(/^\s+|\s+$/g, ''),
+						isExclusion = trimmed.indexOf('!');
+					
+					if(isExclusion == -1 || isExclusion != 0){
+
+						/* Glossary terms array */
+						
+						base.terms.push(trimmed)
+
+					}else{
+
+						/* Excluded terms array */
+						
+						base.excludes.push(trimmed.substr(1));
+					}
+				}
+				
+				
+			}
+			
+
+			/**
+			 * Wrap terms
+			 */
+			
+			base.wrapTerms();
+
+
+		})
+
+		
+
+	}
+
+	/**
+	 * Prototypes
+	 */
+	Glossarizer.prototype = {		
+
+		getDescription: function(term){			
+
+			var regex = new RegExp('(\,|\s*)'+this.clean(term)+'\\s*|\\,$', 'i');
+
+			/**
+			 * Matches
+			 * 1. Starts with \s* (zero or more spaces)			 
+			 * 2. Ends with zero or more spaces
+			 * 3. Ends with comma
+			 */
+			
+			for(var i =0; i< this.glossary.length; i++){				
+
+				if(this.glossary[i].term.match(regex)){										
+					return this.glossary[i].description.replace(/\"/gi, '&quot;')
+				}				
+			}				
+
+		},
+		clean: function(text){
+
+			var reEscape = new RegExp('(\\' + ['/', '.', '*', '+', '?', '(', ')', '[', ']', '{', '}', '\\'].join('|\\') + ')', 'g')
+			
+			return text.replace(reEscape, '\\$1')
+
+		},
+		
+		/**
+		 * Wraps the matched terms by calling traverser     
+		 */
+		wrapTerms: function(){
+
+			this.cleanedTerms = this.clean(this.terms.join('|'))
+			this.excludedTerms = this.clean(this.excludes.join('|'))
+			
+			var nodes = this.el.querySelectorAll(this.options.lookupTagName)					
+
+			for(var i =0; i < nodes.length; i++){
+				this.traverser(nodes[i])
+			}      
+
+			/**
+			 * Callback
+			 */
+			
+			if(this.options.callback) this.options.callback.call(this.$el)
+
+		},
+
+		/**
+		 * Traverses through nodes to find the matching terms in TEXTNODES
+		 */
+
+		traverser: function(node){      
+			
+			var next,
+				base = this;
+
+			if (node.nodeType === 1) {
+
+				/*
+				 Element Node
+				 */
+				
+				if (node = node.firstChild) {
+						do {
+							// Recursively call traverseChildNodes
+							// on each child node
+							next = node.nextSibling
+
+							/**
+							 * Check if the node is not glossarized
+							 */
+
+							if(	node.className != this.options.replaceClass)
+							{
+								
+								this.traverser(node)
+
+							}
+
+						} while(node = next)
+				}
+
+			} else if (node.nodeType === 3) {
+
+				/*
+				 Text Node
+				 */
+
+				var temp = document.createElement('div'),
+					data = node.data;
+
+				var re = new RegExp('(?:^|\\b)('+this.cleanedTerms+ ')(?!\\w)', base.regexOption),
+					reEx = new RegExp('(?:^|\\b)('+this.excludedTerms+ ')(?!\\w)', base.regexOption);
+				
+				
+				if(re.test(data)){      
+					
+					var excl = reEx.exec(data);    
+					
+					data = data.replace(re,function(match, item , offset, string){
+						
+
+						if(base.options.replaceOnce && inArrayIn(match, base.replaced) >= 0){
+
+							return match;
+						}
+						
+						base.replaced.push(match);
+						
+						var ir = new RegExp('(?:^|\\b)'+base.clean(match)+'(?!\\w)'),
+							result = ir.exec(data)
+						
+						
+						if(result){
+
+							if(excl && base.excludes.length){
+								
+								var id = offset,
+									exid = excl.index,
+									exl = excl.index + excl[0].length;
+								
+								if(exid <= id && id <= exl){
+
+									return match;
+									
+								}else{
+
+									return '<'+base.options.replaceTag+' class="'+base.options.replaceClass+'" title="'+base.getDescription(match)+'">'+ match + '</'+base.options.replaceTag+'>'
+
+								}
+							}
+							else{
+
+								return '<'+base.options.replaceTag+' class="'+base.options.replaceClass+'" title="'+base.getDescription(match)+'">'+ match + '</'+base.options.replaceTag+'>'
+							}
+						}
+						
+
+					});
+
+					/**
+					 * Only replace when a match is found					 
+					 * Resorting to jQuery html() because of IE8 whitespace issue.
+					 * IE 8 removes leading whitespace from Text Nodes. Hence innerhtml doesnt work.
+					 * 
+					 */
+					
+					$(temp).html(data)
+
+					
+				
+					while (temp.firstChild) {          
+						node.parentNode.insertBefore(temp.firstChild, node)
+					}
+
+					node.parentNode.removeChild(node)
+
+				}
+
+			}
+
+		},
+
+	};
+
+
+	/**
+	 * Public Methods
+	 */
+	
+	var methods = {
+
+		destroy: function(){			
+
+			this.$el.removeData('plugin_' + pluginName);
+
+			/* Remove abbr tag */
+			this.$el.find('.' + this.options.replaceClass).each(function(){
+
+				var $this = $(this),
+					text = $this.text();
+
+
+				$this.replaceWith(text)
+
+			})
+			
+		}
+	}
+
+
+	/**
+	 * Extend Prototype
+	 */
+	
+	Glossarizer.prototype = $.extend({}, Glossarizer.prototype, methods)
+
+	/**
+	 * Plugin
+	 * @param  {[type]} options   
+	 */
+	$.fn[pluginName] =function(options){
+
+		return this.each(function(){
+
+
+			var $this = $(this),
+				glossarizer = $this.data('plugin_' + pluginName);
+
+			/*
+			Check if its a method
+			 */
+			
+			if(typeof options == "string" && glossarizer  && methods.hasOwnProperty(options) ){
+
+				glossarizer[options].apply(glossarizer)
+
+			}else{
+
+				/* Destroy if exists */
+
+				if(glossarizer) glossarizer['destroy'].apply(glossarizer);
+
+
+				/* Initialize */
+			
+				$.data(this, 'plugin_' + pluginName, new Glossarizer(this, options))
+			}
+		});
+
+	}
+
+
+	/**
+	 * In Array
+	 */
+	
+	function inArrayIn(elem, arr, i){            
+        
+        if (typeof elem !== 'string'){
+			return $.inArray.apply(this, arguments);
+        }
+
+        if (arr){
+            var len = arr.length;
+                i = i ? (i < 0 ? Math.max(0, len + i) : i) : 0;
+            elem = elem.toLowerCase();
+            for (; i < len; i++){
+                if (i in arr && arr[i].toLowerCase() == elem){
+                    return i;
+                }
+            }
+        }            
+        return -1;
+    }
+
+
+})(jQuery);
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/style/deps/tooltip.css
----------------------------------------------------------------------
diff --git a/brooklyn-docs/style/deps/tooltip.css b/brooklyn-docs/style/deps/tooltip.css
new file mode 100644
index 0000000..fc5c3a3
--- /dev/null
+++ b/brooklyn-docs/style/deps/tooltip.css
@@ -0,0 +1,64 @@
+/* fix for double underline on firefox */
+abbr[title], abbr[data-original-title]{
+	border-bottom: none;	
+}
+
+ #tooltip
+{
+    text-align: center;
+    color: #fff;
+    background: #000;
+    background: rgba(0,0,0,0.8);
+    position: absolute;
+    z-index: 100;
+    padding: 15px;
+    border-radius: 5px;
+    box-sizing: border-box;    
+}
+
+    @media only screen and (max-width: 800px){
+        #tooltip:before{
+            content: 'x';
+            position: absolute;
+            color: #fff;
+            right: 8px;
+            top: 3px;
+            font-size: 12px;
+        }
+    }    
+ 
+    #tooltip:after /* triangle decoration */
+    {
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid rgba(0,0,0,0.8);
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: -10px;
+        margin-left: -10px;
+    }
+ 
+        #tooltip.top:after
+        {
+            border-top-color: transparent;
+            border-bottom: 10px solid #111;
+            top: -20px;                         
+            bottom: auto;
+        }
+
+ 
+        #tooltip.left:after
+        {
+            left: 10px;
+            margin: 0;
+        }
+ 
+        #tooltip.right:after
+        {
+            right: 10px;
+            left: auto;
+            margin: 0;
+        }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ed7a510b/brooklyn-docs/style/deps/tooltip.js
----------------------------------------------------------------------
diff --git a/brooklyn-docs/style/deps/tooltip.js b/brooklyn-docs/style/deps/tooltip.js
new file mode 100644
index 0000000..d1e8c54
--- /dev/null
+++ b/brooklyn-docs/style/deps/tooltip.js
@@ -0,0 +1,86 @@
+// 
+// Author : http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
+// 
+(function($, window, undefined){
+
+    function ToolTip (){
+
+        var targets = $( '.glossarizer_replaced' ),
+            target  = false,
+            tooltip = false,
+            title   = false;
+     
+        targets.bind( 'mouseenter', function()
+        {
+            target  = $( this );
+            tip     = target.attr( 'title' );
+            tooltip = $( '<div id="tooltip"></div>' );
+     
+            if( !tip || tip == '' )
+                return false;
+     
+            target.removeAttr( 'title' );
+            tooltip.css( 'opacity', 0 )
+                   .html( tip )
+                   .appendTo( 'body' );
+     
+            var init_tooltip = function()
+            {
+                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
+                    tooltip.css( 'max-width', $( window ).width() / 2 );
+                else
+                    tooltip.css( 'max-width', 340 );
+     
+                var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
+                    pos_top  = target.offset().top - tooltip.outerHeight() - 20;
+     
+                if( pos_left < 0 )
+                {
+                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
+                    tooltip.addClass( 'left' );
+                }
+                else
+                    tooltip.removeClass( 'left' );
+     
+                if( pos_left + tooltip.outerWidth() > $( window ).width() )
+                {
+                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
+                    tooltip.addClass( 'right' );
+                }
+                else
+                    tooltip.removeClass( 'right' );
+     
+                if( pos_top < 0 )
+                {
+                    var pos_top  = target.offset().top + target.outerHeight();
+                    tooltip.addClass( 'top' );
+                }
+                else
+                    tooltip.removeClass( 'top' );
+     
+                tooltip.css( { left: pos_left, top: pos_top } )
+                       .animate( { top: '+=10', opacity: 1 }, 50 );
+            };
+     
+            init_tooltip();
+            $( window ).resize( init_tooltip );
+     
+            var remove_tooltip = function()
+            {
+                tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
+                {
+                    $( this ).remove();
+                });
+     
+                target.attr( 'title', tip );
+            };
+     
+            target.bind( 'mouseleave', remove_tooltip );
+            tooltip.bind( 'click', remove_tooltip );
+        });
+
+    }
+
+    return window.tooltip = ToolTip;
+
+})(jQuery, window)
\ No newline at end of file