go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/cv/appengine/templates/pages/run_details.html (about) 1 {{define "title"}} 2 Project {{.Run.ID.LUCIProject}} 3 Run {{.Run.ID.Inner}} 4 - LUCI Change Verifier 5 {{end}} 6 7 {{define "head"}} 8 <style type="text/css"> 9 table td { 10 padding: 2px 8px; 11 } 12 13 table td.long { 14 white-space: nowrap; 15 overflow: hidden; 16 text-overflow: ellipsis; 17 } 18 19 .collapsible { 20 padding: 0 18px; 21 display: none; 22 overflow: hidden; 23 background-color: #f1f1f1; 24 } 25 26 .clickable:hover { 27 background-color: #ccc; 28 } 29 30 div.clickable { 31 padding: 10px; 32 border: 2px; 33 border-color: black; 34 font-weight: bold; 35 } 36 37 #full-details-panel { 38 margin-left: 50px; 39 } 40 41 .tryjob-chips ul li { 42 padding: 2px 4px; 43 margin: 2px 4px; 44 } 45 46 .tryjob-chip { 47 line-height: 2; 48 white-space: nowrap; 49 color: black; 50 font-size: 90%; 51 border: solid 1px rgba(0, 0, 0, 0.5); 52 border-radius: 3px; 53 padding: 2px 4px; 54 } 55 56 .tryjob-chip.highlight { 57 box-shadow: gray 1.5px 1.5px 1px; 58 text-decoration: underline; 59 color: blue; 60 } 61 62 .tryjob-chip.highlight:visited { 63 color: purple; 64 } 65 66 .tryjob-chip.unexpected { 67 background: #f0f; 68 } 69 70 .tryjob-chip.not-started { 71 background: #eee; 72 } 73 74 .tryjob-chip.running { 75 background: #ff7; 76 } 77 78 .tryjob-chip.passed { 79 background: #9e6; 80 border-width: 3px; 81 } 82 83 .tryjob-chip.failed { 84 background: #e88; 85 border-width: 3px; 86 border-style: dashed; 87 } 88 89 .reused{ 90 line-height: 2; 91 white-space: nowrap; 92 color: MidnightBlue; 93 font-size: 90%; 94 border: solid 1px MidnightBlue; 95 border-radius: 3px; 96 padding: 1px 1px; 97 font-variant: small-caps; 98 background: Azure; 99 margin: 2px; 100 } 101 102 .message { 103 overflow: auto; 104 max-height: 250px; 105 background-color: white; 106 padding: 10px 50px; 107 } 108 109 </style> 110 {{end}} 111 112 {{define "content"}} 113 {{$TJProgression := .TJProgression}} 114 {{$RelTime := .RelTime}} 115 {{$Tryjobs := .LatestTryjobs}} 116 {{$LogMessage := .LogMessage}} 117 <div class="container"> 118 <div> 119 <h3>Run details</h3> 120 {{template "runDetails" .Run}} 121 {{$Created := .Run.CreateTime}} 122 </div> 123 124 <div> 125 <h3>CLs</h3> 126 <div class="container"> 127 <table class="table table-striped"> 128 <thead> 129 <tr> 130 <th style="width: 1%; white-space: nowrap;" class="text-center"> 131 Previous CV Run 132 </th> 133 <th style="width: 1%; white-space: nowrap;" class="text-center"> 134 CL 135 </th> 136 <th style="width: 1%; white-space: nowrap;" class="text-center"> 137 Next CV Run 138 </th> 139 </tr> 140 </thead> 141 <tbody> 142 {{range .Cls}} 143 <tr> 144 <td style="white-space: nowrap;" class="text-center"> 145 {{with .Prev}} 146 <a href="/ui/run/{{.}}">< Previous</a> 147 {{else}} 148 <span style="color: #ccc;"> — </span> 149 {{end}} 150 </td> 151 <td style="white-space: nowrap;" class="text-center"> 152 <a href="{{.URLWithPatchset}}">{{.ShortWithPatchset}}</a> 153 </td> 154 <td style="white-space: nowrap;" class="text-center"> 155 {{with .Next}} 156 <a href="/ui/run/{{.}}">Next ></a> 157 {{else}} 158 <span style="color: #ccc;"> — </span> 159 {{end}} 160 </td> 161 </tr> 162 {{end}} 163 </tbody> 164 </table> 165 </div> 166 </div> 167 168 <div> 169 <h3>Tryjobs</h3> 170 {{if $Tryjobs}} 171 <div> 172 <p class="well"> 173 <b>NOTE</b> color codes represent how CV sees tryjobs, e.g. 174 <span class="tryjob-chip running"><i>running</i></span> 175 <span class="tryjob-chip failed"> <i>failed</i></span> 176 <span class="tryjob-chip passed"> <i>succeeded</i></span> 177 which isn't as granular as Buildbucket's statuses. 178 </p> 179 <p class="tryjob-chips"> 180 {{range $Tryjobs}} 181 {{if .Link}} 182 <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}"> 183 {{.Name}} 184 {{if .Reused}} 185 <span class="reused">reused</span> 186 {{end}} 187 </a> 188 {{else}} 189 <span class="tryjob-chip {{.CSSClass}}"> 190 {{.Name}} 191 {{if .Reused}} 192 <span class="reused">reused</span> 193 {{end}} 194 </span> 195 {{end}} 196 <span> </span> 197 {{end}} 198 </p> 199 </div> 200 {{else}} 201 <span style="color: #ccc;">No tryjobs to show</span> 202 {{end}} 203 </div> 204 205 <div> 206 <h3>Logs</h3> 207 {{if .Logs}} 208 <table class="table table-striped"> 209 <thead> 210 <th style="width: 200px;">Event</th> 211 <th style="width: 250px;">Time</th> 212 <th style="width: 100px;"> </th> 213 <th> </th> 214 </thead> 215 <tbody> 216 {{range .Logs}} 217 <tr class="log-entry{{if .HasTryjobChips}}-top{{end}}"> 218 <td><em>{{.EventType}}</em></td> 219 <td style="white-space: nowrap;" class="unix-timestamp">{{.Time.Unix}}</td> 220 <td style="white-space: nowrap;">{{call $RelTime .Time}} </td> 221 <td> 222 {{if .Message}} 223 <div class="message"> 224 <pre>{{.Message}}</pre> 225 </div> 226 {{end}} 227 </td> 228 </tr> 229 {{if .HasTryjobChips}} 230 <tr class="log-entry-bottom"> 231 <td class="tryjob-chips" colspan="4"> 232 {{if .LegacyTryjobsByStatus}} 233 <ul> 234 {{range $label, $jobs := .LegacyTryjobsByStatus}} 235 <li>{{$label}}: 236 {{range $jobs}} 237 {{if .Link}} 238 <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}"> 239 {{.Name}} 240 {{if .Reused}} 241 <span class="reused">reused</span> 242 {{end}} 243 </a> 244 {{else}} 245 <span class="tryjob-chip {{.CSSClass}}"> 246 {{.Name}} 247 {{if .Reused}} 248 <span class="reused">reused</span> 249 {{end}} 250 </span> 251 {{end}} 252 <span> </span> 253 {{end}} 254 </li> 255 {{end}} 256 </ul> 257 {{else}} 258 {{range .Tryjobs}} 259 {{if .Link}} 260 <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}"> 261 {{.Name}} 262 {{if .Reused}} 263 <span class="reused">reused</span> 264 {{end}} 265 </a> 266 {{else}} 267 <span class="tryjob-chip {{.CSSClass}}"> 268 {{.Name}} 269 {{if .Reused}} 270 <span class="reused">reused</span> 271 {{end}} 272 </span> 273 {{end}} 274 {{end}} 275 {{end}} 276 </td> 277 </tr> 278 {{end}} 279 {{end}} 280 </tbody> 281 </table> 282 {{else}} 283 <span style="color: #ccc;">No logs to show</span> 284 {{end}} 285 </div> 286 {{end}} 287 288 {{define "runDetails"}} 289 <div> 290 <table class="table run-details"> 291 <thead> 292 <tr> 293 <th style="width: 10%;">PROJECT</th> 294 <th style="width: 25%;">ID</th> 295 <th style="width: 10%;">MODE</th> 296 <th style="width: 10%;">STATUS</th> 297 <th> </th> 298 </tr> 299 </thead> 300 <tbody> 301 <tr> 302 <td><a href="/ui/recents/{{.ID.LUCIProject}}"> 303 {{.ID.LUCIProject}} 304 </a></td> 305 <td><b>{{.ID.Inner}}</b></td> 306 <td>{{.Mode}}</td> 307 <td>{{.Status}}</td> 308 <td> 309 <div id="run-details-expander" class="clickable"> (+) Show details</div> 310 <div id="run-details-collapser" class="collapsible">(-) Hide details</div> 311 </td> 312 </tr> 313 </tbody> 314 </table> 315 316 <div id="full-details-panel" class="collapsible well"> 317 <dl class="dl-horizontal"> 318 <dt>Eversion:</dt> 319 <dd>{{.EVersion}}</dd> 320 <dt>Id:</dt> 321 <dd>{{.ID}}</dd> 322 <dt>Mode:</dt> 323 <dd>{{.Mode}}</dd> 324 <dt>Status:</dt> 325 <dd>{{.Status}}</dd> 326 <dt>CreateTime:</dt> 327 <dd class="unix-timestamp">{{.CreateTime.Unix}}</dd> 328 <dt>StartTime:</dt> 329 <dd class="unix-timestamp"> 330 {{if .StartTime.IsZero}} 331 Not Started 332 {{else}} 333 {{.StartTime.Unix}} 334 {{end}} 335 </dd> 336 <dt>UpdateTime:</dt> 337 <dd class="unix-timestamp"> 338 {{if .UpdateTime.IsZero}} 339 N/A 340 {{else}} 341 {{.UpdateTime.Unix}} 342 {{end}} 343 </dd> 344 <dt>EndTime:</dt> 345 <dd class="unix-timestamp"> 346 {{if .EndTime.IsZero}} 347 N/A 348 {{else}} 349 {{.EndTime.Unix}} 350 {{end}} 351 </dd> 352 <dt>Owner:</dt> 353 <dd>{{.Owner}}</dd> 354 <dt>ConfigGroupId:</dt> 355 <dd>{{.ConfigGroupID}}</dd> 356 </dl> 357 </div> 358 </div> 359 {{template "collapserScript"}} 360 {{end}} 361 362 {{define "collapserScript"}} 363 <script> 364 var expander = document.getElementById("run-details-expander"); 365 var collapser = document.getElementById("run-details-collapser"); 366 var collapsible = document.getElementById("full-details-panel"); 367 368 function toggler() { 369 collapsible.classList.toggle("collapsible"); 370 collapser.classList.toggle("collapsible") 371 collapser.classList.toggle("clickable"); 372 expander.classList.toggle("collapsible") 373 expander.classList.toggle("clickable"); 374 } 375 376 expander.addEventListener("click", toggler); 377 collapser.addEventListener("click", toggler); 378 </script> 379 {{end}}