diff --git a/js/apps/system/aardvark/frontend/css/buttons.css b/js/apps/system/aardvark/frontend/css/buttons.css index 3b36c26b1b..c1d21ecfc2 100644 --- a/js/apps/system/aardvark/frontend/css/buttons.css +++ b/js/apps/system/aardvark/frontend/css/buttons.css @@ -272,8 +272,5 @@ button.gv-zoom-btn.pan-bottom{ } button.btn-overview { - margin-left: 0px; - width: 140px; - margin-top: 5px; - margin-bottom: 5px; + margin: 5px; } diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterCoordinatorView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterCoordinatorView.ejs new file mode 100644 index 0000000000..6b0fb5b305 --- /dev/null +++ b/js/apps/system/aardvark/frontend/js/templates/clusterCoordinatorView.ejs @@ -0,0 +1,14 @@ +

Coordinators

+
+ +
diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterOverviewView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterOverviewView.ejs index 633c9dc265..e795ec70a9 100644 --- a/js/apps/system/aardvark/frontend/js/templates/clusterOverviewView.ejs +++ b/js/apps/system/aardvark/frontend/js/templates/clusterOverviewView.ejs @@ -23,21 +23,21 @@ <% } else { %>
- Data Servers -
-
- -
- <%=dbservers.having %>/<%=dbservers.plan %> +

Data Servers

+
+
+

+ <%=dbservers.having %>/<%=dbservers.plan %> +

- Coordinators -
-
- -
- <%=coordinators.having %>/<%=coordinators.plan %> +

Coordinators

+
+
+

+ <%=coordinators.having %>/<%=coordinators.plan %> +

<% } %> diff --git a/js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js b/js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js new file mode 100644 index 0000000000..2084270e45 --- /dev/null +++ b/js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js @@ -0,0 +1,20 @@ +/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true*/ +/*global Backbone, templateEngine, $, window */ + +(function() { + "use strict"; + + window.ClusterCoordinatorView = Backbone.View.extend({ + + el: '#clusterServers', + + template: templateEngine.createTemplate("clusterCoordinatorView.ejs"), + + render: function(){ + $(this.el).html(this.template.render({})); + return this; + } + + }); + +}()); diff --git a/js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js b/js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js index 8df5652fec..28277a027e 100644 --- a/js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js +++ b/js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js @@ -30,19 +30,16 @@ }; this.serverView = new window.ClusterServerView(); + this.coordinatorView = new window.ClusterCoordinatorView(); }, loadDBServers: function() { - this.serverView.render({ - type: "dbservers" - }); + this.serverView.render(); this.render(true); }, loadCoordinators: function() { - this.serverView.render({ - type: "coordinator" - }); + this.coordinatorView.render(); this.render(true); }, diff --git a/js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js new file mode 100644 index 0000000000..4b85eb93d8 --- /dev/null +++ b/js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js @@ -0,0 +1,36 @@ +/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true, browser: true*/ +/*global describe, beforeEach, afterEach, it, */ +/*global spyOn, expect*/ +/*global templateEngine, $*/ +(function() { + "use strict"; + + describe("Cluster Coordinator View", function() { + var view, div; + + beforeEach(function() { + div = document.createElement("div"); + div.id = "clusterServers"; + document.body.appendChild(div); + }); + + afterEach(function() { + document.body.removeChild(div); + }); + + describe("rendering", function() { + + beforeEach(function() { + view = new window.ClusterCoordinatorView(); + }); + + it("should render the coordinators", function() { + view.render(); + + }); + + }); + + }); + +}()); diff --git a/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js index d748a1228f..87d4c5c29a 100644 --- a/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js +++ b/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js @@ -6,16 +6,20 @@ "use strict"; describe("Cluster Overview View", function() { - var view, div, serverView; + var view, div, serverView, coordinatorView; beforeEach(function() { div = document.createElement("div"); div.id = "clusterOverview"; document.body.appendChild(div); serverView = { - render: function(){} + render: function() {} + }; + coordinatorView = { + render: function() {} }; spyOn(window, "ClusterServerView").andReturn(serverView); + spyOn(window, "ClusterCoordinatorView").andReturn(coordinatorView); this.addMatchers({ toBeTag: function(name) { @@ -66,25 +70,20 @@ beforeEach(function() { serverView.render.reset(); + coordinatorView.render.reset(); view.render(); spyOn(view, "render"); }); it("should be able to navigate to db servers", function() { - info = { - type: "dbservers" - }; $("#dbserver").click(); - expect(serverView.render).toHaveBeenCalledWith(info); + expect(serverView.render).toHaveBeenCalledWith(); expect(view.render).toHaveBeenCalledWith(true); }); - it("should be able to navigate to primary servers", function() { - info = { - type: "coordinator" - }; + it("should be able to navigate to coordinators", function() { $("#coordinator").click(); - expect(serverView.render).toHaveBeenCalledWith(info); + expect(coordinatorView.render).toHaveBeenCalledWith(); expect(view.render).toHaveBeenCalledWith(true); }); @@ -106,6 +105,7 @@ beforeEach(function() { spyOn(serverView, "render"); + spyOn(coordinatorView, "render"); view = new window.ClusterOverviewView(); // Fake Data Injection to be removed view.fakeData = { @@ -132,6 +132,10 @@ expect(serverView.render).not.toHaveBeenCalled(); }); + it("should not render the Coordinator view", function() { + expect(coordinatorView.render).not.toHaveBeenCalled(); + }); + it("should render in minified version", function() { expect($(div).hasClass("clusterColumnMax")).toBeFalsy(); }); @@ -253,10 +257,10 @@ view.fakeData.dbservers.having = 4; view.render(); var tile = getTile(), - spans = $("> span", $(tile)), - header = spans[0], - icon = spans[1], - footer = $("> div", $(tile)), + headers = $("> h4", $(tile)), + header = headers[0], + footer = headers[1], + icon = $("> div > span", $(tile))[0], htxt = $(header).text(), ftxt = $(footer).text(); expect(tile).toBeDefined(); @@ -304,10 +308,10 @@ view.fakeData.coordinators.having = 4; view.render(); var tile = getTile(), - spans = $("> span", $(tile)), - header = spans[0], - icon = spans[1], - footer = $("> div", $(tile)), + headers = $("> h4", $(tile)), + header = headers[0], + footer = headers[1], + icon = $("> div > span", $(tile))[0], htxt = $(header).text(), ftxt = $(footer).text(); expect(tile).toBeDefined();