From 42286258edd8ac5bdb4cf2342ae866c8ba0755df Mon Sep 17 00:00:00 2001
From: bee0005 <bee0005@naver.com>
Date: Mon, 3 Oct 2016 05:46:58 +0000
Subject: [PATCH 1/3] update

---
 app/controllers/node_controller.rb |   5 +
 app/helpers/application_helper.rb  |   4 +-
 app/views/node/detail.html.erb     | 273 +++++++++++++++++++++++++++++
 app/views/node/index.html.erb      |   4 +-
 config/routes.rb                   |   1 +
 5 files changed, 284 insertions(+), 3 deletions(-)
 create mode 100644 app/views/node/detail.html.erb

diff --git a/app/controllers/node_controller.rb b/app/controllers/node_controller.rb
index b7d5927..81e4657 100644
--- a/app/controllers/node_controller.rb
+++ b/app/controllers/node_controller.rb
@@ -3,6 +3,11 @@ class NodeController < ApplicationController
 
     def index
     end
+    def detail
+        @node_id = params[:node_id]
+        #@detail_node = Node.find(params[:node_id])
+        
+    end
 
     def node_add
         new_node = Node.new
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a92a11a..396882e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -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
             
diff --git a/app/views/node/detail.html.erb b/app/views/node/detail.html.erb
new file mode 100644
index 0000000..2350811
--- /dev/null
+++ b/app/views/node/detail.html.erb
@@ -0,0 +1,273 @@
+<!-- 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)%>
+                            <p><%=node["created_at"]%></p>
+                            <p><%=node["updated_at"]%></p>
+                            <% if node["ping"].eql? "true" %>
+                                <p>True</p>
+                                <p><%=node["ssh"]%></p>
+                                <p><%=node["gluster"]%></p>
+                                <% if node["ssh"].eql?("on") && node["gluster"].eql?("on")%>
+                                    <p><%=node["number_of_peers"]%></p>
+                                <%end%>
+                            <% else %>
+                                <p>False</p>
+                            <% end %>
+                            <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"  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="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>
+                            <% 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>
diff --git a/app/views/node/index.html.erb b/app/views/node/index.html.erb
index 7b73501..5d163c8 100644
--- a/app/views/node/index.html.erb
+++ b/app/views/node/index.html.erb
@@ -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>
diff --git a/config/routes.rb b/config/routes.rb
index fc6160d..41ac06d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -30,6 +30,7 @@ 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/probe' => "node#node_probe"
   post 'node/detach' => "node#node_detach"
 

From f77a6e6a86043bab8383b263ca305ece56b40dbc Mon Sep 17 00:00:00 2001
From: bee0005 <bee0005@naver.com>
Date: Mon, 3 Oct 2016 06:13:30 +0000
Subject: [PATCH 2/3] update

---
 app/controllers/node_controller.rb | 12 +++++-
 app/views/node/detail.html.erb     | 62 ++++++++++++++++++++++--------
 config/routes.rb                   |  1 +
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/app/controllers/node_controller.rb b/app/controllers/node_controller.rb
index 81e4657..c9c7294 100644
--- a/app/controllers/node_controller.rb
+++ b/app/controllers/node_controller.rb
@@ -5,7 +5,17 @@ class NodeController < ApplicationController
     end
     def detail
         @node_id = params[:node_id]
-        #@detail_node = Node.find(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
 
diff --git a/app/views/node/detail.html.erb b/app/views/node/detail.html.erb
index 2350811..2865bda 100644
--- a/app/views/node/detail.html.erb
+++ b/app/views/node/detail.html.erb
@@ -149,19 +149,40 @@
                 <div class="x_content">
                      <% nodes.each do |node| %>
                         <% if (node["id"].to_s).eql?(@node_id.to_s)%>
-                            <p><%=node["created_at"]%></p>
-                            <p><%=node["updated_at"]%></p>
-                            <% if node["ping"].eql? "true" %>
-                                <p>True</p>
-                                <p><%=node["ssh"]%></p>
-                                <p><%=node["gluster"]%></p>
-                                <% if node["ssh"].eql?("on") && node["gluster"].eql?("on")%>
-                                    <p><%=node["number_of_peers"]%></p>
-                                <%end%>
-                            <% else %>
-                                <p>False</p>
-                            <% end %>
-                            <form class="form-horizontal form-label-left" action="/node/add" method="post" novalidate>
+                            <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>
@@ -193,11 +214,22 @@
                                         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-primary">Cancel</button>
-                                        <button type="submit" class="btn btn-success">Add</button>
+                                        <button type="submit" class="btn btn-success">Update</button>
                                     </div>
                                 </div>
                             </form>
diff --git a/config/routes.rb b/config/routes.rb
index 41ac06d..df90872 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -31,6 +31,7 @@ Rails.application.routes.draw do
   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"
 

From a8495913810c955d50c496dbde41e4e5e3345da1 Mon Sep 17 00:00:00 2001
From: minkuk <alsrnr1210@gmail.com>
Date: Mon, 3 Oct 2016 06:14:14 +0000
Subject: [PATCH 3/3] up

---
 .eslintrc                     |  9 +++++++
 app/helpers/home_helper.rb    | 45 ++++++++++++++++++++++++++++++++++-
 app/views/home/index.html.erb | 42 ++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 .eslintrc

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..da73065
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,9 @@
+{
+	"env": {
+		"browser":1
+		},
+
+	"globals":{
+		"angular":1
+		}
+}
diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
index 4595353..b471640 100644
--- a/app/helpers/home_helper.rb
+++ b/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
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 5ee5a21..de2dd14 100644
--- a/app/views/home/index.html.erb
+++ b/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 -->