go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/cipd/appengine/frontend/templates/pages/instance.html (about) 1 {{define "content"}} 2 3 {{template "breadcrumbs" .}} 4 5 <div class="container"> 6 7 <div class="row mb-3"> 8 <div class="col-sm-12"> 9 <h3 class="user-select-all font-monospace text-center mb-3">{{.Package}}</h3> 10 <table class="table table-striped table-sm"> 11 {{if ne .Version .InstanceID}} 12 <tr> 13 <td class="info-table-key"><b>Version</b></td> 14 <td class="user-select-all">{{.Version}}</td> 15 </tr> 16 {{end}} 17 <tr> 18 <td class="info-table-key"><b>Instance ID</b></td> 19 <td class="user-select-all">{{.InstanceID}}</td> 20 </tr> 21 <tr> 22 <td class="info-table-key"><b>Download</b></td> 23 <td> 24 <a href="{{.DownloadURL}}" title="Download"> 25 {{template "download-icon" .}} 26 </a> 27 </td> 28 </tr> 29 <tr> 30 <td class="info-table-key"><b>{{.HashAlgo}}</b></td> 31 <td class="user-select-all">{{.HexDigest}}</td> 32 </tr> 33 <tr> 34 <td class="info-table-key"><b>Uploaded by</b></td> 35 <td class="user-select-all">{{.Uploader}}</td> 36 </tr> 37 <tr> 38 <td class="info-table-key"><b>Age</b></td> 39 <td class="user-select-all">{{.Age}}</td> 40 </tr> 41 </table> 42 </div> 43 </div> 44 45 {{if .Metadata}} 46 <div class="row mb-3"> 47 <div class="col-sm-12"> 48 <h4 class="text-center mb-3">Attached metadata</h4> 49 <table class="table table-sm table-bordered"> 50 {{range $md := .Metadata}} 51 <tr> 52 <td class="age-td">{{.Age}}</td> 53 <td class="md-table-key" title="Attached by {{.User}}"> 54 <a href="#" 55 title="View" 56 data-bs-toggle="modal" 57 data-bs-target="#view-metadata-modal" 58 data-md-fingerprint="{{.Fingerprint}}" 59 data-md-key="{{.Key}}" 60 data-md-user="{{.User}}" 61 data-md-age="{{.Age}}" 62 data-md-content-type="{{.ContentType}}" 63 data-md-size="{{.Size}}" 64 data-md-is-text="{{.IsText}}" 65 data-md-text-value="{{.TextValue}}"> 66 {{.Key}} 67 </a> 68 </td> 69 {{if .IsEmpty}} 70 <td><i style="color: #aaaaaa">no value</i></td> 71 {{else if .IsInlineText}} 72 <td class="user-select-all md-table-value text-truncate">{{.InlineTextValue}}</td> 73 {{else}} 74 <td><i>{{.Size}}, {{.ContentType}}</i></td> 75 {{end}} 76 </tr> 77 {{end}} 78 </table> 79 </div> 80 </div> 81 {{end}} 82 83 <div class="row"> 84 <div class="col-sm-6 border-end"> 85 {{template "tags-table" .Tags}} 86 </div> 87 <div class="col-sm-6"> 88 {{template "refs-table" .Refs}} 89 </div> 90 </div> 91 92 </div> 93 94 <div class="modal fade" id="view-metadata-modal" tabindex="-1"> 95 <div class="modal-dialog modal-lg modal-dialog-centered"> 96 <div class="modal-content"> 97 <div class="modal-header"> 98 <h5 class="modal-title">Metadata</h5> 99 <button type="button" class="btn-close" data-bs-dismiss="modal"></button> 100 </div> 101 <div class="modal-body"> 102 <div class="container-fluid"> 103 <div class="row"> 104 <div class="col-sm-12"> 105 <table class="table table-striped table-sm"> 106 <tr> 107 <td class="info-table-key"><b>Key</b></td> 108 <td class="user-select-all" id="md-prop-key"></td> 109 </tr> 110 <tr> 111 <td class="info-table-key"><b>Fingerprint</b></td> 112 <td class="user-select-all" id="md-prop-fingerprint"></td> 113 </tr> 114 <tr> 115 <td class="info-table-key"><b>Size</b></td> 116 <td class="user-select-all" id="md-prop-size"></td> 117 </tr> 118 <tr> 119 <td class="info-table-key"><b>Content type</b></td> 120 <td class="user-select-all" id="md-prop-content-type"></td> 121 </tr> 122 <tr> 123 <td class="info-table-key"><b>Attached by</b></td> 124 <td class="user-select-all" id="md-prop-user"></td> 125 </tr> 126 <tr> 127 <td class="info-table-key"><b>Age</b></td> 128 <td class="user-select-all" id="md-prop-age"></td> 129 </tr> 130 </table> 131 </div> 132 </div> 133 <div class="row"> 134 <div class="col-sm-12"> 135 <pre class="md-modal-value border" id="md-prop-text-value"></pre> 136 <b id="md-bin-value-box">Can't display binary or large data</b> 137 </div> 138 </div> 139 </div> 140 </div> 141 <div class="modal-footer"> 142 <p id="md-alert-copied">Copied!</p> 143 <button type="button" class="btn btn-secondary" id="md-button-copy">Copy value to clipboard</button> 144 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> 145 </div> 146 </div> 147 </div> 148 </div> 149 150 <script> 151 (function() { 152 'use strict'; 153 154 let modal = document.getElementById("view-metadata-modal"); 155 156 modal.addEventListener("show.bs.modal", function(event) { 157 let button = event.relatedTarget; // button that triggered the modal 158 159 // Copy properties from data-md-* attributes into the form. 160 const props = [ 161 "fingerprint", 162 "key", 163 "user", 164 "age", 165 "content-type", 166 "size", 167 "text-value", 168 ]; 169 for (const prop of props) { 170 let val = button.getAttribute("data-md-"+prop); 171 this.querySelector("#md-prop-"+prop).innerText = val; 172 } 173 174 let isText = button.getAttribute("data-md-is-text") == "true"; 175 if (isText) { 176 // Display the text box and "Copy" button. 177 this.querySelector("#md-prop-text-value").classList.remove("d-none"); 178 this.querySelector("#md-bin-value-box").classList.add("d-none"); 179 this.querySelector("#md-button-copy").removeAttribute("disabled"); 180 } else { 181 // Hide the text box and "Copy" button, show "Binary data" box instead. 182 this.querySelector("#md-prop-text-value").classList.add("d-none"); 183 this.querySelector("#md-bin-value-box").classList.remove("d-none"); 184 this.querySelector("#md-button-copy").setAttribute("disabled", ""); 185 } 186 this.querySelector("#md-alert-copied").classList.add("d-none"); 187 }); 188 189 document.getElementById("md-button-copy").addEventListener("click", function(event) { 190 let text = modal.querySelector("#md-prop-text-value").innerText; 191 navigator.clipboard.writeText(text).then(function() { 192 modal.querySelector("#md-alert-copied").classList.remove("d-none"); 193 }, function(err) { 194 console.log(err); 195 }); 196 }); 197 })(); 198 </script> 199 200 {{end}}