github.com/google/syzkaller@v0.0.0-20251211124644-a066d2bc4b02/pkg/cover/templates/heatmap.html (about)

     1  {{ define "js" }}
     2  <script>
     3      var domain = window.location.hostname;
     4      var scriptUrl = 'https://' + domain + '/static/coverage.js';
     5  
     6      var script = document.createElement('script');
     7      script.src = scriptUrl;
     8  
     9      document.head.appendChild(script);
    10  </script>
    11  {{ end }}
    12  
    13  {{ define "style" }}
    14    ul {
    15      list-style-type: none;
    16      padding-left: 0px;
    17    }
    18    .first_column {
    19      display: inline-block;
    20      width: 250px;
    21    }
    22    .date_column {
    23      display: inline-block;
    24      width: 35px;
    25    }
    26    .vertical_text {
    27      writing-mode: vertical-lr;
    28      transform: rotate(180deg);
    29      align-content: center;
    30    }
    31    .instrumented_column {
    32      display: inline-block;
    33      width: 50px;
    34      text-align: right;
    35    }
    36    .instrumented_column > pre {
    37      margin: 0
    38    }
    39    .tree_depth_0 {width: 0px;}
    40    .tree_depth_1 {width: 20px;}
    41    .tree_depth_2 {width: 40px;}
    42    .tree_depth_3 {width: 60px;}
    43    .tree_depth_4 {width: 80px;}
    44    .tree_depth_5 {width: 100px;}
    45    .tree_depth_6 {width: 120px;}
    46    .tree_depth_7 {width: 140px;}
    47  
    48    .bold {font-weight: bold;}
    49    .caret {
    50      cursor: pointer;
    51      user-select: none;
    52    }
    53    .caret::before {
    54      color: black;
    55      content: "\25B6";
    56      display: inline-block;
    57      margin-right: 3px;
    58    }
    59    .caret-down::before {
    60      transform: rotate(90deg);
    61    }
    62    .nested {
    63      display: none;
    64    }
    65    .active {
    66      display: block;
    67    }
    68    .data_row {
    69      width: fit-content;
    70    }
    71    ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    72    ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    73    ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    74    ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    75    ul > li > ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    76    ul > li > ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    77    ul > li > ul > li > ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    78    ul > li > ul > li > ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    79    ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    80    ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    81    ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    82    ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    83    ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(even) .data_row {background: #F4F4F4;}
    84    ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:nth-of-type(odd) .data_row {background: #FFF;}
    85    .data_row:hover {
    86      background-color: #ffff99 !important;
    87    }
    88    .cover_percent {
    89      position: relative;
    90      display: inline-block;
    91    }
    92    .cover_percent .tooltiptext {
    93      visibility: hidden;
    94      background-color: black;
    95      color: #fff;
    96      text-align: left;
    97      border-radius: 6px;
    98      padding: 5px 0;
    99  
   100      /* Position the tooltip */
   101      position: absolute;
   102      z-index: 1;
   103    }
   104    .cover_percent:hover .tooltiptext {
   105      visibility: visible;
   106    }
   107    #collapsible-list {
   108      font-family: monospace;
   109    }
   110  {{ end }}
   111  
   112  {{ define "body" }}
   113    <div style="display:inline-block">
   114      <form method="get">
   115        <div style="display:inline-block; vertical-align: top">
   116          <label for="target-period">Period type:</label>
   117          <br>
   118          <label for="target-period-count">Period count:</label>
   119          <br>
   120          <label for="target-subsystem">Subsystem:</label>
   121          <br>
   122          <label for="target-manager">Manager:</label>
   123          <br>
   124          <label for="unique-only">Only unique:</label>
   125        </div>
   126        <div style="display:inline-block; vertical-align: top">
   127          <select id="target-period" name="period">
   128            <option value="month">Month</option>
   129            <option value="day">Day</option>
   130          </select>
   131          <br>
   132          <input id="target-period-count" name="period_count" type="number" min="1" max="12" value="4"/>
   133          <br>
   134          <select id="target-subsystem" name="subsystem">
   135            <option value="">*</option>
   136            {{ range $ss := .Subsystems }}
   137              <option value="{{ $ss }}">{{ $ss }}</option>
   138            {{ end }}
   139          </select>
   140          <br>
   141          <select id="target-manager" name="manager">
   142            <option value="">*</option>
   143            {{ range $manager := .Managers }}
   144              <option value="{{ $manager }}">{{ $manager }}</option>
   145            {{ end }}
   146          </select>
   147          <br>
   148          <input type="checkbox" id="unique-only" name="unique-only" value="1">
   149        </div>
   150        <br>
   151        <button id="updateButton">Update</button>
   152      </form>
   153    </div>
   154    <hr>
   155    <div style="white-space: nowrap">
   156      <div style="display:inline-block">
   157        <ul id="collapsible-list">
   158          <li>
   159            <div class="first_column bold">
   160              date
   161            </div>
   162            {{ range $period := .Periods }}
   163            <div class="date_column vertical_text bold">
   164              {{ $period }}
   165            </div>
   166            {{ end }}
   167            <div class="instrumented_column vertical_text">
   168              {{ approxInstr .Root.Summary }} blocks
   169            </div>
   170          </li>
   171          <li>
   172            <div class="first_column bold">
   173              total covered
   174            </div>
   175            {{ range $cov := .Root.Coverage }}
   176            <div class="date_column">
   177              {{ $cov }}%
   178            </div>
   179            {{ end }}
   180            <div class="instrumented_column vertical_text">
   181              of
   182            </div>
   183          </li>
   184          <br>
   185          {{template "dir" .Root}}
   186        </ul>
   187      </div>
   188      <div style="display:inline-block; vertical-align: top">
   189        <pre id="file-details-curr"></pre>
   190        <br>
   191        <div id="file-content-curr"></div>
   192      </div>
   193      <div style="display:inline-block; vertical-align: top">
   194        <pre id="file-details-prev"></pre>
   195        <br>
   196        <div id="file-content-prev"></div>
   197      </div>
   198    </div>
   199  {{ end }}
   200  
   201  {{define "dir"}}
   202    {{range $child := .Items}}
   203      <li>
   204        <div class="data_row">
   205          <div class="first_column" style="display: inline-block">
   206            <div class="tree_depth_{{ $child.Depth }}" style="display: inline-block">
   207            </div>
   208            <div class="{{ if $child.IsDir }}caret{{ end }}"
   209                 style="display: inline-block">
   210              {{$child.Name}}
   211            </div>
   212          </div>
   213          {{ range $i, $cov := $child.Coverage }}
   214            <div class="date_column cover_percent">
   215              {{ if $child.IsDir }}
   216                {{ $cov }}%
   217              {{ else }}
   218                <a href="javascript:onShowFileContent('/upstream{{ index $child.FileCoverageLink $i }}');">{{ $cov }}%</a>
   219              {{ end }}
   220              <pre class="tooltiptext">{{ index $child.Tooltips $i }}</pre>
   221            </div>
   222          {{ end }}
   223          <div class="instrumented_column">
   224            <pre>{{ approxInstr $child.Summary }}</pre>
   225          </div>
   226        </div>
   227        {{ if $child.IsDir }}
   228          <ul class="nested">
   229            {{template "dir" $child}}
   230          </ul>
   231        {{ end }}
   232      </li>
   233    {{end}}
   234  {{end}}