Add volume status to home index

app/helpers/home_helper.rb

@@ -96,6 +96,7 @@ module HomeHelper
 
     def html_disk_file_table(dir = @current_dir, id = "disk_file_table")
         html = String.new
+        html << "<div class='fixed_height_320' style='overflow-y:auto;'>"
         html << "<table id='#{id}' class='' style='width:100%'>"
         html << "<tr>"
         html << "<th style='width:37%;'>"
@@ -119,6 +120,8 @@ module HomeHelper
         html << "<tbody>"
 
         get_df.each_with_index do |file, index|
+            # show mounted files only
+
             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'>"
@@ -128,7 +131,7 @@ module HomeHelper
             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 << file["Use%"]
             html << "</p></div>"
             html << "</td></tr>"
         end
@@ -137,6 +140,7 @@ module HomeHelper
         html << "</table>"
         html << "</td></tr>"
         html << "</table>"
+        html << "</div>"
         return html
     end
 end

app/views/home/index.html.erb

@@ -133,6 +133,7 @@
 	</div>
 
 	<% nodes = ssh_nodes %>
+	<% volumes = ssh_volume_info %>
 	<div class ="row">
 		<!-- node status -->
 		<div class="col-md-4 col-sm-4 col-xs-12">
@@ -154,7 +155,7 @@
 					</ul>
 					<div class="clearfix"></div>
 				</div>
-				<div class="x_content tile fixed_height_200" style="overflow-y:auto;">
+				<div class="x_content tile fixed_height_160" style="overflow-y:auto;">
 					<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">
@@ -208,6 +209,62 @@
 					</div>
 				</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;">
+					<div class="widget_summary">
+						<% start = ((volumes.select{ |volume| volume["Status"].eql? " Started" }.length.to_f / volumes.length.to_f) * 100).to_i %>
+						<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">
+						<% mount = ((volumes.select{ |volume| volume["Mount State"].eql? "mounted" }.length.to_f / volumes.length.to_f) * 100).to_i %>
+						<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>
+				</div>
+			</div>
 		</div>
 		<!-- /node status -->
 
@@ -231,7 +288,7 @@
 					</ul>
 					<div class="clearfix"></div>
 				</div>
-				<div class="x_content fixed_height_200" style="overflow-y:auto;">
+				<div class="x_content fixed_height_320" style="overflow-y:auto;">
 					<ul class="list-unstyled top_profiles" >
 						<% nodes.each do |node| %>
 	                        <li class="media event">
@@ -245,10 +302,10 @@
 		                          </a>
 		                      <% end %>
 	                          <div class="media-body">
-	                            <a class="title" href="#"><%= node["host_name"] %></a>
+	                            <a class="title" 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> <%= node["number_of_peers"] %></small></p>
+	                            	<p> <small> number of peers: <%= node["number_of_peers"] %></small></p>
 	                            <% end %>
 	                          </div>
 	                        </li>
@@ -261,11 +318,25 @@
 
 		<!-- disk usage -->
 		<div class="col-md-4 col-sm-4 col-xs-12">
-			<div class="panel panel-body">
+			<div class="x_panel">
 				<div class="x_title" id="disk_file_title_div">
-					<h2 style="width:130px">Disk usage</h2>
+					<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="row" id="disk_file_div">
+				<div class="x_content tile" id="disk_file_div">
 					<%= raw html_disk_file_table %>
 				</div>
 			</div>