Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

First version of Coordinator Overview in cluster

This commit is contained in:
Michael Hackstein 2014-01-17 10:36:03 +01:00
parent 80ffa5d73d
commit 052e84fc2e
5 changed files with 175 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/apps/system/aardvark/frontend/css/clusterDashboardView.css
View File

@ -74,10 +74,11 @@ hr.domino-line {
border-bottom-color: #333232;
}
div.domino-upper, div.domino-lower {
div.domino-upper, div.domino-lower, div.domino-inner {
height: 100px;
margin: 5px;
}
div.domino-upper {
margin-bottom: 0px;
}

32
js/apps/system/aardvark/frontend/js/templates/clusterCoordinatorView.ejs
View File

@ -1,14 +1,20 @@
<% var statusClass = function(s) {
switch (s) {
case "ok":
return "success";
case "warning":
return "warning";
case "critical":
return "danger";
}
};
%>
<h3 class="clusterColumnHeader">Coordinators</h3>
<div class="pull-right">
<ul>
<li>
<button id="Pavel" class="server">Pavel</button>
</li>
<li>
<button id="Paul" class="server">Paul</button>
</li>
<li>
<button id="Peter" class="server">Peter</button>
</li>
</ul>
</div>
<% _.each(coordinators, function(v) { %>
<div id="<%=v.name %>" class="domino coordinator">
<div class="domino-inner btn-<%=statusClass(v.status)%>">
<h4 class="domino-header"><%=v.name%></h4>
<span><%=v.url%></span>
</div>
</div>
<% }); %>

28
js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js
View File

@ -10,8 +10,32 @@
template: templateEngine.createTemplate("clusterCoordinatorView.ejs"),
render: function(){
$(this.el).html(this.template.render({}));
initialize: function() {
this.fakeData = {
coordinators: [
{
name: "Charly",
url: "tcp://192.168.0.1:1337",
status: "ok"
},
{
name: "Carlos",
url: "tcp://192.168.0.2:1337",
status: "critical"
},
{
name: "Chantalle",
url: "tcp://192.168.0.5:1337",
status: "ok"
}
]
};
},
render: function() {
$(this.el).html(this.template.render({
coordinators: this.fakeData.coordinators
}));
return this;
}

53
js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js
View File

@ -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";
@ -12,6 +12,7 @@
div = document.createElement("div");
div.id = "clusterServers";
document.body.appendChild(div);
uiMatchers.define(this);
});
afterEach(function() {
@ -19,14 +20,60 @@
});
describe("rendering", function() {
var charly, carlos, chantalle, coordinators,
getTile = function(name) {
return document.getElementById(name);
},
checkTile = function(c, cls) {
var tile = getTile(c.name);
expect(tile).toBeOfClass("coordinator");
expect(tile).toBeOfClass("btn-" + cls);
expect(tile.children[0]).toBeOfClass("domino-header");
expect($(tile.children[0]).text()).toEqual(c.name);
expect($(tile.children[1]).text()).toEqual(c.url);
};
beforeEach(function() {
view = new window.ClusterCoordinatorView();
charly = {
name: "Charly",
url: "tcp://192.168.0.1:1337",
status: "ok"
};
carlos = {
name: "Carlos",
url: "tcp://192.168.0.2:1337",
status: "critical"
};
chantalle = {
name: "Chantalle",
url: "tcp://192.168.0.5:1337",
status: "ok"
};
coordinators = [
charly,
carlos,
chantalle
];
view.fakeData.coordinators = coordinators;
view.render();
});
it("should render the coordinators", function() {
view.render();
it("should render all coordiniators", function() {
expect($("> div.coordinator", $(div)).length).toEqual(3);
});
it("should render charly", function() {
checkTile(charly, "success");
});
it("should render carlos", function() {
checkTile(carlos, "danger");
});
it("should render chantalle", function() {
checkTile(chantalle, "success");
});
});

78
js/apps/system/aardvark/test/specs/views/clusterShardsViewSpec.js Normal file
View File

@ -0,0 +1,78 @@
/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true, browser: true*/
/*global describe, beforeEach, afterEach, it, */
/*global spyOn, expect*/
/*global templateEngine, $, uiMatchers*/
(function() {
"use strict";
describe("Cluster Shard View", function() {
var view, div;
beforeEach(function() {
div = document.createElement("div");
div.id = "clusterShards";
document.body.appendChild(div);
uiMatchers.define(this);
});
afterEach(function() {
document.body.removeChild(div);
});
describe("rendering", function() {
var s1, s2, s3, shards,
checkButtonContent = function(col, cls) {
var btn = document.getElementById(col.name);
expect(btn).toBeOfClass("btn");
expect(btn).toBeOfClass("btn-server");
expect(btn).toBeOfClass("shard");
expect(btn).toBeOfClass("btn-" + cls);
expect($(btn).text()).toEqual(col.name);
};
beforeEach(function() {
s1 = {
name: "Shard 1",
status: "ok"
};
s2 = {
name: "Shard 2",
status: "warning"
};
s3 = {
name: "Shard 3",
status: "critical"
};
shards = [
s1,
s2,
s3
];
view = new window.ClusterShardsView();
view.fakeData.shards = shards;
view.render();
});
it("should render the first shard", function() {
checkButtonContent(s1, "success");
});
it("should render the second shard", function() {
checkButtonContent(s2, "warning");
});
it("should render the third shard", function() {
checkButtonContent(s3, "danger");
});
});
});
}());