node info view

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -39,6 +39,7 @@
       'nodes': 'nodes',
       'shards': 'shards',
       'node/:name': 'node',
+      'nodeInfo/:id': 'nodeInfo',
       'logs': 'logger',
       'helpus': 'helpUs',
       'graph/:name': 'graph',
@@ -327,16 +328,40 @@
         return;
       }
 
-      if (!this.nodeView) {
-        this.nodeView = new window.NodeView({
-          coordname: name,
-          coordinators: this.coordinatorCollection,
-          dbServers: this.dbServers
-        });
+      if (this.nodeView) {
+        this.nodeView.remove();
       }
+      this.nodeView = new window.NodeView({
+        coordname: name,
+        coordinators: this.coordinatorCollection,
+        dbServers: this.dbServers
+      });
       this.nodeView.render();
     },
 
+    nodeInfo: function (id, initialized) {
+      this.checkUser();
+      if (!initialized || this.isCluster === undefined) {
+        this.waitForInit(this.nodeInfo.bind(this), id);
+        return;
+      }
+      if (this.isCluster === false) {
+        this.routes[''] = 'dashboard';
+        this.navigate('#dashboard', {trigger: true});
+        return;
+      }
+
+      if (this.nodeInfoView) {
+        this.nodeInfoView.remove();
+      }
+      this.nodeInfoView = new window.NodeInfoView({
+        nodeId: id,
+        coordinators: this.coordinatorCollection,
+        dbServers: this.dbServers[0]
+      });
+      this.nodeInfoView.render();
+    },
+
     shards: function (initialized) {
       this.checkUser();
       if (!initialized || this.isCluster === undefined) {
@@ -367,10 +392,11 @@
         this.navigate('#dashboard', {trigger: true});
         return;
       }
-      if (!this.nodesView) {
-        this.nodesView = new window.NodesView({
-        });
+      if (this.nodesView) {
+        this.nodesView.remove();
       }
+      this.nodesView = new window.NodesView({
+      });
       this.nodesView.render();
     },
 

js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeInfoView.ejs

@@ -0,0 +1,27 @@
+<script id="nodeInfoView.ejs" type="text/template">
+
+<div class="nodeInfoView">
+  <div class="modal-body">
+    <table id="serverInfoTable" class="arango-table">
+      <tbody>
+        <% _.each(entries, function (entry, name) { %> 
+          <tr>
+            <th class="collectionInfoTh2"><%=name%></th>
+            <th class="collectionInfoTh">
+              <div id="server-<%=name%>" class="modal-text"><%=entry%></div>
+            </th>
+            <th>
+              <% if (entry.description) { %>
+                <th class="tooltipInfoTh">
+                  <span class="tippy" title="<%=entry.description%>"></span>
+                </th>
+              <% } %>
+            </th>
+          </tr>
+        <% }); %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs

@@ -47,10 +47,10 @@
     <div class="pure-g cluster-nodes-title pure-table pure-table-header pure-title" style="clear: both">
       <div class="pure-table-row">
         <div class="pure-u-9-24 left">Name</div>
-        <div class="pure-u-8-24 left">Endpoint</div>
-        <div class="pure-u-3-24 mid hide-small">Heartbeat</div>
-        <div class="pure-u-3-24 mid">Status</div>
-        <div class="pure-u-1-24 mid"></div>
+        <div class="pure-u-9-24 left">Endpoint</div>
+        <div class="pure-u-2-24 mid hide-small">Since</div>
+        <div class="pure-u-2-24 mid">Info</div>
+        <div class="pure-u-2-24 mid">Status</div>
       </div>
     </div>
 
@@ -67,16 +67,17 @@
             <i class="fa fa-trash-o"></i>
             <% } %>
           </div>
-          <div class="pure-u-8-24 left"><%= node.Endpoint %></div>
+          <div class="pure-u-9-24 left"><%= node.Endpoint %></div>
 
           <% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %>
-          <div class="pure-u-3-24 hide-small mid"><%= formatted %></div>
-          <div class="pure-u-3-24 mid"><%= node.LastHeartbeatStatus %></div>
+          <div class="pure-u-2-24 hide-small mid"><%= formatted %></div>
+          
+          <div class="pure-u-2-24 mid"><i class="fa fa-info-circle"></i></div>
 
           <% if(node.Status === 'GOOD') { %>
-            <div class="pure-u-1-24 mid state"><i class="fa fa-check-circle"></i></div>
+            <div class="pure-u-2-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
           <% } else { %>
-            <div class="pure-u-1-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
+            <div class="pure-u-2-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
           <% } %>
 
         </div>
@@ -128,10 +129,10 @@
     <div class="pure-g cluster-nodes-title pure-table pure-table-header pure-title">
       <div class="pure-table-row">
         <div class="pure-u-9-24 left">Name</div>
-        <div class="pure-u-8-24 left">Endpoint</div>
-        <div class="pure-u-3-24 mid hide-small">Heartbeat</div>
-        <div class="pure-u-3-24 mid">Status</div>
-        <div class="pure-u-1-24 mid"></div>
+        <div class="pure-u-9-24 left">Endpoint</div>
+        <div class="pure-u-2-24 mid hide-small">Since</div>
+        <div class="pure-u-2-24 mid">Info</div>
+        <div class="pure-u-2-24 mid">Status</div>
       </div>
     </div>
   <% } %>
@@ -143,16 +144,17 @@
         <div class="pure-table-row <%= disabled %>" id="<%= id %>">
 
           <div class="pure-u-9-24 left"><%= node.ShortName %></div>
