[Kimchi-devel] [PATCH v2 1/4] Update the guest.html.tmpl to use the new circleGauge widget

[Adam King]

Updated the template to use the new circle gauge widget.
Also retooled the template so that insertions can be handled by DOM
manipulation rather than string manipulation.

Signed-off-by: Adam King <rak at linux.vnet.ibm.com>
---
 ui/css/theme-default/list.css | 27 +++++++++++++++++++++++++--
 ui/pages/guest.html.tmpl      | 41 +++++++++++++++++++++--------------------
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/ui/css/theme-default/list.css b/ui/css/theme-default/list.css
index c435261..57ad610 100644
--- a/ui/css/theme-default/list.css
+++ b/ui/css/theme-default/list.css
@@ -92,17 +92,38 @@
 
 .list-vm .tile .imgload {
     display: none;
-    max-height: 110px;
+}
+
+.list-vm .tile.shutoff .imgactive {
+max-height: 110px;
+    max-width: 170px;
+    height: auto;
+    width: auto;
+    display:inline;
+    border: none;
+}
+
+.list-vm .tile.running .imgactive{
+	max-height: 110px;
     max-width: 170px;
     height: auto;
     width: auto;
+    display:inline;
+    border: none;
+    cursor: crosshair;
+    cursor: -moz-zoom-in;
+    cursor: -webkit-zoom-in;
 }
 
-.list-vm .tile .imgactive {
+.list-vm .tile .overlay {
     max-height: 110px;
     max-width: 170px;
     height: auto;
     width: auto;
+    position:absolute;
+	bottom:0;
+	right:0;
+	display:none;
 }
 
 .guest-type {
@@ -221,10 +242,12 @@
     margin: 10px;
 }
 
+
 .list-vm .tile:not(.shutoff) img {
     box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff;
 }
 
+
 .list-vm .shutoff {
     box-shadow: none !important;
 }
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index 6d83d57..cbf76ca 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -5,6 +5,7 @@
  *
  * Authors:
  *  Hongliang Wang <hlwanghl at cn.ibm.com>
+ *  Adam King <rak at us.ibm.com>
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,43 +25,43 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
 #silent _ = t.gettext
 #silent _t = t.gettext
-        <li id="{name}">
+        <li name="guest" class="guest">
             <div class="sortable guest-type">
                 <div class="guest-general">
                     <h2 class="title" title="{name}">{name}</h2>
                 </div>
             </div>
-            <div class="sortable guest-cpu">
-                <div class="circle" data-value="{stats}"></div>
+            <div name="cpu_utilization" class="sortable">
+                <div class="circleGauge"></div>
             </div>
-            <div class="sortable guest-network">
-                <div class="circle" data-value="{stats}"></div>
+            <div name="io_throughput" class="sortable">
+                <div class="circleGauge"></div>
                 <div class="subtitle">KB/s</div>
             </div>
-            <div class="sortable guest-storage">
-                <div class="circle" data-value="{stats}"></div>
+            <div name="net_throughput" class="sortable">
+                <div class="circleGauge"></div>
                 <div class="subtitle">KB/s</div>
             </div>
-            <div class="sortable guest-tile">
-                <div class="tile {state}">
-                    <img class="imgactive" alt="" src="{tile-src}">
-                    <img class="imgload" alt="" src="{load-src}">
+            <div name="guest-tile" class="sortable guest-tile">
+                <div class="tile ">
+                    <img class="imgactive" alt="" src="">
+                    <img class="imgload" alt="" src="">
+                    <img class="overlay shutoff-hidden" alt="$_("Start")" src="/images/theme-default/icon-power-down.png" >
                 </div>
             </div>
-            <div class="sortable guest-actions">
+           <div class="sortable guest-actions" name="guest-actions">
                 <div class="top">
-                    <a class="btn vm-reset" data-vmstate="{state}" data-vm="{name}" href="javascript:void(0);" title="$_("Reset")"><span class="icon reset"></span></a>
-                    <a class="btn vm-start" data-vmstate="{state}" data-vm="{name}" href="javascript:void(0);" title="$_("Start")"><span class="icon power-down"></span></a>
-                    <a class="btn vm-stop" data-vmstate="{state}" data-vm="{name}" href="javascript:void(0);" title="$_("Stop")"><span class="icon power-up"></span></a>
+                    <a class="btn shutoff-disabled" name="vm-reset" href="javascript:void(0);" title="$_("Reset")"><span class="icon reset"></span></a>
+                    <a class="btn running-hidden" name="vm-start" href="javascript:void(0);" title="$_("Start")"><span class="icon power-down"></span></a>
+                    <a class="btn shutoff-hidden" name="vm-stop" href="javascript:void(0);" title="$_("Stop")"><span class="icon power-up"></span></a>
                 </div>
                 <div class="bottom">
-                    <div class="btn dropdown popable vm-action" data-vmstate="{state}" data-graphics="{graphics.type}" data-vm="{name}" style="width: 70px">
+                    <div name="actionmenu" class="btn dropdown popable vm-action" style="width: 70px">
                         <span class="text">$_("Actions")</span><span class="arrow"></span>
                         <div class="popover actionsheet right-side" style="width: 250px">
-                            <button class="button-big vm-vnc" data-vm="{name}"><span class="text">VNC</span></button>
-                            <button class="button-big vm-spice" data-vm="{name}"><span class="text">SPICE</span></button>
-                            <button class="button-big vm-edit" data-vm="{name}"><span class="text">$_("Edit")</span></button>
-                            <a class="button-big red vm-delete" data-vm="{name}">$_("Delete")</a>
+                            <button class="button-big shutoff-disabled" name="vm-console" ><span class="text">$_("Console")</span></button>
+                            <button class="button-big running-disabled" name="vm-edit"><span class="text">$_("Edit")</span></button>
+                            <a class="button-big red " name="vm-delete">$_("Delete")</a>
                         </div>
                     </div>
                 </div>
-- 
1.8.1.4