some UI changes

js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js

@@ -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") {
+          console.log(args);
-            this.dashboardView.stopUpdating();
+          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,

js/apps/system/aardvark/clusterFrontend/js/routers/startApp.js

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

js/apps/system/aardvark/clusterFrontend/js/templates/modalDashboardDummy.ejs

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

js/apps/system/aardvark/clusterFrontend/js/templates/serverEntry.ejs

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

js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs

@@ -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" class="icon" width="50px" height="50px"/>
-            <img src="img/icon_compass-24.png" />
-          </span>
         </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" class="icon" width="50px" height="50px"/>
-            <img src="img/icon_database-24.png" />
-          </span>
         </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" class="icon" width="50px" height="50px"/>
-              <img src="img/icon_compass-24.png" />
-            </span>
             <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" class="icon" width="50px" height="50px"/>
-              <img src="img/icon_database-24.png" />
-            </span>
             <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">

js/apps/system/aardvark/clusterFrontend/js/templates/shutdownButtonView.ejs

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

js/apps/system/aardvark/clusterFrontend/js/templates/symmetricPlan.ejs

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

js/apps/system/aardvark/clusterFrontend/js/templates/testPlan.ejs

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

js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js

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

js/apps/system/aardvark/clusterFrontend/js/views/planSymmetricView.js

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

js/apps/system/aardvark/clusterFrontend/js/views/planTestView.js

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

js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js

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

js/apps/system/aardvark/clusterFrontend/js/views/shutdownButtonView.js

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

js/apps/system/aardvark/frontend/css/bootstrap.css

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

js/apps/system/aardvark/frontend/js/templates/dashboardView.ejs

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

js/apps/system/aardvark/frontend/js/views/dashboardView.js

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

js/apps/system/aardvark/frontend/scss/_abstracts.scss

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

js/apps/system/aardvark/frontend/scss/_buttons.scss

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

js/apps/system/aardvark/frontend/scss/generated.css

@@ -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;
+  padding: 5px 16px; }
-  font-weight: 300 !important;
+
-  font-size: 14px; }
+.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;
+  padding: 4px 9px 2px 9px; }
-  border: 1px solid #222222; }
-  a.headerButton:hover {
-    background-color: white;
-    color: black; }
   a.headerButton .icon_arangodb_filter {
     top: 3px !important; }
   a.headerButton .icon_arangodb_import {