dashboard: dynamic node dashboard panel

circle/dashboard/templates/dashboard/index-nodes.html

@@ -3,8 +3,8 @@
   <div class="panel-heading">
   <div class="panel-heading">
     <div class="pull-right toolbar">
     <div class="pull-right toolbar">
       <div class="btn-group">
       <div class="btn-group">
-        <a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
+        <a href="#node-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
+        <a href="#node-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
       </div>
       </div>
       <span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.  "><i class="icon-info-sign"></i></span>
       <span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.  "><i class="icon-info-sign"></i></span>
     </div>
     </div>
@@ -12,35 +12,32 @@
       <i class="icon-sitemap"></i> {% trans "Compute nodes" %}
       <i class="icon-sitemap"></i> {% trans "Compute nodes" %}
     </h3>
     </h3>
   </div>
   </div>
-  <div class="panel-body" id="vm-graph-view" style="">
+  <div class="panel-body" id="node-graph-view" style="">
     <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="68"></p>
     <p class="pull-right">  <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="68"></p>
     <p><span class="big"><big>13</big> running </span>
     <p><span class="big"><big>13</big> running </span>
     + <big>3</big> off + <big>3</big> missing</p>
     + <big>3</big> off + <big>3</big> missing</p>
       <ul class="list-inline">
       <ul class="list-inline">
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> korte</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
-        <li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
-        <li class="label label-warning"><i class="icon-off"></i> szilva</li>
-        <li class="label label-warning"><i class="icon-off"></i> korte</li>
-        <li class="label label-warning"><i class="icon-off"></i> korte</li>
-        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
-        <li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
-        <li class="label label-danger"><i class="icon-question"></i> szilva</li>
-      </ul>
+   {% for i in nodes %}
+	<li class="label label-success"><i class="icon-{% if i.enabled == True %}play-sign{% else %}pause{% endif %}"></i>{{ i.name }}</li>
+   {% endfor %}
+   </ul>
 
 
     <div class="clearfix"></div>
     <div class="clearfix"></div>
-    <div class="text-right">
-      <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong>  more  </a> 
-    </div>
-  </div>
+ <div class="row">
+	<div class="col-sm-6 col-xs-6 input-group input-group-sm">
+          <input type="text" class="form-control" placeholder="Search..." />
+            <div class="input-group-btn">
+            	<button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
+	    </div>
+        </div>
+        <div class="col-sm-6 text-right">
+         {% if more_nodes > 0 %}
+          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.node-list" %}">
+            <i class="icon-chevron-sign-right"></i> <strong>{{ more_nodes }}</strong>  more
+          </a>
+         {% endif %}
+	<a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> new </a>
+    	</div>
+</div>
+</div>
 </div>
 </div>