internal/relui: add state icons and error text

toothrot · toothrot · commit da4f1d2313e4 · 2022-01-25T17:56:51.000Z
This adds some basic state icons and error text for tasks in the UI. Change-Id: Idc0e96026e7f3718e628daa70df739ec617c290a Reviewed-on: https://go-review.googlesource.com/c/build/+/380505 Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org> Trust: Alex Rakoczy <alex@golang.org> Run-TryBot: Alex Rakoczy <alex@golang.org> TryBot-Result: Gopher Robot <gobot@golang.org>
diff --git a/internal/relui/static/images/check_circle_green_24dp.svg b/internal/relui/static/images/check_circle_green_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#49995c"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
diff --git a/internal/relui/static/images/error_red_24dp.svg b/internal/relui/static/images/error_red_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#c9483c"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
diff --git a/internal/relui/static/images/pending_yellow_24dp.svg b/internal/relui/static/images/pending_yellow_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#f1bf37"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M7,13.5c-0.83,0-1.5-0.67-1.5-1.5 c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5C8.5,12.83,7.83,13.5,7,13.5z M12,13.5c-0.83,0-1.5-0.67-1.5-1.5 c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5C13.5,12.83,12.83,13.5,12,13.5z M17,13.5c-0.83,0-1.5-0.67-1.5-1.5 c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5C18.5,12.83,17.83,13.5,17,13.5z"/></g></svg>
diff --git a/internal/relui/static/styles.css b/internal/relui/static/styles.css
@@ -147,6 +147,14 @@ h6 {
 .TaskList-expanded.TaskList-itemLogsRow {
   display: table-row;
 }
+.TaskList-itemCol.TaskList-itemState {
+  padding: 0.25rem 0 0 0;
+  width: 3.25rem;
+}
+.TaskList-itemStateIcon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
 .TaskList-itemLogs {
   background-color: #f5f5f5;
   box-shadow: inset 0 6px 6px -8px #888;
@@ -160,6 +168,14 @@ h6 {
 .TaskList-itemLogLine:nth-child(even) {
   background-color: #fafafa;
 }
+.TaskList-itemLogLineError {
+  background-color: #c9483c;
+  color: white;
+}
+.TaskList-errorBody {
+  display: block;
+  white-space: pre-wrap;
+}
 .TaskList-item {
 }
 .TaskList-itemHeader {
diff --git a/internal/relui/templates/home.html b/internal/relui/templates/home.html
@@ -33,9 +33,9 @@ <h4 class="WorkflowList-sectionTitle">Tasks</h4>
             <thead>
               <tr class="TaskList-item TaskList-itemHeader">
                 <th class="TaskList-itemHeaderCol TaskList-itemExpand"></th>
-                <th class="TaskList-itemHeaderCol TaskList-itemStatus">Status</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemState">State</th>
                 <th class="TaskList-itemHeaderCol TaskList-itemName">Name</th>
-                <th class="TaskList-itemHeaderCol TaskList-itemCreated">Started</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemStarted">Started</th>
                 <th class="TaskList-itemHeaderCol TaskList-itemUpdated">Updated</th>
                 <th class="TaskList-itemHeaderCol TaskList-itemResult">Result</th>
               </tr>
@@ -52,13 +52,19 @@ <h4 class="WorkflowList-sectionTitle">Tasks</h4>
                       <img class="TaskList-itemExpandControl" alt="unfold less" src="{{baseLink "/static/images/expand_more_black_24dp.svg"}}" />
                     </span>
                   </td>
-                  <td class="TaskList-itemCol TaskList-itemStatus">
-                    {{$task.Finished}}
+                  <td class="TaskList-itemCol TaskList-itemState">
+                    {{if $task.Error.Valid}}
+                      <img class="TaskList-itemStateIcon" alt="error" src="{{baseLink "/static/images/error_red_24dp.svg"}}" />
+                    {{else if $task.Finished}}
+                      <img class="TaskList-itemStateIcon" alt="finished" src="{{baseLink "/static/images/check_circle_green_24dp.svg"}}" />
+                    {{else}}
+                      <img class="TaskList-itemStateIcon" alt="pending" src="{{baseLink "/static/images/pending_yellow_24dp.svg"}}" />
+                    {{end}}
                   </td>
                   <td class="TaskList-itemCol TaskList-itemName">
                     {{$task.Name}}
                   </td>
-                  <td class="TaskList-itemCol TaskList-itemCreated">
+                  <td class="TaskList-itemCol TaskList-itemStarted">
                     {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
                   </td>
                   <td class="TaskList-itemCol TaskList-itemUpdated">
@@ -70,6 +76,11 @@ <h4 class="WorkflowList-sectionTitle">Tasks</h4>
                 </tr>
                 <tr class="TaskList-itemLogsRow">
                   <td class="TaskList-itemLogs" colspan="6">
+                    {{if $task.Error.Valid}}
+                    <div class="TaskList-itemLogLine TaskList-itemLogLineError">
+                      <code class="TaskList-errorBody">{{$task.Error.Value}}</code>
+                    </div>
+                    {{end}}
                     {{range $log := $.Logs $workflow.ID  $task.Name}}
                       <div class="TaskList-itemLogLine">
                         {{$log.CreatedAt.UTC.Format "2006/01/02 15:04:05"}}
