internal/relui: fix layout for large parameters

Releases with a lot of security notes were difficult to read in the
interface. This change unifies params and output presentation for
workflows.

Fixes golang/go#54240
Updates golang/go#53382

Change-Id: I4602478aa245e509f305ed478898c3492bc6561b
Reviewed-on: https://go-review.googlesource.com/c/build/+/422599
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Run-TryBot: Jenny Rakoczy <jenny@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Auto-Submit: Jenny Rakoczy <jenny@golang.org>

internal/relui/static/styles.css

@@ -86,13 +86,34 @@ h6 {
   flex-flow: row;
   justify-content: space-between;
 }
+.WorkflowShow-paramsOutputContainer {
+  align-content: stretch;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+.WorkflowShow-outputContainer {
+  flex-basis: 50%;
+  flex-grow: 1;
+}
+.WorkflowShow-paramsContainer {
+  flex-basis: 50%;
+  flex-grow: 1;
+}
 .WorkflowShow-output {
+  border: 0.0625rem solid #ccc;
+  border-radius: 0.25rem;
+  margin: 0;
+  max-height: 23rem;
+  min-height: 3.25rem;
+  overflow-y: auto;
+}
+.WorkflowShow-paramsDetails {
   border: 0.0625rem solid #ccc;
   border-radius: 0.25rem;
   margin: 0;
   max-height: 23rem;
   overflow-y: auto;
-  width: 17.8125rem;
 }
 .WorkflowShow-paramsTable {
   border: none;
@@ -285,32 +306,54 @@ h6 {
   margin: 0;
 }
 .TaskList-itemResultTerm {
-  background: #fdfdfd;
-  border-top: 0.0625rem solid #ccc;
+  background: white;
+  border-bottom: 0.0625rem solid #ccc;
   font-size: 0.75rem;
-  padding: 0.1875rem 0.25rem 0;
 }
-.TaskList-itemResultTerm:nth-of-type(even) {
-  background: #f8f8f8;
+.TaskList-itemResultTermContent {
+  background: #fff;
+  border-radius: 0 0.3rem 0 0;
+  border-right: 0.0625rem solid #ccc;
+  border-top: 0.0625rem solid #ccc;
+  margin-bottom: -0.0625rem;
+  min-width: 5rem;
+  padding: 0.1875rem 0.25rem 0.0625rem;
+  width: fit-content;
+}
+.TaskList-itemResultTerm--nested {
+  display: none;
 }
 .TaskList-itemResultDefinition {
+  align-content: flex-start;
   background: #fdfdfd;
+  column-gap: 1rem;
+  display: flex;
+  flex-flow: wrap column;
   font-size: 0.875rem;
   margin: 0;
   min-height: 1.875rem;
   padding: 0.5rem 0.375rem;
 }
-.TaskList-itemResultDefinition:nth-of-type(even) {
-  background: #f8f8f8;
+.TaskList-itemResultDefinition--nested {
+  display: none;
 }
 .TaskList-itemResultDefinition--string {
   display: block;
+  font-size: 0.8125rem;
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.TaskList-preString {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  margin: 0;
+  white-space: pre-wrap;
+}
 .TaskList-itemResultArtifact {
   display: flex;
+  flex: 1;
+  gap: 1rem;
   justify-content: space-between;
 }
 .TaskList-itemResultArtifactName {

internal/relui/templates/show_workflow.html

@@ -51,19 +51,27 @@
               <td>Error:</td>
               <td class="WorkflowShow-paramData">{{$workflow.Error}}</td>
             </tr>
-            {{range $name, $value := workflowParams $workflow}}
-              <tr>
-                <td>{{$name}}:</td>
-                <td class="WorkflowShow-paramData">{{$value}}</td>
-              </tr>
-            {{end}}
           </tbody>
         </table>
       </div>
-      <dl class="WorkflowShow-output">
-        {{$resultDetail := unmarshalResultDetail $workflow.Output}}
-        {{template "itemResult" $resultDetail}}
-      </dl>
+    </div>
+    <div class="WorkflowShow-paramsOutputContainer">
+      <div class="WorkflowShow-paramsContainer">
+        <h4 class="WorkflowShow-sectionTitle">Params</h4>
+        <dl class="WorkflowShow-paramsDetails">
+          {{with unmarshalResultDetail $workflow.Params.String }}
+            {{template "itemResult" .}}
+          {{end}}
+        </dl>
+      </div>
+      <div class="WorkflowShow-outputContainer">
+        <h4 class="WorkflowShow-sectionTitle">Output</h4>
+          <dl class="WorkflowShow-output">
+            {{with unmarshalResultDetail $workflow.Output }}
+              {{template "itemResult" .}}
+            {{end}}
+          </dl>
+      </div>
     </div>
     <h4 class="WorkflowShow-sectionTitle">Tasks</h4>
     {{template "task_list" .}}

internal/relui/templates/task_list.html

@@ -121,14 +121,16 @@
                 {{- printf "%s %s" ($log.CreatedAt.UTC.Format "2006/01/02 15:04:05") $log.Body -}}
               </div>
             {{end}}
-            {{if .Result.Valid}}
+            {{if and .Result.Valid (ne .Result.String "null")}}
               <div class="TaskList-itemLogLine">
                 {{- .Result.String -}}
               </div>
             {{end}}
           </td>
           <td class="TaskList-itemResultDetail" colspan="2">
+            {{with $resultDetail}}
             {{template "itemResult" $resultDetail}}
+            {{end}}
           </td>
         </tr>
       {{end}}
@@ -137,9 +139,14 @@
 {{end}}
 
 {{define "itemResult"}}
-  {{if eq .Kind "Artifact"}}
+    {{- /*gotype: golang.org/x/build/internal/relui.resultDetail*/ -}}
+    {{if eq .Kind "Artifact"}}
     <dl class="TaskList-itemResultDetailList">
-      <dt class="TaskList-itemResultTerm">Name</dt>
+      <dt class="TaskList-itemResultTerm">
+        <div class="TaskList-itemResultTermContent">
+          Name
+        </div>
+      </dt>
       <dd class="TaskList-itemResultDefinition">
         {{with .Artifact.Target}}
           {{.Name}}
@@ -147,15 +154,27 @@
           {{.Artifact.Filename}}
         {{end}}
       </dd>
-      <dt class="TaskList-itemResultTerm">Filename</dt>
+      <dt class="TaskList-itemResultTerm">
+        <div class="TaskList-itemResultTermContent">
+          Filename
+        </div>
+      </dt>
       <dd class="TaskList-itemResultDefinition">
         {{.Artifact.Filename}}
       </dd>
-      <dt class="TaskList-itemResultTerm">ScratchPath</dt>
+      <dt class="TaskList-itemResultTerm">
+        <div class="TaskList-itemResultTermContent">
+          ScratchPath
+        </div>
+      </dt>
       <dd class="TaskList-itemResultDefinition">
         {{.Artifact.ScratchPath}}
       </dd>
-      <dt class="TaskList-itemResultTerm">StagingPath</dt>
+      <dt class="TaskList-itemResultTerm">
+        <div class="TaskList-itemResultTermContent">
+          StagingPath
+        </div>
+      </dt>
       <dd class="TaskList-itemResultDefinition">
         {{.Artifact.StagingPath}}
       </dd>
@@ -163,27 +182,41 @@
   {{else if eq .Kind "Outputs"}}
     {{range $key, $value := .Outputs}}
       <dt class="TaskList-itemResultTerm">
-        {{$key}}
+        <div class="TaskList-itemResultTermContent">
+          {{$key}}
+        </div>
       </dt>
+      <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--nested"></dd>
       {{template "itemResult" $value}}
     {{end}}
   {{else if eq .Kind "JSON"}}
     {{range $key, $value := .JSON}}
       <dt class="TaskList-itemResultTerm">
-        {{$key}}
+        <div class="TaskList-itemResultTermContent">
+          {{$key}}
+        </div>
       </dt>
       <dd class="TaskList-itemResultDefinition">
         {{$value}}
       </dd>
     {{end}}
   {{else if eq .Kind "String"}}
+    <dt class="TaskList-itemResultTerm">
+      <div class="TaskList-itemResultTermContent">
+        String
+      </div>
+    </dt>
     <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
-      {{.String}}
+      <pre class="TaskList-preString">{{.String}}</pre>
     </dd>
   {{else if eq .Kind "Slice"}}
     {{with .Slice}}
-      {{if eq (index . 1).Kind "Artifact"}}
-        <dt class="TaskList-itemResultTerm">Filenames</dt>
+      {{if eq (index . 0).Kind "Artifact"}}
+        <dt class="TaskList-itemResultTerm">
+          <div class="TaskList-itemResultTermContent">
+            Filenames
+          </div>
+        </dt>
         <dd class="TaskList-itemResultDefinition">
           {{range $detail := .}}
             {{with $detail.Artifact}}
@@ -203,21 +236,30 @@
           {{end}}
         </dd>
       {{else}}
+        <dt class="TaskList-itemResultTerm TaskList-itemResultTerm--nested">
+          <div class="TaskList-itemResultTermContent">
+            Slice
+          </div>
+        </dt>
+        <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--nested"></dd>
         {{range $value := .}}
-          <dt class="TaskList-itemResultTerm">
-            {{$value.Kind}}
-          </dt>
-          <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
-            {{template "itemResult" $value}}
-          </dd>
+          {{template "itemResult" $value}}
         {{end}}
       {{end}}
     {{end}}
   {{else if eq .Kind "Number"}}
     {{.Number}}
+  {{else if eq .Kind "Boolean"}}
+    <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
+      {{.Boolean}}
+    </dd>
   {{else}}
     {{with .}}
       {{.Unknown}}
+    {{else}}
+      <dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
+        None
+      </dd>
     {{end}}
   {{end}}
 {{end}}

internal/relui/web.go

@@ -390,6 +390,7 @@ type resultDetail struct {
 	String   string
 	Number   float64
 	Slice    []*resultDetail
+	Boolean  bool
 	Unknown  interface{}
 }