Merge branch 'master' of https://github.com/oss2016summer/gluster-web-interface

.eslintrc

@@ -0,0 +1,9 @@
+{
+	"env": {
+		"browser":1
+		},
+
+	"globals":{
+		"angular":1
+		}
+}

app/helpers/home_helper.rb

@@ -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

app/views/home/index.html.erb

@@ -321,6 +321,48 @@ $(document).ready(function() {
 	<% end %>
 	draw_datatable();
 	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 -->