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

<!-- create overlay page -->
<div id="popup_mkdir" class="overlay">
	<div class="popup">
		<h2> Make Directory </h2>
		<a class="close" href="#">&times;</a>
		<form id="form_make_directory" data-parsley-validate class="form-horizontal form-label-left" action="/home/mkdir" method="post">
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12" for="current_dir">Current Directory <span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="text" id="current_dir" required="required" class="form-control col-md-7 col-xs-12" name="current_dir" value="<%= @current_dir %>" readonly/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3 col-sm-3 col-xs-12" for="directory-name">Directory Name<span class="required">*</span>
				</label>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<input type="text" id="directory-name" required="required" class="form-control col-md-7 col-xs-12" name="directory_name" placeholder="Directory name"/>
				</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-success">Submit</button>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- page content -->
<div class="right_col" role="main">
	<div class="page-title">
	</div>
	<div class="clearfix"></div>

	<!-- top tiles -->
	<% users = User.all %>
	<% nodes = Node.all %>
	<% vols = ssh_volume_info %>
	<% today_user = User.where(:last_sign_in_at => Date.today..Date.tomorrow) %>
	<% today_node = Node.where(:created_at => Date.today..Date.tomorrow) %>
	<div class="row tile_count">
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-clock-o"></i> Current signed in</span>
				<div class="count"><%= current_user.current_sign_in_at.strftime("%a, %H:%M") %></div>
				<span class="count_bottom"> From <i class="blue"><%= current_user.current_sign_in_ip %></i></span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-clock-o"></i> Last signed in</span>
				<div class="count"><%= current_user.last_sign_in_at.strftime("%a, %H:%M") %></div>
				<span class="count_bottom"> From <i class="red"><%= current_user.last_sign_in_ip %></i></span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-user"></i> Members</span>
				<div class="count"><%= users.nil? ? 0 : users.length %></div>
				<span class="count_bottom">
					<i class="green"><%= today_user.nil? ? 0 : today_user.length %></i>
					user signed Today
				</span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-cubes"></i> Total Nodes</span>
				<div class="count"><%= nodes.nil? ? 0 : nodes.length %></div>
				<span class="count_bottom">
					<i class="green"><%= today_node.nil? ? 0 : today_node.length %></i>
					Node added Today
				</span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-database"></i> Total volumes</span>
				<div class="count"><%= vols.nil? ? 0 : vols.length %></div>
				<span class="count_bottom">
					<i class="blue"><%= vols.count{|x| x['Status'].eql? " Started"} %></i> started /
					<i class="green"><%= vols.count{|x| x['Mount State'].eql? "mounted"} %></i> mounted
				</span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
			<div class="left"></div>
			<div class="right">
				<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
				<div class="count"><%= users.sum("sign_in_count") %></div>
				<span class="count_bottom"><i class="green"><%= today_user.sum("sign_in_count") %></i> connected today</span>
			</div>
		</div>
	</div>
	<!-- /top tiles -->

	<div class="row">

		<!-- file manager -->
		<div class="col-md-8 col-sm-8 col-xs-12">
			<div id="pagecontent" class="panel panel-body">
				<div class="x_title" id="file_manager_title_div">
					<h2 style="width:130px">File Manager</h2>
				</div>
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12" id="file_manager_div">
						<%= raw html_file_manager_table %>
					</div>
				</div>
			</div>
		</div>
		<!-- /file manager -->

		<!-- disk usage -->
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="panel panel-body">
				<div class="x_title" id="disk_usage_title_div">
					<h2 style="width:130px">Disk usage</h2>
				</div>
				<div class="row" id="disk_usage_div">
					<%= raw html_disk_usage_table %>
				</div>
			</div>
		</div>
		<!-- /disk usage -->
	</div>

	<% nodes = ssh_nodes %>
	<div class ="row">
		<!-- node status -->
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="x_panel">
				<div class="x_title">
					<h2>Nodes Status</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>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="x_content tile fixed_height_200" style="overflow-y:auto;">
					<div class="widget_summary">
						<% ping = ((nodes.select{ |node| node["ping"].eql? "true" }.length.to_f / nodes.length.to_f) * 100).to_i %>
						<div class="w_left w_25">
							<span>ping</span>
						</div>
						<div class="w_center w_55">
							<div class="progress">
								<div class="progress-bar bg-green" role="progressbar"
								aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ping %>%;">
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span><%= nodes.select{ |node| node["ping"].eql? "true" }.length %> / <%= nodes.length %></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="widget_summary">
						<% ssh = ((nodes.select{ |node| node["ssh"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
						<div class="w_left w_25">
							<span>ssh</span>
						</div>
						<div class="w_center w_55">
							<div class="progress">
								<div class="progress-bar bg-green" role="progressbar"
								aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ssh %>%;">
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span><%= nodes.select{ |node| node["ssh"].eql? "on" }.length %> / <%= nodes.length %></span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="widget_summary">
						<% gluster = ((nodes.select{ |node| node["gluster"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
						<div class="w_left w_25">
							<span>gluster operation</span>
						</div>
						<div class="w_center w_55">
							<div class="progress">
								<div class="progress-bar bg-green" role="progressbar"
								aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= gluster %>%;">
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span><%= nodes.select{ |node| node["gluster"].eql? "on" }.length %> / <%= nodes.length %></span>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- /node status -->

		<!-- node list -->
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="x_panel tile">
				<div class="x_title">
					<h2>Nodes List</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>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="x_content fixed_height_200" style="overflow-y:auto;">
					<ul class="list-unstyled top_profiles" >
						<% nodes.each do |node| %>
	                        <li class="media event">
	                          <% if node["ping"].eql? "true" %>
		                          <a class="pull-left border-green profile_thumb">
		                            <i class="fa fa-cube green"></i>
		                          </a>
		                      <% else %>
		                          <a class="pull-left border-red profile_thumb">
		                            <i class="fa fa-cube red"></i>
		                          </a>
		                      <% end %>
	                          <div class="media-body">
	                            <a class="title" href="#"><%= node["host_name"] %></a>
	                            <p><strong><%= node["host_ip"] %> </strong> <%= node["user_name"] %> </p>
	                            <% if node["gluster"].eql? "on" %>
	                            	<p> <small> <%= node["number_of_peers"] %></small></p>
	                            <% end %>
	                          </div>
	                        </li>
                        <% end %>
                      </ul>
				</div>
			</div>
		</div>
		<!-- /node list -->

		<!-- disk usage -->
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="panel panel-body">
				<div class="x_title" id="disk_file_title_div">
					<h2 style="width:130px">Disk usage</h2>
				</div>
				<div class="row" id="disk_file_div">
					<%= raw html_disk_file_table %>
				</div>
			</div>
		</div>
		<!-- /disk usage -->

	</div>

	<div class ="row">
	</div>
</div>
<!-- /page content -->

<!-- On ready -->
<script>
$(document).ready(function() {
	var du = [];
	<% get_du.each_with_index do |du, index| %>
	du.push({
		'file_name':"<%= du['file_name'] %>",
		'usage':"<%= du['usage'] %>"
	});
	<% end %>
	draw_datatable();
	draw_chart(du);

	var options = {
		legend: false,
		responsive: false
	};
	var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
	var labels = [];
	var data = [];
	var backgroundColor = [];
	var hoverBackgroundColor = [];

	var df = [];
	<% get_df.each_with_index do |df, index| %>
	df.push({
		'file_name':"<%= df['Filesystem'] %>",
		'usage':"<%= (df["Use%"][0..df["Use%"].length - 1]).to_f / 100 %>"
	});
	<% end %>

	for(var i = 0; i < df.length; i++){
		labels.push(df[i]['file_name']);
		data.push(df[i]['usage']);
		backgroundColor.push(colors[i % colors.length]);
		hoverBackgroundColor.push(colors[i % colors.length]);
	}

	new Chart(document.getElementById("disk_file_table_canvas"), {
		type: 'doughnut',
		tooltipFillColor: "rgba(51, 51, 51, 0.55)",
		data: {
			labels: labels,
			datasets: [{
				data: data,
				backgroundColor: backgroundColor,
				hoverBackgroundColor: hoverBackgroundColor
			}]
		},
		options: options
	});
})
</script>
<!-- /On ready -->

<!-- Datatable functions -->
<script>
function draw_datatable(){
	$('#file_manager_table').dataTable( {
		"bSort": false,
		initComplete: function(){
			$('#file_manager_table_filter').detach().appendTo("#file_manager_title_div").css({
				'width':'250px'
			});
			$('#file_manager_table_length').detach().appendTo("#file_manager_title_div").css({
				'width':'150px',
				'float':'right'
			});
			$('#file_manager_title_div').css({
				'width':'100%',
				'height':'48px',
			});
			$('#file_manager_title_div input').css({
				'width':'70%',
				'height':'70%',
				'font-size':'14px',
				'padding':'5px'
			});
		}
	});

	$('#disk_usage_tile_table').dataTable({
		"bSort":false,
		"bFilter":false,
		"bInfo":false,
		initComplete: function(){
			$('#disk_usage_tile_table_length').detach().appendTo("#disk_usage_title_div").css({
				'width':'150px',
				'float':'right'
			});
			$('#disk_usage_title_div').css({
				'width':'100%',
				'height':'48px',
			});
		}
	});
}
function draw_chart(du){
	var options = {
		legend: false,
		responsive: false
	};
	var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
	var labels = [];
	var data = [];
	var backgroundColor = [];
	var hoverBackgroundColor = [];

	for(var i = 0; i < du.length; i++){
		labels.push(du[i]['file_name']);
		data.push(du[i]['usage']);
		backgroundColor.push(colors[i % colors.length]);
		hoverBackgroundColor.push(colors[i % colors.length]);
	}

	new Chart(document.getElementById("disk_usage_table_canvas"), {
		type: 'doughnut',
		tooltipFillColor: "rgba(51, 51, 51, 0.55)",
		data: {
			labels: labels,
			datasets: [{
				data: data,
				backgroundColor: backgroundColor,
				hoverBackgroundColor: hoverBackgroundColor
			}]
		},
		options: options
	});
}
</script>
<!-- /Datatable functions -->

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

	$.ajax({
		method : "post",
		url : "/home/chdir",
		data : { next_dir : next_dir },
		beforeSend : function(){
			$(location).attr('href',"#loading");
			//Pace.start();
		},
		success : function(result){
			$("#current_dir").val(next_dir);
			$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
			$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
			$("#file_manager_div").empty().append(result.file_manager_table);
			$("#disk_usage_div").empty().append(result.disk_usage_table);

			draw_datatable();
			draw_chart(result.du);
			$(location).attr('href',"#");
			//check_divheight();
			//Pace.stop();
		}
	})
})
// change upper
$(document).on("click", "#file_manager_div .chupper", function(){
	var current_dir = $("#file_manager_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 : "/home/chdir",
		data : { next_dir : next_dir },
		beforeSend : function(){
			//Pace.start();
			$(location).attr('href',"#loading");
		},
		success : function(result){
			$("#current_dir").val(next_dir);
			$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
			$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
			$("#file_manager_div").empty().append(result.file_manager_table);
			$("#disk_usage_div").empty().append(result.disk_usage_table);

			draw_datatable();
			draw_chart(result.du);
			//Pace.stop();

			//check_divheight();
			$(location).attr('href',"#");
		}
	})
})
// remove directory
$(document).on("click", "#file_manager_div .rmdir", function(){
	var file_name = $(this).text().trim();
	var current_dir = $("#file_manager_div span").text().trim();
	var target = current_dir + "/" + file_name;
	if(confirm("Are you sure you want to delete '"+ file_name +"' ?")) {
		$.ajax({
			method: "POST",
			url: "/home/rmdir",
			data: { target : target },
			beforeSend : function(){
				$(location).attr('href',"#loading");
			},
			success  : function(result){
				$("#current_dir").val(current_dir);
				$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
				$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
				$("#file_manager_div").empty().append(result.file_manager_table);
				$("#disk_usage_div").empty().append(result.disk_usage_table);

				draw_datatable();
				draw_chart(result.du);
				//check_divheight();
				$(location).attr('href',"#");
			}
		})
	}
})
</script>
<!-- /File manager functions -->