Skip to content

Commit 448856a

Browse files
JamesbarfordJamesbarford
committed
PR feedback; have collectors and timline side by side & write TODOs for cleanup
1 parent ea1484a commit 448856a

File tree

3 files changed

+110
-74
lines changed

3 files changed

+110
-74
lines changed

‎site/frontend/src/pages/status_new/collector.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ function statusClass(c: CollectorConfig): string {
184184
border-radius: 8px;
185185
186186
table {
187+
font-size: 1em;
187188
border-collapse: collapse;
188189
width: 100%;
189190
}

‎site/frontend/src/pages/status_new/data.ts‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
export const BenchmarkRequestComplete = "completed";
2-
export const BenchmarkRequestInProgress = "in_progress";
3-
export const BenchmarkRequestArtifactsReady = "artifacts_ready";
1+
export const BenchmarkRequestCompleteStr = "completed";
2+
export const BenchmarkRequestInProgressStr = "in_progress";
3+
export const BenchmarkRequestArtifactsReadyStr = "artifacts_ready";
44

55
type BenchmarkRequestStatusComplete = {
6-
state: typeof BenchmarkRequestComplete;
6+
state: typeof BenchmarkRequestCompleteStr;
77
completedAt: string;
88
duration: number; // time in milliseconds
99
};
1010

1111
type BenchmarkRequestStatusInProgress = {
12-
state: typeof BenchmarkRequestInProgress;
12+
state: typeof BenchmarkRequestInProgressStr;
1313
};
1414

1515
type BenchmarkRequestStatusArtifactsReady = {
16-
state: typeof BenchmarkRequestArtifactsReady;
16+
state: typeof BenchmarkRequestArtifactsReadyStr;
1717
};
1818

1919
export type BenchmarkRequestStatus =
@@ -186,7 +186,7 @@ export type CollectorJobMap = {
186186
[key: string]: CollectorConfigAndWork;
187187
};
188188

189-
/* We might want to let rust do this for us and then render that */
189+
/* @TODO; Do this in Rust in the api */
190190
export function createCollectorJobMap(
191191
collectorConfigs: CollectorConfig[],
192192
inProgress: StatusResponseInProgress[]
@@ -226,3 +226,11 @@ export function createCollectorJobMap(
226226
}
227227
return collectorJobMap;
228228
}
229+
230+
/* @TODO; Do this in Rust in the api */
231+
export function createTimeline(
232+
completed: BenchmarkRequestComplete[],
233+
queue: BenchmarkRequest[]
234+
) {
235+
return queue.concat(<BenchmarkRequest[]>completed);
236+
}

‎site/frontend/src/pages/status_new/page.vue‎

Lines changed: 94 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,32 @@ import {
99
StatusResponse,
1010
CollectorJobMap,
1111
BenchmarkRequestType,
12+
BenchmarkRequest,
1213
ReleaseCommit,
1314
createCollectorJobMap,
15+
createTimeline,
16+
BenchmarkRequestCompleteStr,
1417
} from "./data";
1518
import Collector from "./collector.vue";
1619
1720
async function loadStatusNew(loading: Ref<boolean>) {
1821
dataNew.value = await withLoading(loading, async () => {
1922
let d: StatusResponse = await getJson<StatusResponse>(STATUS_DATA_NEW_URL);
2023
return {
21-
...d,
24+
queueLength: d.queue.length,
2225
collectorJobMap: createCollectorJobMap(d.collectorConfigs, d.inProgress),
26+
timeline: createTimeline(d.completed, d.queue),
2327
};
2428
});
2529
}
2630
2731
const loading = ref(true);
28-
const dataNew: Ref<
29-
(StatusResponse & {collectorJobMap: CollectorJobMap}) | null
30-
> = ref(null);
32+
/* @TODO; redo type */
33+
const dataNew: Ref<{
34+
queueLength: number;
35+
collectorJobMap: CollectorJobMap;
36+
timeline: BenchmarkRequest[];
37+
} | null> = ref(null);
3138
3239
function pullRequestUrlAsHtml(reqType: BenchmarkRequestType): string {
3340
if (reqType.type === ReleaseCommit) {
@@ -36,86 +43,105 @@ function pullRequestUrlAsHtml(reqType: BenchmarkRequestType): string {
3643
return `<a href="https://github.com/rust-lang/rust/pull/${reqType.pr}">#${reqType.pr}</a>`;
3744
}
3845
46+
function getCreatedAt(request: BenchmarkRequest): string {
47+
if (request.status.state == BenchmarkRequestCompleteStr) {
48+
return request.status.completedAt;
49+
}
50+
return "";
51+
}
52+
53+
function getDuration(request: BenchmarkRequest): string {
54+
if (request.status.state == BenchmarkRequestCompleteStr) {
55+
return formatDuration(request.status.duration);
56+
}
57+
return "";
58+
}
59+
3960
loadStatusNew(loading);
4061
</script>
4162

4263
<template>
43-
<div id="app" class="container">
44-
<div v-if="dataNew !== null">
45-
<span>
46-
<div class="timeline">
47-
<h1>Previous</h1>
48-
<table>
49-
<thead>
50-
<tr>
51-
<th>Pr</th>
52-
<th>Kind</th>
53-
<th>Sha / Tag</th>
54-
<th>Status</th>
55-
<th>Completed At</th>
56-
<th>Duration</th>
57-
<th>Errors</th>
58-
</tr>
59-
</thead>
60-
<tbody>
61-
<template v-for="req in dataNew.completed">
62-
<tr>
63-
<td v-html="pullRequestUrlAsHtml(req.requestType)"></td>
64-
<td>{{ req.requestType.type }}</td>
65-
<td>{{ req.requestType.tag }}</td>
66-
<td>{{ req.status.state }}</td>
67-
<td>{{ req.status.completedAt }}</td>
68-
<td v-html="formatDuration(req.status.duration)"></td>
69-
<td>
70-
<pre>{{ req.errors.join("\n") }}</pre>
71-
</td>
72-
</tr>
73-
</template>
74-
</tbody>
75-
</table>
64+
<div v-if="dataNew !== null">
65+
<div class="status-page-wrapper">
66+
<div class="timeline-wrapper">
67+
<h1>Timeline</h1>
68+
<div style="margin-bottom: 10px">
69+
Queue length: {{ dataNew.queueLength }}
7670
</div>
77-
<div class="timeline">
78-
<h1>Queue</h1>
79-
<table>
80-
<thead>
71+
<table>
72+
<thead>
73+
<tr>
74+
<th>Pr</th>
75+
<th>Kind</th>
76+
<th>Sha / Tag</th>
77+
<th>Status</th>
78+
<th>Completed At</th>
79+
<th>Duration</th>
80+
<th>Errors</th>
81+
</tr>
82+
</thead>
83+
<tbody>
84+
<template v-for="req in dataNew.timeline">
8185
<tr>
82-
<th>Pr</th>
83-
<th>Kind</th>
84-
<th>Sha / Tag</th>
85-
<th>Status</th>
86+
<td v-html="pullRequestUrlAsHtml(req.requestType)"></td>
87+
<td>{{ req.requestType.type }}</td>
88+
<td>{{ req.requestType.tag }}</td>
89+
<td>{{ req.status.state }}</td>
90+
<td v-html="getCreatedAt(req)"></td>
91+
<td v-html="getDuration(req)"></td>
92+
<td>
93+
<pre>{{ req.errors.join("\n") }}</pre>
94+
</td>
8695
</tr>
87-
</thead>
88-
<tbody>
89-
<template v-for="req in dataNew.queue">
90-
<tr>
91-
<td v-html="pullRequestUrlAsHtml(req.requestType)"></td>
92-
<td>{{ req.requestType.type }}</td>
93-
<td>{{ req.requestType.tag }}</td>
94-
<td>{{ req.status.state }}</td>
95-
</tr>
96-
</template>
97-
</tbody>
98-
</table>
99-
</div>
100-
</span>
101-
<h1>Collectors</h1>
102-
<div class="grid">
103-
<div :key="cc[0]" v-for="cc in Object.entries(dataNew.collectorJobMap)">
104-
<Collector :collector="cc[1]" />
96+
</template>
97+
</tbody>
98+
</table>
99+
</div>
100+
<div class="collector-wrapper">
101+
<h1>Collectors</h1>
102+
<div class="collectors-grid">
103+
<div
104+
:key="cc[0]"
105+
v-for="cc in Object.entries(dataNew.collectorJobMap)"
106+
>
107+
<Collector :collector="cc[1]" />
108+
</div>
105109
</div>
106110
</div>
107111
</div>
108112
</div>
109113
</template>
110114

111115
<style scoped lang="scss">
112-
.timeline {
113-
max-width: 100%;
114-
width: fit-content;
116+
.status-page-wrapper {
117+
display: flex;
118+
@media screen and (max-width: 1450px) {
119+
flex-direction: column;
120+
}
121+
}
122+
123+
.collector-wrapper {
124+
width: 100%;
125+
display: flex;
126+
justify-content: center;
127+
align-items: center;
128+
flex-direction: column;
129+
padding-left: 8px;
130+
}
131+
132+
.timeline-wrapper {
133+
display: flex;
134+
justify-content: center;
135+
align-items: center;
136+
height: fit-content;
137+
flex-direction: column;
138+
width: 100%;
139+
padding-right: 8px;
115140
116141
table {
117142
border-collapse: collapse;
118143
font-size: 1.1em;
144+
width: 100%;
119145
120146
th,
121147
td {
@@ -195,7 +221,8 @@ loadStatusNew(loading);
195221
word-break: break-word;
196222
}
197223
198-
.grid {
224+
.collectors-grid {
225+
width: 100%;
199226
display: grid;
200227
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
201228
gap: 20px;

0 commit comments

Comments
 (0)