First version of shard overview in cluster interface

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

@@ -85,3 +85,6 @@ div.domino-lower {
   margin-top: 0px;
 }
 
+button.shard {
+  cursor: default;
+}

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

@@ -1,4 +1,19 @@
+<% var statusClass = function(s) {
+    switch (s) {
+      case "ok":
+        return "success";
+      case "warning": 
+        return "warning";
+      case "critical":
+        return "danger";
+    }
+  };
+%>
 <h3 class="clusterColumnHeader">Shards</h3>
-<button>Shard 1</button>
-<button>Shard 2</button>
-<button>Shard 3</button>
+<ul>
+  <% _.each(shards, function(v) { %>
+    <li>
+      <button id="<%=v.name%>" class="btn btn-server btn-<%=statusClass(v.status)%> shard"><%=v.name%></button>
+    </li>
+  <% }); %>
+</ul>

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

@@ -10,8 +10,29 @@
 
     template: templateEngine.createTemplate("clusterShardsView.ejs"),
 
+    initialize: function() {
+      this.fakeData = {
+        shards: [
+          {
+            name: "Shard 1",
+            status: "ok"
+          },
+          {
+            name: "Shard 2",
+            status: "warning"
+          },
+          {
+            name: "Shard 3",
+            status: "critical"
+          }
+        ]
+      };
+    },
+
     render: function(){
-      $(this.el).html(this.template.render({}));
+      $(this.el).html(this.template.render({
+        shards: this.fakeData.shards
+      }));
       return this;
     }