Add ajax to volume buttons

app/controllers/volume_controller.rb

@@ -56,16 +56,14 @@ class VolumeController < ApplicationController
     def volume_unmount
         node = Node.take
         volume_name = params[:volume_name]
-        index = params[:index]
         # make command string
         command = String.new
         command << "sudo umount #{node.host_ip}:/#{volume_name}"
         puts command
         `#{command}`
-        #redirect_to '/volume/index'
+        volume = volumes.find{ |v| v['Volume Name'].delete(' ') == volume_name}
-
         render :json => {
-            :volume_info => volume_info(volume_name, index),
+            :volume_info => volume_info(volume, 0),
         }
     end
 
@@ -78,7 +76,7 @@ class VolumeController < ApplicationController
         # make command string
         command = String.new
         command << "sshpass -p#{node.user_password} "
-        command << "ssh #{node.host_name}@#{node.host_ip} "
+        command << "ssh #{node.user_name}@#{node.host_ip} "
         command << "gluster volume create #{volume_name} "
         if !volume_type.include? "Distribute"
             command << "#{volume_type.downcase} #{num_of_brick}"
@@ -104,36 +102,28 @@ class VolumeController < ApplicationController
     def volume_stop
         node = Node.take
         volume_name = params[:volume_name]
-        index = params[:index]
         # make command string
         command = String.new
-        command << "yes | sshpass -p#{node.user_password} "
+        command << "yes | sshpass -p#{node.user_password} ssh #{node.user_name}@#{node.host_ip} gluster volume stop #{volume_name}"
-        command << "ssh #{node.host_name}@#{node.host_ip} "
-        command << "gluster volume stop #{volume_name}"
         puts command
         `#{command}`
-        #redirect_to '/volume/index'
+        volume = volumes.find{ |v| v['Volume Name'].delete(' ') == volume_name}
-        
         render :json => {
-            :volume_info => volume_info(volume_name, index),
+            :volume_info => volume_info(volume, 0),
         }
     end
 
     def volume_start
         node = Node.take
         volume_name = params[:volume_name]
-        index = params[:index]
         # make command string
         command = String.new
-        command << "sshpass -p#{node.user_password} "
+        command << "sshpass -p#{node.user_password} ssh #{node.user_name}@#{node.host_ip} gluster volume start #{volume_name}"
-        command << "ssh #{node.host_name}@#{node.host_ip} "
-        command << " gluster volume start #{volume_name}"
         puts command
         `#{command}`
-        #redirect_to '/volume/index'
+        volume = volumes.find{ |v| v['Volume Name'].delete(' ') == volume_name}
-        
         render :json => {
-            :volume_info => volume_info(volume_name, index),
+            :volume_info => volume_info(volume, 0),
         }
     end
 
@@ -142,11 +132,9 @@ class VolumeController < ApplicationController
         volume_name = params[:volume_name]
         # make command string
         command = String.new
-        command << "yes | sshpass -p#{node.user_password} "
+        command << "yes | sshpass -p#{node.user_password} ssh #{node.user_name}@#{node.host_ip} gluster volume delete #{volume_name}"
-        command << "ssh #{node.host_name}@#{node.host_ip} "
-        command << " gluster volume delete #{volume_name}"
         puts command
         `#{command}`
-        redirect_to '/volume/index'
+        redirect_to "/volume/index"
     end
 end

app/helpers/volume_helper.rb

@@ -13,7 +13,7 @@ module VolumeHelper
         html << "<div class='x_panel'>"
         html << "<div class='x_title'>"
         # left title
-        html << "<h2 value = '#{volume['Volume name'].delete(' ')}'>Infomation <small>#{volume['Volume Name']}</small></h2>"
+        html << "<h2>Infomation <small>#{volume['Volume Name']}</small></h2>"
         # right title
         html << "<ul class='nav navbar-right panel_toolbox'>"
         html << "<li><a class='collapse-link'>"
@@ -25,13 +25,15 @@ module VolumeHelper
         html << "<li><a href='#'>Settings 2</a></li>"
         html << "</ul>"
         html << "</li>"
+        html << "<ul class='nav panel_toolbox lights'>"
         html << "<li><a><i class='fa fa-circle #{lights[2]}'></i></a></li>"
         html << "<li><a><i class='fa fa-circle #{lights[1]}'></i></a></li>"
         html << "<li><a><i class='fa fa-circle #{lights[0]}'></i></a></li>"
         html << "</ul>"
