First version of Coordinator Overview in cluster

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

@@ -74,10 +74,11 @@ hr.domino-line {
   border-bottom-color: #333232;
 }
 
-div.domino-upper, div.domino-lower {
+div.domino-upper, div.domino-lower,  div.domino-inner {
   height: 100px;
   margin: 5px;
 }
+
 div.domino-upper {
   margin-bottom: 0px;
 }

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

@@ -1,14 +1,20 @@
+<% var statusClass = function(s) {
+    switch (s) {
+      case "ok":
+        return "success";
+      case "warning": 
+        return "warning";
+      case "critical":
+        return "danger";
+    }
+  };
+%>
 <h3 class="clusterColumnHeader">Coordinators</h3>
-<div class="pull-right">
+<% _.each(coordinators, function(v) { %>
-  <ul>
+  <div id="<%=v.name %>" class="domino coordinator">
-    <li>
+    <div class="domino-inner btn-<%=statusClass(v.status)%>">
-      <button id="Pavel" class="server">Pavel</button>
+      <h4 class="domino-header"><%=v.name%></h4>
-    </li>
+      <span><%=v.url%></span>
-    <li>
+    </div>
-      <button id="Paul" class="server">Paul</button>
+  </div>
-    </li>
+<% }); %>
-    <li>
-      <button id="Peter" class="server">Peter</button>
-    </li>
-  </ul>
-</div>

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

@@ -10,8 +10,32 @@
 
     template: templateEngine.createTemplate("clusterCoordinatorView.ejs"),
 
-    render: function(){
+    initialize: function() {
-      $(this.el).html(this.template.render({}));
+      this.fakeData = {
+        coordinators: [
+          {
+            name: "Charly",
+            url: "tcp://192.168.0.1:1337",
+            status: "ok"
+          },
+          {
+            name: "Carlos",
+            url: "tcp://192.168.0.2:1337",
+            status: "critical"
+          },
+          {
+            name: "Chantalle",
+            url: "tcp://192.168.0.5:1337",
+            status: "ok"
+          }
+        ]
+      };
+    },
+
+    render: function() {
+      $(this.el).html(this.template.render({
+        coordinators: this.fakeData.coordinators
+      }));
       return this;
     }
 

js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.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, $, uiMatchers*/
 (function() {
   "use strict";
 
@@ -12,6 +12,7 @@
       div = document.createElement("div");
       div.id = "clusterServers"; 
       document.body.appendChild(div);
+      uiMatchers.define(this);
     });
 
     afterEach(function() {
@@ -20,13 +21,59 @@
 
     describe("rendering", function() {
       
+      var charly, carlos, chantalle, coordinators,
+        getTile = function(name) {
+          return document.getElementById(name);
+        },
+        checkTile = function(c, cls) {
+          var tile = getTile(c.name);
+          expect(tile).toBeOfClass("coordinator");
+          expect(tile).toBeOfClass("btn-" + cls);
+          expect(tile.children[0]).toBeOfClass("domino-header");
+          expect($(tile.children[0]).text()).toEqual(c.name);
+          expect($(tile.children[1]).text()).toEqual(c.url);
+        };
+
       beforeEach(function() {
         view = new window.ClusterCoordinatorView();
+        charly = {
+          name: "Charly",
+          url: "tcp://192.168.0.1:1337",
+          status: "ok"
+        };
+        carlos = {
+          name: "Carlos",
+          url: "tcp://192.168.0.2:1337",
+          status: "critical"
+        };
+        chantalle = {
+          name: "Chantalle",
+          url: "tcp://192.168.0.5:1337",
+          status: "ok"
+        };
+        coordinators = [
+          charly,
+          carlos,
+          chantalle
+        ];
+        view.fakeData.coordinators = coordinators;
+        view.render();
       });
 
-      it("should render the coordinators", function() {
+      it("should render all coordiniators", function() {
-        view.render();
+        expect($("> div.coordinator", $(div)).length).toEqual(3);
+      });
 
+      it("should render charly", function() {
+        checkTile(charly, "success");
+      });
+
+      it("should render carlos", function() {
+        checkTile(carlos, "danger");
+      });
+
+      it("should render chantalle", function() {
+        checkTile(chantalle, "success");
       });
 
     });

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

@@ -0,0 +1,78 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
+/*global describe, beforeEach, afterEach, it, */
+/*global spyOn, expect*/
+/*global templateEngine, $, uiMatchers*/
+(function() {
+  "use strict";
+
+  describe("Cluster Shard View", function() {
+    var view, div;
+
+    beforeEach(function() {
+      div = document.createElement("div");
+      div.id = "clusterShards"; 
+      document.body.appendChild(div);
+      uiMatchers.define(this);
+    });
+
+    afterEach(function() {
+      document.body.removeChild(div);
+    });
+
+    describe("rendering", function() {
+  
+      var s1, s2, s3, shards,
+        checkButtonContent = function(col, cls) {
+          var btn = document.getElementById(col.name);
+          expect(btn).toBeOfClass("btn");
+          expect(btn).toBeOfClass("btn-server");
+          expect(btn).toBeOfClass("shard");
+          expect(btn).toBeOfClass("btn-" + cls);
+          expect($(btn).text()).toEqual(col.name);
+        };
+
+
+      beforeEach(function() {
+        s1 = {
+          name: "Shard 1",
+          status: "ok"
+        };
+        s2 = {
+          name: "Shard 2",
+          status: "warning"
+        };
+        s3 = {
+          name: "Shard 3",
+          status: "critical"
+        };
+        shards = [
+          s1,
+          s2,
+          s3
+        ];
+        view = new window.ClusterShardsView();
+        view.fakeData.shards = shards;
+        view.render();
+      });
+
+      it("should render the first shard", function() {
+        checkButtonContent(s1, "success");
+      });
+
+      it("should render the second shard", function() {
+        checkButtonContent(s2, "warning");
+      });
+
+      it("should render the third shard", function() {
+        checkButtonContent(s3, "danger");
+      });
+
+    });
+
+
+  });
+
+}());
+
+
+