Update graph and table

This commit is contained in:
kyg516 2016-09-27 12:14:39 +09:00
parent 5685c5ff6e
commit 364c890cd3
4 changed files with 230 additions and 188 deletions

View File

@ -3,6 +3,8 @@ class ApplicationController < ActionController::Base
# For APIs, you may want to use :null_session instead. # For APIs, you may want to use :null_session instead.
# protect_from_forgery with: :exception # protect_from_forgery with: :exception
include ApplicationHelper include ApplicationHelper
include HomeHelper
include VolumeHelper
def require_login def require_login
unless user_signed_in? unless user_signed_in?
@ -36,7 +38,12 @@ class ApplicationController < ActionController::Base
def chdir def chdir
@current_dir = params[:next_dir] @current_dir = params[:next_dir]
puts "current_dir : " + @current_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 end
def rmdir def rmdir

View File

@ -26,6 +26,54 @@ module ApplicationHelper
return df return df
end 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 def volumes
volumes = Array.new volumes = Array.new
volume = Hash.new volume = Hash.new
@ -83,51 +131,4 @@ module ApplicationHelper
return files return files
end 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 end

View File

@ -1,46 +1,54 @@
module HomeHelper module HomeHelper
def get_du(dir) def file_manager_table(dir = @current_dir, id = "file_manager_table", class_option = "table table-striped table-bordered jambo_table")
du = Array.new html = String.new
du_each = Hash.new html << "<table id='#{id}' class='#{class_option}'>"
command = String.new html << "<thead>"
avail = 0.0 html << "<tr class='headings'>"
if dir.eql? "/" html << "<th>Name</th>"
command = "sudo df /" html << "<th>auth</th>"
s = `#{command}`.split("\n")[1].split(" ") html << "<th>Size</th>"
avail = s[2].to_f + s[3].to_f html << "<th>Date</th>"
else html << "</tr>"
command << "sudo du -s #{dir}" html << "</thead>"
begin html << "<tbody id='#{id}_body'>"
avail = `#{command}`.split(" ")[0].to_f html << "<tr>"
rescue html << "<td>"
# some directory is not connected html << "<a class='chupper' style='cursor: pointer'><i class='fa fa-reply'></i></a>"
avail = `#{command}`.split(" ")[1].to_f 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 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 end
command = "" html << "</tbody>"
command << "sudo du -s #{dir}/*" html << "</table>"
puts command return html
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
end end
def disk_usage_table(dir = "/mnt") def disk_usage_table(dir = @current_dir)
html = String.new html = String.new
html << "<table class='' style='width:100%'>" html << "<table class='' style='width:100%'>"
html << "<tr>" html << "<tr>"
@ -53,18 +61,18 @@ module HomeHelper
html << "<p class=''>Usage</p></div>" html << "<p class=''>Usage</p></div>"
html << "</th></tr>" html << "</th></tr>"
html << "<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 << "<td>"
html << "<table class='tile_info'>" 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] color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
html << "<tr><td>" html << "<tr><td>"
html << "<p><i class='fa fa-square #{color}'></i>" html << "<p><i class='fa fa-square #{color}'></i>"
html << t['file_name'] html << file['file_name']
html << "</p></td>" html << "</p></td>"
html << "<td><p>" html << "<td><p>"
html << format("%.2f", t['usage']*100) + "%" html << format("%.2f", file['usage']*100) + "%"
html << "</p></td>" html << "</p></td>"
html << "</tr>" html << "</tr>"
end end

View File

@ -65,8 +65,8 @@
<div class="count"><%= users.nil? ? 0 : users.length %></div> <div class="count"><%= users.nil? ? 0 : users.length %></div>
<span class="count_bottom"> <span class="count_bottom">
<i class="green"><%= today_user.nil? ? 0 : today_user.length %></i> <i class="green"><%= today_user.nil? ? 0 : today_user.length %></i>
user signed Today user signed Today
</span> </span>
</div> </div>
</div> </div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count"> <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> <div class="count"><%= nodes.nil? ? 0 : nodes.length %></div>
<span class="count_bottom"> <span class="count_bottom">
<i class="green"><%= today_node.nil? ? 0 : today_node.length %></i> <i class="green"><%= today_node.nil? ? 0 : today_node.length %></i>
Node added Today Node added Today
</span> </span>
</div> </div>
</div> </div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count"> <div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
@ -126,7 +126,7 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="col-md-12 col-sm-12 col-xs-12" id="file_manager_div"> <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> </div>
</div> </div>
@ -259,107 +259,30 @@
<!-- /node status --> <!-- /node status -->
</div> </div>
</div>
</div> </div>
<!-- /page content --> <!-- /page content -->
<!-- File manager functions --> <!-- on load -->
<script> <script>
$(document).on("click", "#file_manager_div .chdir", function(){ function draw_chart(du){
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() {
var options = { var options = {
legend: false, legend: false,
responsive: false responsive: false
}; };
var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"]; var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
var labels = []; var labels = [];
var data = []; var data = [];
var backgroundColor = []; var backgroundColor = [];
var hoverBackgroundColor = []; var hoverBackgroundColor = [];
<% (get_du(@current_dir)).each_with_index do |t, index| %> for(var i = 0; i < du.length; i++){
labels.push("<%= t['file_name'] %>"); labels.push(du[i]['file_name']);
data.push("<%= t['usage'] %>"); data.push(du[i]['usage']);
backgroundColor.push(colors[<%= index % 5 %>]); backgroundColor.push(colors[i % 5]);
hoverBackgroundColor.push(colors[<%= index % 5 %>]); hoverBackgroundColor.push(colors[i % 5]);
<% end %> }
new Chart(document.getElementById("canvas1"), { new Chart(document.getElementById("disk_usage_canvas"), {
type: 'doughnut', type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: { data: {
@ -372,14 +295,117 @@ function draw_chart() {
}, },
options: options options: options
}); });
}; }
</script>
<!-- /Doughnut Chart -->
<!-- On document ready --> $(document).ready(function() {
<script> $('#file_manager_table').dataTable( {"bSort": false});
$('document').ready(function() {
$('#datatable').dataTable( {"bSort": false}); var options = {
draw_chart(); 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> </script>