1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<style>
th {
text-align: start;
}
tbody tr:nth-child(odd) {
background: rgb(239, 243, 255);
}
#structured-metrics-event-template {
text-align: center;
}
.sm-metric-row {
display: none;
}
#event-row:hover {
background-color: lightsteelblue;
cursor: pointer;
}
#sm-refresh-events {
margin-top: 10px;
}
#summary-row-template .td {
text-align: center;
}
#search-error-msg{
display: none;
color: rgb(229, 26, 67);
}
#search-bar {
width: fit-content;
}
</style>
<h2>Structured Metrics Summary</h2>
<table>
<tbody id="sm-summary-body"></tbody>
</table>
<h2>Structured Metrics Events</h2>
<p>Events are not polled, please refresh to view new events.</p>
<button id="sm-refresh-events">Refresh</button>
<h3>Search:</h3>
<p>Searching is implemented as key-value pair search param in the format of 'key:value'.</p>
<p>Valid keys are: project, event, metric.</p>
<input id="search-bar" type="search"></input>
<p id="search-error-msg"></p>
<table class="event-table">
<thead>
<tr>
<th>Project</th>
<th>Event</th>
<th>Type</th>
<th>Uptime</th>
</tr>
</thead>
<tbody id="sm-events-body"></tbody>
</table>
<template id="summary-row-template">
<tr>
<td><!-- Key --></td>
<td><!-- Value --></td>
</tr>
</template>
<template id="structured-metrics-event-row-template">
<tr id="event-row">
<td><!-- Project --></td>
<td><!-- Event --></td>
<td><!-- Type --></td>
<td><!-- Uptime --></td>
</tr>
</template>
<template id="structured-metrics-event-details-template">
<tr id="metrics-row" class="sm-metric-row">
<td colSpan="4">
<div><b>Details</b></div>
<table>
<tbody id="details-table"></tbody>
</table>
<div><b>Metrics</b></div>
<table>
<tbody id="metrics-table"></tbody>
</table>
</td>
</tr>
</template>
|
