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

some UI changes

This commit is contained in:
Claudius Weinberger 2014-03-01 22:06:24 +01:00
parent b712f906bc e920fece2a
commit 6a02c5a75a
19 changed files with 189 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
View File

@ -7,12 +7,13 @@
window.ClusterRouter = Backbone.Router.extend({
routes: {
"" : "initialRoute",
"planTest" : "planTest",
"planSymmetrical" : "planSymmetric",
"planAsymmetrical" : "planAsymmetric",
"shards" : "showShards",
"showCluster" : "showCluster",
"dashboard/:server" : "dashboard",
"dashboard" : "dashboard",
"handleClusterDown" : "handleClusterDown"
},
@ -27,6 +28,10 @@
+ last;
},
initialRoute: function() {
this.initial();
},
updateAllUrls: function() {
_.each(this.toUpdate, function(u) {
u.updateUrl();
@ -39,13 +44,21 @@
},
initialize: function () {
var self = this;
this.initial = this.planScenario;
this.bind('all', function(trigger, args) {
var routeData = trigger.split(":");
if (trigger === "route") {
if (this.currentRoute === "dashboard") {
this.dashboardView.stopUpdating();
console.log(args);
if (args !== "showCluster") {
if (self.showClusterView) {
self.showClusterView.stopUpdating();
self.shutdownView.unrender();
}
if (self.dashboardView) {
self.dashboardView.stopUpdating();
}
}
this.currentRoute = args;
}
});
this.toUpdate = [];
@ -61,6 +74,12 @@
if (!this.showClusterView) {
this.showClusterView = new window.ShowClusterView();
}
if (!this.shutdownView) {
this.shutdownView = new window.ShutdownButtonView({
overview: this.showClusterView
});
}
this.shutdownView.render();
this.showClusterView.render();
},
@ -116,7 +135,11 @@
this.clusterDownView.render();
},
dashboard: function(server) {
dashboard: function() {
var server = this.serverToShow;
if (!server) {
this.navigate("", {trigger: true});
}
var statisticsDescription = new window.StatisticsDescription();
statisticsDescription.fetch({
async:false
@ -125,8 +148,8 @@
if (this.dashboardView) {
this.dashboardView.stopUpdating();
}
console.log(server);
this.dashboardView = null;
// this.dashboardView = new window.ServerDashboardView({
this.dashboardView = new window.dashboardView({
collection: statisticsCollection,
description: statisticsDescription,

8
js/apps/system/aardvark/clusterFrontend/js/routers/startApp.js
View File

@ -20,14 +20,14 @@
if(window.App.clusterPlan.get("plan")) {
if(window.App.clusterPlan.isAlive()) {
window.App.showCluster();
window.App.initial = window.App.showCluster;
} else {
window.App.handleClusterDown();
window.App.initial = window.App.handleClusterDown;
}
} else {
window.App.planScenario();
window.App.initial = window.App.planScenario;
}
window.App.initialRoute();
window.App.handleResize();
});

3
js/apps/system/aardvark/clusterFrontend/js/templates/modalDashboardDummy.ejs Normal file
View File

@ -0,0 +1,3 @@
<script id="modalDashboardDummy.ejs" type="text/template">
<div id="dbServerModal" class="modal hide fade dashboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"></div>
</script>

2
js/apps/system/aardvark/clusterFrontend/js/templates/serverEntry.ejs
View File

@ -4,7 +4,7 @@
<div class="controls">
<input type="text" placeholder="Server" class="input-xlarge host" value="<%=host?host:''%>"></input>
<span class="searchEqualsLabel">:</span>
<input type="text" maxlength="5" class="input-small port" placeholder="port" value="<%=port?port:''%>"></input>
<input type="text" maxlength="5" class="input-mini port" placeholder="port" value="<%=port?port:''%>"></input>
<% if (isFirst) {%>
<button class="graphViewer-icon-button gv-icon-small add"></button>
<% } else { %>

17
js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
View File

@ -36,9 +36,7 @@
%>
<li class="tile">
<a class="coordinator <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>" href="<%=url%>" target="_blank">
<span class="clusterInfoIcon">
<img src="img/icon_compass-24.png" />
</span>
<img src="img/icon_compass-24.png" class="icon" width="50px" height="50px"/>
</a>
<h5 class="collectionName"><%=c.get("name")%></h5>
</li>
@ -48,9 +46,7 @@
%>
<li class="tile">
<div class="dbserver <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>">
<span class="clusterInfoIcon">
<img src="img/icon_database-24.png" />
</span>
<img src="img/icon_database-24.png" class="icon" width="50px" height="50px"/>
</div>
<h5 class="collectionName"><%=c.get("name")%> (Shards: <span id="<%=c.get("name")%>Shards" class="shardCounter"/>)</h5>
</li>
@ -63,9 +59,7 @@
<li class="tile">
<% _.each(s.coords, function(c) { %>
<div class="coordinator <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>">
<span class="clusterInfoIcon">
<img src="img/icon_compass-24.png" />
</span>
<img src="img/icon_compass-24.png" class="icon" width="50px" height="50px"/>
<h6 class="serverName"><%=c.get("name")%></h6>
</div>
<% });
@ -74,9 +68,7 @@
dbName = c.get("name");
%>
<div class="dbserver <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>">
<span class="clusterInfoIcon">
<img src="img/icon_database-24.png" />
</span>
<img src="img/icon_database-24.png" class="icon" width="50px" height="50px"/>
<h6 class="serverName"><%=c.get("name")%></h6>
</div>
<% }); %>
@ -86,7 +78,6 @@
});
}
%>
<li><button id="clusterShutdown" class="button-danger pull-right">Shutdown Cluster</button></li>
</ul>
<div class="headerBar">

3
js/apps/system/aardvark/clusterFrontend/js/templates/shutdownButtonView.ejs Normal file
View File

@ -0,0 +1,3 @@
<script id="shutdownButtonView.ejs" type="text/template">
<button id="clusterShutdown" class="button-danger">Shutdown Cluster</button>
</script>

1
js/apps/system/aardvark/clusterFrontend/js/templates/symmetricPlan.ejs
View File

@ -15,6 +15,7 @@
<div class="control-group">
<div class="controls">
<button class="button-success" id="startSymmetricPlan">Launch Cluster</button>
<button class="button-close" id="cancel">Cancel</button>
</div>
</div>
</form>

3
js/apps/system/aardvark/clusterFrontend/js/templates/testPlan.ejs
View File

@ -11,7 +11,7 @@
<div class="controls">
<input type="text" id="host" placeholder="Server" class="input-xlarge" value="<%=hostname%>"></input>
<span class="searchEqualsLabel">:</span>
<input type="text" maxlength="5" class="input-small" id="port" placeholder="port" value="<%=port%>" ></input>
<input type="text" maxlength="5" class="input-mini" id="port" placeholder="port" value="<%=port%>" ></input>
</div>
</div>
<div class="control-group">
@ -30,6 +30,7 @@
<div class="control-group">
<div class="controls">
<button class="button-success" id="startTestPlan">Launch Cluster</button>
<button class="button-close" id="cancel">Cancel</button>
</div>
</div>
</form>

21
js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js Normal file
View File

@ -0,0 +1,21 @@
/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true */
/*global require, exports, Backbone, EJS, $, flush, window, arangoHelper, nv, d3, localStorage*/
/*global document, Dygraph, _,templateEngine */
(function() {
"use strict";
window.ServerDashboardView = window.dashboardView.extend({
el: "#dbServerModal",
events: {
},
render: function() {
window.dashboardView.prototype.render.bind(this)();
$(this.el).modal("show");
}
});
}());

7
js/apps/system/aardvark/clusterFrontend/js/views/planSymmetricView.js
View File

@ -13,7 +13,12 @@
events: {
"click #startSymmetricPlan": "startPlan",
"click .add": "addEntry",
"click .delete": "removeEntry"
"click .delete": "removeEntry",
"click #cancel": "cancel"
},
cancel: function() {
window.App.navigate("", {trigger: true});
},
startPlan: function() {

7
js/apps/system/aardvark/clusterFrontend/js/views/planTestView.js
View File

@ -12,7 +12,12 @@
modal: templateEngine.createTemplate("waitModal.ejs"),
events: {
"click #startTestPlan": "startPlan"
"click #startTestPlan": "startPlan",
"click #cancel": "cancel"
},
cancel: function() {
window.App.navigate("", {trigger: true});
},
startPlan: function() {

21
js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
View File

@ -10,12 +10,12 @@
template: templateEngine.createTemplate("showCluster.ejs"),
modal: templateEngine.createTemplate("waitModal.ejs"),
modalDummy: templateEngine.createTemplate("modalDashboardDummy.ejs"),
events: {
"change #selectDB" : "updateCollections",
"change #selectCol" : "updateShards",
"click .dbserver" : "dashboard",
"click #clusterShutdown" : "clusterShutdown",
"mouseover #lineGraph" : "setShowAll",
"mouseout #lineGraph" : "resetShowAll"
},
@ -455,21 +455,6 @@
}, this.interval);
},
clusterShutdown : function() {
this.stopUpdating();
$('#waitModalLayer').modal('show');
$('#waitModalMessage').html('Please be patient while your cluster will shutdown');
$.ajax({
cache: false,
type: "GET",
async: false, // sequential calls!
url: "cluster/shutdown",
success: function(data) {
$('#waitModalLayer').modal('hide');
window.App.navigate("handleClusterDown", {trigger: true});
}
});
},
dashboard: function(e) {
this.stopUpdating();
@ -477,6 +462,7 @@
var serv = {};
var cur;
var coord;
$("#modalPlaceholder").html(this.modalDummy.render({}));
serv.raw = tar.attr("id");
serv.isDBServer = tar.hasClass("dbserver");
if (serv.isDBServer) {
@ -498,7 +484,8 @@
+ cur.get("address");
}
serv.target = encodeURIComponent(cur.get("name"));
window.App.dashboard(serv);
window.App.serverToShow = serv;
window.App.navigate("dashboard", {trigger: true});
}
});

