Merge branch 'master' of https://github.com/oss2016summer/gluster-web-interface

app/controllers/volume_controller.rb

@@ -1,33 +1,49 @@
 class VolumeController < ApplicationController
 
   def index
-    @config = get_conf
+    file_directory("/mnt")
-    @volumes = Array.new
+    get_conf
-    volume = Hash.new
+    info = get_info.split("\n")
     
-    file_directory(@config["project_path"])
+    if info.blank?
-    
-    if get_info.blank?
       flash[:danger] = "Check Server"
     else
-      output = get_info.split("\n")
+      parse_info(info)
-      for t in 1..(output.length-1)
+    end
-         if output[t].include? ":" 
+  end
-           temp = output[t].split(":")
+  
+  def parse_info(info)
+    @volumes = Array.new
+    volume = Hash.new
+    df = get_df
+    
+    info.each do |t|
+      next if t.equal? info.first
+      
+      if t.include? ":" 
+        temp = t.split(":")
         volume[temp[0]] = temp[1]
       else
+        if df.include? volume['Volume Name'].delete(' ')
+          volume['Mount State'] = "Mounted"
+        else
+          volume['Mount State'] = "UnMounted"
+        end
+        puts volume['Volume Name'] + ": " + volume['Mount State']
+         
         @volumes << volume
         volume = Hash.new
       end
     end
     @volumes << volume
-      # puts @volumes
+    
-    end
   end
 
+  def get_df
+    return `df -P`
+  end
 
   def get_info
-    @config = get_conf
     return `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume info`
   end
   
@@ -44,9 +60,7 @@ class VolumeController < ApplicationController
 	  mount_point = params[:mount_point]
 	  volume_name = volume_name.delete(' ')
 	  puts "mount -t glusterfs " +  @config["host_ip"] + ":/" + volume_name + " " + mount_point
-		
 	  `mount -t glusterfs #{@config["host_ip"]}:/#{volume_name} #{mount_point}`
-		
 	  redirect_to '/volume/index'
   end
 
@@ -74,7 +88,7 @@ class VolumeController < ApplicationController
 	  volume_name = params[:volume_name]
 	  volume_name = volume_name.delete(' ')
 	  puts "gluster volume delete " + volume_name
