shard view

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -302,6 +302,7 @@
         return;
       }
       this.shardsView = new window.ShardsView({
+        dbServers: this.dbServers 
       });
       this.shardsView.render();
     },

js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs

@@ -3,11 +3,20 @@
   <div id="shardsContent" class="innerContent">
       <% var genClass = 'pure-u-1-3'; %>
       <% var disabled = ' '; %>
+      <% var collectionName; %>
+      <% var first = 0; %>
 
       <% _.each(collections, function(collection, name) { %>
         <% if (name.substring(0,1) !== '_') { %>
+          <% collectionName = name%>
 
+            <% if (first === 0) { %>
+              <div class="sectionHeader pure-g" style="margin-top: -20px;">
+              <% first++; %>
+            <% } else { %>
               <div class="sectionHeader pure-g">
+            <% } %>
+
             <div class="pure-u-1-1">
               <div class="title" style="position: relative; top: -4px;">
                 <%= name %>
@@ -26,19 +35,43 @@
           <% var counter = 0; %>
           <% _.each(collection.Plan, function(shard, name) { %>
             <div class="pure-g pure-table pure-table-body">
-              <div class="pure-table-row disabled">
+              <div class="pure-table-row" collection="<%= collectionName %>" shard="<%= name %>" leader="<%= shard.leader%>">
 
                 <div class="<%= genClass %> left"><%= name %></div>
+
                 <% if (name === Object.keys(collection.Current)[counter]) { %>
                   <div class="<%= genClass %> positive left"><%= shard.leader %></div>
                 <% } else { %>
                   <div class="<%= genClass %> negative left"><%= shard.leader %></div>
                 <% } %>
+
+                <% var found = null;  %>
+                <% _.each(shard.followers, function(db) {  %>
+                  <% if (db === shard.leader) { %>
+                    <% found = true; %>
+                  <% } %>
+                <% }); %>
+
+                <% if (found) { %>
+                  <div class="<%= genClass %> mid"><i class="fa fa-circle-o-notch fa-spin"></i></div>
+                <% } else { %>
                   <% if (shard.followers.length === 0) { %>
                     <div class="<%= genClass %> left"> no followers </div>
                   <% } else { %>
-                  <div class="<%= genClass %> left"><%= shard.follower %></div>
+
+                    <% var string = ''; %>
+                    <% _.each(shard.followers, function(db) {  %>
+                      <% if (shard.followers.length === 1) { %>
+                        <% string += db + " "; %>
+                      <% } else { %>
+                        <% string += db + ", "; %>
                       <% } %>
+                    <% });  %>
+                    
+                    <div class="<%= genClass %> left"><%= string %></div>
+                  <% } %>
+                <% } %>
+
               </div>
             </div>
 
@@ -48,6 +81,7 @@
         <% } %>
       <% }); %>
 
+  <button id="rebalanceShards" style="margin-top: 20px;" class="button-success pull-right">Rebalance Shards</button>
   </div>
 
 </script>

js/apps/system/_admin/aardvark/APP/frontend/js/views/databaseView.js

@@ -361,7 +361,6 @@
           label: user.get("user")
         });
       });
-      console.log(users);
 
       tableContent.push(
         window.modalView.createSelectEntry(

js/apps/system/_admin/aardvark/APP/frontend/js/views/shardsView.js

@@ -12,10 +12,14 @@
     knownServers: [],
 
     events: {
+      "click #shardsContent .pure-table-row" : "moveShard",
+      "click #rebalanceShards"               : "rebalanceShards"
     },
 
-    initialize: function () {
+    initialize: function (options) {
       var self = this;
+
+      self.dbServers = options.dbServers;
       clearInterval(this.intervalFunction);
 
       if (window.App.isCluster) {
@@ -24,7 +28,7 @@
         //start polling with interval
         this.intervalFunction = window.setInterval(function() {
           if (window.location.hash === '#shards') {
-            self.render();
+            self.render(false);
           }
         }, this.interval);
       }
@@ -54,6 +58,117 @@
       }
     },
 
+    moveShard: function(e) {
+      var dbName = window.App.currentDB.get("name");
+      var collectionName = $(e.currentTarget).attr("collection");
+      var shardName = $(e.currentTarget).attr("shard");
+      var fromServer = $(e.currentTarget).attr("leader");
+
+      var buttons = [],
+        tableContent = [];
+
+      var array = [];
+      this.dbServers[0].each(function(db) {
+        if (db.get("name") !== fromServer) {
+          array.push({
+            value: db.get("name"),
+            label: db.get("name")
+          });
+        }
+      });
+      array = array.reverse();
+
+      tableContent.push(
+        window.modalView.createSelectEntry(
+          "toDBServer",
+          "Destination",
+          undefined,
+          //this.users !== null ? this.users.whoAmI() : 'root',
+          "Please select the target databse server. The selected database " + 
+          "server will be the new leader of the shard.",
+            array
+        )
+      );
+
+      buttons.push(
+        window.modalView.createSuccessButton(
+          "Move",
+          this.confirmMoveShards.bind(this, dbName, collectionName, shardName, fromServer)
+        )
+      );
+
+      window.modalView.show(
+        "modalTable.ejs",
+        "Move shard: " + shardName,
+        buttons,
+        tableContent
+      );
+
+    },
+
+    confirmMoveShards: function(dbName, collectionName, shardName, fromServer) {
+      var self = this;
+      var toServer = $('#toDBServer').val();
+
+      var data = {
+        database: dbName,
+        collection: collectionName,
+        shard: shardName,
+        fromServer: fromServer,
+        toServer: toServer
+      };
+
+      $.ajax({
+        type: "POST",
+        cache: false,
+        url: arangoHelper.databaseUrl("/_admin/cluster/moveShard"),
+        contentType: "application/json",
+        processData: false,
+        data: JSON.stringify(data),
+        async: true,
+        success: function(data) {
+          if (data === true) {
+            window.setTimeout(function() {
+              self.render(false);
+            }, 1500);
+            arangoHelper.arangoNotification("Shard " + shardName + " will be moved to " + toServer + ".");
+          }
+        },
+        error: function() {
+          arangoHelper.arangoNotification("Shard " + shardName + " could not be moved to " + toServer + ".");
+        }
+      });
+
+      window.modalView.hide();
+    },
+
+    rebalanceShards: function() {
+      var self = this;
+
+      $.ajax({
+        type: "POST",
+        cache: false,
+        url: arangoHelper.databaseUrl("/_admin/cluster/rebalanceShards"),
+        contentType: "application/json",
+        processData: false,
+        data: JSON.stringify({}),
+        async: true,
+        success: function(data) {
+          if (data === true) {
+            window.setTimeout(function() {
+              self.render(false);
+            }, 1500);
+            arangoHelper.arangoNotification("Started rebalance process.");
+          }
+        },
+        error: function() {
+          arangoHelper.arangoNotification("Could not start rebalance process.");
+        }
+      });
+
+      window.modalView.hide();
+    },
+
     continueRender: function(collections) {
       delete collections.code;
       delete collections.error;