+        html << "</ul>"
         html << "<div class='clearfix'></div>"
         html << "</div>"
-        html << "<div class='x_content' #{display}>"
+        html << "<div class='x_content'#{display}>"
         # left content
         html << "<div class='col-md-6 col-sm-6 col-xs-12'>"
         html << "<div style='margin: 10px'>"
@@ -48,21 +50,26 @@ module VolumeHelper
         html << "</div>"
         # buttons
         if volume["Mount State"] == "mounted"
-            html << "<button class='btn_unmount btn btn-app' value='#{index}'><i class='fa fa-upload'></i> Unmount</button>"
+            html << "<button class='btn-volume-unmount btn btn-app' data-name='#{volume['Volume Name']}'>"
+            html << "<i class='fa fa-upload'></i> Unmount"
+            html << "</button>"
         elsif volume["Status"] == " Started"
-            html << "<button class='btn_stop btn btn-app' value='#{index}'>"
+            html << "<button class='btn-volume-stop btn btn-app' data-name='#{volume['Volume Name']}'>"
             html << "<i class='fa fa-pause' style='color:#d9534f;'></i>"
             html << "<p style='color:#d9534f;'>Stop</p>"
             html << "</button>"
-            html << "<button class='btn_mount btn btn-app' value='#{index}'><i class='fa fa-download'></i> Mount</button>"
+            # need to fix this a tag to button
+            html << "<a class='btn-volume-mount btn btn-app' href='?volume_name=#{volume['Volume Name'].delete(' ')}#popup_mount'>"
+            html << "<i class='fa fa-download'></i> Mount"
+            html << "</a>"
         else
-            html << "<button class='btn_start btn btn-app'>"
+            html << "<button class='btn-volume-start btn btn-app' data-name='#{volume['Volume Name']}'>"
             html << "<i class='fa fa-play' style='color:#26B99A;'></i>"
             html << "<p style='color:#26B99A;'>Start</p>"
             html << "</button>"
-            html << "<a class='btn btn-app' href='/volume/delete/#{volume['Volume Name'].delete(' ')}'>"
+            html << "<button class='btn-volume-delete btn btn-app' data-name='#{volume['Volume Name']}'>"
             html << "<i class='fa fa-trash'></i> Delete"
-            html << "</a>"
+            html << "</button>"
         end
         html << "</div>"
 
@@ -85,7 +92,8 @@ module VolumeHelper
         html << "</div>"
         html << "</div>"
         html << "</div>"
-        html
+
+        return html
     end
 
     def mount_table(dir = @current_dir, id = "mount_table", class_option = "table table-striped table-bordered jambo_table")

app/views/volume/index.html.erb

