{{ template "base" . }}

{{ define "title" }}Trace - {{.SvcName}} Report{{end}}

{{ define "head" }}
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
  var table = $(".datatable").DataTable({
    paging: false,
    info: false,
    columns: [
      null, // root call
      null, // dependencies
      null, // nested dependencies
      null, // n
      null, // p50 ms
      null, // p90 ms
      null, // p99 ms
      { orderable: false } // examples
    ]
  });

  // Preserve a the ordering across page reloads
  table.on("order.dt", function () {
    localStorage["binary.order"] = JSON.stringify(table.order());
  });

  // Wrap the draw in a set timeout to allow DataTable to initialize
  setTimeout(function () {
    if (!localStorage["binary.order"]) return;
    table.order(JSON.parse(localStorage["binary.order"])).draw();
  }, 0);
});
</script>

<script src="https://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
<script src="https://trifacta.github.io/vega/vega.js"></script>
{{ end }}

{{ define "navbar-content"}}
  {{ template "breadcrumbs" .}}
{{ end }}

{{ define "body" }}

<div class="page-header">
  <h3>Trace Report for {{.SvcName}}</h3>
</div>
<hr>
<div class="row">
  <h2>Summary</h2>
  <div class="col-md-4">
    <h4>Stats</h4>
    <em>Coming soon!</em>
    <dl class="text-muted dl-horizontal">
      <dt>Number of Calls</dt>
      <dd>{{ .SvcData.Len }}</dd>
      <dt>Dependencies</dt>
      <dd>...</dd>
      <dt>Callers</dt>
      <dd>...</dd>
    </dl>
  </div>
  <div class="col-md-4">
    <h4>Timings</h4>
    <table class="table table-condensed">
      <thead>
        <tr>
          <th>Percentile</th>
          <th>Time to complete</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>99th</td>
          <td class="numeric">{{call $.TimePercentile $.SvcData 0.99 | printf "%.2fms" }}</td>
        </tr>
        {{ range $i, $p := (seq 0.95 0.75 0.05) }}
        <tr>
          <td>{{ printf "%.0fth " (scale $p 100) }}</td>
          <td class="numeric">{{call $.TimePercentile $.SvcData $p | printf "%.2fms" }}</td>
        </tr>
        {{ end }}
        {{ range $i, $p := (seq 0.50 0.00 0.25) }}
        <tr>
          <td>{{ printf "%.0fth " (scale $p 100) }}</td>
          <td class="numeric">{{call $.TimePercentile $.SvcData $p | printf "%.2fms" }}</td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
  <div class="col-md-4">
    <h4>Noteworthy Transactions</h4>
    <div id="transaction-links">
      <dl>
        <dt>Slowest</dt>
        <dd>
          <a href="{{ URLForTx .Slowest }}">{{ .Slowest.StringID }}</a>
          <p>({{ .Slowest.CompactDescr }})</p>
        </dd>
        <dt>Deepest</dt>
        <dd>
          <a href="{{ URLForTx .Deepest }}">{{ .Deepest.StringID }}</a>
          <p>({{ .Deepest.CompactDescr }})</p>
        </dd>
        <dt>Largest</dt>
        <dd>
          <a href="{{ URLForTx .Largest }}">{{ .Largest.StringID }}</a>
          <p>({{ .Largest.CompactDescr }})</p>
      </dl>
    </div>
  </div>
</div>
<hr>
<div id="signatures" class="row">
  <h4>Signatures</h4>
  <div class="col-md-12">
    <table class="table table-bordered table-condensed table-striped datatable">
      <thead>
        <tr>
          <th>root call</th>
          <th>dependencies</th>
          <th>nested dependencies</th>
          <th>n</th>
          <th>p50 ms</th>
          <th>p90 ms</th>
          <th>p99 ms</th>
          <th>examples</th>
        </tr>
      </thead>
      <tbody>
        {{ range $sig, $siginfo := .Signatures }}
        <tr>
          <td class="signature col-md-3">{{ $siginfo.RootRPC }}</td>
          <td class="signature dependency col-md-2">
            <ul class="list-unstyled">
            {{ range $_, $dep := $siginfo.Dependencies }}
            <li>{{ $dep }}</li>
            {{ end }}
            </ul>
          </td>
          <td class="signature dependency col-md-2">
            <ul class="list-unstyled">
            {{ range $_, $dep := $siginfo.AllDependencies }}
            <li>{{ $dep }}</li>
            {{ end }}
            </ul>
          </td>
          <td class="numeric col-md-1">{{ $siginfo.Len }}</td>
          <td class="numeric col-md-1">{{ call $.TimePercentile $siginfo 0.5 | printf "%.2f" }}</td>
          <td class="numeric col-md-1">{{ call $.TimePercentile $siginfo 0.9 | printf "%.2f" }}</td>
          <td class="numeric col-md-1">{{ call $.TimePercentile $siginfo 0.99 | printf "%.2f" }}</td>
          <td>
            {{ range $i, $tx := $siginfo.Examples }}
            <a href="{{ URLForTx $tx }}">{{ $i }}</a>
            {{ end }}
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
</div>
<hr>
<div class="row">
  <h4>Histogram of response times</h4>
  <div id="vis"></div>
</div>
<script type="text/javascript">
  function parse(spec) {
  vg.parse.spec(spec, function(chart) {
  chart({el:"#vis"}).update();
  });
  }
  parse({{.VegaSpec}});
</script>
{{ end }}
