1
0
Fork 0

Merge branch 'sharding' of ssh://github.com/triAGENS/ArangoDB into sharding

This commit is contained in:
Max Neunhoeffer 2014-01-16 16:19:14 +01:00
commit 58c5f4636c
9 changed files with 267 additions and 80 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>

View File

@ -1,10 +1,21 @@
<% var statusClass = function(s) {
switch (s) {
case "ok":
return "success";
case "warning":
return "warning";
case "critical":
return "danger";
}
};
%>
<h3 class="clusterColumnHeader">DB Server</h3>
<% if (minify) { %>
<div>
<ul>
<% _.each(servers, function(v) { %>
<li>
<button id="<%=v.primary.name %>" class="server"><%=v.primary.name %></button>
<button id="<%=v.primary.name %>" class="btn btn-server btn-<%=statusClass(v.primary.status)%> server"><%=v.primary.name %></button>
</li>
<% }); %>
</ul>
@ -12,11 +23,20 @@
<% } else { %>
<% _.each(servers, function(v) { %>
<div id="<%=v.primary.name %>" class="domino server">
<span><%=v.primary.name%></span>
<span><%=v.primary.url%></span>
<div class="domino-upper btn-<%=statusClass(v.primary.status)%>">
<h4 class="domino-header"><%=v.primary.name%></h4>
<span><%=v.primary.url%></span>
</div>
<hr class="domino-line"/>
<% if (v.secondary) { %>
<span><%=v.secondary.name%></span>
<span><%=v.secondary.url%></span>
<div class="domino-lower btn-<%=statusClass(v.secondary.status)%>">
<h4 class="domino-header"><%=v.secondary.name%></h4>
<span><%=v.secondary.url%></span>
</div>
<% } else {%>
<div class="domino-lower btn-inactive">
<h4 class="domino-header">Not configured</h4>
</div>
<% } %>
</div>
<% }); %>

View File

@ -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;
}

View File

@ -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],

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";
@ -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);
});
});
});
});
}());

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";
@ -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() {

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";
@ -16,6 +16,7 @@
render: function(){}
};
spyOn(window, "ClusterDatabaseView").andReturn(dbView);
uiMatchers.define(this);
});
afterEach(function() {
@ -58,6 +59,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 +149,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 +164,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 +226,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();
});