UniqueSoft/gluster-web-interface
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update dashboard

Browse Source
This commit is contained in:
kyg516 2016-09-29 01:39:22 +09:00
parent e79d9bd5ba
commit fbea26361d
4 changed files with 97 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/helpers/application_helper.rb
View File

@ -52,12 +52,14 @@ module ApplicationHelper
output = `#{command}`.split("\n") output = `#{command}`.split("\n")
output.each do |t| output.each do |t|
begin begin
du_each['size'] = t.split(" ")[0].to_i
du_each['usage'] = t.split(" ")[0].to_f / avail du_each['usage'] = t.split(" ")[0].to_f / avail
du_each['file_name'] = t.split(" ")[1].split("/").last du_each['file_name'] = t.split(" ")[1].split("/").last
du << du_each du << du_each
du_each = Hash.new du_each = Hash.new
rescue rescue
# directory is not connected # directory is not connected
du_each['size'] = 0
du_each['usage'] = 0.0 du_each['usage'] = 0.0
du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0] du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
du << du_each du << du_each
@ -66,11 +68,14 @@ module ApplicationHelper
end end
if du.length == 0 if du.length == 0
du_each['size'] = 0
du_each['usage'] = 1.0 du_each['usage'] = 1.0
du_each['file_name'] = "empty" du_each['file_name'] = "empty"
du << du_each du << du_each
end end
du.sort_by! { |k| k['usage'] }
du.reverse!
return du return du
end end

10
app/helpers/home_helper.rb
View File

@ -63,7 +63,14 @@ module HomeHelper
html << "<tr>" html << "<tr>"
html << "<td><canvas id='#{id}_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>" html << "<td><canvas id='#{id}_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
html << "<td>" html << "<td>"
html << "<table class='tile_info'>" html << "<table id='disk_usage_tile_table' class='tile_info'>"
html << "<thead>"
html << "<tr class='headings'>"
html << "<th></th>"
html << "<th></th>"
html << "</tr>"
html << "</thead>"
html << "<tbody>"
get_du(dir).each_with_index do |file, 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]
@ -80,6 +87,7 @@ module HomeHelper
html << "</td></tr>" html << "</td></tr>"
end end
html << "</tbody>"
html << "</table>" html << "</table>"
html << "</td></tr>" html << "</td></tr>"
html << "</table>" html << "</table>"

187
app/views/home/index.html.erb
View File

