webui: pretty stat

one/static/style/base.less

@@ -287,6 +287,7 @@ body > footer {
     box-shadow:0 0 30px rgba(0,0,0,0.4);
     margin:0;
     background-color: white;
+    height: 30px;
 }
 
 #http-error {
@@ -302,8 +303,3 @@ body > footer {
 .irasmu p {
     margin-top: 20px;
 }
-
-.stat {
-    margin: 0 auto;
-    width: 900px;
-}

one/templates/base.html

@@ -73,47 +73,53 @@
         <div class="clear"></div>
     </div>
     <footer>
-        <p>
+        <div>
+            <div style="float: left" id="chart_cpu_div"></div>
             <a href="/sites/legal/">{% trans "Legal notice" %}</a> |
             <a href="/sites/policy/">{% trans "Policy" %}</a> |
             <a href="/sites/help/">{% trans "Help" %}</a> |
             <a href="/sites/support/">{% trans "Support" %}</a>
-        </p>
+            <div style="float: right" id="chart_mem_div"></div>
+        </div>
         {% if cloud_stat %}
-            <style type="text/css">#content{padding-bottom: 150px;}</style>
             <script type="text/javascript">
                 google.setOnLoadCallback(drawChart);
                 function drawChart() {
                     var data_cpu = new google.visualization.DataTable();
                     data_cpu.addColumn('string', 'Topping');
-                    data_cpu.addColumn('number', 'Free');
-                    data_cpu.addColumn('number', 'Allocated');
                     data_cpu.addColumn('number', 'Used');
+                    data_cpu.addColumn('number', 'Allocated');
+                    data_cpu.addColumn('number', 'Free');
                     data_cpu.addRows([
-                        ['CPU %', {{cloud_stat.CPU.FREE_CPU}},{{cloud_stat.CPU.ALLOC_CPU}},{{cloud_stat.CPU.USED_CPU}}],
+                        ['CPU',
+                        {{cloud_stat.CPU.USED_CPU}},
+                        {{cloud_stat.CPU.ALLOC_CPU}},
+                        {{cloud_stat.CPU.FREE_CPU}},]
                     ]);
                     var cpu_options = {
-                        'title':'Cloud CPU usage percent (100/CPU)',
-                        'width':900,
-                        'height':50,
-                        isStacked: true
+                        'width':400,
+                        'height':20,
+                        isStacked: true,
+                        enableInteractivity: false,
+                        colors: ['red', 'orange', 'blue']
                     };
                     var data_mem = new google.visualization.DataTable();
                     data_mem.addColumn('string', 'Topping');
-                    data_mem.addColumn('number', 'Free');
-                    data_mem.addColumn('number', 'Allocated');
                     data_mem.addColumn('number', 'Used');
+                    data_mem.addColumn('number', 'Allocated');
+                    data_mem.addColumn('number', 'Free');
                     data_mem.addRows([
-                        ['Memory in {{cloud_stat.DIMENSION}}',
-                        {{cloud_stat.MEM.FREE_MEM|unlocalize}},
+                        ['RAM',
+                        {{cloud_stat.MEM.USED_MEM|unlocalize}},
                         {{cloud_stat.MEM.ALLOC_MEM|unlocalize}},
-                        {{cloud_stat.MEM.USED_MEM|unlocalize}}],
+                        {{cloud_stat.MEM.FREE_MEM|unlocalize}},]
                     ]);
                     var mem_options = {
-                        'title':'Memory in {{cloud_stat.DIMENSION}}',
-                        'width':900,
-                        'height':50,
-                        isStacked: true
+                        'width':400,
+                        'height':20,
+                        isStacked: true,
+                        enableInteractivity: false,
+                        colors: ['red', 'orange', 'blue']
                     };
                     var chart = new google.visualization.BarChart(document.getElementById('chart_cpu_div'));
                     chart.draw(data_cpu, cpu_options);
@@ -122,14 +128,10 @@
                 }
             </script>
         {% endif %}
-        <div class="stat" id="chart_cpu_div"></div>
-        <div class="stat" id="chart_mem_div"></div>
     </footer>
     <div id="modal" style="display: none">
         <div id="shadow"></div>
-        <div id="modal-container">
-
-        </div>
+        <div id="modal-container"></div>
     </div>
     <script type="text/javascript">
         var _gaq = _gaq || [];