1<style> 2 cr-tab-box { 3 --tabs-background-color: white; 4 } 5 6 .uma-callout { 7 font-style: italic; 8 } 9 10 th { 11 text-align: start; 12 } 13 14 .uma-header-type { 15 min-width: 100px; 16 } 17 18 .uma-header-hash { 19 min-width: 300px; 20 } 21 22 .uma-header-timestamp { 23 min-width: 140px; 24 } 25 26 .uma-header-size { 27 min-width: 70px; 28 } 29 30 .uma-header-status { 31 min-width: 500px; 32 } 33 34 .uma-log-events { 35 width: 100%; 36 } 37 38 .uma-log-events-peek { 39 display: flex; 40 } 41 42 .uma-log-events-peek:hover { 43 background-color: #eee; 44 cursor: pointer; 45 } 46 47 .uma-log-events pre { 48 display: none; 49 margin: 0; 50 } 51 52 .uma-log-events-expanded pre { 53 display: block; 54 max-height: 100px; 55 min-height: 20px; 56 overflow-y: scroll; 57 } 58 59 .uma-log-events .expand-or-collapse-icon { 60 content: url(chrome://resources/images/icon_expand_more.svg); 61 margin-inline-start: auto; 62 width: 15px; 63 } 64 65 .uma-log-events-expanded .expand-or-collapse-icon { 66 content: url(chrome://resources/images/icon_expand_less.svg); 67 } 68 69 tbody tr:nth-child(odd) { 70 background: rgb(239, 243, 255); 71 } 72 73 #export-uma-logs { 74 margin-top: 10px; 75 } 76 77 #structured-metrics-event-template { 78 text-align: center; 79 } 80 81 .sm-metric-row { 82 display: none; 83 } 84 85 #event-row:hover { 86 background-color: lightsteelblue; 87 cursor: pointer; 88 } 89 90 #sm-refresh-events { 91 margin-top: 10px; 92 } 93 94 #summary-row-template .td { 95 text-align: center; 96 } 97</style> 98<cr-tab-box> 99 <div slot="tab">UMA</div> 100 <div slot="panel"> 101 <h2>UMA Summary</h2> 102 <table> 103 <tbody id="uma-summary-body"></tbody> 104 </table> 105 <h2>Logs</h2> 106 <div id="uma-table-caption" class="uma-callout"></div> 107 <div class="uma-callout">Proto data is available by exporting.</div> 108 <table> 109 <thead> 110 <tr> 111 <th class="uma-header-type">Type</th> 112 <th class="uma-header-hash">Hash</th> 113 <th class="uma-header-timestamp">Closed Timestamp</th> 114 <th class="uma-header-size">Size</th> 115 <th class="uma-header-status">Status</th> 116 </tr> 117 </thead> 118 <tbody id="uma-logs-body"></tbody> 119 </table> 120 <button id="export-uma-logs">Export logs</button> 121 </div> 122 <div slot="tab">Variations</div> 123 <div slot="panel"> 124 <h2>Variations Summary</h2> 125 <table> 126 <tbody id="variations-summary-body"></tbody> 127 </table> 128 </div> 129 <if expr="chromeos_ash"> 130 <div id="sm-tab" slot="tab">Structured Metrics</div> 131 <div slot="panel"> 132 <h2>Structured Metrics Summary</h2> 133 <table> 134 <tbody id="sm-summary-body"></tbody> 135 </table> 136 <h2>Structured Metrics Events</h2> 137 <p>Events are only collected once this page is open.</p> 138 <p>Events are not polled, please refresh to view new events.</p> 139 <button id="sm-refresh-events">Refresh</button> 140 <table> 141 <thead> 142 <tr> 143 <th>Project</th> 144 <th>Event</th> 145 <th>Type</th> 146 <th>Uptime</th> 147 </tr> 148 </thead> 149 <tbody id="sm-events-body"></tbody> 150 </table> 151 </div> 152 </if> 153</cr-tab-box> 154<template id="uma-log-row-template"> 155 <tr> 156 <td><!-- Type --></td> 157 <td><!-- Hash --></td> 158 <td><!-- Closed Timestamp --></td> 159 <td><!-- Size --></td> 160 <td> 161 <!-- Status --> 162 <div class="uma-log-events"> 163 <div class="uma-log-events-peek"> 164 <span class="uma-log-events-peek-text"></span> 165 <span class="expand-or-collapse-icon"></span> 166 </div> 167 <pre class="uma-log-events-text"></pre> 168 </div> 169 </td> 170 </tr> 171</template> 172<template id="summary-row-template"> 173 <tr> 174 <td><!-- Key --></td> 175 <td><!-- Value --></td> 176 </tr> 177</template> 178<template id="structured-metrics-event-row-template"> 179 <tr id="event-row"> 180 <td><!-- Project --></td> 181 <td><!-- Event --></td> 182 <td><!-- Type --></td> 183 <td><!-- Uptime --></td> 184 </tr> 185</template> 186<template id="structured-metrics-event-details-template"> 187 <tr id="metrics-row" class="sm-metric-row"> 188 <td colSpan="4"> 189 <div><b>Details</b></div> 190 <table><tbody id="details-table"></tbody></table> 191 <div><b>Metrics</b></div> 192 <table><tbody id="metrics-table"></tbody></table> 193 </td> 194 </tr> 195</template> 196
