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

Update

Browse Source
This commit is contained in:
kyg516 2016-10-03 17:29:08 +09:00
parent f5a11b5485
commit 538f37d4cc
2 changed files with 164 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,57 +156,66 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content tile fixed_height_160" style="overflow-y:auto;"> <div class="x_content tile fixed_height_160" style="overflow-y:auto;">
<div class="widget_summary"> <% if !nodes.nil? %>
<% ping = ((nodes.select{ |node| node["ping"].eql? "true" }.length.to_f / nodes.length.to_f) * 100).to_i %> <div class="widget_summary">
<div class="w_left w_25"> <% ping = ((nodes.select{ |node| node["ping"].eql? "true" }.length.to_f / nodes.length.to_f) * 100).to_i %>
<span>ping</span> <div class="w_left w_25">
</div> <span>ping</span>
<div class="w_center w_55"> </div>
<div class="progress"> <div class="w_center w_55">
<div class="progress-bar bg-green" role="progressbar" <div class="progress">
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ping %>%;"> <div class="progress-bar bg-green" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ping %>%;">
</div>
</div> </div>
</div> </div>
<div class="w_right w_20">
<span><%= nodes.select{ |node| node["ping"].eql? "true" }.length %> / <%= nodes.length %></span>
</div>
<div class="clearfix"></div>
</div> </div>
<div class="w_right w_20"> <div class="widget_summary">
<span><%= nodes.select{ |node| node["ping"].eql? "true" }.length %> / <%= nodes.length %></span> <% ssh = ((nodes.select{ |node| node["ssh"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
</div> <div class="w_left w_25">
<div class="clearfix"></div> <span>ssh</span>
</div> </div>
<div class="widget_summary"> <div class="w_center w_55">
<% ssh = ((nodes.select{ |node| node["ssh"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %> <div class="progress">
<div class="w_left w_25"> <div class="progress-bar bg-green" role="progressbar"
<span>ssh</span> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ssh %>%;">
</div> </div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= ssh %>%;">
</div> </div>
</div> </div>
<div class="w_right w_20">
<span><%= nodes.select{ |node| node["ssh"].eql? "on" }.length %> / <%= nodes.length %></span>
</div>
<div class="clearfix"></div>
</div> </div>
<div class="w_right w_20"> <div class="widget_summary">
<span><%= nodes.select{ |node| node["ssh"].eql? "on" }.length %> / <%= nodes.length %></span> <% gluster = ((nodes.select{ |node| node["gluster"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
</div> <div class="w_left w_25">
<div class="clearfix"></div> <span>gluster operation</span>
</div> </div>
<div class="widget_summary"> <div class="w_center w_55">
<% gluster = ((nodes.select{ |node| node["gluster"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %> <div class="progress">
<div class="w_left w_25"> <div class="progress-bar bg-green" role="progressbar"
<span>gluster operation</span> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= gluster %>%;">
</div> </div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= gluster %>%;">
</div> </div>
</div> </div>
<div class="w_right w_20">
<span><%= nodes.select{ |node| node["gluster"].eql? "on" }.length %> / <%= nodes.length %></span>
</div>
<div class="clearfix"></div>
</div> </div>
<div class="w_right w_20"> <% else %>
<span><%= nodes.select{ |node| node["gluster"].eql? "on" }.length %> / <%= nodes.length %></span> <div class="row animated flipInX col-md-6 col-sm-9 col-xs-12">
<div class="alert alert-info" role="alert">
<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
<span class="glyphicon-class">You don't have a node. Please add nodes to do something in this page.</span>
</div>
</div> </div>
<div class="clearfix"></div> <% end %>
</div>
</div> </div>
</div> </div>
@ -229,40 +238,49 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content tile fixed_height_160" style="overflow-y:auto;"> <div class="x_content tile fixed_height_160" style="overflow-y:auto;">
<div class="widget_summary"> <% if !volumes.nil? %>
<% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %> <div class="widget_summary">
<div class="w_left w_25"> <% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %>
<span>started</span> <div class="w_left w_25">
</div> <span>started</span>
<div class="w_center w_55"> </div>
<div class="progress"> <div class="w_center w_55">
<div class="progress-bar bg-green" role="progressbar" <div class="progress">
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= start %>%;"> <div class="progress-bar bg-green" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= start %>%;">
</div>
</div> </div>
</div> </div>
<div class="w_right w_20">
<span><%= volumes.select{ |volume| volume["Status"].eql? " Started" }.length %> / <%= volumes.length %></span>
</div>
<div class="clearfix"></div>
</div> </div>
<div class="w_right w_20"> <div class="widget_summary">
<span><%= volumes.select{ |volume| volume["Status"].eql? " Started" }.length %> / <%= volumes.length %></span> <% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %>
</div> <div class="w_left w_25">
<div class="clearfix"></div> <span>mounted</span>
</div> </div>
<div class="widget_summary"> <div class="w_center w_55">
<% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %> <div class="progress">
<div class="w_left w_25"> <div class="progress-bar bg-green" role="progressbar"
<span>mounted</span> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= mount %>%;">
</div> </div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <%= mount %>%;">
</div> </div>
</div> </div>
<div class="w_right w_20">
<span><%= volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length %> / <%= volumes.length %></span>
</div>
<div class="clearfix"></div>
</div> </div>
<div class="w_right w_20"> <% else %>
<span><%= volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length %> / <%= volumes.length %></span> <div class="row animated flipInX col-md-6 col-sm-9 col-xs-12">
<div class="alert alert-info" role="alert">
<span class="glyphicon glyphicon-bell" area-hidden="true"></span>
<span class="glyphicon-class">You don't have a volume. Please add volumes to do something in this page.</span>
</div>
</div> </div>
<div class="clearfix"></div> <% end %>
</div>
</div> </div>
</div> </div>
</div> </div>

79
app/views/layouts/application.html.erb
View File

@ -2,13 +2,90 @@
<html> <html>
<head> <head>
<title><%= content_for?(:title) ? yield(:title) : "gluster-web" %> </title> <title><%= content_for?(:title) ? yield(:title) : "gluster-web" %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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,
responsive: false
};
var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
var labels = [];
var data = [];
var backgroundColor = [];
var hoverBackgroundColor = [];
for(var i = 0; i < du.length; i++){
labels.push(du[i]['file_name']);
data.push(du[i]['usage']);
backgroundColor.push(colors[i % colors.length]);
hoverBackgroundColor.push(colors[i % colors.length]);
}
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>
<!-- /Datatable functions -->
</head> </head>
<script> <script>
function loading(){ function loading(){