Skip to content

Commit c2852a3

Browse files
JamesbarfordJamesbarford
committed
Feat; attempt at rendering new status page
1 parent bf2ee34 commit c2852a3

File tree

3 files changed

+428
-84
lines changed

3 files changed

+428
-84
lines changed

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