xref: /aosp_15_r20/external/cronet/components/metrics/debug/structured/app.html (revision 6777b5387eb2ff775bb5750e3f5d96f37fb7352b)

<style>
  th {
    text-align: start;
  }

  tbody tr:nth-child(odd) {
    background: rgb(239, 243, 255);
  }

  #structured-metrics-event-template {
    text-align: center;
  }

  .sm-metric-row {
    display: none;
  }

  #event-row:hover {
    background-color: lightsteelblue;
    cursor: pointer;
  }

  #sm-refresh-events {
    margin-top: 10px;
  }

  #summary-row-template .td {
    text-align: center;
  }
</style>

<h2>Structured Metrics Summary</h2>
<table>
  <tbody id="sm-summary-body"></tbody>
</table>
<h2>Structured Metrics Events</h2>
<p>Events are only collected once this page is open.</p>
<p>Events are not polled, please refresh to view new events.</p>
<button id="sm-refresh-events">Refresh</button>
<table>
  <thead>
    <tr>
      <th>Project</th>
      <th>Event</th>
      <th>Type</th>
      <th>Uptime</th>
    </tr>
  </thead>
  <tbody id="sm-events-body"></tbody>
</table>
<template id="summary-row-template">
  <tr>
    <td><!-- Key --></td>
    <td><!-- Value --></td>
  </tr>
</template>
<template id="structured-metrics-event-row-template">
  <tr id="event-row">
    <td><!-- Project --></td>
    <td><!-- Event --></td>
    <td><!-- Type --></td>
    <td><!-- Uptime --></td>
  </tr>
</template>
<template id="structured-metrics-event-details-template">
  <tr id="metrics-row" class="sm-metric-row">
    <td colSpan="4">
      <div><b>Details</b></div>
      <table>
        <tbody id="details-table"></tbody>
      </table>
      <div><b>Metrics</b></div>
      <table>
        <tbody id="metrics-table"></tbody>
      </table>
    </td>
  </tr>
</template>