1<style> 2 th { 3 text-align: start; 4 } 5 6 tbody tr:nth-child(odd) { 7 background: rgb(239, 243, 255); 8 } 9 10 #structured-metrics-event-template { 11 text-align: center; 12 } 13 14 .sm-metric-row { 15 display: none; 16 } 17 18 #event-row:hover { 19 background-color: lightsteelblue; 20 cursor: pointer; 21 } 22 23 #sm-refresh-events { 24 margin-top: 10px; 25 } 26 27 #summary-row-template .td { 28 text-align: center; 29 } 30</style> 31 32<h2>Structured Metrics Summary</h2> 33<table> 34 <tbody id="sm-summary-body"></tbody> 35</table> 36<h2>Structured Metrics Events</h2> 37<p>Events are only collected once this page is open.</p> 38<p>Events are not polled, please refresh to view new events.</p> 39<button id="sm-refresh-events">Refresh</button> 40<table> 41 <thead> 42 <tr> 43 <th>Project</th> 44 <th>Event</th> 45 <th>Type</th> 46 <th>Uptime</th> 47 </tr> 48 </thead> 49 <tbody id="sm-events-body"></tbody> 50</table> 51<template id="summary-row-template"> 52 <tr> 53 <td><!-- Key --></td> 54 <td><!-- Value --></td> 55 </tr> 56</template> 57<template id="structured-metrics-event-row-template"> 58 <tr id="event-row"> 59 <td><!-- Project --></td> 60 <td><!-- Event --></td> 61 <td><!-- Type --></td> 62 <td><!-- Uptime --></td> 63 </tr> 64</template> 65<template id="structured-metrics-event-details-template"> 66 <tr id="metrics-row" class="sm-metric-row"> 67 <td colSpan="4"> 68 <div><b>Details</b></div> 69 <table> 70 <tbody id="details-table"></tbody> 71 </table> 72 <div><b>Metrics</b></div> 73 <table> 74 <tbody id="metrics-table"></tbody> 75 </table> 76 </td> 77 </tr> 78</template>