Skip to content

Commit 79bf688

Browse files
toothrottoothrot
committed
internal/relui: format task results on home
Render the workflow task results as a table using a css grid layout, rather than a table, to allow for us to expand rows to show logs and eventually other results without using javascript. For golang/go#47401 Change-Id: I1ab1bb3a1b87d2e864b769eeb232336af98a306d Reviewed-on: https://go-review.googlesource.com/c/build/+/353349 Trust: Alexander Rakoczy <[email protected]> Run-TryBot: Alexander Rakoczy <[email protected]> TryBot-Result: Go Bot <[email protected]> Reviewed-by: Heschi Kreinick <[email protected]> Reviewed-by: Dmitri Shuralyov <[email protected]>
1 parent 71603fa commit 79bf688

File tree

4 files changed

+97
-14
lines changed

4 files changed

+97
-14
lines changed

‎internal/relui/static/styles.css

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,48 +69,94 @@ h6 {
6969
padding: 0;
7070
}
7171
.WorkflowList-title {
72+
font-weight: normal;
73+
margin: 0.875rem 0 0.5rem 0;
74+
}
75+
.WorkflowList-params {
76+
border: none;
77+
border-spacing: 0;
78+
}
79+
.WorkflowList-titleTime {
80+
font-size: 1rem;
81+
}
82+
.WorkflowList-paramData:first-child {
83+
text-transform: capitalize;
84+
}
85+
.WorkflowList-paramData {
86+
font-size: 0.875rem;
7287
}
7388
.WorkflowList-sectionTitle {
7489
font-weight: normal;
75-
margin-bottom: 0.5rem;
90+
letter-spacing: normal;
91+
margin: 1rem 0 0.5rem 0;
7692
}
7793
.WorkflowList-item {
7894
background: #fff;
79-
margin-top: 1rem;
80-
padding: 0 0.5rem;
8195
border: 0.0625rem solid #d6d6d6;
8296
border-radius: 0.0625rem;
97+
margin-top: 1rem;
98+
padding: 0 0.5rem;
8399
}
84100
.TaskList {
101+
align-items: center;
85102
border-bottom: 0.0625rem solid #d6d6d6;
86-
border-top: 0.0625rem solid #d6d6d6;
103+
display: grid;
104+
grid-auto-rows: minmax(1.5rem, auto);
105+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
87106
margin-bottom: 1rem;
88107
}
89-
.TaskList-item + .TaskList-item {
108+
.TaskList-itemCol {
90109
border-top: 0.0625rem solid #d6d6d6;
110+
overflow: hidden;
111+
padding: 0.25rem 0;
112+
text-overflow: ellipsis;
113+
white-space: nowrap;
91114
}
92115
.TaskList-itemSummary {
93116
align-items: center;
94117
cursor: pointer;
95-
justify-content: space-between;
118+
display: contents;
119+
font-size: 0.8125rem;
96120
padding: 0.5rem;
97121
}
98122
.TaskList-itemSummary:hover {
99123
background-color: #fafafa;
100124
}
125+
.TaskList-itemSummary:hover > .TaskList-itemCol {
126+
background-color: #fafafa;
127+
}
128+
.TaskList-itemDetails {
129+
display: contents;
130+
}
131+
.TaskList-itemDetails .TaskList-itemStatus::before {
132+
content: "▸";
133+
}
134+
.TaskList-itemDetails[open] .TaskList-itemStatus::before {
135+
content: "▾";
136+
}
101137
.TaskList-itemLogs {
102138
background-color: #f5f5f5;
103139
box-shadow: inset 0 6px 6px -8px #888;
104-
font-size: 0.875rem;
140+
font-size: 0.8125rem;
141+
grid-column: 1/6;
105142
margin: 0;
106143
padding: 1rem 0;
107144
}
108145
.TaskList-itemLogLine {
146+
grid-row: 6;
109147
padding: 0 1rem;
110148
}
111149
.TaskList-itemLogLine:nth-child(even) {
112150
background-color: #fafafa;
113151
}
152+
.TaskList-item {
153+
display: contents;
154+
}
155+
.TaskList-itemHeader {
156+
align-items: center;
157+
font-size: 0.8125rem;
158+
font-weight: bold;
159+
}
114160
.Button {
115161
background: #375eab;
116162
border-radius: 0.1875rem;

‎internal/relui/templates/home.html

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,55 @@ <h2>Workflows</h2>
1313
{{range $workflow := .Workflows}}
1414
<li class="WorkflowList-item">
1515
<h3 class="WorkflowList-title">
16-
{{$workflow.Name.String}} -
17-
{{index $workflow.ID}}
16+
{{$workflow.Name.String}}
17+
<span class="WorkflowList-titleTime">
18+
{{$workflow.CreatedAt.UTC.Format "2006/01/02 15:04 MST"}}
19+
</span>
1820
</h3>
21+
<table class="WorkflowList-params">
22+
<tbody>
23+
{{range $name, $value := $.WorkflowParams $workflow}}
24+
<tr>
25+
<td class="WorkflowList-paramData">{{$name}}:</td>
26+
<td class="WorkflowList-paramData">{{$value}}</td>
27+
</tr>
28+
{{end}}
29+
</tbody>
30+
</table>
1931
<h4 class="WorkflowList-sectionTitle">Tasks</h4>
2032
<ul class="TaskList">
33+
<li class="TaskList-item TaskList-itemHeader">
34+
<span class="TaskList-itemStatus">Status</span>
35+
<span class="TaskList-itemName">Name</span>
36+
<span class="TaskList-itemCreated">Started</span>
37+
<span class="TaskList-itemUpdated">Updated</span>
38+
<span class="TaskList-itemResult">Result</span>
39+
</li>
2140
{{$tasks := index $.WorkflowTasks $workflow.ID}}
2241
{{range $task := $tasks}}
2342
<li class="TaskList-item">
2443
<details class="TaskList-itemDetails">
2544
<summary class="TaskList-itemSummary">
26-
<span class="TaskList-itemTitle">{{$task.Name}}</span>
27-
Finished: {{$task.Finished}} Result: {{$task.Result.String}} Name:
28-
{{$task.Name}}
45+
<span class="TaskList-itemCol TaskList-itemStatus">
46+
{{$task.Finished}}
47+
</span>
48+
<span class="TaskList-itemCol TaskList-itemName">
49+
{{$task.Name}}
50+
</span>
51+
<span class="TaskList-itemCol TaskList-itemCreated">
52+
{{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
53+
</span>
54+
<span class="TaskList-itemCol TaskList-itemUpdated">
55+
{{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
56+
</span>
57+
<span class="TaskList-itemCol TaskList-itemResult">
58+
{{$task.Result}}
59+
</span>
2960
</summary>
3061
<div class="TaskList-itemLogs">
3162
{{range $log := $.Logs $workflow.ID $task.Name}}
3263
<div class="TaskList-itemLogLine">
33-
{{$log.CreatedAt.Format "2006/01/02 15:04:05"}}
64+
{{$log.CreatedAt.UTC.Format "2006/01/02 15:04:05"}}
3465
{{$log.Body}}
3566
</div>
3667
{{end}}

‎internal/relui/web.go

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@ func (h *homeResponse) Logs(workflow uuid.UUID, task string) []db.TaskLog {
8787
return t[task]
8888
}
8989

90+
func (h *homeResponse) WorkflowParams(wf db.Workflow) map[string]string {
91+
params := make(map[string]string)
92+
json.Unmarshal([]byte(wf.Params.String), &params)
93+
return params
94+
}
95+
9096
// homeHandler renders the homepage.
9197
func (s *Server) homeHandler(w http.ResponseWriter, r *http.Request) {
9298
resp, err := s.buildHomeResponse(r.Context())

‎internal/workflow/workflow.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ func (w *Workflow) validate() error {
339339
// will be restarted, but tasks that finished in errors will not be retried.
340340
//
341341
// The host must create the WorkflowState. TaskStates should be saved from
342-
// listener callbacks, but for ease of stoage, their Result field does not
342+
// listener callbacks, but for ease of storage, their Result field does not
343343
// need to be populated.
344344
func Resume(def *Definition, state *WorkflowState, taskStates map[string]*TaskState) (*Workflow, error) {
345345
w := &Workflow{

0 commit comments

Comments
 (0)