Update graph and table
This commit is contained in:
kyg516
parent
5685c5ff6e
commit
364c890cd3
@ -3,6 +3,8 @@ class ApplicationController < ActionController::Base
|
||||
# For APIs, you may want to use :null_session instead.
|
||||
# protect_from_forgery with: :exception
|
||||
include ApplicationHelper
|
||||
include HomeHelper
|
||||
include VolumeHelper
|
||||
|
||||
def require_login
|
||||
unless user_signed_in?
|
||||
@ -36,7 +38,12 @@ class ApplicationController < ActionController::Base
|
||||
def chdir
|
||||
@current_dir = params[:next_dir]
|
||||
puts "current_dir : " + @current_dir
|
||||
render :json => {:dir => @current_dir}
|
||||
render :json => {
|
||||
:dir => @current_dir,
|
||||
:file_manager_table => file_manager_table(@current_dir),
|
||||
:disk_usage_table => disk_usage_table(@current_dir),
|
||||
:du => get_du(@current_dir),
|
||||
}
|
||||
end
|
||||
|
||||
def rmdir
|
||||
|
||||
@ -26,6 +26,54 @@ module ApplicationHelper
|
||||
return df
|
||||
end
|
||||
|
||||
def get_du(dir = @current_dir)
|
||||
du = Array.new
|
||||
du_each = Hash.new
|
||||
command = String.new
|
||||
avail = 0.0
|
||||
if dir.eql? "/"
|
||||
command = "sudo df /"
|
||||
s = `#{command}`.split("\n")[1].split(" ")
|
||||
avail = s[2].to_f + s[3].to_f
|
||||
dir = ""
|
||||
else
|
||||
command << "sudo du -s #{dir}"
|
||||
begin
|
||||
avail = `#{command}`.split(" ")[0].to_f
|
||||
rescue
|
||||
# some directory is not connected
|
||||
avail = `#{command}`.split(" ")[1].to_f
|
||||
end
|
||||
end
|
||||
|
||||
command = ""
|
||||
command << "sudo du -s #{dir}/*"
|
||||
puts command
|
||||
output = `#{command}`.split("\n")
|
||||
output.each do |t|
|
||||
begin
|
||||
du_each['usage'] = t.split(" ")[0].to_f / avail
|
||||
du_each['file_name'] = t.split(" ")[1].split("/").last
|
||||
du << du_each
|
||||
du_each = Hash.new
|
||||
rescue
|
||||
# directory is not connected
|
||||
du_each['usage'] = 0.0
|
||||
du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
|
||||
du << du_each
|
||||
du_each = Hash.new
|
||||
end
|
||||
end
|
||||
|
||||
if du.length == 0
|
||||
du_each['usage'] = 1.0
|
||||
du_each['file_name'] = "empty"
|
||||
du << du_each
|
||||
end
|
||||
|
||||
return du
|
||||
end
|
||||
|
||||
def volumes
|
||||
volumes = Array.new
|
||||
volume = Hash.new
|
||||
@ -83,51 +131,4 @@ module ApplicationHelper
|
||||
return files
|
||||
end
|
||||
|
||||
def file_manager_table(dir = "/mnt", id = "datatable", class_option = "table table-striped table-bordered jambo_table")
|
||||
html = String.new
|
||||
html << "<table id='#{id}' class='#{class_option}'>"
|
||||
html << "<thead>"
|
||||
html << "<tr class='headings'>"
|
||||
html << "<th>Name</th>"
|
||||
html << "<th>auth</th>"
|
||||
html << "<th>Size</th>"
|
||||
html << "<th>Date</th>"
|
||||
html << "</tr>"
|
||||
html << "</thead>"
|
||||
html << "<tbody id='#{id}_body'>"
|
||||
html << "<tr>"
|
||||
html << "<td>"
|
||||
html << "<a class='chupper' style='cursor: pointer'><i class='fa fa-reply'></i></a>"
|
||||
html << "<span style='line-height:0'> #{dir}</span>"
|
||||
html << "<a class='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a>"
|
||||
html << "</td>"
|
||||
html << "<td></td>"
|
||||
html << "<td></td>"
|
||||
html << "<td></td>"
|
||||
html << "</tr>"
|
||||
|
||||
files(dir).each do |file|
|
||||
html << "<tr class='dir_delete'>"
|
||||
if file["auth"][0]=='d'
|
||||
html << "<td style='color:#0d8ade;'><i class='fa fa-folder-open-o'></i>"
|
||||
html << "<a class='chdir' style='cursor: pointer'> #{file['name']}</a>"
|
||||
html << "</td>"
|
||||
else
|
||||
conv_name = (dir + '/' + file['name']).gsub("/", "+")
|
||||
html << "<td><i class='fa fa-file-o'></i>"
|
||||
html << "<a href='/file_download?file_name=#{conv_name}'> #{file['name']}</a>"
|
||||
html << "</td>"
|
||||
end
|
||||
html << "<td>#{file['auth']}</td>"
|
||||
html << "<td>#{file['size']}</td>"
|
||||
html << "<td>#{file["date"]}"
|
||||
html << "<a class='pull-right rmdir' href='#'><i class='fa fa-trash'></i></a>"
|
||||
html << "</td>"
|
||||
html << "</tr>"
|
||||
end
|
||||
|
||||
html << "</tbody>"
|
||||
html << "</table>"
|
||||
return raw html
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,46 +1,54 @@
|
||||
module HomeHelper
|
||||
|
||||
def get_du(dir)
|
||||
du = Array.new
|
||||
du_each = Hash.new
|
||||
command = String.new
|
||||
avail = 0.0
|
||||
if dir.eql? "/"
|
||||
command = "sudo df /"
|
||||
s = `#{command}`.split("\n")[1].split(" ")
|
||||
avail = s[2].to_f + s[3].to_f
|
||||
else
|
||||
command << "sudo du -s #{dir}"
|
||||
begin
|
||||
avail = `#{command}`.split(" ")[0].to_f
|
||||
rescue
|
||||
# some directory is not connected
|
||||
avail = `#{command}`.split(" ")[1].to_f
|
||||
def file_manager_table(dir = @current_dir, id = "file_manager_table", class_option = "table table-striped table-bordered jambo_table")
|
||||
html = String.new
|
||||
html << "<table id='#{id}' class='#{class_option}'>"
|
||||
html << "<thead>"
|
||||
html << "<tr class='headings'>"
|
||||
html << "<th>Name</th>"
|
||||
html << "<th>auth</th>"
|
||||
html << "<th>Size</th>"
|
||||
html << "<th>Date</th>"
|
||||
html << "</tr>"
|
||||
html << "</thead>"
|
||||
html << "<tbody id='#{id}_body'>"
|
||||
html << "<tr>"
|
||||
html << "<td>"
|
||||
html << "<a class='chupper' style='cursor: pointer'><i class='fa fa-reply'></i></a>"
|
||||
html << "<span style='line-height:0'> #{dir}</span>"
|
||||
html << "<a class='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a>"
|
||||
html << "</td>"
|
||||
html << "<td></td>"
|
||||
html << "<td></td>"
|
||||
html << "<td></td>"
|
||||
html << "</tr>"
|
||||
|
||||
files(dir).each do |file|
|
||||
html << "<tr class='dir_delete'>"
|
||||
if file["auth"][0]=='d'
|
||||
html << "<td style='color:#0d8ade;'><i class='fa fa-folder-open-o'></i>"
|
||||
html << "<a class='chdir' style='cursor: pointer'> #{file['name']}</a>"
|
||||
html << "</td>"
|
||||
else
|
||||
conv_name = (dir + '/' + file['name']).gsub("/", "+")
|
||||
html << "<td><i class='fa fa-file-o'></i>"
|
||||
html << "<a href='/file_download?file_name=#{conv_name}'> #{file['name']}</a>"
|
||||
html << "</td>"
|
||||
end
|
||||
html << "<td>#{file['auth']}</td>"
|
||||
html << "<td>#{file['size']}</td>"
|
||||
html << "<td>#{file["date"]}"
|
||||
html << "<a class='pull-right rmdir' href='#'><i class='fa fa-trash'></i></a>"
|
||||
html << "</td>"
|
||||
html << "</tr>"
|
||||
end
|
||||
|
||||
command = ""
|
||||
command << "sudo du -s #{dir}/*"
|
||||
puts command
|
||||
output = `#{command}`.split("\n")
|
||||
output.each do |t|
|
||||
begin
|
||||
du_each['usage'] = t.split(" ")[0].to_f / avail
|
||||
du_each['file_name'] = t.split(" ")[1].split("/").last
|
||||
du << du_each
|
||||
du_each = Hash.new
|
||||
rescue
|
||||
# directory is not connected
|
||||
du_each['usage'] = 0.0
|
||||
du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
|
||||
du << du_each
|
||||
du_each = Hash.new
|
||||
end
|
||||
end
|
||||
return du
|
||||
html << "</tbody>"
|
||||
html << "</table>"
|
||||
return html
|
||||
end
|
||||
|
||||
def disk_usage_table(dir = "/mnt")
|
||||
def disk_usage_table(dir = @current_dir)
|
||||
html = String.new
|
||||
html << "<table class='' style='width:100%'>"
|
||||
html << "<tr>"
|
||||
@ -53,18 +61,18 @@ module HomeHelper
|
||||
html << "<p class=''>Usage</p></div>"
|
||||
html << "</th></tr>"
|
||||
html << "<tr>"
|
||||
html << "<td><canvas id='canvas1' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
|
||||
html << "<td><canvas id='disk_usage_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
|
||||
html << "<td>"
|
||||
html << "<table class='tile_info'>"
|
||||
|
||||
get_du(dir).each_with_index do |t, index|
|
||||
get_du(dir).each_with_index do |file, index|
|
||||
color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
|
||||
html << "<tr><td>"
|
||||
html << "<p><i class='fa fa-square #{color}'></i>"
|
||||
html << t['file_name']
|
||||
html << file['file_name']
|
||||
html << "</p></td>"
|
||||
html << "<td><p>"
|
||||
html << format("%.2f", t['usage']*100) + "%"
|
||||
html << format("%.2f", file['usage']*100) + "%"
|
||||
html << "</p></td>"
|
||||
html << "</tr>"
|
||||
end
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
<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>
|
||||
user signed Today
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
|
||||
@ -76,8 +76,8 @@
|
||||
<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>
|
||||
Node added Today
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
|
||||
@ -126,7 +126,7 @@
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div class="col-md-12 col-sm-12 col-xs-12" id="file_manager_div">
|
||||
<%= file_manager_table @current_dir %>
|
||||
<%= raw file_manager_table %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,107 +259,30 @@
|
||||
<!-- /node status -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /page content -->
|
||||
|
||||
<!-- File manager functions -->
|
||||
<!-- on load -->
|
||||
<script>
|
||||
$(document).on("click", "#file_manager_div .chdir", function(){
|
||||
var file_name = $(this).text().trim();
|
||||
var current_dir = $("#file_manager_div span").text();
|
||||
var next_dir = current_dir + "/" + file_name;
|
||||
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/application/chdir",
|
||||
data: { next_dir : next_dir },
|
||||
success : function(result){
|
||||
$("#current_dir").val(next_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
|
||||
$('#datatable').dataTable( {"bSort": false});
|
||||
|
||||
// disk usage
|
||||
$("disk_usage_div").empty();
|
||||
$("disk_usage_div").append("<%= disk_usage_table %>");
|
||||
draw_chart();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(document).on("click", "#file_manager_div .chupper", function(){
|
||||
var current_dir = $("#file_manager_div .chupper span").text();
|
||||
if(current_dir == "/") return;
|
||||
var lastindex = current_dir.lastIndexOf("/");
|
||||
if(lastindex == 0) lastindex++;
|
||||
var next_dir = current_dir.substring(0, lastindex);
|
||||
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/application/chdir",
|
||||
data: { next_dir : next_dir },
|
||||
success : function(result){
|
||||
$("#current_dir").val(next_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
|
||||
$('#datatable').dataTable( {"bSort": false});
|
||||
|
||||
// disk usage
|
||||
$("disk_usage_div").empty();
|
||||
$("disk_usage_div").append("<%= disk_usage_table %>");
|
||||
draw_chart();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(document).on("click", "#file_manager_div .rmdir", function(){
|
||||
var file_name = $(this).text();
|
||||
var current_dir = $("#file_manager_div .chupper span").text();
|
||||
var target = current_dir + "/" + file_name;
|
||||
if(confirm("Are you sure you want to delete '"+ file_name +"' ?")) {
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/application/delete",
|
||||
data: { target : target },
|
||||
success : function(result){
|
||||
$("#current_dir").val(current_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
|
||||
$('#datatable').dataTable( {"bSort": false});
|
||||
|
||||
// disk usage
|
||||
$("disk_usage_div").empty();
|
||||
$("disk_usage_div").append("<%= disk_usage_table %>");
|
||||
draw_chart();
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Doughnut Chart -->
|
||||
<script>
|
||||
function draw_chart() {
|
||||
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 = [];
|
||||
|
||||
<% (get_du(@current_dir)).each_with_index do |t, index| %>
|
||||
labels.push("<%= t['file_name'] %>");
|
||||
data.push("<%= t['usage'] %>");
|
||||
backgroundColor.push(colors[<%= index % 5 %>]);
|
||||
hoverBackgroundColor.push(colors[<%= index % 5 %>]);
|
||||
<% end %>
|
||||
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("canvas1"), {
|
||||
new Chart(document.getElementById("disk_usage_canvas"), {
|
||||
type: 'doughnut',
|
||||
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
||||
data: {
|
||||
@ -372,14 +295,117 @@ function draw_chart() {
|
||||
},
|
||||
options: options
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<!-- /Doughnut Chart -->
|
||||
}
|
||||
|
||||
<!-- On document ready -->
|
||||
<script>
|
||||
$('document').ready(function() {
|
||||
$('#datatable').dataTable( {"bSort": false});
|
||||
draw_chart();
|
||||
});
|
||||
$(document).ready(function() {
|
||||
$('#file_manager_table').dataTable( {"bSort": false});
|
||||
|
||||
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_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: "/application/chdir",
|
||||
data: { next_dir : next_dir },
|
||||
success : function(result){
|
||||
$("#current_dir").val(next_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append(result.file_manager_table);
|
||||
$("#disk_usage_div").empty();
|
||||
$("#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: "/application/chdir",
|
||||
data: { next_dir : next_dir },
|
||||
success : function(result){
|
||||
$("#current_dir").val(next_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append(result.file_manager_table);
|
||||
$("#disk_usage_div").empty();
|
||||
$("#disk_usage_div").append(result.disk_usage_table);
|
||||
|
||||
$('#file_manager_table').dataTable( {"bSort": false});
|
||||
draw_chart(result.du);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(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: "/application/rmdir",
|
||||
data: { target : target },
|
||||
success : function(result){
|
||||
$("#current_dir").val(current_dir);
|
||||
$("#file_manager_div").empty();
|
||||
$("#file_manager_div").append(result.file_manager_table);
|
||||
$("#disk_usage_div").empty();
|
||||
$("#disk_usage_div").append(result.disk_usage_table);
|
||||
|
||||
$('#file_manager_table').dataTable( {"bSort": false});
|
||||
draw_chart(result.du);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user