Skip to content

Commit dd76e04

Browse files
toothrotgopherbot
toothrot
authored and
gopherbot
committed
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 <[email protected]> Run-TryBot: Jenny Rakoczy <[email protected]> Reviewed-by: Dmitri Shuralyov <[email protected]> TryBot-Result: Gopher Robot <[email protected]> Auto-Submit: Jenny Rakoczy <[email protected]>
1 parent 27753f8 commit dd76e04

File tree

4 files changed

+129
-35
lines changed

4 files changed

+129
-35
lines changed

‎internal/relui/static/styles.css

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,34 @@ h6 {
8686
flex-flow: row;
8787
justify-content: space-between;
8888
}
89+
.WorkflowShow-paramsOutputContainer {
90+
align-content: stretch;
91+
display: flex;
92+
flex-direction: row;
93+
gap: 1rem;
94+
}
95+
.WorkflowShow-outputContainer {
96+
flex-basis: 50%;
97+
flex-grow: 1;
98+
}
99+
.WorkflowShow-paramsContainer {
100+
flex-basis: 50%;
101+
flex-grow: 1;
102+
}
89103
.WorkflowShow-output {
104+
border: 0.0625rem solid #ccc;
105+
border-radius: 0.25rem;
106+
margin: 0;
107+
max-height: 23rem;
108+
min-height: 3.25rem;
109+
overflow-y: auto;
110+
}
111+
.WorkflowShow-paramsDetails {
90112
border: 0.0625rem solid #ccc;
91113
border-radius: 0.25rem;
92114
margin: 0;
93115
max-height: 23rem;
94116
overflow-y: auto;
95-
width: 17.8125rem;
96117
}
97118
.WorkflowShow-paramsTable {
98119
border: none;
@@ -285,32 +306,54 @@ h6 {
285306
margin: 0;
286307
}
287308
.TaskList-itemResultTerm {
288-
background: #fdfdfd;
289-
border-top: 0.0625rem solid #ccc;
309+
background: white;
310+
border-bottom: 0.0625rem solid #ccc;
290311
font-size: 0.75rem;
291-
padding: 0.1875rem 0.25rem 0;
292312
}
293-
.TaskList-itemResultTerm:nth-of-type(even) {
294-
background: #f8f8f8;
313+
.TaskList-itemResultTermContent {
314+
background: #fff;
315+
border-radius: 0 0.3rem 0 0;
316+
border-right: 0.0625rem solid #ccc;
317+
border-top: 0.0625rem solid #ccc;
318+
margin-bottom: -0.0625rem;
319+
min-width: 5rem;
320+
padding: 0.1875rem 0.25rem 0.0625rem;
321+
width: fit-content;
322+
}
323+
.TaskList-itemResultTerm--nested {
324+
display: none;
295325
}
296326
.TaskList-itemResultDefinition {
327+
align-content: flex-start;
297328
background: #fdfdfd;
329+
column-gap: 1rem;
330+
display: flex;
331+
flex-flow: wrap column;
298332
font-size: 0.875rem;
299333
margin: 0;
300334
min-height: 1.875rem;
301335
padding: 0.5rem 0.375rem;
302336
}
303-
.TaskList-itemResultDefinition:nth-of-type(even) {
304-
background: #f8f8f8;
337+
.TaskList-itemResultDefinition--nested {
338+
display: none;
305339
}
306340
.TaskList-itemResultDefinition--string {
307341
display: block;
342+
font-size: 0.8125rem;
308343
-webkit-line-clamp: 3;
309344
overflow: hidden;
310345
text-overflow: ellipsis;
311346
}
347+
.TaskList-preString {
348+
font-family: inherit;
349+
font-size: 0.8125rem;
350+
margin: 0;
351+
white-space: pre-wrap;
352+
}
312353
.TaskList-itemResultArtifact {
313354
display: flex;
355+
flex: 1;
356+
gap: 1rem;
314357
justify-content: space-between;
315358
}
316359
.TaskList-itemResultArtifactName {

‎internal/relui/templates/show_workflow.html

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,27 @@ <h3 class="WorkflowShow-title">
5151
<td>Error:</td>
5252
<td class="WorkflowShow-paramData">{{$workflow.Error}}</td>
5353
</tr>
54-
{{range $name, $value := workflowParams $workflow}}
55-
<tr>
56-
<td>{{$name}}:</td>
57-
<td class="WorkflowShow-paramData">{{$value}}</td>
58-
</tr>
59-
{{end}}
6054
</tbody>
6155
</table>
6256
</div>
63-
<dl class="WorkflowShow-output">
64-
{{$resultDetail := unmarshalResultDetail $workflow.Output}}
65-
{{template "itemResult" $resultDetail}}
66-
</dl>
57+
</div>
58+
<div class="WorkflowShow-paramsOutputContainer">
59+
<div class="WorkflowShow-paramsContainer">
60+
<h4 class="WorkflowShow-sectionTitle">Params</h4>
61+
<dl class="WorkflowShow-paramsDetails">
62+
{{with unmarshalResultDetail $workflow.Params.String }}
63+
{{template "itemResult" .}}
64+
{{end}}
65+
</dl>
66+
</div>
67+
<div class="WorkflowShow-outputContainer">
68+
<h4 class="WorkflowShow-sectionTitle">Output</h4>
69+
<dl class="WorkflowShow-output">
70+
{{with unmarshalResultDetail $workflow.Output }}
71+
{{template "itemResult" .}}
72+
{{end}}
73+
</dl>
74+
</div>
6775
</div>
6876
<h4 class="WorkflowShow-sectionTitle">Tasks</h4>
6977
{{template "task_list" .}}

‎internal/relui/templates/task_list.html

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,16 @@
121121
{{- printf "%s %s" ($log.CreatedAt.UTC.Format "2006/01/02 15:04:05") $log.Body -}}
122122
</div>
123123
{{end}}
124-
{{if .Result.Valid}}
124+
{{if and .Result.Valid (ne .Result.String "null")}}
125125
<div class="TaskList-itemLogLine">
126126
{{- .Result.String -}}
127127
</div>
128128
{{end}}
129129
</td>
130130
<td class="TaskList-itemResultDetail" colspan="2">
131+
{{with $resultDetail}}
131132
{{template "itemResult" $resultDetail}}
133+
{{end}}
132134
</td>
133135
</tr>
134136
{{end}}
@@ -137,53 +139,84 @@
137139
{{end}}
138140

139141
{{define "itemResult"}}
140-
{{if eq .Kind "Artifact"}}
142+
{{- /*gotype: golang.org/x/build/internal/relui.resultDetail*/ -}}
143+
{{if eq .Kind "Artifact"}}
141144
<dl class="TaskList-itemResultDetailList">
142-
<dt class="TaskList-itemResultTerm">Name</dt>
145+
<dt class="TaskList-itemResultTerm">
146+
<div class="TaskList-itemResultTermContent">
147+
Name
148+
</div>
149+
</dt>
143150
<dd class="TaskList-itemResultDefinition">
144151
{{with .Artifact.Target}}
145152
{{.Name}}
146153
{{else}}
147154
{{.Artifact.Filename}}
148155
{{end}}
149156
</dd>
150-
<dt class="TaskList-itemResultTerm">Filename</dt>
157+
<dt class="TaskList-itemResultTerm">
158+
<div class="TaskList-itemResultTermContent">
159+
Filename
160+
</div>
161+
</dt>
151162
<dd class="TaskList-itemResultDefinition">
152163
{{.Artifact.Filename}}
153164
</dd>
154-
<dt class="TaskList-itemResultTerm">ScratchPath</dt>
165+
<dt class="TaskList-itemResultTerm">
166+
<div class="TaskList-itemResultTermContent">
167+
ScratchPath
168+
</div>
169+
</dt>
155170
<dd class="TaskList-itemResultDefinition">
156171
{{.Artifact.ScratchPath}}
157172
</dd>
158-
<dt class="TaskList-itemResultTerm">StagingPath</dt>
173+
<dt class="TaskList-itemResultTerm">
174+
<div class="TaskList-itemResultTermContent">
175+
StagingPath
176+
</div>
177+
</dt>
159178
<dd class="TaskList-itemResultDefinition">
160179
{{.Artifact.StagingPath}}
161180
</dd>
162181
</dl>
163182
{{else if eq .Kind "Outputs"}}
164183
{{range $key, $value := .Outputs}}
165184
<dt class="TaskList-itemResultTerm">
166-
{{$key}}
185+
<div class="TaskList-itemResultTermContent">
186+
{{$key}}
187+
</div>
167188
</dt>
189+
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--nested"></dd>
168190
{{template "itemResult" $value}}
169191
{{end}}
170192
{{else if eq .Kind "JSON"}}
171193
{{range $key, $value := .JSON}}
172194
<dt class="TaskList-itemResultTerm">
173-
{{$key}}
195+
<div class="TaskList-itemResultTermContent">
196+
{{$key}}
197+
</div>
174198
</dt>
175199
<dd class="TaskList-itemResultDefinition">
176200
{{$value}}
177201
</dd>
178202
{{end}}
179203
{{else if eq .Kind "String"}}
204+
<dt class="TaskList-itemResultTerm">
205+
<div class="TaskList-itemResultTermContent">
206+
String
207+
</div>
208+
</dt>
180209
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
181-
{{.String}}
210+
<pre class="TaskList-preString">{{.String}}</pre>
182211
</dd>
183212
{{else if eq .Kind "Slice"}}
184213
{{with .Slice}}
185-
{{if eq (index . 1).Kind "Artifact"}}
186-
<dt class="TaskList-itemResultTerm">Filenames</dt>
214+
{{if eq (index . 0).Kind "Artifact"}}
215+
<dt class="TaskList-itemResultTerm">
216+
<div class="TaskList-itemResultTermContent">
217+
Filenames
218+
</div>
219+
</dt>
187220
<dd class="TaskList-itemResultDefinition">
188221
{{range $detail := .}}
189222
{{with $detail.Artifact}}
@@ -203,21 +236,30 @@
203236
{{end}}
204237
</dd>
205238
{{else}}
239+
<dt class="TaskList-itemResultTerm TaskList-itemResultTerm--nested">
240+
<div class="TaskList-itemResultTermContent">
241+
Slice
242+
</div>
243+
</dt>
244+
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--nested"></dd>
206245
{{range $value := .}}
207-
<dt class="TaskList-itemResultTerm">
208-
{{$value.Kind}}
209-
</dt>
210-
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
211-
{{template "itemResult" $value}}
212-
</dd>
246+
{{template "itemResult" $value}}
213247
{{end}}
214248
{{end}}
215249
{{end}}
216250
{{else if eq .Kind "Number"}}
217251
{{.Number}}
252+
{{else if eq .Kind "Boolean"}}
253+
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
254+
{{.Boolean}}
255+
</dd>
218256
{{else}}
219257
{{with .}}
220258
{{.Unknown}}
259+
{{else}}
260+
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
261+
None
262+
</dd>
221263
{{end}}
222264
{{end}}
223265
{{end}}

‎internal/relui/web.go

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,7 @@ type resultDetail struct {
390390
String string
391391
Number float64
392392
Slice []*resultDetail
393+
Boolean bool
393394
Unknown interface{}
394395
}
395396

0 commit comments

Comments
 (0)