@ -106,7 +106,7 @@
<!-- file manager --> <!-- file manager -->
<div class="col-md-8 col-sm-8 col-xs-12"> <div class="col-md-8 col-sm-8 col-xs-12">
<div class="panel panel-body"> <div class="panel panel-body">
<div class="x_title" id="file_manager_filter_div"> <div class="x_title" id="file_manager_title_div">
<h2 style="width:130px">File Manager</h2> <h2 style="width:130px">File Manager</h2>
</div> </div>
<div class="row"> <div class="row">
@ -121,8 +121,8 @@
<!-- disk usage --> <!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12"> <div class="col-md-4 col-sm-4 col-xs-12">
<div class="panel panel-body"> <div class="panel panel-body">
<div class="x_title"> <div class="x_title" id="disk_usage_title_div">
<h4>Disk usage</h4> <h2 style="width:130px">Disk usage</h2>
</div> </div>
<div class="row" id="disk_usage_div"> <div class="row" id="disk_usage_div">
<%= raw disk_usage_table %> <%= raw disk_usage_table %>
@ -247,8 +247,64 @@
</div> </div>
<!-- /page content --> <!-- /page content -->
<!-- on load --> <!-- On ready -->
<script> <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);
})
</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){ function draw_chart(du){
var options = { var options = {
legend: false, legend: false,
@ -263,8 +319,8 @@ function draw_chart(du){
for(var i = 0; i < du.length; i++){ for(var i = 0; i < du.length; i++){
labels.push(du[i]['file_name']); labels.push(du[i]['file_name']);
data.push(du[i]['usage']); data.push(du[i]['usage']);
backgroundColor.push(colors[i % 5]); backgroundColor.push(colors[i % colors.length]);
hoverBackgroundColor.push(colors[i % 5]); hoverBackgroundColor.push(colors[i % colors.length]);
} }
new Chart(document.getElementById("disk_usage_table_canvas"), { new Chart(document.getElementById("disk_usage_table_canvas"), {
@ -281,89 +337,8 @@ function draw_chart(du){
options: options options: options
}); });
} }
$(document).ready(function() {
var table = $('#file_manager_table').dataTable( {
"bSort": false,
initComplete: function(){
$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
'width':'250px'
});
$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
'width':'150px',
'float':'right'
});
$('#file_manager_filter_div').css({
'width':'100%',
'height':'48px',
});
$('#file_manager_filter_div input').css({
'width':'70%',
'height':'70%',
'font-size':'14px',
'padding':'5px'
});
}
});
var table = $('#tile_info').dataTable( {
"bSort": false//,
/*
initComplete: function(){
$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
'width':'250px'
});
$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
'width':'150px',
'float':'right'
});
$('#tile_info_div').css({
'width':'100%',
'height':'48px',
});
$('#file_manager_filter_div input').css({
'width':'70%',
'height':'70%',
'font-size':'14px',
'padding':'5px'
});
}
*/
});
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_table_canvas"), {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: backgroundColor,
hoverBackgroundColor: hoverBackgroundColor
}]
},
options: options
});
})
</script> </script>
<!-- /on load --> <!-- /Datatable functions -->
<!-- File manager functions --> <!-- File manager functions -->
<script> <script>
@ -380,14 +355,12 @@ $(document).on("click", "#file_manager_div .chdir", function(){
data: { next_dir : next_dir }, data: { next_dir : next_dir },
success : function(result){ success : function(result){
$("#current_dir").val(next_dir); $("#current_dir").val(next_dir);
$("#file_manager_div").empty(); $("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
$("#disk_usage_div").empty(); $("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
$("#file_manager_div").append(result.file_manager_table); $("#file_manager_div").empty().append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table); $("#disk_usage_div").empty().append(result.disk_usage_table);
$('#file_manager_table').dataTable( { draw_datatable();
"bSort": false
});
draw_chart(result.du); draw_chart(result.du);
} }
}) })
@ -408,14 +381,12 @@ $(document).on("click", "#file_manager_div .chupper", function(){
data: { next_dir : next_dir }, data: { next_dir : next_dir },
success : function(result){ success : function(result){
$("#current_dir").val(next_dir); $("#current_dir").val(next_dir);
$("#file_manager_div").empty(); $("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
$("#disk_usage_div").empty(); $("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
$("#file_manager_div").append(result.file_manager_table); $("#file_manager_div").empty().append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table); $("#disk_usage_div").empty().append(result.disk_usage_table);
$('#file_manager_table').dataTable( { draw_datatable();
"bSort": false
});
draw_chart(result.du); draw_chart(result.du);
} }
}) })
@ -432,14 +403,12 @@ $(document).on("click", "#file_manager_div .rmdir", function(){
data: { target : target }, data: { target : target },
success : function(result){ success : function(result){
$("#current_dir").val(current_dir); $("#current_dir").val(current_dir);
$("#file_manager_div").empty(); $("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
$("#disk_usage_div").empty(); $("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
$("#file_manager_div").append(result.file_manager_table); $("#file_manager_div").empty().append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table); $("#disk_usage_div").empty().append(result.disk_usage_table);
$('#file_manager_table').dataTable( { draw_datatable();
"bSort": false
});
draw_chart(result.du); draw_chart(result.du);
} }
}) })

4
config/routes.rb
View File

@ -6,18 +6,18 @@ Rails.application.routes.draw do
# You can have the root of your site routed with "root" # You can have the root of your site routed with "root"
root 'home#index' root 'home#index'
post 'application/changeDir' => 'application#checkDir'
get 'index' => 'plainpage#index' get 'index' => 'plainpage#index'
#Home #Home
get 'file_download' => 'home#file_download' get 'file_download' => 'home#file_download'
get 'home/index' => 'home#index' get 'home/index' => 'home#index'
post 'home/chdir' => 'home#chdir'
post 'home/mkdir' => 'home#make_directory' post 'home/mkdir' => 'home#make_directory'
post 'home/delete' => 'home#delete_file' post 'home/delete' => 'home#delete_file'
#Volume #Volume
get 'volume/index' => 'volume#index' get 'volume/index' => 'volume#index'
post 'volume/chdir' => 'volume#chdir'
post 'file_upload/:volume_name' => 'volume#file_upload' post 'file_upload/:volume_name' => 'volume#file_upload'
post 'volume/mount' => "volume#volume_mount" post 'volume/mount' => "volume#volume_mount"
post 'volume/create' => "volume#volume_create" post 'volume/create' => "volume#volume_create"