<!doctype html>
<html lang="en" data-theme="{{ page.theme }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Waterfall · {{ page.hostname }} · thirdshift</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/assets/console.css">
<link rel="stylesheet" href="/assets/spans.css">
<script src="/assets/vendor/idiomorph-0.7.4.min.js" defer></script>
<script src="/assets/console.js" type="module"></script>
</head>
<body>
{% include "console/header.html" %}
{% include "console/nav.html" %}
<main data-time-page data-span-page>
<div class="page-title"><h2>Waterfall</h2><code>thirdshift show <command> --spans --json · thirdshift logs <command></code></div>
<nav class="command-chips" aria-label="Choose a Command">{% for choice in view.choices %}<a href="{{ choice.url }}" {% if choice.selected %}aria-current="true"{% endif %}>{{ choice.subject }} · {{ choice.state }}</a>{% endfor %}</nav>
{% if view.tree.spans.is_empty() %}<p>No Commands yet.</p>{% else %}
<p>One shared time axis. <span class="span-estimated">*</span> marks estimated times. Running calls extend to now.</p>
<details id="slowest-calls" open><summary>Slowest calls</summary><ol></ol></details>
<div class="span-controls" aria-label="Expand span tree">
<span>Expand to</span><button type="button" data-expand="run">Ticket runs</button><button type="button" data-expand="stage">Stages</button><button type="button" data-expand="sess">Sessions</button><button type="button" data-expand="all">Every call</button>
</div>
<div id="span-axis"><div id="span-zoom" hidden></div><span>Span</span><span>Time</span><div id="span-ticks"></div></div>
<div id="span-tree" role="tree" aria-label="Command spans"></div>
<p id="span-status" role="status"></p>
{% endif %}
<script type="application/json" id="span-data">{{ data|safe }}</script>
</main>
{% include "console/chrome.html" %}
</body>
</html>