From 5bd5b2fc0d8b16330af38def6379b8edd5cfa4ea Mon Sep 17 00:00:00 2001
From: Ian Wienand <iwienand@redhat.com>
Date: Mon, 19 Sep 2022 09:52:49 +1000
Subject: web: Show failed tasks with light red background

To give more visual weight to a failed task, give it the lightest red
background.

Change-Id: I6df896497f3a20d639fc67f256e1d2566aa2903c
---
 web/src/containers/build/Console.jsx | 4 +++-
 web/src/index.css                    | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index 94c5f6f07..74f1274d7 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -289,7 +289,9 @@ class HostTask extends React.Component {
 
     let item = null
     if (interestingKeys) {
-      item = <DataListItem isExpanded={this.state.expanded}>
+      item = <DataListItem
+               isExpanded={this.state.expanded}
+               className={this.state.failed ? 'zuul-console-task-failed' : ''}>
                <DataListItemRow>
                  <DataListToggle
                    onClick={() => {this.setState({expanded: !this.state.expanded})}}
diff --git a/web/src/index.css b/web/src/index.css
index ce5470357..7536641cd 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -300,6 +300,15 @@ pre.version {
 }
 
 /* Console */
+/* NOTE(ianw) 2022-09-19 : The !important on a few items below is
+ * probably not required after CSS ordering fixes merge to
+ *  https://github.com/patternfly/patternfly-react/issues/7960
+ * We can probably pull these out after we upgrade past that.
+ */
+
+.zuul-console-task-failed {
+    background-color: var(--pf-global--palette--red-50) !important;
+}
 
 .zuul-console .pf-c-data-list__expandable-content {
     border: none;
-- 
cgit v1.2.1