<!-- 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 = ssh_nodes %>
	<% volumes = 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"><%= volumes.nil? ? 0 : volumes.length %></div>
				<span class="count_bottom">
					<i class="blue"><%= volumes.count{|x| x['Status'].eql? " Started"} %></i> started /
					<i class="green"><%= volumes.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 -->

	<!-- first row -->
	<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>
	<!-- /first row -->

	<!-- second row -->
	<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_160" style="overflow-y:auto;">
					<% if nodes.length != 0 %>
					<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>
		<% else %>
		<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8 cent-align">
			<div class="alert alert-info" role="alert">
				<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
				<span class="glyphicon-class">You don't have a node. Please add nodes to do something in this page.</span>
			</div>
		</div>
		<% end %>
	</div>
</div>
<div class="x_panel">
	<div class="x_title">
		<h2>Volumes 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_160" style="overflow-y:auto;">
		<% if volumes.length != 0 %>
		<% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %>
		<% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %>
		<div class="widget_summary">
			<div class="w_left w_25">
				<span>started</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: <%= start %>%;">
				</div>
			</div>
		</div>
		<div class="w_right w_20">
			<span><%= volumes.select{ |volume| volume["Status"].eql? " Started" }.length %> / <%= volumes.length %></span>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="widget_summary">
		<div class="w_left w_25">
			<span>mounted</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: <%= mount %>%;">
			</div>
		</div>
	</div>
	<div class="w_right w_20">
		<span><%= volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length %> / <%= volumes.length %></span>
	</div>
	<div class="clearfix"></div>
</div>
<% else %>
<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
	<div class="alert alert-warning" role="alert">
		<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
		<span class="glyphicon-class">You don't have a volume. Please add volumes to do something in this page.</span>
	</div>
</div>
<% end %>
</div>
</div>
</div>
<!-- /node status -->

<!-- node list -->
<div class="col-md-4 col-sm-4 col-xs-12">
	<div class="x_panel">
		<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_320" style="overflow-y:auto;">
			<ul class="list-unstyled top_profiles">
				<% if nodes.length != 0 %>
				<% nodes.each do |node| %>
				<li class="media event">
					<% color = ((node["ping"].eql? "true") ? ((node["gluster"].eql? "on" and node["ssh"].eql? "on") ? "green" : "aero") : "red")%>
					<a class="pull-left border-<%= color %> profile_thumb">
						<i class="fa fa-cube <%= color %>"></i>
					</a>
					<div class="media-body">
						<a class="title" onclick="loading();"  href="/node/detail/<%= node["id"] %>"><%= node["host_name"] %></a>
						<p><strong><%= node["host_ip"] %> </strong> <%= node["user_name"] %> </p>
						<% if node["gluster"].eql? "on" %>
						<p> <small> number of peers: <%= node["number_of_peers"] %></small></p>
						<% end %>
					</div>
				</li>
				<% end %>
				<% else %>
				<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
					<div class="alert alert-success" role="alert">
						<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
						<span class="glyphicon-class">You don't have a node. Please add nodes to do something in this page.</span>
					</div>
				</div>
				<% end %>
			</ul>
		</div>
	</div>
</div>
<!-- /node list -->

<!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12">
	<div class="x_panel">
		<div class="x_title" id="disk_file_title_div">
			<h2>Mounted usage</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_320" style="overflow-y:auto;" id="disk_file_div">
			<% if (volumes.length == 0) or ( (volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length) == 0) %>
			<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
				<div class="alert alert-error" role="alert">
					<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
					<span class="glyphicon-class">You don't have a volume. Please add volumes to do something in this page.</span>
				</div>
			</div>
			<div style="display:none;">
				<%= raw html_disk_file_table %>
			</div>
			<% else %>

			<%= raw html_disk_file_table %>
			<% end %>
		</div>
	</div>
</div>
<!-- /disk usage -->
</div>
<!-- /second row -->

</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 = [];

	<% nodes = Node.all %>
	<% get_df.each_with_index do |df, index| %>
	<% ip = df['Filesystem'].split(":").first %>
	<% next if nodes.select{|node| node["host_ip"].eql? ip}.length == 0 %>
	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 -->

<!-- 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).data("name").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 , current_dir : current_dir},
			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 -->
