Add volume create function

app/controllers/home_controller.rb

@@ -11,7 +11,7 @@ class HomeController < ApplicationController
 	  current_dir = params[:current_dir]
 	  directory_name = params[:directory_name]
 	  puts "mkdir #{current_dir}/#{directory_name}"
-	  `mkdir #{current_dir}/#{directory_name}`
+	  `sudo mkdir #{current_dir}/#{directory_name}`
 	  redirect_to '/home/index'
   end
   
@@ -19,7 +19,7 @@ class HomeController < ApplicationController
   def delete_file
 	  file_name = params[:file_name]
 	  puts "rm #{file_name} -rf"
-	  `rm #{file_name} -rf`
+	  `sudo rm #{file_name} -rf`
 	  redirect_to '/home/index'
   end
 end

app/controllers/volume_controller.rb

@@ -35,7 +35,8 @@ class VolumeController < ApplicationController
     end
 
     def get_volume_info
-    return `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume info`
+        return `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} \
+         gluster volume info`
     end
 
     def file_upload
@@ -62,11 +63,26 @@ class VolumeController < ApplicationController
         redirect_to '/volume/index'
     end
 
+    def volume_create
+        volume_name = params[:volume_name]
+        bricks = params[:bricks]
+        bricks_str = ""
+        bricks.each do |t|
+            bricks_str << t
+            bricks_str << " "
+        end
+        puts "gluster volume create " + volume_name + " " + bricks_str + "force"
+        `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} \
+         gluster volume create #{volume_name} #{bricks_str} force`
+        redirect_to '/volume/index'
+    end
+
     def volume_stop
         @config = get_conf
         volume_name = params[:volume_name]
         puts "gluster volume stop " + volume_name
-	  `yes | sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume stop #{volume_name}`
+        `yes | sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} \
+         gluster volume stop #{volume_name}`
         redirect_to '/volume/index'
     end
 
@@ -74,7 +90,8 @@ class VolumeController < ApplicationController
         @config = get_conf
         volume_name = params[:volume_name]
         puts "gluster volume start " + volume_name
-    `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume start #{volume_name}`
+        `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} \
+        gluster volume start #{volume_name}`
         redirect_to '/volume/index'
     end
 
@@ -83,7 +100,8 @@ class VolumeController < ApplicationController
         @config = get_conf
         volume_name = params[:volume_name]
         puts "gluster volume delete " + volume_name
-	  `yes | sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume delete #{volume_name}`
+        `yes | sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} \
+        gluster volume delete #{volume_name}`
         redirect_to '/volume/index'
     end
 end

app/views/volume/index.html.erb

@@ -1,5 +1,5 @@
-  <!-- create overlay page -->
+<!-- create overlay page -->
-  <div id="popup_create" class="overlay">
+<div id="popup_create" class="overlay">
     <div class="popup">
         <h2> Choose mount point </h2>
         <a class="close" href="#">&times;</a>
@@ -10,7 +10,7 @@
                 <label class="control-label col-md-3 col-sm-3 col-xs-12" for="volume-name">Volume Name <span class="required">*</span>
                 </label>
                 <div class="col-md-6 col-sm-6 col-xs-12">
-            <input type="text" id="volume-name" required="required" class="form-control col-md-7 col-xs-12">
+                    <input type="text" required="required" class="form-control col-md-7 col-xs-12">
                 </div>
             </div>
 
@@ -19,50 +19,59 @@
                 </label>
                 <div class="col-md-9 col-sm-9 col-xs-12">
                     <select class="form-control">
-              <option>Distribute</option>
+                        <% ['Distribute', 'Stripe', 'Replica', 'Arbiter', 'Disperse', 'Disperse-data', 'Redundancy'].each do |types|%>
-              <option>Stripe</option>
+                        <option><%=types%></option>
-              <option>Replica</option>
+                        <% end %>
-              <option>Arbiter</option>
-              <option>Disperse</option>
-              <option>Disperse-data</option>
-              <option>Redundancy</option>
                     </select>
                 </div>
             </div>
 
             <div class="form-group">
