Skip to content

Commit 8f395d7

Browse files
JamesbarfordJamesbarford
authored
Merge pull request #2227 from Jamesbarford/feat/new-ui-pt1
Feat; attempt at rendering new status page
2 parents 29090d0 + 763dbfc commit 8f395d7

File tree

5 files changed

+480
-107
lines changed

5 files changed

+480
-107
lines changed

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

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import {getJson} from "../../utils/requests";
33
import {STATUS_DATA_URL} from "../../urls";
44
import {withLoading} from "../../utils/loading";
5+
import {formatDuration} from "../../utils/formatting";
56
import {computed, ref, Ref} from "vue";
67
import {
78
Artifact,
@@ -26,23 +27,6 @@ async function loadStatus(loading: Ref<boolean>) {
2627
);
2728
}
2829
29-
function formatDuration(seconds: number): string {
30-
let secs = seconds % 60;
31-
let mins = Math.trunc(seconds / 60);
32-
let hours = Math.trunc(mins / 60);
33-
mins -= hours * 60;
34-
35-
let s = "";
36-
if (hours > 0) {
37-
s = `${hours}h ${mins < 10 ? "0" + mins : mins}m ${
38-
secs < 10 ? "0" + secs : secs
39-
}s`;
40-
} else {
41-
s = `${mins < 10 ? " " + mins : mins}m ${secs < 10 ? "0" + secs : secs}s`;
42-
}
43-
return s;
44-
}
45-
4630
function getArtifactPr(reason: MissingReason): number {
4731
if (reason.hasOwnProperty("InProgress")) {
4832
return getArtifactPr(reason["InProgress"]);

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

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<script setup lang="ts">
2+
import {CollectorConfigAndWork, CollectorConfig} from "./data";
3+
4+
const props = defineProps<{
5+
collector: CollectorConfigAndWork;
6+
}>();
7+
8+
function statusClass(c: CollectorConfig): string {
9+
return c.isActive ? "active" : "inactive";
10+
}
11+
</script>
12+
13+
<template>
14+
<div class="collector-card">
15+
<div class="header">
16+
<div class="collector-name">
17+
<span>
18+
<strong class="collector-sm-padding-right">{{
19+
props.collector.config.name
20+
}}</strong>
21+
<span
22+
class="collector-sm-padding-left-right collector-left-divider"
23+
>{{ collector.config.target }}</span
24+
>
25+
<span
26+
class="collector-sm-padding-left-right status"
27+
:class="statusClass(collector.config)"
28+
>
29+
{{ collector.config.isActive ? "Active" : "Inactive" }}
30+
</span>
31+
</span>
32+
</div>
33+
</div>
34+
35+
<div class="meta">
36+
<div class="collector-meta">
37+
<span class="collector-meta-name">
38+
<strong>Benchmark Set:</strong>
39+
</span>
40+
<span> #{{ collector.config.benchmarkSet }}</span>
41+
</div>
42+
43+
<div class="collector-meta">
44+
<span class="collector-meta-name">
45+
<strong>Last Heartbeat:</strong>
46+
</span>
47+
<span>{{ collector.config.lastHeartbeatAt }}</span>
48+
</div>
49+
50+
<div class="collector-meta">
51+
<span class="collector-meta-name">
52+
<strong>Date Added:</strong>
53+
</span>
54+
<span>{{ collector.config.dateAdded }}</span>
55+
</div>
56+
</div>
57+
58+
<div v-if="collector.request !== null">
59+
<div class="table-collector-wrapper">
60+
<table class="table-collector">
61+
<caption>
62+
current benchmark request
63+
</caption>
64+
<thead>
65+
<tr class="table-header-row">
66+
<th class="table-header-padding">Type</th>
67+
<th class="table-header-padding">Created At</th>
68+
<th class="table-header-padding">Sha / Tag</th>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
<tr>
73+
<td class="table-cell-padding">{{ collector.request.type }}</td>
74+
<td class="table-cell-padding">
75+
{{ collector.request.createdAt }}
76+
</td>
77+
<td class="table-cell-padding">{{ collector.request.tag }}</td>
78+
</tr>
79+
</tbody>
80+
</table>
81+
</div>
82+
83+
<div class="table-collector-wrapper">
84+
<table class="table-collector" style="border-collapse: collapse">
85+
<caption>
86+
current benchmark jobs
87+
</caption>
88+
<thead>
89+
<tr class="table-header-row">
90+
<th class="table-header-padding">State</th>
91+
<th class="table-header-padding">Started At</th>
92+
<th class="table-header-padding">Backend</th>
93+
<th class="table-header-padding">Profile</th>
94+
<th class="table-header-padding">Dequeue Counter</th>
95+
</tr>
96+
</thead>
97+
<tbody>
98+
<tr v-for="j in collector.jobs">
99+
<td class="table-cell-padding">{{ j.state }}</td>
100+
<td class="table-cell-padding">{{ j.startedAt }}</td>
101+
<td class="table-cell-padding">{{ j.backend }}</td>
102+
<td class="table-cell-padding">{{ j.profile }}</td>
103+
<td class="table-cell-padding">{{ j.dequeCounter }}</td>
104+
</tr>
105+
</tbody>
106+
</table>
107+
</div>
108+
</div>
109+
110+
<div class="collector-no-work" v-if="collector.request === null">
111+
<h3>no active benchmarks 🦦</h3>
112+
</div>
113+
</div>
114+
</template>
115+
116+
<style lang="scss" scoped>
117+
.collector-card {
118+
border-radius: 8px;
119+
flex-direction: column;
120+
justify-content: space-between;
121+
padding: 16px;
122+
display: flex;
123+
box-shadow: 0 1px 2px #0006;
124+
margin: 0px 8px 8px 0px;
125+
}
126+
.collector-name {
127+
font-size: 1.5em;
128+
padding: 8px;
129+
}
130+
131+
.meta {
132+
padding: 8px;
133+
}
134+
135+
.collector-meta {
136+
display: flex;
137+
}
138+
139+
.collector-meta-name {
140+
display: block;
141+
min-width: 125px;
142+
}
143+
144+
.collector-left-divider {
145+
border-left: 2px solid black;
146+
}
147+
148+
.collector-right-divider {
149+
border-right: 2px solid black;
150+
}
151+
152+
.collector-sm-padding-left-right {
153+
padding: 0px 8px;
154+
}
155+
.collector-sm-padding-left {
156+
padding-left: 8px;
157+
}
158+
.collector-sm-padding-right {
159+
padding-right: 8px;
160+
}
161+
162+
.status {
163+
}
164+
165+
.status.active {
166+
background: #117411;
167+
color: white;
168+
font-weight: bold;
169+
}
170+
.status.inactive {
171+
background: red;
172+
color: white;
173+
font-weight: bold;
174+
}
175+
176+
.table-collector-wrapper {
177+
padding: 8px;
178+
background-color: #eee;
179+
margin: 8px 0px;
180+
border-radius: 8px;
181+
182+
table {
183+
font-size: 1em;
184+
border-collapse: collapse;
185+
width: 100%;
186+
}
187+
}
188+
.table-collector {
189+
caption {
190+
caption-side: top;
191+
text-align: left;
192+
font-variant: small-caps;
193+
font-weight: bold;
194+
font-size: 1.5em;
195+
}
196+
197+
.table-header-row {
198+
border-bottom: 1px solid black;
199+
}
200+
201+
.table-header-padding {
202+
padding: 8px 8px 0px 0px;
203+
text-align: left;
204+
}
205+
206+
.table-cell-padding {
207+
padding: 8px 8px 1px 0px;
208+
text-align: left;
209+
}
210+
}
211+
212+
.collector-no-work {
213+
display: flex;
214+
justify-content: center;
215+
align-items: center;
216+
height: 40px;
217+
background-color: #eee;
218+
margin: 8px;
219+
padding: 8px;
220+
border-radius: 8px;
221+
222+
h3 {
223+
font-variant: small-caps;
224+
font-weight: 700;
225+
font-size: 1.5em;
226+
}
227+
}
228+
</style>

0 commit comments

Comments
 (0)