From dd76e044b51bddc8bedd8b981ab8b8b40a462331 Mon Sep 17 00:00:00 2001 From: Alex Rakoczy Date: Wed, 10 Aug 2022 18:47:18 -0400 Subject: [PATCH] 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 Run-TryBot: Jenny Rakoczy Reviewed-by: Dmitri Shuralyov TryBot-Result: Gopher Robot Auto-Submit: Jenny Rakoczy --- internal/relui/static/styles.css | 59 +++++++++++++--- internal/relui/templates/show_workflow.html | 28 +++++--- internal/relui/templates/task_list.html | 76 ++++++++++++++++----- internal/relui/web.go | 1 + 4 files changed, 129 insertions(+), 35 deletions(-) diff --git a/internal/relui/static/styles.css b/internal/relui/static/styles.css index a239bba0..321e26a6 100644 --- a/internal/relui/static/styles.css +++ b/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 { diff --git a/internal/relui/templates/show_workflow.html b/internal/relui/templates/show_workflow.html index 20fc1007..0b439903 100644 --- a/internal/relui/templates/show_workflow.html +++ b/internal/relui/templates/show_workflow.html @@ -51,19 +51,27 @@ Error: {{$workflow.Error}} - {{range $name, $value := workflowParams $workflow}} - - {{$name}}: - {{$value}} - - {{end}} -
- {{$resultDetail := unmarshalResultDetail $workflow.Output}} - {{template "itemResult" $resultDetail}} -
+ +
+
+

Params

+
+ {{with unmarshalResultDetail $workflow.Params.String }} + {{template "itemResult" .}} + {{end}} +
+
+
+

Output

+
+ {{with unmarshalResultDetail $workflow.Output }} + {{template "itemResult" .}} + {{end}} +
+

Tasks

{{template "task_list" .}} diff --git a/internal/relui/templates/task_list.html b/internal/relui/templates/task_list.html index 5df117b1..c80d428e 100644 --- a/internal/relui/templates/task_list.html +++ b/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 -}} {{end}} - {{if .Result.Valid}} + {{if and .Result.Valid (ne .Result.String "null")}}
{{- .Result.String -}}
{{end}} + {{with $resultDetail}} {{template "itemResult" $resultDetail}} + {{end}} {{end}} @@ -137,9 +139,14 @@ {{end}} {{define "itemResult"}} - {{if eq .Kind "Artifact"}} + {{- /*gotype: golang.org/x/build/internal/relui.resultDetail*/ -}} + {{if eq .Kind "Artifact"}}
-
Name
+
+
+ Name +
+
{{with .Artifact.Target}} {{.Name}} @@ -147,15 +154,27 @@ {{.Artifact.Filename}} {{end}}
-
Filename
+
+
+ Filename +
+
{{.Artifact.Filename}}
-
ScratchPath
+
+
+ ScratchPath +
+
{{.Artifact.ScratchPath}}
-
StagingPath
+
+
+ StagingPath +
+
{{.Artifact.StagingPath}}
@@ -163,27 +182,41 @@ {{else if eq .Kind "Outputs"}} {{range $key, $value := .Outputs}}
- {{$key}} +
+ {{$key}} +
+
{{template "itemResult" $value}} {{end}} {{else if eq .Kind "JSON"}} {{range $key, $value := .JSON}}
- {{$key}} +
+ {{$key}} +
{{$value}}
{{end}} {{else if eq .Kind "String"}} +
+
+ String +
+
- {{.String}} + 
{{.String}}
{{else if eq .Kind "Slice"}} {{with .Slice}} - {{if eq (index . 1).Kind "Artifact"}} -
Filenames
+ {{if eq (index . 0).Kind "Artifact"}} +
+
+ Filenames +
+
{{range $detail := .}} {{with $detail.Artifact}} @@ -203,21 +236,30 @@ {{end}}
{{else}} +
+
+ Slice +
+
+
{{range $value := .}} -
- {{$value.Kind}} -
-
- {{template "itemResult" $value}} -
+ {{template "itemResult" $value}} {{end}} {{end}} {{end}} {{else if eq .Kind "Number"}} {{.Number}} + {{else if eq .Kind "Boolean"}} +
+ {{.Boolean}} +
{{else}} {{with .}} {{.Unknown}} + {{else}} +
+ None +
{{end}} {{end}} {{end}} diff --git a/internal/relui/web.go b/internal/relui/web.go index b8698d4f..cd4fbaee 100644 --- a/internal/relui/web.go +++ b/internal/relui/web.go @@ -390,6 +390,7 @@ type resultDetail struct { String string Number float64 Slice []*resultDetail + Boolean bool Unknown interface{} }