-          <label class="control-label col-md-3 col-sm-3 col-xs-12">Bricks <span class="required">*</span>
+                <label class="control-label col-md-3 col-sm-3 col-xs-12">Number of brick <span class="required">*</span>
                 </label>
-          
+                <div class="col-md-9 col-sm-9 col-xs-12">
-          <div class="col-md-3 col-sm-3 col-xs-3">
                     <select class="form-control">
-              <option><%=@config['server_name']%></option>
+                        <% for i in 1...11 do %>
+                        <option><%=i%></option>
+                        <% end %>
                     </select>
                 </div>
-          <div class="col-md-5 col-sm-5 col-xs-5">
-            <input type="text" id="bricks" required="required" class="form-control col-md-7 col-xs-12">
-          </div>
-          <div class="col-md-1 col-sm-1 col-xs-1">
-            <a href="#/plus" class="form-control"><i class="fa fa-plus"></i></a>
             </div>
 
+            <div class="form-group">
+                <div class="row" style="margin:0 0 10px 0">
+                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Bricks <span class="required">*</span>
+                    </label>
+                    <div class="col-md-3 col-sm-3 col-xs-4">
+                        <select class="form-control">
+                            <option><%=@config["server_name"]%></option>
+                        </select>
+                    </div>
+                    <div class="col-md-1 col-sm-1 col-xs-1">
+                        <label class="control-label col-md-12 col-sm-12 col-xs-12">/
+                        </label>
+                    </div>
+                    <div class="col-md-5 col-sm-5 col-xs-7">
+                        <input type="text" required="required" class="form-control col-md-7 col-xs-12">
+                    </div>
+                </div>
             </div>
 
             <div class="ln_solid"></div>
 
             <div class="form-group">
                 <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
-            <button type="submit" class="btn btn-primary">Cancel</button>
+                    <a href="#" class="btn btn-primary">Cancel</a>
                     <button type="submit" class="btn btn-success">Submit</button>
                 </div>
             </div>
         </form>
 
     </div>
-  </div>
+</div>
 
-  <!-- mount overlay page -->
+<!-- mount overlay page -->
-  <div id="popup_mount" class="overlay">
+<div id="popup_mount" class="overlay">
     <div class="popup">
         <h2> Choose mount point </h2>
         <a class="close" href="#">&times;</a>
@@ -197,9 +206,6 @@
 
     <!-- volume functions -->
     <script>
