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 = volumes %>
	<% 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 class="panel panel-body">
				<div class="x_title" id="file_manager_filter_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 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">
					<h4>Disk usage</h4>
				</div>
				<div class="row" id="disk_usage_div">
					<%= raw disk_usage_table %>
				</div>
			</div>
		</div>
		<!-- /disk usage -->

	</div>

	<div class ="row">
		<!-- node status -->
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="x_panel tile fixed_height_320">
				<div class="x_title">
					<h2>Nodes</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">
					<h4>App Usage across versions</h4>
					<div class="widget_summary">
						<div class="w_left w_25">
							<span>0.1.5.2</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: 66%;">
									<span class="sr-only">60% Complete</span>
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span>123k</span>
						</div>
						<div class="clearfix"></div>
					</div>

					<div class="widget_summary">
						<div class="w_left w_25">
							<span>0.1.5.3</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: 45%;">
									<span class="sr-only">60% Complete</span>
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span>53k</span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="widget_summary">
						<div class="w_left w_25">
							<span>0.1.5.4</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: 25%;">
									<span class="sr-only">60% Complete</span>
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span>23k</span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="widget_summary">
						<div class="w_left w_25">
							<span>0.1.5.5</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: 5%;">
									<span class="sr-only">60% Complete</span>
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span>3k</span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="widget_summary">
						<div class="w_left w_25">
							<span>0.1.5.6</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: 2%;">
									<span class="sr-only">60% Complete</span>
								</div>
							</div>
						</div>
						<div class="w_right w_20">
							<span>1k</span>
						</div>
						<div class="clearfix"></div>
					</div>

				</div>
			</div>
		</div>
		<!-- /node status -->
	</div>

</div>
<!-- /page content -->

<!-- on load -->
<script>
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 % 5]);
		hoverBackgroundColor.push(colors[i % 5]);
	}

	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
	});
}

$(document).ready(function() {
	var table = $('#file_manager_table').dataTable( {
		"bSort": false,
		initComplete: function(){
			$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
				'width':'250px'
			});
			$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
				'width':'150px',
				'float':'right'
			});
			$('#file_manager_filter_div').css({
				'width':'100%',
				'height':'48px',
			});
			$('#file_manager_filter_div input').css({
				'width':'70%',
				'height':'70%',
				'font-size':'14px',
				'padding':'5px'
			});
		}
	});
	
	var table = $('#tile_info').dataTable( {
		"bSort": false//,
		/*
		initComplete: function(){
			$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
				'width':'250px'
			});
			$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
				'width':'150px',
				'float':'right'
			});
			$('#tile_info_div').css({
				'width':'100%',
				'height':'48px',
			});
			$('#file_manager_filter_div input').css({
				'width':'70%',
				'height':'70%',
				'font-size':'14px',
				'padding':'5px'
			});
		}
		*/
	});

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

	<% get_du.each_with_index do |du, index| %>
	labels.push("<%= du['file_name'] %>");
	data.push("<%= du['usage'] %>");
	backgroundColor.push(colors[<%= index %> % 5]);
	hoverBackgroundColor.push(colors[<%= index %> % 5]);
	<% end %>

	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>
<!-- /on load -->

<!-- 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 },
		success  : function(result){
			$("#current_dir").val(next_dir);
			$("#file_manager_div").empty();
			$("#disk_usage_div").empty();
			$("#file_manager_div").append(result.file_manager_table);
			$("#disk_usage_div").append(result.disk_usage_table);

			$('#file_manager_table').dataTable( {
				"bSort": false
			});
			draw_chart(result.du);
		}
	})
})
// 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 },
		success  : function(result){
			$("#current_dir").val(next_dir);
			$("#file_manager_div").empty();
			$("#disk_usage_div").empty();
			$("#file_manager_div").append(result.file_manager_table);
			$("#disk_usage_div").append(result.disk_usage_table);

			$('#file_manager_table').dataTable( {
				"bSort": false
			});
			draw_chart(result.du);
		}
	})
})
// 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 },
			success  : function(result){
				$("#current_dir").val(current_dir);
				$("#file_manager_div").empty();
				$("#disk_usage_div").empty();
				$("#file_manager_div").append(result.file_manager_table);
				$("#disk_usage_div").append(result.disk_usage_table);

				$('#file_manager_table').dataTable( {
					"bSort": false
				});
				draw_chart(result.du);
			}
		})
	}
})
</script>
<!-- /File manager functions -->