44
js/apps/system/aardvark/clusterFrontend/js/views/shutdownButtonView.js Normal file
View File

@ -0,0 +1,44 @@
/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true */
/*global Backbone, templateEngine, $, window*/
(function () {
"use strict";
window.ShutdownButtonView = Backbone.View.extend({
el: '#navigationBar',
events: {
"click #clusterShutdown" : "clusterShutdown"
},
initialize: function() {
this.overview = this.options.overview;
},
template: templateEngine.createTemplate("shutdownButtonView.ejs"),
clusterShutdown : function() {
this.overview.stopUpdating();
$('#waitModalLayer').modal('show');
$('#waitModalMessage').html('Please be patient while your cluster is shutting down');
$.ajax({
cache: false,
type: "GET",
async: false, // sequential calls!
url: "cluster/shutdown",
success: function(data) {
$('#waitModalLayer').modal('hide');
window.App.navigate("handleClusterDown", {trigger: true});
}
});
},
render: function () {
$(this.el).html(this.template.render({}));
return this;
},
unrender: function() {
$(this.el).html("");
}
});
}());

2
js/apps/system/aardvark/frontend/css/bootstrap.css vendored
View File

@ -67,7 +67,7 @@ sub {
}
img {
width: auto\9;
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;

11
js/apps/system/aardvark/frontend/js/templates/dashboardView.ejs
View File

@ -1,5 +1,10 @@
<script id="dashboardView.ejs" type="text/template">
<div class="headerBar">
<a class="arangoHeader"><%= header %></a>
<% if (backButton) { %>
<button id="backToCluster" class="button-header pull-right">Back to Cluster</button>
<% } %>
</div>
<div class="contentDiv">
<!--
<div id="dashboardHeader" class="headerBar">
@ -7,14 +12,10 @@
</div>
<div id="distributionChartDiv"></div>
-->
<div class="headerBar">
<a class="arangoHeader">Request Statistics</a>
</div>
<div class="lineChartDiv" id="requestStatistics"></div>
<div class="headerBar">
<a class="arangoHeader">System Resources</a>
</div>
<div class="lineChartDiv" id="systemResources"></div>
</div>
</script>

15
js/apps/system/aardvark/frontend/js/views/dashboardView.js
View File

@ -725,11 +725,18 @@
render: function() {
var self = this;
var header = "Dashboard";
var header = "Request Statistics";
var addBackbutton = false;
if (this.options.server) {
header += " (" + this.options.server.raw + ")";
header += " for Server ";
header += this.options.server.raw + " (";
header += decodeURIComponent(this.options.server.target) + ")";
addBackbutton = true;
}
$(this.el).html(this.template.render({header : header}));
$(this.el).html(this.template.render({
header : header,
backButton: addBackbutton
}));
this.renderDistributionPlaceholder();
this.prepareSeries();
this.calculateSeries();
@ -820,7 +827,7 @@
},
returnToClusterView : function() {
window.App.showCluster();
window.history.back();
}
});
}());