-    function volume_create() {
-      
-    }
     function volume_mount(mnt_point) {
         var url = window.location + '';
         var vol_name = url.match(/volume_name=([^#]+)/)[1];
@@ -241,7 +247,7 @@
                 $("#datatable_body").empty();
                 var new_tr = "";
                 new_tr += "<tr role='row' class='odd'> <td><i class='fa fa-reply'></i>";
-          new_tr += "<a style='cursor: pointer' onclick='change_upper(" + '"' + directory + '"' +")'> ..</a>";
+                nrailew_tr += "<a style='cursor: pointer' onclick='change_upper(" + '"' + directory + '"' +")'> ..</a>";
                 new_tr += "</td><td> </td><td> </td><td> </td></tr>";
                 for( var i = 0; i < result.file.length; i++){
                     if(result.file[i].auth[0] != "d") continue;
@@ -262,7 +268,109 @@
     </script>
 
     <script>
-    $("#form_volume_create").change(function (){
+    // Volume type changed
-      console.log($("#form_volume_create option:selected").val());
+    $("#form_volume_create .form-group").eq(1).change(function (){
+        var $type = $(this).find("option:selected").val();
+        switch ($type) {
+            case "Distribute":
+            case "Stripe":
+            case "Replica":
+            case "Arbiter":
+            case "Disperse":
+            case "Disperse-data":
+            case "Redundancy":
+            console.log($type);
+            break;
+            default:
+            console.log("something goes wrong");
+            break;
+        }
     })
+
+    // Number of bricks changed
+    $("#form_volume_create .form-group").eq(2).change(function (){
+        var $num_of_brick = $(this).find("option:selected").val();
+        var $body = $("#form_volume_create .form-group").eq(3);
+        $body.empty();
+        var new_body = "";
+        for(var i = 0; i < $num_of_brick; ++i) {
+            new_body += "<div class='row' style='margin:0 0 10px 0'>";
+            new_body += "<label class='control-label col-md-3 col-sm-3 col-xs-12'>";
+            if(i == 0)
+                new_body += "Bricks <span class='required'>*</span>";
+            new_body += "</label>";
+            new_body += "<div class='col-md-3 col-sm-3 col-xs-4'>";
+            new_body += "<select class='form-control'>";
+            new_body += "<option><%=@config['server_name']%></option>";
+            new_body += "</select>";
+            new_body += "</div>";
+            new_body += "<div class='col-md-1 col-sm-1 col-xs-1'>"
+            new_body += "<label class='control-label col-md-12 col-sm-12 col-xs-12'>/"
+            new_body += "</label>"
+            new_body += "</div>"
+            new_body += "<div class='col-md-5 col-sm-5 col-xs-7'>";
+            new_body += "<input type='text' required='required' class='form-control col-md-7 col-xs-12'>";
+            new_body += "</div>";
+            new_body += "</div>";
+        }
+        $body.append(new_body);
+    })
+
+    $("#form_volume_create").submit(function(){
+        var volume_name = $(this).find(".form-group:eq(0) input").val();
+        var volume_type = $(this).find(".form-group:eq(1) option:selected").val();
+        var num_of_brick = $(this).find(".form-group:eq(2) option:selected").val() * 1; // convert to Number type
+        var bricks = [];
+
+        // error check
+        if(volume_name.indexOf(' ') >= 0){
+            alert("Volume name can't contains white spaces");
+            return;
+        }
+        <% @volumes.each do |t| %>
+        if(volume_name == "<%=t["Volume Name"].delete(' ')%>"){
+            alert("Already has a volume which name is same");
+            return;
+        }
+        <% end %>
+
+        for(var i = 0; i < num_of_brick; i++){
+            var server_name = $(this).find(".form-group .row").eq(i).find("option:selected").val();
+            var brick_name = $(this).find(".form-group .row").eq(i).find("input").val();
+
+            if(brick_name.indexOf(' ') >= 0) {
+                alert("Brick name can't contain white spaces");
+                return;
+            }
+            if(brick_name.indexOf('/') == 0) {
+                alert("Brick name can't start with slash");
+                return;
+            }
+
+            var brick = "";
+            if(server_name == "<%=@config['server_name']%>"){
+                brick += "<%=@config['host_ip']%>";
+                brick += "/";
+                brick += brick_name;
+                bricks.push(brick);
+                console.log(brick);
+            }
+            else{
+                alert("Something goes wrong!");
+                return;
+            }
+        }
+
+        console.log("Create volume..");
+
+        $.ajax({
+            method: "POST",
+            url: "/volume/create",
+            data: { volume_name : volume_name, bricks : bricks },
+            success  : function(result){
+                console.log("volume create success");
+            }
+        })
+
+    });
     </script>

config/routes.rb

@@ -20,6 +20,7 @@ Rails.application.routes.draw do
   get 'volume/index' => 'volume#index'
   post 'file_upload' => 'volume#file_upload'
   post 'volume/mount' => "volume#volume_mount"
+  post 'volume/create' => "volume#volume_create"
   get 'volume/unmount/:volume_name' => "volume#volume_unmount"
   get 'volume/start/:volume_name' => "volume#volume_start"
   get 'volume/stop/:volume_name' => "volume#volume_stop"