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

7
app/helpers/application_helper.rb
View File

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

14
app/helpers/home_helper.rb
View File

@ -14,8 +14,8 @@ module HomeHelper
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='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>"
@ -63,7 +63,14 @@ module HomeHelper
html << "<tr>"
html << "<td><canvas id='#{id}_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></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|
color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
@ -80,6 +87,7 @@ module HomeHelper
html << "</td></tr>"
end
html << "</tbody>"
html << "</table>"
html << "</td></tr>"
html << "</table>"

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

@ -106,7 +106,7 @@
<!-- file manager -->
<div class="col-md-8 col-sm-8 col-xs-12">
<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>
</div>
<div class="row">
@ -121,8 +121,8 @@
<!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="panel panel-body">
<div class="x_title">
<h4>Disk usage</h4>
<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 disk_usage_table %>
@ -247,8 +247,64 @@
</div>
<!-- /page content -->
<!-- on load -->
<!-- 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);
})
</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,
@ -263,8 +319,8 @@ function draw_chart(du){
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]);
backgroundColor.push(colors[i % colors.length]);
hoverBackgroundColor.push(colors[i % colors.length]);
}
new Chart(document.getElementById("disk_usage_table_canvas"), {
@ -281,89 +337,8 @@ function draw_chart(du){
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>
<!-- /on load -->
<!-- /Datatable functions -->
<!-- File manager functions -->
<script>
@ -380,14 +355,12 @@ $(document).on("click", "#file_manager_div .chdir", function(){
data: { next_dir : next_dir },
success : function(result){
$("#current_dir").val(next_dir);
$("#file_manager_div").empty();
$("#disk_usage_div").empty();
$("#file_manager_div").append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table);
$("#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);
$('#file_manager_table').dataTable( {
"bSort": false
});
draw_datatable();
draw_chart(result.du);
}
})
@ -408,14 +381,12 @@ $(document).on("click", "#file_manager_div .chupper", function(){
data: { next_dir : next_dir },
success : function(result){
$("#current_dir").val(next_dir);
$("#file_manager_div").empty();
$("#disk_usage_div").empty();
$("#file_manager_div").append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table);
$("#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);
$('#file_manager_table').dataTable( {
"bSort": false
});
draw_datatable();
draw_chart(result.du);
}
})
@ -432,14 +403,12 @@ $(document).on("click", "#file_manager_div .rmdir", function(){
data: { target : target },
success : function(result){
$("#current_dir").val(current_dir);
$("#file_manager_div").empty();
$("#disk_usage_div").empty();
$("#file_manager_div").append(result.file_manager_table);
$("#disk_usage_div").append(result.disk_usage_table);
$("#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);
$('#file_manager_table').dataTable( {
"bSort": false
});
draw_datatable();
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"
root 'home#index'
post 'application/changeDir' => 'application#checkDir'
get 'index' => 'plainpage#index'
#Home
get 'file_download' => 'home#file_download'
get 'home/index' => 'home#index'
post 'home/chdir' => 'home#chdir'
post 'home/mkdir' => 'home#make_directory'
post 'home/delete' => 'home#delete_file'
#Volume
get 'volume/index' => 'volume#index'
post 'volume/chdir' => 'volume#chdir'
post 'file_upload/:volume_name' => 'volume#file_upload'
post 'volume/mount' => "volume#volume_mount"
post 'volume/create' => "volume#volume_create"