10
js/apps/system/aardvark/frontend/scss/_abstracts.scss
View File

@ -101,6 +101,16 @@
}
}
%header {
background-color: $c_header_btn_bg;
color: $c_header_btn_fg;
border: 1px solid $c_header_btn_border;
&:hover {
background-color: $c_white;
color: $c_black;
}
}
%notification {
background-color: $c_notification;
&:hover {

27
js/apps/system/aardvark/frontend/scss/_buttons.scss
View File

@ -1,19 +1,29 @@
// Bootstrap Buttons
%btn {
%bare-btn {
@include border-radius(4px);
@include box-shadow(0);
font-weight: 300 !important;
font-size: 14px;
}
%btn {
@extend %bare-btn;
border: none;
color: $c_white;
margin-left: 10px;
padding: 5px 16px;
font-weight: 300 !important;
font-size: 14px;
}
.button-neutral {
@extend %btn;
@extend %neutral;
}
.button-header {
@extend %bare-btn;
@extend %header;
margin-top: 5px;
}
.button-primary {
@extend %btn;
@extend %primary;
@ -78,6 +88,7 @@ ul.headerButtonList {
a.headerButton {
@extend %clickable;
@extend %header;
float: left;
margin-top: 2px;
margin-left: 5px;
@ -85,17 +96,9 @@ a.headerButton {
position: relative;
@include border-radius(3px);
@include box-shadow(none);
background-color: $c_header_btn_bg;
color: $c_header_btn_fg;
height: 17px;
width: 9px;
padding: 4px 9px 2px 9px;
border: 1px solid $c_header_btn_border;
&:hover {
background-color: $c_white;
color: $c_black;
}
.icon_arangodb_filter {
top: 3px !important;
@ -357,4 +360,4 @@ button.btn-server {
}
}
;
}
}

29
js/apps/system/aardvark/frontend/scss/generated.css
View File

@ -64,6 +64,14 @@ nav.navbar, footer.footer {
.button-primary:hover {
background-color: #3a322e; }
.button-header, a.headerButton {
background-color: #dddddd;
color: #555555;
border: 1px solid #222222; }
.button-header:hover, a.headerButton:hover {
background-color: white;
color: black; }
.button-notification {
background-color: #faa020; }
.button-notification:hover {
@ -227,19 +235,24 @@ footer.footer {
padding-bottom: 10px;
margin-bottom: 0; }
.button-neutral, .button-primary, .button-notification, .button-success, .button-danger, .button-warning, .button-inactive {
.button-neutral, .button-primary, .button-notification, .button-success, .button-danger, .button-warning, .button-inactive, .button-header {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
font-weight: 300 !important;
font-size: 14px; }
.button-neutral, .button-primary, .button-notification, .button-success, .button-danger, .button-warning, .button-inactive {
border: none;
color: white;
margin-left: 10px;
padding: 5px 16px;
font-weight: 300 !important;
font-size: 14px; }
padding: 5px 16px; }
.button-header {
margin-top: 5px; }
.button-notification {
margin-right: 5px; }
@ -278,15 +291,9 @@ a.headerButton {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #dddddd;
color: #555555;
height: 17px;
width: 9px;
padding: 4px 9px 2px 9px;
border: 1px solid #222222; }
a.headerButton:hover {
background-color: white;
color: black; }
padding: 4px 9px 2px 9px; }
a.headerButton .icon_arangodb_filter {
top: 3px !important; }
a.headerButton .icon_arangodb_import {