@@ -242,93 +242,135 @@ $(document).on("click", "#mount_table_div .chupper", function(){
 </script>
 <!-- /File manager functions -->
 
+<!-- Volume info button functions -->
 <script>
-$(document).on("click", ".btn_mount", function(){
+// volume mount
-    var index = $(this).val();
+$(document).on("click", ".btn-volume-mount", function(){
-    var volume_name = $(this).parents('h2').val();//.eq(index).val();
+});
-    
+// volume unmount
-    console.log("read volume name for mount");
+$(document).on("click", ".btn-volume-unmount", function(){
-
+    var $this = $(this);
-    $.ajax({
+    var volume_name = $this.data("name").trim();
-        method: "POST",
+    console.log("volume_name: " + volume_name);
-        url: "/volume/mount",
-        data: { volume_name : volume_name, index : index },
-        success  : function(result){
-            $(".btn_mount").empty();
-            $(".btn_mount").append(result.volume_info);
-            
-            console.log("mount success");
-        }
-    })
-})
-</script>
-<!-- /Mount click functions -->
-
-<script>
-$(document).on("click", ".btn_unmount", function(){
-    var index = $(this).val();
-    var volume_name = $(this).parents('h2').val();//.eq(index).val();
-    
-    console.log("read volume name for unmount");
 
     $.ajax({
         method: "POST",
         url: "/volume/unmount",
-        data: { volume_name : volume_name, index : index },
+        data: { volume_name : volume_name },
-        success  : function(result){
+        before: function(){
-            $(".btn_unmount").empty();
+            console.log("zzz");
-            $(".btn_unmount").append(result.volume_info);
+        },
-            
+        success: function(result){
-            console.log("unmount success");
+            var volume_info = result.volume_info,
+                lights = "";
+            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle blue'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle'></i></a></li>";
 
+            if(volume_info.indexOf("<div class='x_content'>") != -1){
+                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
+            } else {
+                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
+            }
+            // change lights
+            $this.closest(".x_panel").find(".lights")
+            .empty()
+            .append(lights);
+            // change content
+            $this.closest(".x_content")
+            .empty()
+            .append(volume_info);
         }
-    })
+    });
-})
+});
-</script>
+// volume start
-<!-- /UnMount click functions -->
+$(document).on("click", ".btn-volume-start", function(){
-
+    var $this = $(this);
-<script>
+    var volume_name = $this.data("name").trim();
-$(document).on("click", ".btn_stop", function(){
+    console.log("volume_name: " + volume_name);
-    var index = $(this).val();
-    var volume_name = $(this).parents('h2').val();//.eq(index).val();
-    
-    console.log("read volume name for stop");
-
-    $.ajax({
-        method: "POST",
-        url: "/volume/stop",
-        data: { volume_name : volume_name, index : index },
-        success  : function(result){
-            $(".btn_stop").empty();
-            $(".btn_stop").append(result.volume_info);
-            
-            console.log("stop success");
-
-        }
-    })
-})
-</script>
-<!-- /stop click functions -->
-
-<script>
-$(document).on("click", ".btn_start", function(){
-    var index = $(this).val();
-    var volume_name = $(this).parents('h2').val();//.eq(index).val();
-    
-    console.log("read volume name for start");
 
     $.ajax({
         method: "POST",
         url: "/volume/start",
-        data: { volume_name : volume_name, index : index },
+        data: { volume_name : volume_name },
-        success  : function(result){
+        before: function(){
-            $(".btn_start").empty();
+            console.log("zzz");
-            $(".btn_start").append(result.volume_info);
+        },
-            
+        success: function(result){
-            console.log("start success");
+            var volume_info = result.volume_info,
+                lights = "";
+            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle blue'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle'></i></a></li>";
 
+            if(volume_info.indexOf("<div class='x_content'>") != -1){
+                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
+            } else {
+                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
+            }
+            // change lights
+            $this.closest(".x_panel").find(".lights")
+            .empty()
+            .append(lights);
+            // change content
+            $this.closest(".x_content")
+            .empty()
+            .append(volume_info);
         }
-    })
+    });
-})
+});
+// volume stop
+$(document).on("click", ".btn-volume-stop", function(){
+    var $this = $(this);
+    var volume_name = $this.data("name").trim();
+    console.log("volume_name: " + volume_name);
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/stop",
+        data: { volume_name : volume_name },
+        before: function(){
+            console.log("zzz");
+        },
+        success: function(result){
+            var volume_info = result.volume_info,
+                lights = "";
+            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle'></i></a></li>";
+            lights += "<li><a><i class='fa fa-circle red'></i></a></li>";
+
+            if(volume_info.indexOf("<div class='x_content'>") != -1){
+                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
+            } else {
+                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
+            }
+            // change lights
+            $this.closest(".x_panel").find(".lights")
+            .empty()
+            .append(lights);
+            // change content
+            $this.closest(".x_content")
+            .empty()
+            .append(volume_info);
+        }
+    });
+});
+// volume delete
+$(document).on("click", ".btn-volume-delete", function(){
+    var $this = $(this);
+    var volume_name = $this.data("name").trim();
+    console.log("volume_name: " + volume_name);
+
+    $.ajax({
+        method: "POST",
+        url: "/volume/delete",
+        data: { volume_name : volume_name },
+        before: function(){
+            console.log("zzz");
+        },
+        success: function(result){
+        }
+    });
+});
 </script>
-<!-- /start click functions -->
+<!-- /Volume info button functions -->

config/routes.rb

@@ -21,10 +21,10 @@ Rails.application.routes.draw do
   post 'file_upload/:volume_name' => 'volume#file_upload'
   post 'volume/mount' => "volume#volume_mount"
   post 'volume/create' => "volume#volume_create"
-  get 'volume/unmount/:volume_name' => "volume#volume_unmount"
+  post 'volume/unmount' => "volume#volume_unmount"
-  get 'volume/start/:volume_name' => "volume#volume_start"
+  post 'volume/start' => "volume#volume_start"
-  get 'volume/stop/:volume_name' => "volume#volume_stop"
+  post 'volume/stop' => "volume#volume_stop"
-  get 'volume/delete/:volume_name' => "volume#volume_delete"
+  post 'volume/delete' => "volume#volume_delete"
 
   #Node
   get 'node/index' => 'node#index'