From 1a233fb1d5ff83a6b6068790c285e99f53de88aa Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Fri, 17 Jan 2014 09:24:46 +0100
Subject: [PATCH] Added first version of Cluster collection overview

---
 .../js/templates/clusterCollectionView.ejs    |  21 +++-
 .../js/templates/clusterDatabaseView.ejs      |   2 +-
 .../js/views/clusterCollectionView.js         |  20 ++-
 .../specs/views/clusterCollectionViewSpec.js  | 115 ++++++++++++------
 4 files changed, 116 insertions(+), 42 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterCollectionView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterCollectionView.ejs
index 2b8b44bd65..fa1e978f7f 100644
--- a/js/apps/system/aardvark/frontend/js/templates/clusterCollectionView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/clusterCollectionView.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">Collections</h3>
-<button id="Documents" class="collection">Documents</button>
-<button id="Edges" class="collection">Edges</button>
-<button id="People" class="collection">People</button>
+<ul>
+  <% _.each(collections, function(v) { %>
+    <li>
+      <button id="<%=v.name%>" class="btn btn-server btn-<%=statusClass(v.status) %> collection"><%=v.name %></button>
+    </li>
+  <% }); %>
+</ul>
diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs
index 3253ff0727..58f487d7c3 100644
--- a/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs
@@ -13,7 +13,7 @@
 <ul>
   <% _.each(databases, function(v) { %>
     <li>
-    <button id="<%=v.name %>" class="btn btn-server btn-<%=statusClass(v.status)%> database"><%=v.name %></button>
+      <button id="<%=v.name %>" class="btn btn-server btn-<%=statusClass(v.status)%> database"><%=v.name %></button>
     </li>
   <% }); %>
 </ul>
diff --git a/js/apps/system/aardvark/frontend/js/views/clusterCollectionView.js b/js/apps/system/aardvark/frontend/js/views/clusterCollectionView.js
index d9d5b8cb62..879dfb7603 100644
--- a/js/apps/system/aardvark/frontend/js/views/clusterCollectionView.js
+++ b/js/apps/system/aardvark/frontend/js/views/clusterCollectionView.js
@@ -16,6 +16,22 @@
 
     initialize: function() {
       this.shardsView = new window.ClusterShardsView();
+      this.fakeData = {
+        collections: [
+          {
+            name: "Documents",
+            status: "ok"
+          },
+          {
+            name: "Edges",
+            status: "warning"
+          },
+          {
+            name: "People",
+            status: "critical"
+          }
+         ]
+      };
     },
 
     loadCollection: function(e) {
@@ -26,7 +42,9 @@
     },
 
     render: function(){
-      $(this.el).html(this.template.render({}));
+      $(this.el).html(this.template.render({
+        collections: this.fakeData.collections
+      }));
       return this;
     }
 
diff --git a/js/apps/system/aardvark/test/specs/views/clusterCollectionViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterCollectionViewSpec.js
index c4fe60bf25..a52d799889 100644
--- a/js/apps/system/aardvark/test/specs/views/clusterCollectionViewSpec.js
+++ b/js/apps/system/aardvark/test/specs/views/clusterCollectionViewSpec.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";
 
@@ -16,6 +16,7 @@
         render: function(){}
       };
       spyOn(window, "ClusterShardsView").andReturn(shardsView);
+      uiMatchers.define(this);
     });
 
     afterEach(function() {
@@ -32,52 +33,92 @@
     });
 
     describe("rendering", function() {
+  
+      var docs, edges, people, colls,
+        checkButtonContent = function(col, cls) {
+          var btn = document.getElementById(col.name);
+          expect(btn).toBeOfClass("btn");
+          expect(btn).toBeOfClass("btn-server");
+          expect(btn).toBeOfClass("collection");
+          expect(btn).toBeOfClass("btn-" + cls);
+          expect($(btn).text()).toEqual(col.name);
+        };
+
 
       beforeEach(function() {
+        docs = {
+          name: "Documents",
+          status: "ok"
+        };
+        edges = {
+          name: "Edges",
+          status: "warning"
+        };
+        people = {
+          name: "People",
+          status: "critical"
+        };
+        colls = [
+          docs,
+          edges,
+          people
+        ];
         spyOn(shardsView, "render");
         view = new window.ClusterCollectionView();
+        view.fakeData.collections = colls;
+        view.render();
       });
 
-      it("should not render the Server view", function() {
-        view.render();
+      it("should not render the server view", function() {
         expect(shardsView.render).not.toHaveBeenCalled();
       });
+
+      it("should render the documents collection", function() {
+        checkButtonContent(docs, "success");
+      });
+
+      it("should render the edge collection", function() {
+        checkButtonContent(edges, "warning");
+      });
+
+      it("should render the people collection", function() {
+        checkButtonContent(people, "danger");
+      });
+
+      describe("user actions", function() {
+        var info;
+
+        beforeEach(function() {
+          view = new window.ClusterCollectionView();
+        });
+
+        it("should be able to navigate to Documents", function() {
+          info = {
+            name: "Documents"
+          };
+          $("#Documents").click();
+          expect(shardsView.render).toHaveBeenCalledWith(info);
+        });
+
+        it("should be able to navigate to Edges", function() {
+          info = {
+            name: "Edges"
+          };
+          $("#Edges").click();
+          expect(shardsView.render).toHaveBeenCalledWith(info);
+        });
+
+        it("should be able to navigate to People", function() {
+          info = {
+            name: "People"
+          };
+          $("#People").click();
+          expect(shardsView.render).toHaveBeenCalledWith(info);
+        });
+
+      });
     });
 
-    describe("user actions", function() {
-      var info;
-
-      beforeEach(function() {
-        spyOn(shardsView, "render");
-        view = new window.ClusterCollectionView();
-        view.render();
-      });
-
-      it("should be able to navigate to Documents", function() {
-        info = {
-          name: "Documents"
-        };
-        $("#Documents").click();
-        expect(shardsView.render).toHaveBeenCalledWith(info);
-      });
-
-      it("should be able to navigate to Edges", function() {
-        info = {
-          name: "Edges"
-        };
-        $("#Edges").click();
-        expect(shardsView.render).toHaveBeenCalledWith(info);
-      });
-
-      it("should be able to navigate to People", function() {
-        info = {
-          name: "People"
-        };
-        $("#People").click();
-        expect(shardsView.render).toHaveBeenCalledWith(info);
-      });
-
-    });
 
   });