Merge branch 'devel' of https://github.com/triAGENS/ArangoDB into devel

Documentation/Cookbooks/CookbookCluster.md

@@ -1,5 +1,5 @@
-Stir up your ArangoDB Cluster{#CookbookCluster}
+Set up your ArangoDB Cluster{#CookbookCluster}
-=============================
+============================
 
 Setting up a cluster can be intimidating task. You have to deal with
 firewalls, ports, different types of machines, and the like. ArangoDB

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

@@ -2,18 +2,17 @@
 
   <% var box = function(c, btm) { %>
     <div class="scenarioBox<%=btm?' bottomBox':''%>">
-      <div class="scenarioBoxHeader">...</div>
       <div class="scenarioBoxText"><%=c%></div>
     </div>
   <% } 
-  var row = function(c, d, noHead) { %>
+  var row = function(c, d, nr) { %>
         <div class="scenarioMachine">
-          <% if (!noHead) { %>
+          <% if (nr) { %>
-          <div class="scenarioBoxHeader">...</div>
+            <div class="scenarioBoxHeader">Machine <%=nr%></div>
           <% } %>
           <%
-            if (c) {box("C");}
+            if (c) {box("Coordinator");}
-            if (d) {box("D", true);}
+            if (d) {box("DBServer", true);}
           %>
         </div>
      <% 
@@ -30,14 +29,40 @@
   <div class="tileList">
     <legend class="gv_inner">Please select a cluster scenario:</legend>
 
+    <li class="bigtile informationtile">
+      <div class="informationText">
+        <p>A <b>Coordinator</b> receives requests, distributes them to the DBServers,
+        executes AQL queries and returns the result to the clients. The
+        coordinator also exposes information about cluster health and cluster
+        statistics.
+        </p>
+        <p>
+        A <b>DBServer</b> can both store sharded and non-sharded collections. A
+        database and a coordinator can live on the same server.
+        </p>
+
+        <p>
+        <b>Development setup</b>
+        This setup is useful for development/testing purposes. It lets you
+        define a coordinator and several database nodes on the save server with
+        a few clicks.
+        </p>
+        <p>
+        <b>Production setup</b>
+        This setup is used in production. It lets you configure the different
+        servers and how you want to distribute coordinators and database nodes
+        among the cluster.</p>
+      </div>
+      <h5 class="collectionName">Information</h5>
+    </li>
     <li class="bigtile"  id="singleServer">
       <div id="singleMachine" class="machineClass">
         <div class="scenarioSingleMachine">
-          <div class="scenarioBoxHeader">...</div>
+          <div class="scenarioBoxHeader">Single Machine</div>
             <%
-              row(true, true, true);
+              row(true, true);
-              row(true, true, true);
+              row(true, true);
-              row(false, true, true);
+              row(false, true);
             %>
         </div>
       </div>
@@ -47,12 +72,12 @@
     <li class="bigtile" id="multiServerAsymmetrical">
       <div id="multiMachineAsym" class="machineClass">
         <%
-          row(false, true);
+          row(false, true, 1);
-          row(true, false);
+          row(true, false, 2);
-          row(false, true);
+          row(false, true, "X");
         %>
       </div>
-    <h5 class="collectionName">Multi Machine / Productive</h5>
+    <h5 class="collectionName">Multi Machine / Production</h5>
     </li>
   </div>
 </script>

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

@@ -32,7 +32,9 @@
       _.each(s.coords, function(c) {
         var url = c.get("protocol")
           + "://"
-          + c.get("address");
+          + c.get("address")
+          + "/_db/_system/_admin/aardvark/standalone.html"
+          + "#collections";
     %>
       <li class="tile">
         <a class="coordinator single <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>">
@@ -65,7 +67,9 @@
         <% _.each(s.coords, function(c) {
           url = c.get("protocol")
             + "://"
-            + c.get("address");
+            + c.get("address")
+            + "_db/_system/_admin/aardvark/standalone.html"
+            + "#collections";
         %>
           <a class="coordinator <%=type%> <%=statusClass(c.get('status'))%>" id="<%=c.get('address')%>" title="<%=c.get('name')%>">
             <span class="fa fa-compass icon"></span>

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

@@ -48,7 +48,7 @@
         <li class="divider"></li>
         <li class="dropdown-header">Social</li>
         <li class="dropdown-item"><a href="https://twitter.com/arangodb" target="_blank">Twitter</a></li>
-        <li class="dropdown-item"><a href="https://www.arangodb.org/connect" target="_blank">Announcement List</a>
+        <li class="dropdown-item"><a href="https://www.arangodb.org/community" target="_blank">Contact</a>
         </li>
         <li class="dropdown-item"><a href="https://stackoverflow.com/questions/tagged/arangodb" target="_blank">StackOverflow</a>
         </li>

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

@@ -77,14 +77,12 @@
         if (shards === "") {
           shards = 1;
         }
-        if (!typeof shards === 'number' && shards % 1 === 0 && shards > 0) {
+        shards = parseInt(shards, 10);
+        if (shards < 1) {
           arangoHelper.arangoError("Number of shards has to be an integer value greater or equal 1");
           return 0;
-        } else {
-          shards = parseInt(shards);
         }
         shardBy = _.pluck($('#new-collection-shardBy').select2("data"), "text");
-        console.log(shardBy);
         if (shardBy.length === 0) {
           shardBy.push("_key");
         }

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

@@ -3,41 +3,40 @@
   padding: 10px;
   float: left;
   background-color: #E1E1E1;
-  width: 311px;
+  margin-left: 31px;
-  height: 175px;
+  margin-right: 31px;
-  margin-left: 8px;
 }
 
 .scenarioBox {
   position: absolute;
-  margin-top: 10px;
+  margin-top: 30px;
   width: auto;
   height: 65px;
   left: 10px;
   right: 10px;
-  @include border-radius(3px 3px 0 0);
+  @include border-radius(3px 3px 3px 3px);
   border: 1px solid rgba(0, 0, 0, 0.19);
-  background-color: white;
+  background-color: rgba(0, 0, 0, 0.075);
 
   &.bottomBox {
-    bottom: 10px;
+    bottom: 30px;
   }
 }
 
 .scenarioBoxHeader {
   width: auto;
-  height: 5px;
+  height: 18px;
-  line-height: 5px;
+  line-height: 18px;
-  text-align: right;
+  text-align: center;
-  margin-top: -5px;
+  margin-top: 0px;
-  padding-bottom: 5px;
+  padding-bottom: 0px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.19);
 }
 
 .scenarioBoxText {
   width: auto;
-  font-size: 30px;
+  font-size: 13px;
-  font-weight: 700;
+  font-weight: 400;
   text-align: center;
   margin-top: 17px;
 }
@@ -46,8 +45,8 @@
   @extend %pull-left;
   position: relative;
   margin-right: 20px;
-  height: 177px;
+  height: 257px;
-  width: 87px;
+  width: 110px;
   @include border-radius(3px 3px 0 0);
   border: 1px solid rgba(0, 0, 0, 0.19);
   background-color: white;
@@ -65,6 +64,18 @@
 
   .scenarioMachine {
     border: 1px solid transparent;
+    height: 238px;
   }
 }
 
+.bigtile.informationtile {
+  cursor: auto;
+}
+
+.informationText {
+  font-size: 12px;
+  text-align: left;
+  margin: 10px;
+  padding: 5px;
+  background: $c_white;
+}

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

@@ -155,8 +155,8 @@ li.tile {
 li.bigtile {
   @extend %clickable;
   @extend li.tile;
-  height:250px;
+  height: 309px;
-  width: 345px;
+  width: 460px;
 
   div.shardContainer {
     font-size: 30px;

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

@@ -642,8 +642,8 @@ li.tile, li.bigtile {
   right: 0px; }
 
 li.bigtile {
-  height: 250px;
+  height: 309px;
-  width: 345px; }
+  width: 460px; }
   li.bigtile div.shardContainer {
     font-size: 30px; }
     li.bigtile div.shardContainer span {
@@ -933,46 +933,45 @@ a.dbserver.double {
   padding: 10px;
   float: left;
   background-color: #E1E1E1;
-  width: 311px;
+  margin-left: 31px;
-  height: 175px;
+  margin-right: 31px; }
-  margin-left: 8px; }
 
 .scenarioBox {
   position: absolute;
-  margin-top: 10px;
+  margin-top: 30px;
   width: auto;
   height: 65px;
   left: 10px;
   right: 10px;
-  -moz-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 3px 3px;
-  -webkit-border-radius: 3px 3px 0 0;
+  -webkit-border-radius: 3px 3px 3px 3px;
-  border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 3px 3px;
   border: 1px solid rgba(0, 0, 0, 0.19);
-  background-color: white; }
+  background-color: rgba(0, 0, 0, 0.075); }
   .scenarioBox.bottomBox {
-    bottom: 10px; }
+    bottom: 30px; }
 
 .scenarioBoxHeader {
   width: auto;
-  height: 5px;
+  height: 18px;
-  line-height: 5px;
+  line-height: 18px;
-  text-align: right;
+  text-align: center;
-  margin-top: -5px;
+  margin-top: 0px;
-  padding-bottom: 5px;
+  padding-bottom: 0px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.19); }
 
 .scenarioBoxText {
   width: auto;
-  font-size: 30px;
+  font-size: 13px;
-  font-weight: 700;
+  font-weight: 400;
   text-align: center;
   margin-top: 17px; }
 
 .scenarioMachine {
   position: relative;
   margin-right: 20px;
-  height: 177px;
+  height: 257px;
-  width: 87px;
+  width: 110px;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   border-radius: 3px 3px 0 0;
@@ -986,4 +985,15 @@ a.dbserver.double {
   border: 1px solid rgba(0, 0, 0, 0.19);
   background-color: white; }
   .scenarioSingleMachine .scenarioMachine {
-    border: 1px solid transparent; }
+    border: 1px solid transparent;
+    height: 238px; }
+
+.bigtile.informationtile {
+  cursor: auto; }
+
+.informationText {
+  font-size: 12px;
+  text-align: left;
+  margin: 10px;
+  padding: 5px;
+  background: white; }

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

@@ -612,8 +612,8 @@ li.tile, li.bigtile {
   right: 0px; }
 
 li.bigtile {
-  height: 250px;
+  height: 309px;
-  width: 345px; }
+  width: 460px; }
   li.bigtile div.shardContainer {
     font-size: 30px; }
     li.bigtile div.shardContainer span {