dashboard: add monitoring info to node list

circle/dashboard/tables.py

@@ -76,12 +76,12 @@ class NodeListTable(Table):
 
 
     number_of_VMs = TemplateColumn(
     number_of_VMs = TemplateColumn(
         template_name='dashboard/node-list/column-vm.html',
         template_name='dashboard/node-list/column-vm.html',
-        attrs={'th': {'class': 'node-list-table-admin'}},
+        attrs={'th': {'class': 'node-list-table-thin'}},
     )
     )
 
 
-    admin = TemplateColumn(
-        template_name='dashboard/node-list/column-admin.html',
-        attrs={'th': {'class': 'node-list-table-admin'}},
+    monitor = TemplateColumn(
+        template_name='dashboard/node-list/column-monitor.html',
+        attrs={'th': {'class': 'node-list-table-monitor'}},
     )
     )
 
 
     details = TemplateColumn(
     details = TemplateColumn(

circle/dashboard/templates/dashboard/node-list.html

@@ -57,8 +57,8 @@
     width: 10px;
     width: 10px;
   }
   }
 
 
-  .node-list-table-admin {
-    width: 130px;
+  .node-list-table-monitor {
+    width: 200px;
   }
   }
 </style>
 </style>
 {% endblock %}
 {% endblock %}

circle/dashboard/templates/dashboard/node-list/column-monitor.html

+{%load sizefieldtags %}
+{% load i18n %}
+
+<i class="icon-gears"></i> {% trans "CPU" %}
+ <div class="progress pull-right">
+  <div class="progress-bar progress-bar-success" role="progressbar"
+   aria-valuenow="{{ record.cpu_usage }}" aria-valuemin="0" aria-valuemax="1" style="width: 80%">
+   <span class="progress-bar-text">{{ record.cpu_usage|floatformat:1 }} % </span>
+  </div>
+ </div>
+<br>
+<i class="icon-ticket"></i> {% trans "Memory" %}
+ <div class="progress pull-right">
+  <div class="progress-bar progress-bar-info" role="progressbar"
+          aria-valuenow="{{ record.ram_usage}}" aria-valuemin="0" aria-valuemax="1" >
+   <span class="progress-bar-text"> {% widthratio record.byte_ram_usage 1048576 1 %} MB</span>
+  </div>
+ </div>
+{% block "extra-js" %}
+<script>
+$('.progress-bar').each(function() {
+  var min = $(this).attr('aria-valuemin');
+  var max = $(this).attr('aria-valuemax');
+  var now = $(this).attr('aria-valuenow');
+  var siz = (now-min)*100/(max-min);
+  $(this).css('width', siz+'%');
+});
+</script>
+{% endblock %}
+<style>
+  .progress {
+    position: relative;
+    width: 100px;
+    height: 12px;
+    margin-bottom: 0px;
+    margin-top: 5px;
+  }
+  .progress-bar-text {
+    position: absolute;
+    display: block;
+    width: 100%;
+    color: white;
+    /* outline */
+    text-shadow:  
+      -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;  
+    font-size: 10px;
+  }
+</style>
+
+