-	  #output = `sshpass -p#{@config["host_password"]} ssh #{@config["host_port"]} #{@config["host_user"]}@#{@config["host_ip"]} gluster volume delete #{volume_name}`
+	  output = `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/home/index.html.erb

@@ -16,6 +16,7 @@
         </div>
       </div>
     </div>
+    
     <div class="clearfix"></div>
 
     <div class="row">
@@ -24,19 +25,15 @@
           <div class="x_title">
             <h2>Input knob</h2>
             <ul class="nav navbar-right panel_toolbox">
-                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+              <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
-                        </li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                 <ul class="dropdown-menu" role="menu">
-                            <li><a href="#">Settings 1</a>
+                  <li><a href="#">Settings 1</a></li>
-                            </li>
+                  <li><a href="#">Settings 2</a></li>
-                            <li><a href="#">Settings 2</a>
-                            </li>
                 </ul>
               </li>
-                        <li><a class="close-link"><i class="fa fa-close"></i></a>
+              <li><a class="close-link"><i class="fa fa-close"></i></a></li>
-                        </li>
             </ul>
             <div class="clearfix"></div>
           </div>
@@ -112,10 +109,10 @@
                     </tr>
                   </thead>
 
-                  <tbody id="tbody_volume1">
+                  <tbody id="datatable_body">
                     <tr>
                       <td><i class="fa fa-reply"></i> 
-                         <a onclick="change_upper('<%=@current_dir%>')"> ..</a>
+                         <a style='cursor: pointer' onclick="change_upper('<%=@current_dir%>')"> ..</a>
                       </td>
                       <td></td>
                       <td></td>
@@ -148,40 +145,6 @@
   </div>
 </div>
 <!-- /page content -->
- <!-- data table handler  -->
-  <script>
-    var handleDataTableButtons = function() {
-          "use strict";
-          0 !== $("#datatable-buttons").length && $("#datatable-buttons").DataTable({
-            dom: "Bfrtip",
-            buttons: [{
-              extend: "copy",
-              className: "btn-sm"
-            }, {
-              extend: "csv",
-              className: "btn-sm"
-            }, {
-              extend: "excel",
-              className: "btn-sm"
-            }, {
-              extend: "pdf",
-              className: "btn-sm"
-            }, {
-              extend: "print",
-              className: "btn-sm"
-            }],
-            responsive: !0
-          })
-        },
-        TableManageButtons = function() {
-          "use strict";
-          return {
-            init: function() {
-              handleDataTableButtons()
-            }
-          }
-        }();
-  </script>
   
   <script type="text/javascript">
   /* right click */
@@ -189,25 +152,15 @@
     $(document).ready(function() {
       $('#datatable').dataTable();
     });
-    TableManageButtons.init();
   </script>
   
   <!-- file manager functions -->
   <script>
     function change_upper(directory){
-      if(directory != "/"){
+      if(directory == "/") return;
-        var path = directory.split("/");
+      var lastindex = directory.lastIndexOf("/");
-        var upper_path = "";
+      if(lastindex == 0) lastindex++;
-        if(path.length == 2){
+      change_directory(directory.substring(0, lastindex));
-          change_directory("/");
-        } else {
-          for(var i = 1; i < path.length - 1 ; i++){
-             if(path[i] != "")
-              upper_path += "/" + path[i];
-          }
-          change_directory(upper_path);
-        }
-      }
     }
     
     function change_directory(directory){
@@ -217,7 +170,8 @@
       data: { path: directory },
       success  : function(result){
           $("#table_div").empty();
-          var new_table = "<p class='text-muted font-13 m-b-30'><code>File Manager</code></p>";
+          var new_table = "";
+          new_table += "<p class='text-muted font-13 m-b-30'><code>File Manager</code></p>";
           new_table += "<p>Current directory : " + directory + "</p></br>";
           new_table += "<p style='text-align:right;'><a class='btn btn-app' href='/home/mkdir/<%=@current_dir%>'><i class='fa fa-plus'></i>Make Directory</a></p>"
           new_table += "<table id='datatable' class='table table-striped table-bordered jambo_table'>";
@@ -229,10 +183,11 @@
           new_table += "<th>Date</th>";
           new_table += "</tr>";
           new_table += "</thead>";
-          new_table += "<tbody id='tbody_volume1'>";
+          new_table += "<tbody id='datatable_body'>";
           
-          var new_tr = "<tr role='row' class='odd'> <td><i class='fa fa-reply'></i>";
+          var new_tr = "";
-          new_tr += "<a onclick='change_upper(" + '"' + directory + '"' +")'> ..</a>";
+          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>";
           new_tr += "</td><td> </td><td> </td><td> </td></tr>";
           
           for( var i = 0; i < result.file.length; i++){
@@ -240,6 +195,7 @@
               new_tr += "<tr role='row' class='odd'>";
             else
               new_tr += "<tr role='row' class='even'>";
+              
             if(result.file[i].auth[0] == "d"){
               new_tr += "<td style='color:#0d8ade;' class='sorting_1'><i class='fa fa-folder-open-o'></i> "; 
               if(result.current != "/")
@@ -258,9 +214,7 @@
           new_table += new_tr;
           new_table += "</tbody></table>"
           $("#table_div").append(new_table);
-
           $('#datatable').dataTable();
-          TableManageButtons.init();
         }
       })
     }

app/views/layouts/application.html.erb

@@ -12,7 +12,9 @@
 </head>
 
 <body class="nav-md">
+  
   <div class="container body">
+    
     <% flash.each do |key, value| %>
       <div align="center" id="flash" class="alert alert-<%= key %>"><%= value %>
         <a href="#" data-dismiss="alert" class="close">×</a>

app/views/partials/_sidenav.html.erb

@@ -25,7 +25,7 @@
                 </li>
               </ul>
             </li>
-            <li><a><i class="fa fa-desktop"></i> Brick <span class="fa fa-chevron-down"></span></a>
+            <li><a><i class="fa fa-desktop"></i> Node <span class="fa fa-chevron-down"></span></a>
               <ul class="nav child_menu" style="display: none">
                 <li><a href="#">Add-brick</a>
                 </li>

app/views/volume/index.html.erb

@@ -1,3 +1,103 @@
+  <!-- create overlay page -->
+  <div id="popup_create" class="overlay">
+	  <div class="popup">
+	    <h2> Choose mount point </h2>
+		  <a class="close" href="#">&times;</a>
+		  
+		  <form id="form_volume_create" data-parsley-validate class="form-horizontal form-label-left">
+		    
+        <div class="form-group">
+          <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">
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-md-3 col-sm-3 col-xs-12">Volume Type <span class="required">*</span>
+          </label>
+          <div class="col-md-9 col-sm-9 col-xs-12">
+            <select class="form-control">
+              <option>Distribute</option>
+              <option>Stripe</option>
+              <option>Replica</option>
+              <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>
+          
+          <div class="col-md-3 col-sm-3 col-xs-3">
+            <select class="form-control">
+              <option><%=@config['server_name']%></option>
+            </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>
+
+        <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>
+            <button type="submit" class="btn btn-success">Submit</button>
+          </div>
+        </div>
+      </form>
+      
+    </div>
+  </div>
+  
+  <!-- mount overlay page -->
+  <div id="popup_mount" class="overlay">
+	  <div class="popup">
+	    <h2> Choose mount point </h2>
+		  <a class="close" href="#">&times;</a>
+		  <table id="datatable" class="table table-striped jambo_table">
+        <thead>
+        <tr class="headings">
+          <th>Name</th>
+          <th>auth</th>
+          <th></th>
+        </tr>
+        </thead>
+        <tbody id="datatable_body">
+        <tr>
+          <td><i class="fa fa-reply"></i> <a style="cursor: pointer" onclick="change_upper('<%=@current_dir%>')"> ..</a></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <%@files.each do |t|%>
+          <% if t["auth"][0]=='d'%>
+            <tr>
+              <td style="color:#0d8ade;"><i class="fa fa-folder-open-o"></i> 
+                <a style="cursor: pointer" onclick="change_directory('<%=@current_dir + "/" + t["name"]%>')"> <%=t["name"]%></a>
+              </td>
+              <td><%=t["auth"]%></td>
+              <td>
+                <button class="btn btn-primary pull-right" onclick="volume_mount('<%=@current_dir + "/" + t["name"]%>')">select</botton>
+              </td>
+            </tr>
+          <%end%>
+        <%end%>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  
   <!-- page content -->
   <div class="right_col" role="main">
   
@@ -7,9 +107,7 @@
       </div>
       <div class="title_right">
         <div class="col-md-5 col-sm-5 col-xs-12 pull-right">
-          <button class="btn btn-primary pull-right" onclick="volume_create">
+          <a class="btn btn-success btn-lg pull-right" href="#popup_create">Create Volume</a>
-            Create
-          </button>
         </div>
       </div>
     </div>
@@ -42,7 +140,10 @@
             
             <div class="x_content" <%if t!=@volumes[0]%> style="display: none;" <%end%> >
               
+              <!-- left content -->
               <div class="col-md-4 col-sm-4 col-xs-4">
+                
+                <div>
                   <p class="text-muted font-13 m-b-30"><code>Volume Info</code></p>
                   Type : <%=t["Type"]%> <br>
                   Volume ID : <%=t["Volume ID"]%> <br>
@@ -54,31 +155,28 @@
                   Options Reconfigured : <%=t["Options Reconfigured"]%> <br>
                   performance.readdir-ahead : <%=t["performance.readdir-ahead"]%>
                   <br><br><br>
+                </div>
+                
 	            	<% if t["Status"] == " Stopped" %>	
-  	            	 <a class="btn btn-round btn-success btn-lg" href="/volume/start/<%=t['Volume Name']%>">
+	            	  <a class="btn btn-app" href="/volume/start/<%=t['Volume Name']%>">
-                      <i class="fa fa-play"></i> Start
+                    <i class="fa fa-play" style="color:#26B99A;"></i> 
+                    <p style="color:#26B99A;">Start</p>
                   </a>
 		              <a class="btn btn-app" href="/volume/delete/<%=t['Volume Name']%>">
                     <i class="fa fa-trash"></i> Delete
                   </a>
 	            	<% else %>
-  	            	 <a class="btn btn-round btn-danger btn-lg" href="/volume/stop/<%=t['Volume Name']%>">
+	            	  <a class="btn btn-app" href="/volume/stop/<%=t['Volume Name']%>">
-                      <i class="fa fa-pause"></i> Stop
+                    <i class="fa fa-pause" style="color:#d9534f;"></i> 
+                    <p style="color:#d9534f;">Stop</p>
                   </a>
-        
+                  <!-- mount button push : popup event and post mount point -->
-                    <form class="form-horizontal form-label-left" action="/volume/mount" method="post">
+                  <a class="btn btn-app" href="/volume/index?volume_name=<%=t['Volume Name'].delete(' ')%>#popup_mount"><i class="fa fa-upload"></i> Mount</a>
-                      <div class="form-group">
-                        <label class="control-label col-md-3 col-sm-3 col-xs-3" for="mount_point">Mount Point</label>
-                        <div class="col-md-6 col-sm-6 col-xs-12"><input type="text" name="mount_point" required="required" class="form-control"></div>
-                      </div>
-                        <input type="hidden" name="volume_name" value="<%=t['Volume Name']%>" />
-      		               <button class="btn btn-app" type="submit">
-                            <i class="fa fa-upload"></i> Mount
-                         </button>
-                    </form>
                 <% end %>
 		          </div>
               
+              
+              <!-- right content -->
               <div class="col-md-8 col-sm-8 col-xs-8">
                 <p>Drag multiple files to the box below for multi upload or click to select files.</p>
                 <form action="/file_upload" method="post" enctype="multipart/form-data" class="dropzone" style="border: 1px solid #e5e5e5; height: 300px; overflow:auto;">
@@ -99,4 +197,69 @@
     function volume_create() {
       
     }
+    function volume_mount(mnt_point) {
+      var url = window.location + '';
+      var vol_name = url.match(/volume_name=([^#]+)/)[1];
+      $.ajax({
+        type: 'post',
+        url: '/volume/mount',
+        data: {mount_point: mnt_point, volume_name: vol_name},
+        success: function(data){
+          console.log("mount success");
+          window.location.replace(url.split("?")[0]);
+        }
+      });
+    }
+  </script>
+  
+  
+  <!-- data table handler  -->
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('#datatable').dataTable();
+    });
+  </script>
+  
+  
+  <!-- file manager functions -->
+  <script>
+    function change_upper(directory){
+      if(directory == "/") return;
+      var lastindex = directory.lastIndexOf("/");
+      if(lastindex == 0) lastindex++;
+      change_directory(directory.substring(0, lastindex));
+    }
+    function change_directory(directory){
+      $.ajax({
+      method: "POST",
+      url: "/application/changeDir",
+      data: { path: directory },
+      success  : function(result){
+          $("#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>";
+          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;
+            var row_class = i % 2 == 0 ? 'odd' : 'even';
+            var cur = result.current != "/" ? result.current : '';
+            new_tr += "<tr role='row' class='" + row_class + "'>";
+            new_tr += "<td style='color:#0d8ade;' class='sorting_1'><i class='fa fa-folder-open-o'></i> "; 
+            new_tr += "<a  style='cursor: pointer'  onclick='change_directory(" +'"' + cur + "/" + result.file[i].name +'"'+ ")'>" + result.file[i].name + "</a></td>";
+            new_tr += "<td>"+result.file[i].auth+"</td>";
+            new_tr += "<td><button class='btn btn-primary pull-right'>select</botton></td>";
+            new_tr += "</tr>";
+          }
+          $("#datatable_body").append(new_tr);
+          $('#datatable').dataTable();
+        }
+      })
+    }
+  </script>
+  
+  <script>
+    $("#form_volume_create").change(function (){
+      console.log($("#form_volume_create option:selected").val());
+    })
   </script>

vendor/assets/components/gentelella/production/css/custom.css

@@ -5345,3 +5345,57 @@ ul.notifications {
   width: 100%;
   height: 2px;
 }
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 500ms;
+  visibility: hidden;
+  opacity: 0;
+  z-index:20000;
+}
+
+.overlay:target {
+  visibility: visible;
+  opacity: 1;
+}
+
+.popup {
+  margin: 70px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  position: relative;
+  width:30%;
+  transition: all 5s ease-in-out;
+  overflow:auto;
+  z-index:20001;
+}
+.popup h2 {
+  margin-top: 0;
+  color: #333;
+  font-family: Tahoma, Arial, sans-serif;
+}
+.popup .close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  transition: all 200ms;
+  font-size: 30px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #333;
+  z-index:20001;
+}
+.popup .close:hover {
+  color: #06D85F;
+}
+@media screen and (max-width: 700px){
+  .popup{
+    width: 70%;
+  }
+}