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"; + } + }; +%>

DB Server

<% if (minify) { %>
@@ -12,11 +23,20 @@ <% } else { %> <% _.each(servers, function(v) { %>
- <%=v.primary.name%> - <%=v.primary.url%> +
+

<%=v.primary.name%>

+ <%=v.primary.url%> +
+
<% if (v.secondary) { %> - <%=v.secondary.name%> - <%=v.secondary.url%> +
+

<%=v.secondary.name%>

+ <%=v.secondary.url%> +
+ <% } else {%> +
+

Not configured

+
<% } %>
<% }); %> 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(); });