{{define "metrics"}}{{template "top" .}}
<h1>Fleet metrics</h1>

{{if .MetricAlerts}}
<h2 class="error">Alerts</h2>
<div class="tablewrap">
<table>
  <tr><th>Box</th><th>Rule</th><th>Value</th><th>Fired</th></tr>
  {{range .MetricAlerts}}
  <tr>
    <td>{{.Box}}</td>
    <td>{{.Rule}}</td>
    <td class="error">{{alertVal .Rule .Value}}</td>
    <td>{{fmtTime .FiredAt}}</td>
  </tr>
  {{end}}
</table>
</div>
{{end}}

{{if .Metrics}}
{{range .Metrics}}
<h2>{{.Box}}</h2>
<p class="small">Latest {{fmtTime .At}}</p>
<section class="tiles" aria-label="{{.Box}} headline metrics">
  <div class="tile">
    <h2>CPU</h2>
    <p class="tile-value">{{pct .CPU}}</p>
    <svg viewBox="0 0 240 40"><polyline fill="none" stroke="currentColor" points="{{.SparkCPU}}"/></svg>
  </div>
  <div class="tile">
    <h2>Memory</h2>
    <p class="tile-value">{{pct .Mem}}</p>
    <svg viewBox="0 0 240 40"><polyline fill="none" stroke="currentColor" points="{{.SparkMem}}"/></svg>
  </div>
  <div class="tile">
    <h2>Disk</h2>
    <p class="tile-value">{{pct .Disk}}</p>
    <svg viewBox="0 0 240 40"><polyline fill="none" stroke="currentColor" points="{{.SparkDisk}}"/></svg>
  </div>
</section>

{{if .Units}}
<div class="tablewrap">
<table>
  <tr><th>Unit</th><th>CPU</th><th>Memory</th><th>IO</th></tr>
  {{range .Units}}
  <tr>
    <td>{{.Unit}}</td>
    <td>{{pct .CPUFrac}}</td>
    <td>{{bytesOrDash .MemBytes}}</td>
    <td>R {{bytesOrDash .ReadBytes}} &middot; W {{bytesOrDash .WriteBytes}}</td>
  </tr>
  {{end}}
</table>
</div>
{{else}}<p class="small">No units reporting for this box.</p>{{end}}
{{end}}
{{else}}
<p>No boxes have published metrics yet.</p>
{{end}}
{{template "bottom" .}}{{end}}