web: console: convert to PF4 DataList

The console page is currently based on the ListView from PF3.  The
most direct conversion to PF4 is a DataList, which is similar but
different.

This is intended to be a like-for-like replacement of the console page
using the DataList model.

The things I have explicitly thought about:

 * The trusted flag on the playbook remains with tooltip

 * The task line output is the same order, with

    task  <+>-  (STATUS)  [hosts]  <time>

   The magnifying glass and status share a cell to keep them close

 * You can click on either the magnifying glass or the status to bring
   up the modal with the full task status.  Both have a tooltip.

 * The status and hosts are modified to use PF4 label and chip models
   for a standard look.

 * Plays start rolled up, but tasks start in the expanded state as
   before.

 * If there is a failed task, the playbook and play are unrolled to
   show it automatically as before.

 * "run" playbooks are expanded by default

 * Tasks highlight on hover, but now using a light boxshadow rather
   than background color which is more consistent with other parts of
   the ui (like the build table, for example).

 * No colours in the background of the playbook rows; the DataList now
   has a blue line that runs down the side showing you the groupings
   when a playbook row is opened.  I think this is more consistent
   with "less is more" type approach.

 * deep-link permalinks on the modal display of the task results open
   up the same task display when pasted into a new window.

While I think there is plenty of room for improvement in the way this
information is displayed, I've deliberately tried to keep everything
the same in this changeset to a) ease review and b) so we have a
PF4-based grounding to work from.  There wasn't really a way to do
this more incrementally; although almost everything moves around there
is no tricky code to call out -- some fiddling of things that needed
to state properties and some toggle javascript-code bits are the main
additions.

Change-Id: Ie480deb046502879542e41844e919a362203e25d

1 files changed, 3 insertions, 78 deletions

diff --git a/web/src/index.css b/web/src/index.css
index da74a4a24..cc533b6f9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -300,86 +300,11 @@ pre.version {
 }
 
 /* Console */
-.zuul-console .list-group-item-header,
-.zuul-console .list-view-pf-actions,
-.zuul-console .list-view-pf-expand,
-.zuul-console .list-view-pf-main-info
+.zuul-console-datalistrow:hover
 {
-    margin-top: 1px;
-    margin-bottom: 1px;
-}
-.zuul-console .list-view-pf-main-info
-{
-    padding-top: 1px;
-    padding-bottom: 1px;
-}
-.zuul-console .list-view-pf-expand
-{
-    padding: 0;
-}
-.zuul-console .list-view-pf-left
-{
-    padding-right: 17px;
-}
-.zuul-console .list-group-item-heading
-{
-    margin-bottom: 0;
-}
-.zuul-console .list-group-item-text
-{
-    margin-bottom: 0;
-}
-.zuul-console .task-skipped
-{
-    color: white;
-    background-color: #00729b;
-    width: 6em;
-    cursor: pointer;
-}
-.zuul-console .task-changed
-{
-    color: white;
-    background-color: #a28301;
-    width: 6em;
-    cursor: pointer;
-}
-.zuul-console .task-ok
-{
-    color: white;
-    background-color: #018200;
-    width: 6em;
-    cursor: pointer;
-}
-.zuul-console .task-failed
-{
-    color: white;
-    background-color: #9b0000;
-    width: 6em;
-    cursor: pointer;
-}
-.zuul-console .additionalinfo-icon
-{
-    cursor: default;
-    margin-right: 8px;
-}
-.zuul-console .task-details-icon
-{
-    cursor: pointer;
-    margin-right: 8px;
-}
-.zuul-console-modal-header-link
-{
-    margin-left: 2em;
-    font-size: 18px;
-}
-.zuul-console-task-detail
-{
-    width: 80%;
-}
-.zuul-console-task-result
-{
-    padding-left: 4em;
+    box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow)
 }
+
 pre.zuul-log-output
 {
     overflow-x: auto;