gluster-web-interface/app/views/volume/info.html.erb

<!-- page content -->

<div class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="title_left">
        <h3>Volume</h3> 
      </div>
      <div class="title_right">
        <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
              </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="clearfix"></div>

    <div class="row">  
    
      <%@volumes.each do |t|%>
      
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>Infomation <small><%=t["Volume Name"]%></small></h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </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>
                    <li><a href="#">Settings 2</a>
                    </li>
                  </ul>
                </li>
                <li><a class="close-link"><i class="fa fa-close"></i></a>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            
            <div class="x_content">
              
              <div class="col-md-4 col-sm-4 col-xs-4">
                Type : <%=t["Type"]%> <br>
                Volume ID : <%=t["Volume ID"]%> <br>
                Status : <%=t["Status"]%> <br>
                Number of Bricks : <%=t["Number of Bricks"]%> <br>
                Transport-type : <%=t["Transport-type"]%> <br>
                Bricks : <%=t["Bricks"]%> <br>
                Bricks1 : <%=t["Brick1"]%> <br>
                Options Reconfigured : <%=t["Options Reconfigured"]%> <br>
                performance.readdir-ahead : <%=t["performance.readdir-ahead"]%> <br>
              </div>
              
              <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. This is for demonstration purposes only, the files are not uploaded to any server.</p>
                <form action="/file_upload" method="post" enctype="multipart/form-data" class="dropzone" style="border: 1px solid #e5e5e5; height: 300px; overflow:scroll;">
                </form>
                <br/>
              </div>
              
              <%f = get_files(t["Volume Name"])%>
              <%f.each do |t|%>
              <div class="col-md-12 col-sm-12 col-xs-12">
                 Current directory : <%=@cur_dir%></br>
                 Numbers : <%=@total%></br>
              </div>     
              <div class="col-md-12 col-sm-12 col-xs-12">
                  <p class="text-muted font-13 m-b-30"><code>File Manager</code></p>
                  <table id="datatable" class="table table-striped table-bordered jambo_table">
                    <thead>
                      <tr class="headings">
                        <th>Name</th>
                        <th>auth</th>
                        <th>Size</th>
                        <th>Date</th>
                      </tr>
                    </thead>

                    <tbody>
                      
                        <tr>
                         <td><%=t["name"]%></td>
                         <td><%=t["auth"][0]%></td>
                         <td><%=t["size"]%></td>
                         <td><%=t["date"]%></td>
                        </tr>
                      
                    </tbody>
                  </table>
              </div>
              <%end%>
              
            </div>
          </div>
        </div>
      <%end%>
    </div>
  </div>
</div>
<!-- /page content -->

  <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">
          $(document).ready(function() {
            $('#datatable').dataTable();
            $('#datatable-keytable').DataTable({
              keys: true
            });
            $('#datatable-responsive').DataTable();
            $('#datatable-scroller').DataTable({
              ajax: "js/datatables/json/scroller-demo.json",
              deferRender: true,
              scrollY: 380,
              scrollCollapse: true,
              scroller: true
            });
            var table = $('#datatable-fixed-header').DataTable({
              fixedHeader: true
            });
          });
          TableManageButtons.init();
        </script>