diff --git a/js/apps/system/aardvark/frontend/css/buttons.css b/js/apps/system/aardvark/frontend/css/buttons.css
index c1d21ecfc2..f48cd5450c 100644
--- a/js/apps/system/aardvark/frontend/css/buttons.css
+++ b/js/apps/system/aardvark/frontend/css/buttons.css
@@ -95,6 +95,14 @@ button {
background-color: #F89406;
}
+.btn-inactive {
+ background-color: lightgrey;
+}
+
+.btn-inactive:hover {
+ background-color: grey;
+}
+
.btn-group > .btn + .dropdown-toggle {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.125) inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
@@ -271,6 +279,14 @@ button.gv-zoom-btn.pan-bottom{
background-image:url("../img/gv_arrow_bottom.png");
}
-button.btn-overview {
+/* Cluster View */
+
+button.btn-overview, button.btn-server {
margin: 5px;
}
+
+button.btn-server {
+ width: 120px;
+}
+
+
diff --git a/js/apps/system/aardvark/frontend/css/clusterDashboardView.css b/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
index 1de6983ca3..c0aeb8a7d9 100644
--- a/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
+++ b/js/apps/system/aardvark/frontend/css/clusterDashboardView.css
@@ -15,6 +15,14 @@ h3.clusterColumnHeader {
text-align: center;
}
+h4.domino-header {
+ margin: 0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-right: 0px;
+ padding-left: 0px;
+}
+
div.clusterAmounts {
position: absolute;
left: 0px;
@@ -50,26 +58,30 @@ div.tile-right {
margin-left: 20px;
}
-.btn-success {
- background: #8AA051;
+div.domino {
+ float: left;
+ text-align: center;
+ background-color: #f4f3f3;
+ cursor: pointer;
+ margin: 5px;
+ width: 210px;
}
-.btn-success:hover {
- background: #788F3D;
+hr.domino-line {
+ margin: 0px 5px;
+ border-width: 1px;
+ border-top-color: #686766;
+ border-bottom-color: #333232;
}
-.btn-danger {
- background-color: #DA4F49;
+div.domino-upper, div.domino-lower {
+ height: 100px;
+ margin: 5px;
+}
+div.domino-upper {
+ margin-bottom: 0px;
+}
+div.domino-lower {
+ margin-top: 0px;
}
-.btn-danger:hover {
- background-color: #BE342E;
-}
-
-.btn-warning {
- background-color: #FAA732;
-}
-
-.btn-warning:hover {
- background-color: #F89406;
-}
diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterServerView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterServerView.ejs
index f7e1bc2a29..4b28a0530d 100644
--- a/js/apps/system/aardvark/frontend/js/templates/clusterServerView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/clusterServerView.ejs
@@ -1,10 +1,21 @@
+<% var statusClass = function(s) {
+ switch (s) {
+ case "ok":
+ return "success";
+ case "warning":
+ return "warning";
+ case "critical":
+ return "danger";
+ }
+ };
+%>
<% _.each(servers, function(v) { %>
-
-
+
<% }); %>
@@ -12,11 +23,20 @@
<% } else { %>
<% _.each(servers, function(v) { %>
-
<%=v.primary.name%>
-
<%=v.primary.url%>
+
+
+ <%=v.primary.url%>
+
+
<% if (v.secondary) { %>
-
<%=v.secondary.name%>
-
<%=v.secondary.url%>
+
+
+ <%=v.secondary.url%>
+
+ <% } else {%>
+
+
+
<% } %>
<% }); %>
diff --git a/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js
index 16b8669486..6555c0c9a2 100644
--- a/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js
+++ b/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js
@@ -16,6 +16,17 @@
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);
+ }
+ });
+
});
afterEach(function() {
@@ -58,6 +69,20 @@
});
});
+ },
+
+ checkDominoLayout = function(tile) {
+ var tileElements = tile.children,
+ upper = tileElements[0],
+ line = tileElements[1],
+ lower = tileElements[2];
+ expect(tile).toBeOfClass("domino");
+ expect(tile).toBeOfClass("server");
+ expect(upper).toBeOfClass("domino-upper");
+ expect(line).toBeOfClass("domino-line");
+ expect(lower).toBeOfClass("domino-lower");
+ expect(upper.children[0]).toBeOfClass("domino-header");
+ expect(lower.children[0]).toBeOfClass("domino-header");
};
beforeEach(function() {
@@ -134,6 +159,13 @@
describe("minified version", function() {
+ var checkButtonContent = function(btn, pair, cls) {
+ expect(btn).toBeOfClass("btn");
+ expect(btn).toBeOfClass("server");
+ expect(btn).toBeOfClass("btn-" + cls);
+ expect($(btn).text()).toEqual(pair.primary.name);
+ };
+
beforeEach(function() {
view.render(true);
});
@@ -142,13 +174,58 @@
expect($("button", $(div)).length).toEqual(4);
});
- // TODO
+ it("should render the good pair", function() {
+ checkButtonContent(
+ document.getElementById(okPair.primary.name),
+ okPair,
+ "success"
+ );
+ });
+
+ it("should render the single primary", function() {
+ checkButtonContent(
+ document.getElementById(noBkp.primary.name),
+ noBkp,
+ "success"
+ );
+ });
+
+ it("should render the dead secondary", function() {
+ checkButtonContent(
+ document.getElementById(deadBkp.primary.name),
+ deadBkp,
+ "success"
+ );
+ });
+
+ it("should render the dead primary", function() {
+ checkButtonContent(
+ document.getElementById(deadPrim.primary.name),
+ deadPrim,
+ "danger"
+ );
+ });
checkUserActions();
});
describe("maximised version", function() {
+ var checkDominoContent = function(tile, pair, btn1, btn2) {
+ var upper = tile.children[0],
+ lower = tile.children[2];
+ expect(upper).toBeOfClass("btn-" + btn1);
+ expect($(upper.children[0]).text()).toEqual(pair.primary.name);
+ expect($(upper.children[1]).text()).toEqual(pair.primary.url);
+ expect(lower).toBeOfClass("btn-" + btn2);
+ if (pair.secondary) {
+ expect($(lower.children[0]).text()).toEqual(pair.secondary.name);
+ expect($(lower.children[1]).text()).toEqual(pair.secondary.url);
+ } else {
+ expect($(lower.children[0]).text()).toEqual("Not configured");
+ }
+ };
+
beforeEach(function() {
view.render();
});
@@ -159,8 +236,29 @@
it("should render the good pair", function() {
var tile = getTile(okPair.primary.name);
+ checkDominoLayout(tile);
+ checkDominoContent(tile, okPair, "success", "success");
});
+ it("should render the single primary", function() {
+ var tile = getTile(noBkp.primary.name);
+ checkDominoLayout(tile);
+ checkDominoContent(tile, noBkp, "success", "inactive");
+ });
+
+ it("should render the dead secondary pair", function() {
+ var tile = getTile(deadBkp.primary.name);
+ checkDominoLayout(tile);
+ checkDominoContent(tile, deadBkp, "success", "danger");
+ });
+
+ it("should render the dead primary pair", function() {
+ var tile = getTile(deadPrim.primary.name);
+ checkDominoLayout(tile);
+ checkDominoContent(tile, deadPrim, "danger", "success");
+ });
+
+
checkUserActions();
});