First version of server view displaying pairs of db servers. Design missing

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

@@ -1,14 +1,23 @@
-<h3 class="clusterColumnHeader">Primary Server</h3>
+<h3 class="clusterColumnHeader">DB Server</h3>
-<div class="pull-right">
+<% if (minify) { %>
+  <div>
     <ul>
+      <% _.each(servers, function(v) { %>
         <li>
-      <button id="Pavel" class="server">Pavel</button>
+          <button id="<%=v.primary.name %>" class="server"><%=v.primary.name %></button>
-    </li>
-    <li>
-      <button id="Paul" class="server">Paul</button>
-    </li>
-    <li>
-      <button id="Peter" class="server">Peter</button>
         </li>
+      <% }); %>
     </ul>
   </div>
+<% } else { %>
+  <% _.each(servers, function(v) { %>
+    <div id="<%=v.primary.name %>" class="domino server">
+      <span><%=v.primary.name%></span>
+      <span><%=v.primary.url%></span>
+      <% if (v.secondary) { %>
+        <span><%=v.secondary.name%></span>
+        <span><%=v.secondary.url%></span>
+      <% } %>
+    </div>
+  <% }); %>
+<% } %>

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

@@ -16,6 +16,40 @@
 
     initialize: function() {
       this.dbView = new window.ClusterDatabaseView();
+
+      this.fakeData = [
+        {
+          primary: {
+            name: "Pavel",
+            url: "tcp://192.168.0.1:1337",
+            status: "ok"
+          },
+          secondary: {
+            name: "Sally",
+            url: "tcp://192.168.1.1:1337",
+            status: "ok"
+          }
+        },
+        {
+          primary: {
+            name: "Pancho",
+            url: "tcp://192.168.0.2:1337",
+            status: "ok"
+          }
+        },
+        {
+          primary: {
+            name: "Pablo",
+            url: "tcp://192.168.0.5:1337",
+            status: "critical"
+          },
+          secondary: {
+            name: "Sandy",
+            url: "tcp://192.168.1.5:1337",
+            status: "critical"
+          }
+        }
+      ];
     },
 
     loadServer: function(e) {
@@ -23,10 +57,14 @@
       this.dbView.render({
         name: id
       });
+      this.render(true);
     },
 
-    render: function(){
+    render: function(minify){
-      $(this.el).html(this.template.render({}));
+      $(this.el).html(this.template.render({
+        minify: minify,
+        servers: this.fakeData
+      }));
       return this;
     }
 

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

@@ -1,7 +1,7 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
 /*global describe, beforeEach, afterEach, it, */
 /*global spyOn, expect*/
-/*global templateEngine, $*/
+/*global templateEngine, $, _*/
 (function() {
   "use strict";
 
@@ -24,7 +24,7 @@
 
     describe("initialisation", function() {
 
-      it("should create a Cluster Server View", function() {
+      it("should create a Cluster Database View", function() {
         view = new window.ClusterServerView();
         expect(window.ClusterDatabaseView).toHaveBeenCalled();
       });
@@ -33,48 +33,136 @@
 
     describe("rendering", function() {
 
-      beforeEach(function() {
+      var okPair, noBkp, deadBkp, deadPrim, deadPair, fakeServers,
-        spyOn(dbView, "render");
+        getTile = function(name) {
-        view = new window.ClusterServerView();
+          return document.getElementById(name);
-      });
+        },
-
-      it("should not render the Server view", function() {
-        view.render();
-        expect(dbView.render).not.toHaveBeenCalled();
-      });
-    });
 
+        checkUserActions = function() {
           describe("user actions", function() {
             var info;
 
+            it("should be able to navigate to each server", function() {
+              spyOn(view, "render");
+              _.each(fakeServers, function(o) {
+                dbView.render.reset();
+                view.render.reset();
+                var name = o.primary.name;
+                info = {
+                  name: name
+                };
+                $(getTile(name)).click();
+                expect(dbView.render).toHaveBeenCalledWith(info);
+                expect(view.render).toHaveBeenCalledWith(true);
+              });
+            });
+
+          });
+        };
+
       beforeEach(function() {
         spyOn(dbView, "render");
         view = new window.ClusterServerView();
+        okPair = {
+          primary: {
+            name: "Pavel",
+            url: "tcp://192.168.0.1:1337",
+            status: "ok"
+          },
+          secondary: {
+            name: "Sally",
+            url: "tcp://192.168.1.1:1337",
+            status: "ok"
+          }
+        };
+        noBkp = {
+          primary: {
+            name: "Pancho",
+            url: "tcp://192.168.0.2:1337",
+            status: "ok"
+          }
+        };
+        deadBkp = {
+          primary: {
+            name: "Pepe",
+            url: "tcp://192.168.0.3:1337",
+            status: "ok"
+          },
+          secondary: {
+            name: "Sam",
+            url: "tcp://192.168.1.3:1337",
+            status: "critical"
+          }
+        };
+        deadPrim = {
+          primary: {
+            name: "Pedro",
+            url: "tcp://192.168.0.4:1337",
+            status: "critical"
+          },
+          secondary: {
+            name: "Sabrina",
+            url: "tcp://192.168.1.4:1337",
+            status: "ok"
+          }
+        };
+        deadPair = {
+          primary: {
+            name: "Pablo",
+            url: "tcp://192.168.0.5:1337",
+            status: "critical"
+          },
+          secondary: {
+            name: "Sandy",
+            url: "tcp://192.168.1.5:1337",
+            status: "critical"
+          }
+        };
+        fakeServers = [
+          okPair,
+          noBkp,
+          deadBkp,
+          deadPrim
+        ];
+        view.fakeData = fakeServers;
         view.render();
       });
 
-      it("should be able to navigate to Pavel", function() {
+      it("should not render the Database view", function() {
-        info = {
+        expect(dbView.render).not.toHaveBeenCalled();
-          name: "Pavel"
-        };
-        $("#Pavel").click();
-        expect(dbView.render).toHaveBeenCalledWith(info);
       });
       
-      it("should be able to navigate to Peter", function() {
+      describe("minified version", function() {
-        info = {
+
-          name: "Peter"
+        beforeEach(function() {
-        };
+          view.render(true);
-        $("#Peter").click();
-        expect(dbView.render).toHaveBeenCalledWith(info);
         });
 
-      it("should be able to navigate to Paul", function() {
+        it("should render all pairs", function() {
-        info = {
+          expect($("button", $(div)).length).toEqual(4);
-          name: "Paul"
+        });
-        };
+        
-        $("#Paul").click();
+        // TODO
-        expect(dbView.render).toHaveBeenCalledWith(info);
+        
+        checkUserActions();
+      });
+
+      describe("maximised version", function() {
+
+        beforeEach(function() {
+          view.render();
+        });
+
+        it("should render all pairs", function() {
+          expect($("> div.domino", $(div)).length).toEqual(4);
+        });
+
+        it("should render the good pair", function() {
+          var tile = getTile(okPair.primary.name);
+        });
+
+        checkUserActions();
+
       });
 
     });