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

<!-- 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" 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">
                        <% ['Distribute', 'Stripe', 'Replica', 'Disperse', 'Disperse-data', 'Redundancy'].each do |types|%>
                        <option><%= types %></option>
                        <% end %>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <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">
                    <select class="form-control">
                        <% for i in 1...11 do %>
                        <option><%= i %></option>
                        <% end %>
                    </select>
                </div>
            </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">
                            <% Node.all.each do |t| %>
                            <option><%= t.host_name %></option>
                            <% end %>
                        </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">
                    <a href="#" class="btn btn-primary">Cancel</a>
                    <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>
        <div id="mount_table_div">
            <%= raw mount_table %>
        </div>
    </div>
</div>
<!-- page content -->
<div class="right_col" role="main">
    <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 pull-right">
                <a class="btn btn-success btn-lg pull-right" href="#popup_create">Create Volume</a>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <% volumes.each_with_index do |volume, index| %>
        <%= raw volume_info(volume, index) %>
        <%end%>
    </div>
</div>
<!-- /page content -->

<!-- On document ready -->
<script>
$(document).ready(function(){
    // Mount overlay functions
    $("#popup_mount #mount_table_body form").submit(function(){
        var mnt_point = $(this).find("input").val();
        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(result){
            }
        });
    });
    // Create overlay functions
    $("#popup_create #form_volume_create").submit(function(){
        var volume_name = $(this).find(".form-group:eq(0) input").val(),
        volume_type = $(this).find(".form-group:eq(1) option:selected").val(),
        num_of_brick = $(this).find(".form-group:eq(2) option:selected").val() * 1, // convert to Number type
        bricks = [];
        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 host_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 = host_name + ":/" + brick_name;
            bricks.push(brick);
            console.log(brick);
        }
        $.ajax({
            method: "POST",
            url: "/volume/create",
            data: { volume_name : volume_name, volume_type : volume_type, num_of_brick : num_of_brick, bricks : bricks },
            success  : function(result){
            }
        });
    });
    // Volume type changed
    $("#popup_create #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 "Disperse":
            case "Disperse-data":
            case "Redundancy":
            console.log($type);
            break;
            default:
            console.log("something goes wrong");
            break;
        }
    });
    // Number of bricks changed
    $("#popup_create #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'>";
            <% Node.all.each do |t| %>
            new_body += "<option><%= t.host_name %></option>";
            <% end %>
            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);
    });
});
</script>

<!-- File manager functions -->
<script>
// change directory
$(document).on("click", "#mount_table_div .chdir", function(){
    var file_name = $(this).text().trim();
    var current_dir = $("#mount_table_div span").text().trim();
    if(current_dir == "/") current_dir = "";
    var next_dir = current_dir + "/" + file_name;

    $.ajax({
        method: "post",
        url: "/volume/chdir",
        data: { next_dir : next_dir },
        success  : function(result){
            $("#mount_table_div").empty();
            $("#mount_table_div").append(result.mount_table);
        }
    })
})
// change upper
$(document).on("click", "#mount_table_div .chupper", function(){
    var current_dir = $("#mount_table_div span").text().trim();
    if(current_dir == "/") return;
    var lastindex = current_dir.lastIndexOf("/");
    console.log("curdir : " + current_dir);
    console.log("last idx : " + lastindex);
    if(lastindex == 0) lastindex++;
    var next_dir = current_dir.substring(0, lastindex);

    $.ajax({
        method: "POST",
        url: "/volume/chdir",
        data: { next_dir : next_dir },
        success  : function(result){
            $("#mount_table_div").empty();
            $("#mount_table_div").append(result.mount_table);
        }
    })
})
</script>
<!-- /File manager functions -->

<script>
$(document).on("click", ".btn_mount", function(){
    var index = $(this).val();
    var volume_name = $(this).parents('h2').val();//.eq(index).val();
    
    console.log("read volume name for mount");

    $.ajax({
        method: "POST",
        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 },
        success  : function(result){
            $(".btn_unmount").empty();
            $(".btn_unmount").append(result.volume_info);
            
            console.log("unmount success");

        }
    })
})
</script>
<!-- /UnMount click functions -->

<script>
$(document).on("click", ".btn_stop", function(){
    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 },
        success  : function(result){
            $(".btn_start").empty();
            $(".btn_start").append(result.volume_info);
            
            console.log("start success");

        }
    })
})
</script>
<!-- /start click functions -->