From 80ffa5d73dba00babf8aa83915268809e23c2d8a Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Fri, 17 Jan 2014 09:40:20 +0100
Subject: [PATCH] First version of shard overview in cluster interface

---
 .../frontend/css/clusterDashboardView.css     |  3 +++
 .../js/templates/clusterShardsView.ejs        | 21 ++++++++++++++---
 .../frontend/js/views/clusterShardsView.js    | 23 ++++++++++++++++++-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/css/clusterDashboardView.css b/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
index c0aeb8a7d9..d0f72b011f 100644
--- a/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
+++ b/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
@@ -85,3 +85,6 @@ div.domino-lower {
   margin-top: 0px;
 }
 
+button.shard {
+  cursor: default;
+}
diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterShardsView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterShardsView.ejs
index 903b8e1126..d7d75e691d 100644
--- a/js/apps/system/aardvark/frontend/js/templates/clusterShardsView.ejs
+++ b/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>
diff --git a/js/apps/system/aardvark/frontend/js/views/clusterShardsView.js b/js/apps/system/aardvark/frontend/js/views/clusterShardsView.js
index 91b3606bcc..ee5daac225 100644
--- a/js/apps/system/aardvark/frontend/js/views/clusterShardsView.js
+++ b/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;
     }