From 8ab1a5f753e037d631d1508aef3320963d62e339 Mon Sep 17 00:00:00 2001
From: manson <manson@rulingcom.com>
Date: Thu, 17 Jul 2014 17:40:54 +0800
Subject: [PATCH] Fix RWD for dashboard

---
 .../admin/dashboards/_server_loading.erb      | 115 ++++++++++--------
 1 file changed, 66 insertions(+), 49 deletions(-)

diff --git a/app/views/admin/dashboards/_server_loading.erb b/app/views/admin/dashboards/_server_loading.erb
index bc1f74c..0bdc090 100644
--- a/app/views/admin/dashboards/_server_loading.erb
+++ b/app/views/admin/dashboards/_server_loading.erb
@@ -6,69 +6,86 @@
     </h2>
 </div>
 <div class="box-content" style='overflow: hidden; text-align:center;'>
-  <div style="min-width: 543px;">
-    <div id="cpu_usage" class="usages pull-left " style=""></div>
-    <div id="mem_usage" class="usages"  style=""></div>
-    <div id="disk_usage" class="usages pull-right" style=""></div>
+  <div style="row-fluid">
+    <div id="cpu_usage" class="usages pull-left span4" style=""></div>
+    <div id="mem_usage" class="usages span4"  style=""></div>
+    <div id="disk_usage" class="usages pull-right span4" style=""></div>
   </div>
 </div>
 <style type="text/css">
   .usages{
-    width:180px; 
-    height:144px; 
-    display: inline-block;
   }
 </style>
 <script type="text/javascript">
 var Gages = { 'CPU':{
-                          'JustGage': null,
-                          'container': 'cpu_usage',
-                          'title': 'CPU Usage',
-                          'fn': 'get_cpu_usage',
-                          'update_interval': 2000
-                        },
-                        'Mem':{
-                          'JustGage': null,
-                          'container': 'mem_usage',
-                          'title': 'Memory Usage',
-                          'fn': 'get_mem_usage',
-                          'update_interval': 30000
-                        },
-                        'Disk':{
-                          'JustGage': null,
-                          'container': 'disk_usage',
-                          'title': 'Disk Usage',
-                          'fn': 'get_disk_usage',
-                          'update_interval': 180000
-                        }
-                      };
+              'JustGage': null,
+              'container': 'cpu_usage',
+              'title': 'CPU Usage',
+              'fn': 'get_cpu_usage',
+              'update_interval': 2000,
+              'initialized': false
+            },
+            'Mem':{
+              'JustGage': null,
+              'container': 'mem_usage',
+              'title': 'Memory Usage',
+              'fn': 'get_mem_usage',
+              'update_interval': 30000,
+              'initialized': false
+            },
+            'Disk':{
+              'JustGage': null,
+              'container': 'disk_usage',
+              'title': 'Disk Usage',
+              'fn': 'get_disk_usage',
+              'update_interval': 180000,
+              'initialized': false
+            }
+          };
 
 $(function () {
-    $.each(Gages,function(id,Gage){
-      Gage['JustGage'] = new JustGage({
-          id: Gage['container'], 
-          value: 0, 
-          min: 0,
-          max: 100,
-          title: Gage['title'],
-          shadowVerticalOffset: 10,
-          levelColors: ['#39D824','#FFC33F','#F51F1F'],
-          titleFontColor: '#666',
-          valueFontColor: '#666',
-          labelFontColor: '#666',
-          label: '%',
-          refreshAnimationTime: 800
-      });
+  initialize_usage();
 
-       update_usage(Gage);
-    });
+  $(window).resize(function() {
+    $("#cpu_usage").html("");
+    $("#mem_usage").html("");
+    $("#disk_usage").html("");
+    initialize_usage();
+  });
 });
 
-function update_usage(Gage){
-  $.get('/admin/dashboards/'+Gage['fn'],function(usage){
-    Gage['JustGage'].refresh(parseInt(usage));
-    setTimeout(function(){update_usage(Gage);},Gage['update_interval']);
+function initialize_usage(){
+  var h = parseInt($('#server_loading').width()/3*0.75);
+  $.each($(".usages"),function(){$(this).height(h);});
+
+  $.each(Gages,function(id,Gage){
+    Gage['JustGage'] = new JustGage({
+        id: Gage['container'], 
+        value: 0, 
+        min: 0,
+        max: 100,
+        title: Gage['title'],
+        showInnerShadow: false,
+        shadowVerticalOffset: 10,
+        levelColors: ['#39D824','#FFC33F','#F51F1F'],
+        titleFontColor: '#666',
+        valueFontColor: '#666',
+        labelFontColor: '#666',
+        label: '%',
+        refreshAnimationTime: 800
+    });
+    update_usage(Gage);
   });
 }
 
+function update_usage(Gage, Loop){
+  $.get('/admin/dashboards/'+Gage['fn'],function(usage){
+    Gage['JustGage'].refresh(parseInt(usage));
+  });
+  if(!Gage['initialized'] || Loop){
+    setTimeout(function(){update_usage(Gage,true);},Gage['update_interval']);
+    Gage['initialized'] = true;
+  }
+}
+
 </script>
\ No newline at end of file