Change browser tab/window title according to currently loaded 'page'.

It is very hard now to distinguish different tabs. With this addition
we have titles like 'RabbitMQ - Queue vhost/name', 'RabbitMQ - Exchanges'.
To be continued...

(cherry picked from commit a0abfaa)

Author: ikavgo

deps/rabbitmq_management/priv/www/js/dispatcher.js

@@ -1,10 +1,77 @@
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery', 'sammy'], factory);
+  } else {
+    (window.Sammy = window.Sammy || {}).Title = factory(window.jQuery, window.Sammy);
+  }
+}(function ($, Sammy) {
+
+  // Sammy.Title is a very simple plugin to easily set the document's title.
+  // It supplies a helper for setting the title (`title()`) within routes,
+  // and an app level method for setting the global title (`setTitle()`)
+  Sammy.Title = function() {
+
+    // setTitle allows setting a global title or a function that modifies the
+    // title for each route/page.
+    //
+    // ### Example
+    //
+    //    // setting a title prefix
+    //    $.sammy(function() {
+    //
+    //      this.setTitle('My App -');
+    //
+    //      this.get('#/', function() {
+    //        this.title('Home'); // document's title == "My App - Home"
+    //      });
+    //    });
+    //
+    //    // setting a title with a function
+    //    $.sammy(function() {
+    //
+    //      this.setTitle(function(title) {
+    //        return [title, " /// My App"].join('');
+    //      });
+    //
+    //      this.get('#/', function() {
+    //        this.title('Home'); // document's title == "Home /// My App";
+    //      });
+    //    });
+    //
+    this.setTitle = function(title) {
+      if (!$.isFunction(title)) {
+        this.title_function = function(additional_title) {
+          return [title, additional_title].join(' ');
+        }
+      } else {
+        this.title_function = title;
+      }
+    };
+
+    // *Helper* title() sets the document title, passing it through the function
+    // defined by setTitle() if set.
+    this.helper('title', function() {
+      var new_title = $.makeArray(arguments).join(' ');
+      if (this.app.title_function) {
+        new_title = this.app.title_function(new_title);
+      }
+      document.title = new_title;
+    });
+
+  };
+
+  return Sammy.Title;
+
+}));
+
 dispatcher_add(function(sammy) {
     function path(p, r, t) {
         sammy.get(p, function() {
                 render(r, t, p);
             });
     }
     sammy.get('#/', function() {
+            this.title('Overview');
             var reqs = {'overview': {path:    '/overview',
                                      options: {ranges: ['lengths-over',
                                                         'msg-rates-over']}},
@@ -15,6 +82,7 @@ dispatcher_add(function(sammy) {
             render(reqs, 'overview', '#/');
         });
     sammy.get('#/', function() {
+        this.title('Overview');
         var reqs = {'overview': {path:    '/overview',
                                  options: {ranges: ['lengths-over',
                                                     'msg-rates-over']}},
@@ -34,6 +102,7 @@ dispatcher_add(function(sammy) {
         });
 
     sammy.get('#/nodes/:name', function() {
+            this.title('Node ' + this.params['name']);
             var name = esc(this.params['name']);
             render({'node': {path:    '/nodes/' + name,
                              options: {ranges: ['node-stats']}}},
@@ -81,10 +150,12 @@ dispatcher_add(function(sammy) {
                                 options:{ranges:['data-rates-ch','msg-rates-ch']}}},
                    'channel', '#/channels');
         });
-      sammy.get('#/exchanges', function() {
+        sammy.get('#/exchanges', function() {
+            this.title('Exchanges');
             renderExchanges();
         });
       sammy.get('#/exchanges/:vhost/:name', function() {
+            this.title('Exchange ' + esc(this.params['vhost']) + '/' + this.params['name']);
             var path = '/exchanges/' + esc(this.params['vhost']) + '/' + esc(this.params['name']);
             render({'exchange': {path:    path,
                                  options: {ranges:['msg-rates-x']}},
@@ -108,12 +179,14 @@ dispatcher_add(function(sammy) {
         });
 
       sammy.get('#/queues', function() {
+            this.title('Queues');
             renderQueues();
         });
 
       sammy.get('#/queues/:vhost/:name', function() {
             var vhost = this.params['vhost'];
             var queue = this.params['name'];
+            this.title('Queue ' + esc(vhost) + '/' + queue);
             var path = '/queues/' + esc(vhost) + '/' + esc(queue);
             var requests = {'queue': {path:    path,
                                       options: {ranges:['lengths-q', 'msg-rates-q', 'data-rates-q']}},
@@ -198,7 +271,8 @@ dispatcher_add(function(sammy) {
         });
 
       sammy.get('#/users', function() {
-        renderUsers();
+          this.title('Users');
+          renderUsers();
       });
       sammy.get('#/users/:id', function() {
         var vhosts = JSON.parse(sync_get('/vhosts'));

deps/rabbitmq_management/priv/www/js/main.js

@@ -74,6 +74,8 @@ function dispatcher_add(fun) {
 }
 
 function dispatcher() {
+    this.use('Title');
+    this.setTitle('RabbitMQ - ');
     for (var i in dispatcher_modules) {
         dispatcher_modules[i](this);
     }