-          <div class="pure-u-8-24 left"><%= node.Endpoint %></div>
+          <div class="pure-u-9-24 left"><%= node.Endpoint %></div>
 
           <% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %>
-          <div class="pure-u-3-24 mid hide-small"><%= formatted %></div>
-          <div class="pure-u-3-24 mid"><%= node.LastHeartbeatStatus %></div>
+          <div class="pure-u-2-24 mid hide-small"><%= formatted %></div>
+          
+          <div class="pure-u-2-24 mid"><i class="fa fa-info-circle"></i></div>
 
           <% if(node.Status === 'GOOD') { %>
-            <div class="pure-u-1-24 mid state"><i class="fa fa-check-circle"></i></div>
+            <div class="pure-u-2-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
           <% } else { %>
-            <div class="pure-u-1-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
+            <div class="pure-u-2-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
           <% } %>
 
         </div>

js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeInfoView.js

@@ -0,0 +1,108 @@
+/* jshint browser: true */
+/* jshint unused: false */
+/* global arangoHelper, $, Backbone, templateEngine, window */
+(function () {
+  'use strict';
+
+  window.NodeInfoView = Backbone.View.extend({
+    el: '#content',
+
+    template: templateEngine.createTemplate('nodeInfoView.ejs'),
+
+    initialize: function (options) {
+      if (window.App.isCluster) {
+        this.nodeId = options.nodeId;
+        this.dbServers = options.dbServers;
+        this.coordinators = options.coordinators;
+      }
+    },
+
+    remove: function () {
+      this.$el.empty().off(); /* off to unbind the events */
+      this.stopListening();
+      this.unbind();
+      delete this.el;
+      return this;
+    },
+
+    render: function () {
+      this.$el.html(this.template.render({entries: []}));
+
+      var callback = function () {
+        this.continueRender();
+        this.breadcrumb(arangoHelper.getCoordinatorShortName(this.nodeId));
+        $(window).trigger('resize');
+      }.bind(this);
+
+      if (!this.initCoordDone) {
+        this.waitForCoordinators();
+      }
+
+      if (!this.initDBDone) {
+        this.waitForDBServers(callback);
+      } else {
+        this.nodeId = window.location.hash.split('/')[1];
+        this.coordinator = this.coordinators.findWhere({name: this.coordname});
+        callback();
+      }
+    },
+
+    continueRender: function () {
+      var model;
+      if (this.coordinator) {
+        model = this.coordinator.toJSON();
+      } else {
+        model = this.dbServer.toJSON();
+      }
+
+      var renderObj = {};
+      renderObj.Name = model.name;
+      renderObj.Address = model.address;
+      renderObj.Status = model.status;
+      renderObj.Protocol = model.protocol;
+      renderObj.Role = model.role;
+      this.$el.html(this.template.render({entries: renderObj}));
+    },
+
+    breadcrumb: function (name) {
+      $('#subNavigationBar .breadcrumb').html('Node: ' + name);
+    },
+
+    waitForCoordinators: function (callback) {
+      var self = this;
+
+      window.setTimeout(function () {
+        if (self.coordinators.length === 0) {
+          self.waitForCoordinators(callback);
+        } else {
+          self.coordinator = self.coordinators.findWhere({name: self.nodeId});
+          self.initCoordDone = true;
+          if (callback) {
+            callback();
+          }
+        }
+      }, 200);
+    },
+
+    waitForDBServers: function (callback) {
+      var self = this;
+
+      window.setTimeout(function () {
+        if (self.dbServers.length === 0) {
+          self.waitForDBServers(callback);
+        } else {
+          self.initDBDone = true;
+
+          self.dbServers.each(function (model) {
+            if (model.get('id') === self.nodeId) {
+              self.dbServer = model;
+            }
+          });
+
+          callback();
+        }
+      }, 200);
+    }
+
+  });
+}());

js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js

@@ -30,6 +30,14 @@
       }
     },
 
+    remove: function () {
+      this.$el.empty().off(); /* off to unbind the events */
+      this.stopListening();
+      this.unbind();
+      delete this.el;
+      return this;
+    },
+
     breadcrumb: function (name) {
       $('#subNavigationBar .breadcrumb').html('Node: ' + name);
     },

js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js

@@ -22,6 +22,14 @@
       'keyup #plannedDBs': 'checkKey'
     },
 
+    remove: function () {
+      this.$el.empty().off(); /* off to unbind the events */
+      this.stopListening();
+      this.unbind();
+      delete this.el;
+      return this;
+    },
+
     checkKey: function (e) {
       if (e.keyCode === 13) {
         var self = this;
@@ -121,11 +129,16 @@
     },
 
     navigateToNode: function (elem) {
+      var name = $(elem.currentTarget).attr('node').slice(0, -5);
+
+      if ($(elem.target).hasClass('fa-info-circle')) {
+        window.App.navigate('#nodeInfo/' + encodeURIComponent(name), {trigger: true});
+        return;
+      }
       if ($(elem.currentTarget).hasClass('noHover')) {
         return;
       }
 
-      var name = $(elem.currentTarget).attr('node').slice(0, -5);
       window.App.navigate('#node/' + encodeURIComponent(name), {trigger: true});
     },
 

js/apps/system/_admin/aardvark/APP/frontend/scss/_nodes.scss

@@ -33,8 +33,9 @@
 
   .pure-table-body {
     .fa-check-circle,
+    .fa-info-circle,
     .fa-exclamation-circle {
-      font-size: 15pt;
+      font-size: 13pt;
     }
   }