First version of primary server view in the cluster

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

@@ -95,6 +95,14 @@ button {
   background-color: #F89406;
 }
 
+.btn-inactive {
+  background-color: lightgrey;
+}
+
+.btn-inactive:hover {
+  background-color: grey;
+}
+
 .btn-group > .btn + .dropdown-toggle {
   box-shadow: 1px 0 0 rgba(255, 255, 255, 0.125) inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset;
 }
@@ -271,6 +279,14 @@ button.gv-zoom-btn.pan-bottom{
   background-image:url("../img/gv_arrow_bottom.png");
 }
 
-button.btn-overview {
+/* Cluster View */
+
+button.btn-overview, button.btn-server {
   margin: 5px;
 }
+
+button.btn-server {
+  width: 120px;
+}
+
+

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

@@ -15,6 +15,14 @@ h3.clusterColumnHeader {
   text-align: center;
 }
 
+h4.domino-header {
+  margin: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 0px;
+  padding-left: 0px;
+}
+
 div.clusterAmounts {
   position: absolute;
   left: 0px;
@@ -50,26 +58,30 @@ div.tile-right {
   margin-left: 20px;
 }
 
-.btn-success {
-  background: #8AA051;
+div.domino {
+  float: left;
+  text-align: center;
+  background-color: #f4f3f3;
+  cursor: pointer;
+  margin: 5px;
+  width: 210px;
 }
 
-.btn-success:hover {
-  background: #788F3D;
+hr.domino-line {
+  margin: 0px 5px;
+  border-width: 1px;
+  border-top-color: #686766;
+  border-bottom-color: #333232;
 }
 
-.btn-danger {
-  background-color: #DA4F49;
+div.domino-upper, div.domino-lower {
+  height: 100px;
+  margin: 5px;
+}
+div.domino-upper {
+  margin-bottom: 0px;
+}
+div.domino-lower {
+  margin-top: 0px;
 }
 
-.btn-danger:hover {
-  background-color: #BE342E;
-}
-
-.btn-warning {
-  background-color: #FAA732;
-}
-
-.btn-warning:hover {
-  background-color: #F89406;
-}

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

@@ -1,10 +1,21 @@
+<% var statusClass = function(s) {
+    switch (s) {
+      case "ok":
+        return "success";
+      case "warning": 
+        return "warning";
+      case "critical":
+        return "danger";
+    }
+  };
+%>
 <h3 class="clusterColumnHeader">DB Server</h3>
 <% if (minify) { %>
   <div>
     <ul>
       <% _.each(servers, function(v) { %>
         <li>
-          <button id="<%=v.primary.name %>" class="server"><%=v.primary.name %></button>
+          <button id="<%=v.primary.name %>" class="btn btn-server btn-<%=statusClass(v.primary.status)%> server"><%=v.primary.name %></button>
         </li>
       <% }); %>
     </ul>
@@ -12,11 +23,20 @@
 <% } else { %>
   <% _.each(servers, function(v) { %>
     <div id="<%=v.primary.name %>" class="domino server">
-      <span><%=v.primary.name%></span>
+      <div class="domino-upper btn-<%=statusClass(v.primary.status)%>">
+        <h4 class="domino-header"><%=v.primary.name%></h4>
         <span><%=v.primary.url%></span>
+      </div>
+      <hr class="domino-line"/>
       <% if (v.secondary) { %>
-        <span><%=v.secondary.name%></span>
+        <div class="domino-lower btn-<%=statusClass(v.secondary.status)%>">
+          <h4 class="domino-header"><%=v.secondary.name%></h4>
           <span><%=v.secondary.url%></span>
+        </div>
+      <% } else {%>
+      <div class="domino-lower btn-inactive">
+        <h4 class="domino-header">Not configured</h4>
+      </div>
       <% } %>
     </div>
   <% }); %>

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

@@ -16,6 +16,17 @@
         render: function(){}
       };
       spyOn(window, "ClusterDatabaseView").andReturn(dbView);
+
+      this.addMatchers({
+        toBeOfClass: function(name) {
+          var el = $(this.actual);
+          this.message = function() {
+            return "Expected \"" + el.attr("class") + "\" to contain " + name; 
+          };
+          return el.hasClass(name);
+        }
+      });
+
     });
 
     afterEach(function() {
@@ -58,6 +69,20 @@
             });
 
           });
+        },
+
+        checkDominoLayout = function(tile) {
+          var tileElements = tile.children,
+              upper = tileElements[0],
+              line = tileElements[1],
+              lower = tileElements[2];
+          expect(tile).toBeOfClass("domino");
+          expect(tile).toBeOfClass("server");
+          expect(upper).toBeOfClass("domino-upper");
+          expect(line).toBeOfClass("domino-line");
+          expect(lower).toBeOfClass("domino-lower");
+          expect(upper.children[0]).toBeOfClass("domino-header");
+          expect(lower.children[0]).toBeOfClass("domino-header");
         };
 
       beforeEach(function() {
@@ -134,6 +159,13 @@
       
       describe("minified version", function() {
 
+        var checkButtonContent = function(btn, pair, cls) {
+          expect(btn).toBeOfClass("btn");
+          expect(btn).toBeOfClass("server");
+          expect(btn).toBeOfClass("btn-" + cls);
+          expect($(btn).text()).toEqual(pair.primary.name);
+        };
+
         beforeEach(function() {
           view.render(true);
         });
@@ -142,13 +174,58 @@
           expect($("button", $(div)).length).toEqual(4);
         });
         
-        // TODO
+        it("should render the good pair", function() {
+          checkButtonContent(
+            document.getElementById(okPair.primary.name),
+            okPair,
+            "success"
+          );
+        });
+        
+        it("should render the single primary", function() {
+          checkButtonContent(
+            document.getElementById(noBkp.primary.name),
+            noBkp,
+            "success"
+          );
+        });
+        
+        it("should render the dead secondary", function() {
+          checkButtonContent(
+            document.getElementById(deadBkp.primary.name),
+            deadBkp,
+            "success"
+          );
+        });
+        
+        it("should render the dead primary", function() {
+          checkButtonContent(
+            document.getElementById(deadPrim.primary.name),
+            deadPrim,
+            "danger"
+          );
+        });
         
         checkUserActions();
       });
 
       describe("maximised version", function() {
 
+        var checkDominoContent = function(tile, pair, btn1, btn2) {
+          var upper = tile.children[0],
+              lower = tile.children[2];
+          expect(upper).toBeOfClass("btn-" + btn1);
+          expect($(upper.children[0]).text()).toEqual(pair.primary.name);
+          expect($(upper.children[1]).text()).toEqual(pair.primary.url);
+          expect(lower).toBeOfClass("btn-" + btn2);
+          if (pair.secondary) {
+            expect($(lower.children[0]).text()).toEqual(pair.secondary.name);
+            expect($(lower.children[1]).text()).toEqual(pair.secondary.url);
+          } else {
+            expect($(lower.children[0]).text()).toEqual("Not configured");
+          }
+        };
+
         beforeEach(function() {
           view.render();
         });
@@ -159,8 +236,29 @@
 
         it("should render the good pair", function() {
           var tile = getTile(okPair.primary.name);
+          checkDominoLayout(tile);
+          checkDominoContent(tile, okPair, "success", "success");
         });
 
+        it("should render the single primary", function() {
+          var tile = getTile(noBkp.primary.name);
+          checkDominoLayout(tile);
+          checkDominoContent(tile, noBkp, "success", "inactive");
+        });
+
+        it("should render the dead secondary pair", function() {
+          var tile = getTile(deadBkp.primary.name);
+          checkDominoLayout(tile);
+          checkDominoContent(tile, deadBkp, "success", "danger");
+        });
+
+        it("should render the dead primary pair", function() {
+          var tile = getTile(deadPrim.primary.name);
+          checkDominoLayout(tile);
+          checkDominoContent(tile, deadPrim, "danger", "success");
+        });
+
+
         checkUserActions();
 
       });