{{ template "base" . }}
{{ define "title" }}Trace - Transaction Report{{end}}
{{ define "head"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8" type="text/javascript"></script>
{{ end }}
{{ define "body" }}
<div class="page-header">
  <h2> Transaction Report </h2>
</div>
<div id="report-container">
  <div class="row">
    <div class="col-md-12">
      <h4>Call Details</h4>
      <table class="tx-summary table">
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h4>Total Time by Service</h4>
      <table class="tx-timings table">
        <thead>
          <tr>
            <th>Service</th>
            <th>Client CPU Time (ms)</th>
            <th>Server CPU Time (ms)</th>
            <th>Total CPU Time (ms)</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div class="col-md-6">
      <div class="tx-tree">
        <h4>Call Graph</h4>
        <svg preserveAspectRatio="xMidYMid">
        </svg>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h4>Calls</h4>
      <table class="tx-calls table">
        <thead>
          <tr>
            <th>Span Path</th>
            <th>Since start (ms)</th>
            <th>Duration (ms)</th>
            <th>Block</th>
            <th>Client</th>
            <th>Server</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script type="text/javascript" src="{{ URLFor "js/tx.js" }}"></script>
{{ end }}