Skip to content

Commit de76fbe

Browse files
toothrotgopherbot
toothrot
authored and
gopherbot
committed
internal/relui: format workflow outputs
This change adds UI treatment for showing workflow outputs. Previously, it was just rendered as a string. With this change, there are custom UI elements for different output types. For golang/go#53382 Change-Id: Ia0f875d8b3149652216ca2b82ba13a8ecd342eb7 Reviewed-on: https://go-review.googlesource.com/c/build/+/416222 TryBot-Result: Gopher Robot <[email protected]> Run-TryBot: Jenny Rakoczy <[email protected]> Reviewed-by: Dmitri Shuralyov <[email protected]> Auto-Submit: Jenny Rakoczy <[email protected]> Reviewed-by: Dmitri Shuralyov <[email protected]>
1 parent 75e83af commit de76fbe

File tree

4 files changed

+80
-50
lines changed

4 files changed

+80
-50
lines changed

‎internal/relui/static/styles.css

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,28 @@ h6 {
7676
font-weight: normal;
7777
margin: 0.875rem 0 0.5rem;
7878
}
79-
.WorkflowList-params {
79+
.WorkflowList-details {
80+
display: flex;
81+
flex-flow: row;
82+
justify-content: space-between;
83+
}
84+
.WorkflowList-output {
85+
border: 0.0625rem solid #ccc;
86+
border-radius: 0.25rem;
87+
margin: 0;
88+
max-height: 23rem;
89+
overflow-y: auto;
90+
width: 17.8125rem;
91+
}
92+
.WorkflowList-paramsTable {
8093
border: none;
81-
border-spacing: 0;
94+
font-size: 0.875rem;
95+
}
96+
.WorkflowList-paramData {
97+
padding-left: 0.5rem;
98+
}
99+
.WorkflowList-paramData:first-child {
100+
text-transform: capitalize;
82101
}
83102
.WorkflowList-workflowStateIcon {
84103
background-size: contain;
@@ -102,12 +121,6 @@ h6 {
102121
.WorkflowList-titleStop {
103122
float: right;
104123
}
105-
.WorkflowList-paramData {
106-
font-size: 0.875rem;
107-
}
108-
.WorkflowList-paramData:first-child {
109-
text-transform: capitalize;
110-
}
111124
.WorkflowList-sectionTitle {
112125
font-weight: normal;
113126
letter-spacing: normal;
@@ -264,7 +277,7 @@ h6 {
264277
margin: 0;
265278
}
266279
.TaskList-itemResultTerm {
267-
background: #fafafa;
280+
background: #fdfdfd;
268281
border-top: 0.0625rem solid #ccc;
269282
font-size: 0.75rem;
270283
padding: 0.1875rem 0.25rem 0;
@@ -273,7 +286,7 @@ h6 {
273286
background: #f8f8f8;
274287
}
275288
.TaskList-itemResultDefinition {
276-
background: #fafafa;
289+
background: #fdfdfd;
277290
font-size: 0.875rem;
278291
margin: 0;
279292
min-height: 1.875rem;
@@ -288,8 +301,14 @@ h6 {
288301
overflow: hidden;
289302
text-overflow: ellipsis;
290303
}
291-
.TaskList-itemResultArtifactSize {
292-
float: right;
304+
.TaskList-itemResultArtifact {
305+
display: flex;
306+
justify-content: space-between;
307+
}
308+
.TaskList-itemResultArtifactName {
309+
overflow: hidden;
310+
text-overflow: ellipsis;
311+
white-space: nowrap;
293312
}
294313
.Button {
295314
background: #375eab;

‎internal/relui/templates/home.html

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,39 +30,43 @@ <h3 class="WorkflowList-title">
3030
</div>
3131
{{end}}
3232
</h3>
33-
<table class="WorkflowList-params">
34-
<tbody>
35-
<tr>
36-
<td>State:</td>
37-
<td class="WorkflowList-paramData">
38-
{{if $workflow.Error}}
39-
Error
40-
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--error"></div>
41-
{{else if $workflow.Finished}}
42-
Success
43-
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--success"></div>
44-
{{else}}
45-
Pending
46-
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--pending"></div>
47-
{{end}}
48-
</td>
49-
</tr>
50-
<tr>
51-
<td>Output:</td>
52-
<td class="WorkflowList-paramData">{{$workflow.Output}}</td>
53-
</tr>
54-
<tr>
55-
<td>Error:</td>
56-
<td class="WorkflowList-paramData">{{$workflow.Error}}</td>
57-
</tr>
58-
{{range $name, $value := $.WorkflowParams $workflow}}
33+
<div class="WorkflowList-details">
34+
<div class="WorkflowList-params">
35+
<table class="WorkflowList-paramsTable">
36+
<tbody>
5937
<tr>
60-
<td>{{$name}}:</td>
61-
<td class="WorkflowList-paramData">{{$value}}</td>
38+
<td>State:</td>
39+
<td class="WorkflowList-paramData">
40+
{{if $workflow.Error}}
41+
Error
42+
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--error"></div>
43+
{{else if $workflow.Finished}}
44+
Success
45+
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--success"></div>
46+
{{else}}
47+
Pending
48+
<div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--pending"></div>
49+
{{end}}
50+
</td>
6251
</tr>
63-
{{end}}
64-
</tbody>
65-
</table>
52+
<tr>
53+
<td>Error:</td>
54+
<td class="WorkflowList-paramData">{{$workflow.Error}}</td>
55+
</tr>
56+
{{range $name, $value := $.WorkflowParams $workflow}}
57+
<tr>
58+
<td>{{$name}}:</td>
59+
<td class="WorkflowList-paramData">{{$value}}</td>
60+
</tr>
61+
{{end}}
62+
</tbody>
63+
</table>
64+
</div>
65+
<dl class="WorkflowList-output">
66+
{{ $resultDetail := unmarshalResultDetail $workflow.Output }}
67+
{{template "itemResult" $resultDetail}}
68+
</dl>
69+
</div>
6670
<h4 class="WorkflowList-sectionTitle">Tasks</h4>
6771
{{template "task_list" $detail}}
6872
</li>

‎internal/relui/templates/task_list.html

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,7 @@
140140
<dt class="TaskList-itemResultTerm">
141141
{{$key}}
142142
</dt>
143-
<dd class="TaskList-itemResultDefinition">
144-
{{template "itemResult" $value}}
145-
</dd>
143+
{{template "itemResult" $value}}
146144
{{end}}
147145
{{else if eq .Kind "JSON"}}
148146
{{range $key, $value := .JSON}}
@@ -154,9 +152,6 @@
154152
</dd>
155153
{{end}}
156154
{{else if eq .Kind "String"}}
157-
<dt class="TaskList-itemResultTerm">
158-
String
159-
</dt>
160155
<dd class="TaskList-itemResultDefinition TaskList-itemResultDefinition--string">
161156
{{.String}}
162157
</dd>
@@ -167,7 +162,18 @@
167162
<dd class="TaskList-itemResultDefinition">
168163
{{range $detail := .}}
169164
{{with $detail.Artifact}}
170-
{{.Filename}} <span class="TaskList-itemResultArtifactSize">{{prettySize .Size}}</span>
165+
<div class="TaskList-itemResultArtifact">
166+
<div class="TaskList-itemResultArtifactName">
167+
{{if .Filename}}
168+
{{.Filename}}
169+
{{else if .Target}}
170+
{{.Target.Name}}
171+
{{else }}
172+
{{pathBase .ScratchPath}}
173+
{{end}}
174+
</div>
175+
<div class="TaskList-itemResultArtifactSize">{{prettySize .Size}}</div>
176+
</div>
171177
{{end}}
172178
{{end}}
173179
</dd>

‎internal/relui/web.go

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ func NewServer(p *pgxpool.Pool, w *Worker, baseURL *url.URL, header SiteHeader)
8080
helpers := map[string]interface{}{
8181
"baseLink": s.BaseLink,
8282
"hasPrefix": strings.HasPrefix,
83+
"pathBase": path.Base,
8384
"prettySize": prettySize,
8485
"unmarshalResultDetail": unmarshalResultDetail,
8586
}

0 commit comments

Comments
 (0)