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 -->
	<div class="row tile_count">
		<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 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="green"><%= current_user.current_sign_in_ip %></i></span>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 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-4 col-xs-4 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.length %></div>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 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.length %></div>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 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.length %></div>
			</div>
		</div>
		<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 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">7,325</div>
				<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
			</div>
		</div>
	</div>
	<!-- /top tiles -->

	<div class="row">
		<!-- file manager -->
		<div class="col-md-8 col-sm-8 col-xs-12">
			<div class="x_panel">
				<div class="x_title">
					<h2>File Manager</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">
					<div class="col-md-12 col-sm-12 col-xs-12" id="table_div">
						<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 id="datatable_body">
								<tr>
									<td>
										<a style='cursor: pointer' onclick="change_upper('<%=@current_dir%>')"><i class="fa fa-reply"></i></a>
										<%= @current_dir %>
										<a class='pull-right' href="#popup_mkdir"><i class="fa fa-plus"></i><i class="fa fa-folder"></i></a>
									</td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<% @files.each do |t| %>
								<tr class="dir_delete">
									<% if t["auth"][0]=='d'%>
									<td style="color:#0d8ade;"><i class="fa fa-folder-open-o"></i>
										<a style="cursor: pointer" onclick="change_directory('<%=@current_dir + "/" + t["name"]%>')"> <%=t["name"]%></a>
									</td>
									<% else %>
									<td><i class="fa fa-file-o"></i>
										<a href="/file_download?file_name=<%=(@current_dir+'/'+t['name']).gsub("/", "+")%>"><%=t['name']%></a>
									</td>
									<% end %>
									<td><%=t["auth"]%></td>
									<td><%=t["size"]%></td>
									<td>
										<%=t["date"]%>
										<a class='pull-right' onclick="delete_file('<%=@current_dir + "/" + t["name"]%>')" href="#"><i class="fa fa-trash"></i></a>
									</td>
								</tr>
								<% end %>
							</tbody>
						</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>Easy Pie Chart</h4>
				</div>
				<p>Easy pie chart is a jQuery plugin that uses the canvas element to render highly customizable, very easy to implement, simple pie charts for single values.</p>
				<div class="row">
					<div class="col-xs-4">
						<span class="chart" data-percent="86">
							<span class="percent"></span>
						</span>
					</div>
					<div class="col-xs-4">
						<span class="chart" data-percent="73">
							<span class="percent"></span>
						</span>
					</div>
					<div class="col-xs-4">
						<span class="chart" data-percent="60">
							<span class="percent"></span>
						</span>
					</div>
					<div class="clearfix"></div>
				</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>
</div>
<!-- /page content -->

<!-- File manager functions -->
<script>
function delete_file(directory){
	if (confirm("Are you sure you want to delete '"+ directory+"' ?")) {
		$.ajax({
			method: "POST",
			url: "/home/delete",
			data: { file_name: directory },
			success  : function(result){
				location.reload(true);
			}
		})
	}
	//alert(directory);
}
function change_upper(directory){
	if(directory == "/") return;
	var lastindex = directory.lastIndexOf("/");
	if(lastindex == 0) lastindex++;
	change_directory(directory.substring(0, lastindex));
}
function change_directory(directory){
	$.ajax({
		method: "POST",
		url: "/application/changeDir",
		data: { path: directory },
		success  : function(result){
			$("#current-dir").val(directory);
			$("#table_div").empty();
			var new_table = "";
			new_table += "<table id='datatable' class='table table-striped table-bordered jambo_table'>";
			new_table += "<thead>";
			new_table += "<tr class='headings'>";
			new_table += "<th>Name</th>";
			new_table += "<th>Auth</th>";
			new_table += "<th>Size</th>";
			new_table += "<th>Date</th>";
			new_table += "</tr>";
			new_table += "</thead>";
			new_table += "<tbody id='datatable_body'>";

			var new_tr = "";
			new_tr += "<tr role='row' class='odd'>";
			new_tr += "<td><a style='cursor: pointer' onclick='change_upper(" + '"' + directory + '"' +")'><i class='fa fa-reply'></i></a>";
			new_tr += "&nbsp" + directory
			new_tr += "<a class='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a></td>";
			new_tr += "<td></td> <td></td> <td></td>"
			new_tr += "</tr>";
			for( var i = 0; i < result.file.length; i++){
				var row_class = i % 2 == 0 ? 'odd' : 'even';
				var cur = result.current != "/" ? result.current : '';
				new_tr += "<tr role='row' class='dir_delete' class='" + row_class + "'>";
				if(result.file[i].auth[0] == "d"){
					new_tr += "<td style='color:#0d8ade;' class='sorting_1'><i class='fa fa-folder-open-o'></i> ";
					new_tr += "<a style='cursor: pointer'  onclick='change_directory(" +'"' + cur + "/" + result.file[i].name +'"'+ ")'>" + result.file[i].name + "</a></td>";
				}else{
					new_tr += "<td>";
					new_tr += "<i class='fa fa-file-o'></i>"
					new_tr += "<a href='/file_download?file_name="+ (cur + "/" + result.file[i].name).replace(/\//, "+") + "'> " + result.file[i].name + "</a>"
					new_tr += "</td>";
				}

				new_tr += "<td>"+result.file[i].auth+"</td>";
				new_tr += "<td>"+result.file[i].size+"</td>";
				new_tr += "<td>"+result.file[i].date+" <a class='pull-right' onclick='delete_file(" +'"' + cur + "/" + result.file[i].name +'"'+ ")'  href='#'><i class='fa fa-trash'></i></a></td>";


				new_tr += "</tr>";
			}
			new_table += new_tr;
			new_table += "</tbody></table>"
			$("#table_div").append(new_table);
			$('#datatable').dataTable( {"bSort": false});
		}
	})
}
</script>

<!-- On document ready -->
<script>
$(document).ready(function() {
	$('#datatable').dataTable( {"bSort": false});
});
</script>

<!-- Easy pie chart -->
<script>
$(function() {
	$('.chart').easyPieChart({
		easing: 'easeOutBounce',
		lineWidth: '6',
		barColor: '#75BCDD',
		onStep: function(from, to, percent) {
			$(this.el).find('.percent').text(Math.round(percent));
		}
	});
	var chart = window.chart = $('.chart').data('easyPieChart');
	$('.js_update').on('click', function() {
		chart.update(Math.random() * 200 - 100);
	});

	//hover and retain popover when on popover content
	var originalLeave = $.fn.popover.Constructor.prototype.leave;
	$.fn.popover.Constructor.prototype.leave = function(obj) {
		var self = obj instanceof this.constructor ?
		obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
		var container, timeout;

		originalLeave.call(this, obj);

		if (obj.currentTarget) {
			container = $(obj.currentTarget).siblings('.popover')
			timeout = self.timeout;
			container.one('mouseenter', function() {
				//We entered the actual popover – call off the dogs
				clearTimeout(timeout);
				//Let's monitor popover content instead
				container.one('mouseleave', function() {
					$.fn.popover.Constructor.prototype.leave.call(self, self);
				});
			})
		}
	};
	$('body').popover({
		selector: '[data-popover]',
		trigger: 'click hover',
		delay: {
			show: 50,
			hide: 400
		}
	});

});
</script>