gluster-web-interface/app/views/web/home/index.html.erb

381 lines
14 KiB
Plaintext

<!-- create overlay page -->
<div id="popup_mkdir" class="overlay">
<div class="popup">
<h2> Make Directory </h2>
<a class="close" href="#">&times;</a>
<form id="form_make_directory" data-parsley-validate class="form-horizontal form-label-left" action="/home/mkdir" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="current_dir">Current Directory <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="current_dir" required="required" class="form-control col-md-7 col-xs-12" name="current_dir" value="<%= @current_dir %>" readonly/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="directory-name">Directory Name<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="directory-name" required="required" class="form-control col-md-7 col-xs-12" name="directory_name" placeholder="Directory name"/>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- page content -->
<div class="right_col" role="main">
<div class="page-title">
</div>
<div class="clearfix"></div>
<!-- top tiles -->
<% users = User.all %>
<% nodes = ssh_nodes %>
<% volumes = ssh_volume_info %>
<% today_user = User.where(:last_sign_in_at => Date.today..Date.tomorrow) %>
<% today_node = Node.where(:created_at => Date.today..Date.tomorrow) %>
<div class="row tile_count">
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-clock-o"></i> Current signed in</span>
<div class="count"><%= current_user.current_sign_in_at.strftime("%a, %H:%M") %></div>
<span class="count_bottom"> From <i class="blue"><%= current_user.current_sign_in_ip %></i></span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-clock-o"></i> Last signed in</span>
<div class="count"><%= current_user.last_sign_in_at.strftime("%a, %H:%M") %></div>
<span class="count_bottom"> From <i class="red"><%= current_user.last_sign_in_ip %></i></span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Members</span>
<div class="count"><%= users.nil? ? 0 : users.length %></div>
<span class="count_bottom">
<i class="green"><%= today_user.nil? ? 0 : today_user.length %></i>
user signed Today
</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-cubes"></i> Total Nodes</span>
<div class="count"><%= nodes.nil? ? 0 : nodes.length %></div>
<span class="count_bottom">
<i class="green"><%= today_node.nil? ? 0 : today_node.length %></i>
Node added Today
</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-database"></i> Total volumes</span>
<div class="count"><%= volumes.nil? ? 0 : volumes.length %></div>
<span class="count_bottom">
<i class="blue"><%= volumes.count{|x| x['Status'].eql? " Started"} %></i> started /
<i class="green"><%= volumes.count{|x| x['Mount State'].eql? "mounted"} %></i> mounted
</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-6 col-xs-6 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
<div class="count"><%= users.sum("sign_in_count") %></div>
<span class="count_bottom"><i class="green"><%= today_user.sum("sign_in_count") %></i> connected today</span>
</div>
</div>
</div>
<!-- /top tiles -->
<!-- first row -->
<div class="row">
<!-- file manager -->
<div class="col-md-8 col-sm-8 col-xs-12">
<div id="pagecontent" class="panel panel-body">
<div class="x_title" id="file_manager_title_div">
<h2 style="width:130px">File Manager</h2>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" id="file_manager_div">
<%= raw html_file_manager_table %>
</div>
</div>
</div>
</div>
<!-- /file manager -->
<!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="panel panel-body">
<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 html_disk_usage_table %>
</div>
</div>
</div>
<!-- /disk usage -->
</div>
<!-- /first row -->
<!-- second row -->
<div class ="row">
<!-- node status -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Nodes Status</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 tile fixed_height_160" style="overflow-y:auto;">
<% if nodes.length != 0 %>
<div class="widget_summary">
<% ping = ((nodes.select{ |node| node["ping"].eql? "true" }.length.to_f / nodes.length.to_f) * 100).to_i %>
<div class="w_left w_25">
<span>ping</span>
</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: <%= ping %>%;">
</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 class="widget_summary">
<% ssh = ((nodes.select{ |node| node["ssh"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
<div class="w_left w_25">
<span>ssh</span>
</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 class="w_right w_20">
<span><%= nodes.select{ |node| node["ssh"].eql? "on" }.length %> / <%= nodes.length %></span>
</div>
<div class="clearfix"></div>
</div>
<div class="widget_summary">
<% gluster = ((nodes.select{ |node| node["gluster"].eql? "on" }.length.to_f / nodes.length.to_f) * 100).to_i %>
<div class="w_left w_25">
<span>gluster operation</span>
</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 class="w_right w_20">
<span><%= nodes.select{ |node| node["gluster"].eql? "on" }.length %> / <%= nodes.length %></span>
</div>
<div class="clearfix"></div>
</div>
<% else %>
<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8 cent-align">
<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>
<% end %>
</div>
</div>
<div class="x_panel">
<div class="x_title">
<h2>Volumes Status</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 tile fixed_height_160" style="overflow-y:auto;">
<% if volumes.length != 0 %>
<% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %>
<% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %>
<div class="widget_summary">
<div class="w_left w_25">
<span>started</span>
</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: <%= start %>%;">
</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 class="widget_summary">
<div class="w_left w_25">
<span>mounted</span>
</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 class="w_right w_20">
<span><%= volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length %> / <%= volumes.length %></span>
</div>
<div class="clearfix"></div>
</div>
<% else %>
<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
<div class="alert alert-warning" 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>
<% end %>
</div>
</div>
</div>
<!-- /node status -->
<!-- node list -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Nodes 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>
<div class="x_content fixed_height_320" style="overflow-y:auto;">
<ul class="list-unstyled top_profiles">
<% if nodes.length != 0 %>
<% nodes.each do |node| %>
<li class="media event">
<% color = ((node["ping"].eql? "true") ? ((node["gluster"].eql? "on" and node["ssh"].eql? "on") ? "green" : "aero") : "red")%>
<a class="pull-left border-<%= color %> profile_thumb">
<i class="fa fa-cube <%= color %>"></i>
</a>
<div class="media-body">
<a class="title" onclick="loading();" href="/node/detail/<%= node["id"] %>"><%= node["host_name"] %></a>
<p><strong><%= node["host_ip"] %> </strong> <%= node["user_name"] %> </p>
<% if node["gluster"].eql? "on" %>
<p> <small> number of peers: <%= node["number_of_peers"] %></small></p>
<% end %>
</div>
</li>
<% end %>
<% else %>
<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
<div class="alert alert-success" 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>
<% end %>
</ul>
</div>
</div>
</div>
<!-- /node list -->
<!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title" id="disk_file_title_div">
<h2>Mounted usage</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 fixed_height_320" style="overflow-y:auto;" id="disk_file_div">
<% if (volumes.length == 0) or ( (volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length) == 0) %>
<div class="row animated flipInX col-md-8 col-sm-8 col-xs-8">
<div class="alert alert-error" 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 style="display:none;">
<%= raw html_disk_file_table %>
</div>
<% else %>
<%= raw html_disk_file_table %>
<% end %>
</div>
</div>
</div>
<!-- /disk usage -->
</div>
<!-- /second row -->