[Kimchi-devel] [PATCH 2/3 v2] [Kimchi] Issue #939: [UI] Guest tab is not rendered correctly if guests are not in 'running' or ''shutoff' state

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Thu Sep 1 17:14:05 UTC 2016


From: Samuel Guimarães <sguimaraes943 at gmail.com>

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/css/kimchi.css               | 122 ++++++++++++++++-----------------
 ui/css/src/modules/_guests.scss | 147 ++++++++++++++++++++++------------------
 ui/pages/guest.html.tmpl        |   6 +-
 3 files changed, 146 insertions(+), 129 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 59d96e1..1562fd6 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -525,7 +525,8 @@
   text-align: center;
 }
 
-#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-action, #guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-name {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-action,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-name {
   display: block !important;
 }
 
@@ -752,105 +753,100 @@
   background-color: #7f1c7d;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state {
-  width: 40px;
-  text-align: center;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.running {
+  display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state {
-  font-size: 22px;
-  position: relative;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running .fa {
+  color: #a8d46f;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state span.text-status,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state span.text-status {
-  display: none;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.pmsuspended span.pmsuspended {
+  display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.running {
-  display: block;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.pmsuspended .fa {
+  color: #999;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.starting,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.resetting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.starting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.resetting {
-  display: none;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.nostate span.nostate {
+  display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running .fa,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running .fa {
-  color: #a8d46f;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.nostate .fa {
+  color: #999;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.shutoff {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.crashed span.crashed {
   display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.starting,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.resetting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.starting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.resetting {
-  display: none;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.crashed .fa {
+  color: #999;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.shutdown,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.shutdown,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.shutdown {
+  display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked .fa,
 #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff .fa {
   color: #999;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.starting,
 #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.starting {
   display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.resetting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.resetting {
-  display: none;
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting .fa {
+  color: #999;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting .fa,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting .fa {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.paused span.paused {
+  display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.paused .fa {
   color: #999;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.resetting,
 #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.resetting {
   display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.starting,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.paused,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.running,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.shutoff,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.starting {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting .fa {
+  color: #a8d46f;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state {
+  width: 40px;
+  text-align: center;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state {
+  font-size: 22px;
+  position: relative;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state span.text-status,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state span.text-status {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting .fa,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting .fa {
-  color: #a8d46f;
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state span,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state span {
+  display: none;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name,
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 6c24800..040b351 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -105,13 +105,13 @@
             list-style: none;
             padding: 0;
             > li:nth-child(even) {
-              background-color: #fcfcfc;
+                background-color: #fcfcfc;
             }
             > li:nth-child(odd) {
-              background-color: #fff;
+                background-color: #fff;
             }
             > li:first-child {
-              border-top: 0;
+                border-top: 0;
             }
         }
         .wok-guest-list-header {
@@ -239,7 +239,8 @@
                     padding-bottom: 115px;
                     text-align: center;
                 }
-                span.column-action, span.column-name {
+                span.column-action,
+                span.column-name {
                     display: block !important;
                 }
                 .btn {
@@ -296,10 +297,10 @@
                 position: absolute;
             }
             .ul-body {
-            display: inline-block;
-            padding: 0;
-            margin: 0;
-            list-style: none;
+                display: inline-block;
+                padding: 0;
+                margin: 0;
+                list-style: none;
             }
             .column-type,
             .nodata,
@@ -368,13 +369,11 @@
                 padding-left: 21px;
                 border-radius: 0;
                 background: rgba(0, 0, 0, .6) !important;
-
                 > span.guest-state {
                     .fa {
                         margin-right: 10px;
                     }
                 }
-
                 > span.guest-state.running {
                     span.running {
                         display: block;
@@ -451,6 +450,76 @@
             }
         }
     }
+    .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state {
+        > span.guest-state.running {
+            span.running {
+                display: block;
+            }
+            .fa {
+                color: $fa-green;
+            }
+        }
+        > span.guest-state.pmsuspended {
+            span.pmsuspended {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.nostate {
+            span.nostate {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.crashed {
+            span.crashed {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.shutdown,
+        > span.guest-state.blocked,
+        > span.guest-state.shutoff {
+            span.shutoff,
+            span.blocked,
+            span.shutdown {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.starting {
+            span.starting {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.paused {
+            span.paused {
+                display: block;
+            }
+            .fa {
+                color: $gray-light;
+            }
+        }
+        > span.guest-state.resetting {
+            span.resetting {
+                display: block;
+            }
+            .fa {
+                color: $fa-green;
+            }
+        }
+    }
     .wok-guest-list .wok-guest-list-header,
     .wok-guest-list .wok-guest-list-body .wok-guest-list-item {
         > span.column-state {
@@ -463,61 +532,8 @@
                     display: none;
                 }
             }
-            > span.guest-state.running {
-                span.running {
-                    display: block;
-                }
-                span.paused,
-                span.shutoff,
-                span.starting,
-                span.resetting {
-                    display: none;
-                }
-                .fa {
-                    color: $fa-green;
-                }
-            }
-            > span.guest-state.shutoff {
-                span.shutoff {
-                    display: block;
-                }
-                span.paused,
-                span.running,
-                span.starting,
-                span.resetting {
-                    display: none;
-                }
-                .fa {
-                    color: $gray-light;
-                }
-            }
-            > span.guest-state.starting {
-                span.starting {
-                    display: block;
-                }
-                span.paused,
-                span.running,
-                span.shutoff,
-                span.resetting {
-                    display: none;
-                }
-                .fa {
-                    color: $gray-light;
-                }
-            }
-            > span.guest-state.resetting {
-                span.resetting {
-                    display: block;
-                }
-                span.paused,
-                span.running,
-                span.shutoff,
-                span.starting {
-                    display: none;
-                }
-                .fa {
-                    color: $fa-green;
-                }
+            > span.guest-state span {
+                display: none;
             }
         }
         > span.column-name {
@@ -615,6 +631,7 @@
         }
     }
 }
+
 body.wok-gallery {
     background: $input-bg-disabled;
 }
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index c89e450..f92bf11 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -25,8 +25,12 @@
                 <span class='column-state'>
                     <span class='guest-state'>
                         <span class="running"><i class="fa fa-power-off"></i><span class="text-status">$_("Running")</span></span><!--
-                     --><span class="shutoff"><i class="fa fa-ban"></i><span class="text-status">$_("Disconnected")</span></span><!--
+                     --><span class="shutoff shutdown blocked"><i class="fa fa-ban"></i><span class="text-status">$_("Disconnected")</span></span><!--
                      --><span class="starting"><i class="fa fa-undo"></i><span class="text-status">$_("Starting")</span></span><!--
+                     --><span class="crashed"><i class="fa fa-exclamation-triangle"></i><span class="text-status">$_("Crashed")</span></span><!--
+                     --><span class="nostate"><i class="fa fa-question-circle"></i><span class="text-status">$_("Unknown")</span></span><!--
+                     --><span class="paused"><i class="fa fa-pause"></i><span class="text-status">$_("Paused")</span></span><!--
+                     --><span class="pmsuspended"><i class="fa fa-power-off"></i><span class="text-status">$_("Suspended")</span></span><!--
                      --><span class="resetting"><i class="fa fa-refresh fa-spin"></i><span class="text-status">$_("Resetting")</span></span>
                     </span>
                 </span><!--
-- 
2.5.5




More information about the Kimchi-devel mailing list