Merge branch 'master' of https://github.com/oss2016summer/gluster-web-interface
Conflicts: app/views/home/index.html.erb
This commit is contained in:
kyg516
commit
a978c8f0a4
9
.eslintrc
Normal file
9
.eslintrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"env": {
|
||||
"browser":1
|
||||
},
|
||||
|
||||
"globals":{
|
||||
"angular":1
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,21 @@ class NodeController < ApplicationController
|
||||
|
||||
def index
|
||||
end
|
||||
def detail
|
||||
@node_id = params[:node_id]
|
||||
end
|
||||
|
||||
def node_update
|
||||
one_node = Node.find(params[:node_id])
|
||||
one_node.host_name = params[:host_name]
|
||||
one_node.host_ip = params[:host_ip]
|
||||
one_node.user_name = params[:user_name]
|
||||
one_node.user_password = params[:user_password]
|
||||
one_node.save
|
||||
|
||||
redirect_to '/node/detail/' + params[:node_id]
|
||||
|
||||
end
|
||||
|
||||
def node_add
|
||||
new_node = Node.new
|
||||
|
||||
@ -133,7 +133,7 @@ module ApplicationHelper
|
||||
command << "sshpass -p#{node["user_password"]} ssh #{node["user_name"]}@#{node["host_ip"]} gluster peer status"
|
||||
puts command
|
||||
output = `#{command}`.split("\n")
|
||||
|
||||
|
||||
if output[0].include? "Number of Peers"
|
||||
node["ssh"] = "on"
|
||||
node["gluster"] = "on"
|
||||
@ -148,6 +148,8 @@ module ApplicationHelper
|
||||
end
|
||||
end
|
||||
rescue => ex
|
||||
node["ssh"] = "off"
|
||||
node["gluster"] = "off"
|
||||
puts ex
|
||||
end
|
||||
|
||||
|
||||
@ -94,6 +94,49 @@ module HomeHelper
|
||||
return html
|
||||
end
|
||||
|
||||
def html_disk_file_table
|
||||
def html_disk_file_table(dir = @current_dir, id = "disk_file_table")
|
||||
html = String.new
|
||||
html << "<table id='#{id}' class='' style='width:100%'>"
|
||||
html << "<tr>"
|
||||
html << "<th style='width:37%;'>"
|
||||
html << "<p>Chart</p>"
|
||||
html << "</th><th>"
|
||||
html << "<div class='col-lg-7 col-md-7 col-sm-7 col-xs-7'>"
|
||||
html << "<p class=''>Name</p></div>"
|
||||
html << "<div class='col-lg-5 col-md-5 col-sm-5 col-xs-5'>"
|
||||
html << "<p class=''>Usage</p></div>"
|
||||
html << "</th></tr>"
|
||||
html << "<tr>"
|
||||
html << "<td><canvas id='#{id}_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
|
||||
html << "<td>"
|
||||
html << "<table id='disk_file_table' class='tile_info'>"
|
||||
html << "<thead>"
|
||||
html << "<tr class='headings'>"
|
||||
html << "<th></th>"
|
||||
html << "<th></th>"
|
||||
html << "</tr>"
|
||||
html << "</thead>"
|
||||
html << "<tbody>"
|
||||
|
||||
get_df.each_with_index do |file, index|
|
||||
color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
|
||||
html << "<tr><td>"
|
||||
html << "<div class='col-lg-7 col-md-7 col-sm-7 col-xs-7'>"
|
||||
html << "<p><i class='fa fa-square #{color}'></i> "
|
||||
html << file['Filesystem']
|
||||
html << "</p></div>"
|
||||
html << "</td><td>"
|
||||
html << "<div class='col-lg-7 col-md-7 col-sm-7 col-xs-7'>"
|
||||
html << "<p style='float:right'>"
|
||||
html << format((file["Use%"][0..file["Use%"].length - 1])) + "%"
|
||||
html << "</p></div>"
|
||||
html << "</td></tr>"
|
||||
end
|
||||
|
||||
html << "</tbody>"
|
||||
html << "</table>"
|
||||
html << "</td></tr>"
|
||||
html << "</table>"
|
||||
return html
|
||||
end
|
||||
end
|
||||
|
||||
@ -290,7 +290,46 @@ $(document).ready(function() {
|
||||
});
|
||||
<% end %>
|
||||
draw_datatable();
|
||||
draw_chart(du);
|
||||
draw_chart(du);
|
||||
|
||||
var options = {
|
||||
legend: false,
|
||||
responsive: false
|
||||
};
|
||||
var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
|
||||
var labels = [];
|
||||
var data = [];
|
||||
var backgroundColor = [];
|
||||
var hoverBackgroundColor = [];
|
||||
|
||||
var df = [];
|
||||
<% get_df.each_with_index do |df, index| %>
|
||||
df.push({
|
||||
'file_name':"<%= df['Filesystem'] %>",
|
||||
'usage':"<%= (df["Use%"][0..df["Use%"].length - 1]).to_f / 100 %>"
|
||||
});
|
||||
<% end %>
|
||||
|
||||
for(var i = 0; i < df.length; i++){
|
||||
labels.push(df[i]['file_name']);
|
||||
data.push(df[i]['usage']);
|
||||
backgroundColor.push(colors[i % colors.length]);
|
||||
hoverBackgroundColor.push(colors[i % colors.length]);
|
||||
}
|
||||
|
||||
new Chart(document.getElementById("disk_file_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 ready -->
|
||||
|
||||
305
app/views/node/detail.html.erb
Normal file
305
app/views/node/detail.html.erb
Normal file
@ -0,0 +1,305 @@
|
||||
<!-- page content -->
|
||||
<div class="right_col" role="main">
|
||||
<div class="page-title">
|
||||
<div class="title_left"><h3>Node</h3></div>
|
||||
<div class="title_right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2><i class="fa fa-plus-square-o"></i> Add Node</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Settings 1</a>
|
||||
</li>
|
||||
<li><a href="#">Settings 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<form class="form-horizontal form-label-left" action="/node/add" method="post" novalidate>
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Host Name <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="10" data-validate-words="1" name="host_name" placeholder="Host Name" required="required" type="text"
|
||||
data-toggle="tooltip" data-placement="top" title="Put node's representative name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="ip">Host IP <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="ip" class="form-control col-md-7 col-xs-12" data-validate-length-range="10" data-validate-words="1" name="host_ip" placeholder="127.0.0.1" required="required" type="text"
|
||||
data-toggle="tooltip" data-placement="top" title="Put node's ip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">User Name <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="occupation" type="text" name="user_name" placeholder="root" required="required" data-validate-length-range="5,20" class="form-control col-md-7 col-xs-12"
|
||||
data-toggle="tooltip" data-placement="top" title="Put user name for ssh connection. client must have ssh key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">User Password <span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="password" type="password" name="user_password" placeholder="secret" data-validate-length="1,10" class="form-control col-md-7 col-xs-12" required="required"
|
||||
data-toggle="tooltip" data-placement="top" title="Put user password for ssh connection. client must have ssh key">
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="ln_solid"></div>-->
|
||||
<div class="form-group">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<button type="submit" class="btn btn-primary">Cancel</button>
|
||||
<button type="submit" class="btn btn-success">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2><i class="fa fa-align-left"></i> Node List</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Settings 1</a>
|
||||
</li>
|
||||
<li><a href="#">Settings 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<% nodes = ssh_nodes %>
|
||||
<div class="x_content">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ping</th>
|
||||
<th>Status</th>
|
||||
<th>Host Name</th>
|
||||
<th>Host IP</th>
|
||||
<th>User Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% nodes.each do |node| %>
|
||||
<tr>
|
||||
<% if node["ping"].eql? "true" %>
|
||||
<td><i class="fa fa-circle-o green"></i></td>
|
||||
<% else %>
|
||||
<td><i class="fa fa-close red"></i></td>
|
||||
<% end %>
|
||||
<% if node["gluster"].eql? "on" %>
|
||||
<td><i class="fa fa-circle-o green"></i>Attached</td>
|
||||
<% else %>
|
||||
<td><i class="fa fa-close red"></i>Not operational</td>
|
||||
<% end %>
|
||||
<th scope="row"> <a href="/node/detail/<%= node["id"] %>"><%= node["host_name"] %></a></th>
|
||||
<td><%= node["host_ip"] %></td>
|
||||
<td><%= node["user_name"] %></td>
|
||||
<td><a href="/node/delete/<%= node["id"] %>"><i class="fa fa-trash"></i></a></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2><i class="fa fa-info-circle"></i> Node Detail</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Settings 1</a>
|
||||
</li>
|
||||
<li><a href="#">Settings 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<% nodes.each do |node| %>
|
||||
<% if (node["id"].to_s).eql?(@node_id.to_s)%>
|
||||
<form class="form-horizontal form-label-left" action="/node/update" method="post" novalidate>
|
||||
<input type="hidden" name="node_id" value="<%=node["id"].to_s%>"/>
|
||||
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">Ping : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["ping"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
<% if node["ping"].eql? "true" %>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">SSH Connection : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["ssh"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">Gluster Connection : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["gluster"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if node["ssh"].eql?("on") && node["gluster"].eql?("on")%>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">Number of Peers : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["number_of_peers"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
<%end%>
|
||||
<% end %>
|
||||
|
||||
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Host Name <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="name" value="<%=node["host_name"]%>" class="form-control col-md-7 col-xs-12" data-validate-length-range="10" data-validate-words="1" name="host_name" placeholder="Host Name" required="required" type="text"
|
||||
data-toggle="tooltip" data-placement="top" title="Put node's representative name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="ip">Host IP <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="ip" value="<%=node["host_ip"]%>" class="form-control col-md-7 col-xs-12" data-validate-length-range="10" data-validate-words="1" name="host_ip" placeholder="127.0.0.1" required="required" type="text"
|
||||
data-toggle="tooltip" data-placement="top" title="Put node's ip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">User Name <span class="required">*</span>
|
||||
</label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="occupation" value="<%=node["user_name"]%>" type="text" name="user_name" placeholder="root" required="required" data-validate-length-range="5,20" class="form-control col-md-7 col-xs-12"
|
||||
data-toggle="tooltip" data-placement="top" title="Put user name for ssh connection. client must have ssh key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">User Password <span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<input id="password" value="<%=node["user_password"]%>" type="password" name="user_password" placeholder="secret" data-validate-length="1,10" class="form-control col-md-7 col-xs-12" required="required"
|
||||
data-toggle="tooltip" data-placement="top" title="Put user password for ssh connection. client must have ssh key">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">Created Time : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["created_at"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item form-group">
|
||||
<label for="password" class="control-label col-md-3">Updated Time : </label>
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<label class="control-label col-md-7 col-xs-12" ><%=node["updated_at"]%></label>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="ln_solid"></div>-->
|
||||
<div class="form-group">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<button type="submit" class="btn btn-success">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /page content -->
|
||||
<script>
|
||||
$('.probe').change(function() {
|
||||
$(location).attr('href',"#loading");
|
||||
if($(this).is(":checked")) {
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/node/probe",
|
||||
data: { node_id : this.value },
|
||||
success : function(result){
|
||||
$(location).attr('href',"#");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/node/detach",
|
||||
data: { node_id : this.value },
|
||||
success : function(result){
|
||||
$(location).attr('href',"#");
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// initialize the validator function
|
||||
validator.message['date'] = 'not a real date';
|
||||
|
||||
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
|
||||
$('form')
|
||||
.on('blur', 'input[required], input.optional, select.required', validator.checkField)
|
||||
.on('change', 'select.required', validator.checkField)
|
||||
.on('keypress', 'input[required][pattern]', validator.keypress);
|
||||
|
||||
$('.multi.required')
|
||||
.on('keyup blur', 'input', function() {
|
||||
validator.checkField.apply($(this).siblings().last()[0]);
|
||||
});
|
||||
|
||||
$('form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var submit = true;
|
||||
// evaluate the form using generic validaing
|
||||
if (!validator.checkAll($(this))) {
|
||||
submit = false;
|
||||
}
|
||||
|
||||
if (submit)
|
||||
this.submit();
|
||||
return false;
|
||||
});
|
||||
|
||||
/* FOR DEMO ONLY */
|
||||
$('#vfields').change(function() {
|
||||
$('form').toggleClass('mode2');
|
||||
}).prop('checked', false);
|
||||
|
||||
$('#alerts').change(function() {
|
||||
validator.defaults.alerts = (this.checked) ? false : true;
|
||||
if (this.checked)
|
||||
$('form .alert').remove();
|
||||
}).prop('checked', false);
|
||||
</script>
|
||||
@ -104,7 +104,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<% nodes.each do |node| %>
|
||||
<tr>
|
||||
<tr>
|
||||
<% if node["ping"].eql? "true" %>
|
||||
<td><i class="fa fa-circle-o green"></i></td>
|
||||
<% else %>
|
||||
@ -115,7 +115,7 @@
|
||||
<% else %>
|
||||
<td><i class="fa fa-close red"></i>Not operational</td>
|
||||
<% end %>
|
||||
<th scope="row"><%= node["host_name"] %></th>
|
||||
<th scope="row"> <a href="/node/detail/<%= node["id"] %>"><%= node["host_name"] %></a></th>
|
||||
<td><%= node["host_ip"] %></td>
|
||||
<td><%= node["user_name"] %></td>
|
||||
<td><a href="/node/delete/<%= node["id"] %>"><i class="fa fa-trash"></i></a></td>
|
||||
|
||||
@ -30,6 +30,8 @@ Rails.application.routes.draw do
|
||||
get 'node/index' => 'node#index'
|
||||
post 'node/add' => "node#node_add"
|
||||
get 'node/delete/:node_id' => "node#node_delete"
|
||||
get 'node/detail/:node_id' => "node#detail"
|
||||
post 'node/update' => "node#node_update"
|
||||
post 'node/probe' => "node#node_probe"
|
||||
post 'node/detach' => "node#node_detach"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user