Re: [Kimchi-devel] [PATCH] [Kimchi] Fix issue #1005: Proper display paused guests on Gallery View

Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; ---  ui/css/kimchi.css               | 78 ++++++++++++++++++++++++++++++++++++++---  ui/css/src/modules/_guests.scss | 76 ++++++++++++++++++++++++++++++++++++---  ui/pages/guest.html.tmpl        |  6 +++-  3 files changed, 150 insertions(+), 10 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 6cf2cc9..de742b3 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -689,9 +689,12 @@    display: block;  } -#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.paused,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.shutoff,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.pmsuspended,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.resetting {    display: none;  } @@ -700,9 +703,12 @@    display: block;  } -#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.paused,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.running,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.pmsuspended,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.resetting {    display: none;  } @@ -711,21 +717,83 @@    display: block;  } -#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.paused,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.running,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.shutoff, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.pmsuspended,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.resetting {    display: none;  } +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.crashed { +  display: block; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.running, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.shutoff, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.pmsuspended, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.crashed span.resetting { +  display: none; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.nostate { +  display: block; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.running, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.shutoff, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.pmsuspended, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.nostate span.resetting { +  display: none; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.paused { +  display: block; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.running, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.shutoff, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.pmsuspended, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.paused span.resetting { +  display: none; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.pmsuspended { +  display: block; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.running, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.shutoff, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.pmsuspended span.resetting { +  display: none; +} +  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.resetting {    display: block;  } -#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.paused,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.running,  #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.shutoff, -#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.starting { +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.starting, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.crashed, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.nostate, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.paused, +#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.pmsuspended {    display: none;  } diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 8b8345c..237b395 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -382,9 +382,12 @@                      span.running {                          display: block;                      } -                    span.paused,                      span.shutoff,                      span.starting, +                    span.crashed, +                    span.nostate, +                    span.paused, +                    span.pmsuspended,                      span.resetting {                          display: none;                      } @@ -393,9 +396,12 @@                      span.shutoff {                          display: block;                      } -                    span.paused,                      span.running,                      span.starting, +                    span.crashed, +                    span.nostate, +                    span.paused, +                    span.pmsuspended,                      span.resetting {                          display: none;                      } @@ -404,21 +410,83 @@                      span.starting {                          display: block;                      } +                    span.running, +                    span.shutoff, +                    span.crashed, +                    span.nostate,                      span.paused, +                    span.pmsuspended, +                    span.resetting { +                        display: none; +                    } +                } +                > span.guest-state.crashed { +                    span.crashed { +                        display: block; +                    }                      span.running,                      span.shutoff, +                    span.starting, +                    span.nostate, +                    span.paused, +                    span.pmsuspended,                      span.resetting {                          display: none;                      }                  } -                > span.guest-state.resetting { +                > span.guest-state.nostate { +                    span.nostate { +                        display: block; +                    } +                    span.running, +                    span.shutoff, +                    span.starting, +                    span.crashed, +                    span.paused, +                    span.pmsuspended,                      span.resetting { +                        display: none; +                    } +                } +                > span.guest-state.paused { +                    span.paused {                          display: block;                      } +                    span.running, +                    span.shutoff, +                    span.starting, +                    span.crashed, +                    span.nostate, +                    span.pmsuspended, +                    span.resetting { +                        display: none; +                    } +                } +                > span.guest-state.pmsuspended { +                    span.pmsuspended { +                        display: block; +                    } +                    span.running, +                    span.shutoff, +                    span.starting, +                    span.crashed, +                    span.nostate,                      span.paused, +                    span.resetting { +                        display: none; +                    } +                } +                > span.guest-state.resetting { +                    span.resetting { +                        display: block; +                    }                      span.running,                      span.shutoff, -                    span.starting { +                    span.starting, +                    span.crashed, +                    span.nostate, +                    span.paused, +                    span.pmsuspended {                          display: none;                      }                  } diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl index f92bf11..389ba9d 100644 --- a/ui/pages/guest.html.tmpl +++ b/ui/pages/guest.html.tmpl @@ -44,8 +44,12 @@                              </span>                              <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 class="caret"></span>                              </span>