Improved the overview and added a seperate coordinators view, it is actually completely different compared to db servers

js/apps/system/aardvark/frontend/css/buttons.css

@@ -272,8 +272,5 @@ button.gv-zoom-btn.pan-bottom{
 }
 
 button.btn-overview {
-  margin-left: 0px;
-  width: 140px;
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin: 5px;
 }

js/apps/system/aardvark/frontend/js/templates/clusterCoordinatorView.ejs

@@ -0,0 +1,14 @@
+<h3 class="clusterColumnHeader">Coordinators</h3>
+<div class="pull-right">
+  <ul>
+    <li>
+      <button id="Pavel" class="server">Pavel</button>
+    </li>
+    <li>
+      <button id="Paul" class="server">Paul</button>
+    </li>
+    <li>
+      <button id="Peter" class="server">Peter</button>
+    </li>
+  </ul>
+</div>

js/apps/system/aardvark/frontend/js/templates/clusterOverviewView.ejs

@@ -23,21 +23,21 @@
 </div>
 <% } else { %>
 <div id="dbserver" class="tile tile-left btn-<%=statusClass(dbservers.status)%>">
-  <span>Data Servers</span>
-  <br>
-  <br>
-  <span class="arangoicon icon_arangodb_database1 cluster_icon_large"></span>
-  <div id=dbserversAmounts" class="clusterAmounts">
-    <%=dbservers.having %>/<%=dbservers.plan %>
+  <h4 class="cluster-tile">Data Servers</h4>
+  <div>
+    <span class="arangoicon icon_arangodb_database1 cluster_icon_large"></span>
   </div>
+  <h4 id=dbserversAmounts" class="clusterAmounts">
+    <%=dbservers.having %>/<%=dbservers.plan %>
+  </h4>
 </div>
 <div id="coordinator" class="tile tile-right btn-<%=statusClass(coordinators.status)%>">
-  <span>Coordinators</span>
-  <br>
-  <br>
-  <span class="arangoicon icon_arangodb_compass cluster_icon_large"></span>
-  <div id=coordinatorAmounts" class="clusterAmounts">
-    <%=coordinators.having %>/<%=coordinators.plan %>
+  <h4 class="cluster-tile">Coordinators</h4>
+  <div>
+    <span class="arangoicon icon_arangodb_compass cluster_icon_large"></span>
   </div>
+  <h4 id=coordinatorAmounts" class="clusterAmounts">
+    <%=coordinators.having %>/<%=coordinators.plan %>
+  </h4>
 </div>
 <% } %>

js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js

@@ -0,0 +1,20 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true*/
+/*global Backbone, templateEngine, $, window */
+
+(function() {
+  "use strict";
+
+  window.ClusterCoordinatorView = Backbone.View.extend({
+    
+    el: '#clusterServers',
+
+    template: templateEngine.createTemplate("clusterCoordinatorView.ejs"),
+
+    render: function(){
+      $(this.el).html(this.template.render({}));
+      return this;
+    }
+
+  });
+
+}());

js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js

@@ -30,19 +30,16 @@
         };
 
       this.serverView = new window.ClusterServerView();
+      this.coordinatorView = new window.ClusterCoordinatorView();
     },
 
     loadDBServers: function() {
-      this.serverView.render({
-        type: "dbservers"
-      });
+      this.serverView.render();
       this.render(true);
     },
 
     loadCoordinators: function() {
-      this.serverView.render({
-        type: "coordinator"
-      });
+      this.coordinatorView.render();
       this.render(true);
     },
 

js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js

@@ -0,0 +1,36 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
+/*global describe, beforeEach, afterEach, it, */
+/*global spyOn, expect*/
+/*global templateEngine, $*/
+(function() {
+  "use strict";
+
+  describe("Cluster Coordinator View", function() {
+    var view, div;
+
+    beforeEach(function() {
+      div = document.createElement("div");
+      div.id = "clusterServers"; 
+      document.body.appendChild(div);
+    });
+
+    afterEach(function() {
+      document.body.removeChild(div);
+    });
+
+    describe("rendering", function() {
+
+      beforeEach(function() {
+        view = new window.ClusterCoordinatorView();
+      });
+
+      it("should render the coordinators", function() {
+        view.render();
+
+      });
+
+    });
+
+  });
+
+}());

js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js

@@ -6,16 +6,20 @@
   "use strict";
 
   describe("Cluster Overview View", function() {
-    var view, div, serverView;
+    var view, div, serverView, coordinatorView;
 
     beforeEach(function() {
       div = document.createElement("div");
       div.id = "clusterOverview"; 
       document.body.appendChild(div);
       serverView = {
-        render: function(){}
+        render: function() {}
+      };
+      coordinatorView = {
+        render: function() {}
       };
       spyOn(window, "ClusterServerView").andReturn(serverView);
+      spyOn(window, "ClusterCoordinatorView").andReturn(coordinatorView);
       this.addMatchers({
 
         toBeTag: function(name) {
@@ -66,25 +70,20 @@
 
           beforeEach(function() {
             serverView.render.reset();
+            coordinatorView.render.reset();
             view.render();
             spyOn(view, "render");
           });
 
           it("should be able to navigate to db servers", function() {
-            info = {
-              type: "dbservers"
-            };
             $("#dbserver").click();
-            expect(serverView.render).toHaveBeenCalledWith(info);
+            expect(serverView.render).toHaveBeenCalledWith();
             expect(view.render).toHaveBeenCalledWith(true);
           });
 
-          it("should be able to navigate to primary servers", function() {
-            info = {
-              type: "coordinator"
-            };
+          it("should be able to navigate to coordinators", function() {
             $("#coordinator").click();
-            expect(serverView.render).toHaveBeenCalledWith(info);
+            expect(coordinatorView.render).toHaveBeenCalledWith();
             expect(view.render).toHaveBeenCalledWith(true);
           });
 
@@ -106,6 +105,7 @@
 
       beforeEach(function() {
         spyOn(serverView, "render");
+        spyOn(coordinatorView, "render");
         view = new window.ClusterOverviewView();
         // Fake Data Injection to be removed
         view.fakeData = {
@@ -132,6 +132,10 @@
           expect(serverView.render).not.toHaveBeenCalled();
         });
 
+        it("should not render the Coordinator view", function() {
+          expect(coordinatorView.render).not.toHaveBeenCalled();
+        });
+
         it("should render in minified version", function() {
           expect($(div).hasClass("clusterColumnMax")).toBeFalsy();
         });
@@ -253,10 +257,10 @@
             view.fakeData.dbservers.having = 4;
             view.render();
             var tile = getTile(),
-                spans = $("> span", $(tile)),
-                header = spans[0],
-                icon = spans[1],
-                footer = $("> div", $(tile)),
+                headers = $("> h4", $(tile)),
+                header = headers[0],
+                footer = headers[1],
+                icon = $("> div > span", $(tile))[0],
                 htxt = $(header).text(),
                 ftxt = $(footer).text();
             expect(tile).toBeDefined();
@@ -304,10 +308,10 @@
             view.fakeData.coordinators.having = 4;
             view.render();
             var tile = getTile(),
-                spans = $("> span", $(tile)),
-                header = spans[0],
-                icon = spans[1],
-                footer = $("> div", $(tile)),
+                headers = $("> h4", $(tile)),
+                header = headers[0],
+                footer = headers[1],
+                icon = $("> div > span", $(tile))[0],
                 htxt = $(header).text(),
                 ftxt = $(footer).text();
             expect(tile).toBeDefined();