582 lines
19 KiB
Plaintext
582 lines
19 KiB
Plaintext
<!-- create overlay page -->
|
|
<div id="popup_mkdir" class="overlay">
|
|
<div class="popup">
|
|
<h2> Make Directory </h2>
|
|
<a class="close" href="#">×</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 %>
|
|
<% volumes = ssh_volume_info %>
|
|
<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;">
|
|
<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 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;">
|
|
<div class="widget_summary">
|
|
<% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %>
|
|
<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">
|
|
<% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %>
|
|
<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>
|
|
</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_320" 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" 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 %>
|
|
</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 tile" 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 -->
|