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
Download Patch File Download Diff File Expand all files Collapse all files

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);
}
})