Added first version of cluster database overview. Right now only datbase name is presented to the user

js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.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">Databases</h3>
-<button id="_system" class="database">_system</button>
-<button id="myDatabase" class="database">myDatabase</button>
-<button id="otherDatabase" class="database">otherDatabase</button>
+<ul>
+  <% _.each(databases, function(v) { %>
+    <li>
+    <button id="<%=v.name %>" class="btn btn-server btn-<%=statusClass(v.status)%> database"><%=v.name %></button>
+    </li>
+  <% }); %>
+</ul>

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

@@ -16,6 +16,22 @@
 
     initialize: function() {
       this.colView = new window.ClusterCollectionView();
+      this.fakeData = {
+        databases: [
+          {
+            name: "_system",
+            status: "ok"
+          },
+          {
+            name: "myDatabase",
+            status: "warning"
+          },
+          {
+            name: "otherDatabase",
+            status: "critical"
+          }
+        ]
+      };
     },
 
     loadDatabase: function(e) {
@@ -24,7 +40,9 @@
     },
 
     render: function(){
-      $(this.el).html(this.template.render({}));
+      $(this.el).html(this.template.render({
+        databases: this.fakeData.databases
+      }));
       return this;
     }
 

js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js

@@ -52,6 +52,14 @@ var uiMatchers = uiMatchers || {};
         return el.hasClass(name);
       },
       
+      toNotHaveClass: function(name) {
+        var el = $(this.actual);
+        this.message = function() {
+          return "Expected \"" + el.attr("class") + "\" to not contain " + name; 
+        };
+        return !el.hasClass(name);
+      },
+
       toBeADropdownMenu: function() {
         var div = this.actual,
           btn = div.children[0],

js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.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, "ClusterCollectionView").andReturn(colView);
+      uiMatchers.define(this);
     });
 
     afterEach(function() {
@@ -33,46 +34,81 @@
 
     describe("rendering", function() {
 
+      var db1, db2, db3, databases,
+        checkButtonContent = function(db, cls) {
+          var btn = document.getElementById(db.name);
+          expect(btn).toBeOfClass("btn");
+          expect(btn).toBeOfClass("btn-server");
+          expect(btn).toBeOfClass("database");
+          expect(btn).toBeOfClass("btn-" + cls);
+          expect($(btn).text()).toEqual(db.name);
+        };
+
+
       beforeEach(function() {
         spyOn(colView, "render");
+        db1 = {
+          name: "_system",
+          status: "ok"
+        };
+        db2 = {
+          name: "myDatabase",
+          status: "warning"
+        };
+        db3 = {
+          name: "otherDatabase",
+          status: "critical"
+        };
+        databases = [
+          db1,
+          db2,
+          db3
+        ];
         view = new window.ClusterDatabaseView();
+        view.fakeData.databases = databases;
+        view.render();
       });
 
       it("should not render the Server view", function() {
-        view.render();
         expect(colView.render).not.toHaveBeenCalled();
       });
-    });
 
-    describe("user actions", function() {
-      var db;
-
-      beforeEach(function() {
-        spyOn(colView, "render");
-        view = new window.ClusterDatabaseView();
-        view.render();
+      it("should render the ok database", function() {
+        checkButtonContent(db1, "success");
       });
 
-      it("should be able to navigate to _system", function() {
-        db = "_system";
-        $("#" + db).click();
-        expect(colView.render).toHaveBeenCalledWith(db);
+      it("should render the warning database", function() {
+        checkButtonContent(db2, "warning");
       });
 
-      it("should be able to navigate to myDatabase", function() {
-        db = "myDatabase";
-        $("#" + db).click();
-        expect(colView.render).toHaveBeenCalledWith(db);
+      it("should render the error database", function() {
+        checkButtonContent(db3, "danger");
       });
 
-      it("should be able to navigate to otherDatabase", function() {
-        db = "otherDatabase";
-        $("#" + db).click();
-        expect(colView.render).toHaveBeenCalledWith(db);
+      describe("user actions", function() {
+        var db;
+
+        it("should be able to navigate to _system", function() {
+          db = "_system";
+          $("#" + db).click();
+          expect(colView.render).toHaveBeenCalledWith(db);
+        });
+
+        it("should be able to navigate to myDatabase", function() {
+          db = "myDatabase";
+          $("#" + db).click();
+          expect(colView.render).toHaveBeenCalledWith(db);
+        });
+
+        it("should be able to navigate to otherDatabase", function() {
+          db = "otherDatabase";
+          $("#" + db).click();
+          expect(colView.render).toHaveBeenCalledWith(db);
+        });
+
       });
 
     });
-
   });
 
 }());

js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.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";
 
@@ -20,33 +20,7 @@
       };
       spyOn(window, "ClusterServerView").andReturn(serverView);
       spyOn(window, "ClusterCoordinatorView").andReturn(coordinatorView);
-      this.addMatchers({
-
-        toBeTag: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.tagName.toLowerCase() + " to be a " + name; 
-          };
-          return el.tagName.toLowerCase() === name;
-        },
-        
-        toBeOfClass: function(name) {
-          var el = $(this.actual);
-          this.message = function() {
-            return "Expected \"" + el.attr("class") + "\" to contain " + name; 
-          };
-          return el.hasClass(name);
-        },
-
-        toNotHaveClass: function(name) {
-          var el = $(this.actual);
-          this.message = function() {
-            return "Expected \"" + el.attr("class") + "\" to not contain " + name; 
-          };
-          return !el.hasClass(name);
-        }
-
-      });
+      uiMatchers.define(this);
     });
 
     afterEach(function() {

js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.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,17 +16,7 @@
         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);
-        }
-      });
-
+      uiMatchers.define(this);
     });
 
     afterEach(function() {