{#
  Overview.

  What an operator wants on opening the panel, in order: is anything broken,
  is anything happening right now, what is deployed, and what just finished.
  Everything else is one click away and does not belong here.
#}
{% extends "base.html" %}
{% import "_macros.html" as m %}

{% block title %}Overview{% endblock %}

{% block content %}

{% call m.page_head("Overview", machine.hostname) %}
  <a class="btn btn--primary" href="/apps/new">Deploy</a>
{% endcall %}

{#
  Attention first. When nothing is wrong this section is absent entirely,
  rather than showing a green "all systems operational" panel that trains
  people to ignore the top of the page.
#}
{% if attention %}
  <section class="stack">
    <h2 class="stack__title">Needs attention</h2>
    <div class="rows">
      {% for item in attention %}
        {% call m.row(item.domain, item.state, item.meta, item.href, "row-" ~ item.id,
                      none, item.state_text) %}
          <a class="btn btn--sm" href="{{ item.href }}">Open</a>
        {% endcall %}
      {% endfor %}
    </div>
  </section>
{% endif %}

{# In flight, and only when there is something in flight: an empty "running"
   panel on every page load is furniture. #}
{% if running %}
  <section class="stack">
    <h2 class="stack__title">Working now</h2>
    <div class="rows">
      {% for job in running %}
        {% call m.row(job.name, job.state,
                      [("step", job.current_step), ("progress", job.progress ~ "/" ~ job.total_steps),
                       ("started", job.started)], "/activity", "row-" ~ job.id,
                      none, job.status) %}
          {{ m.follow_button("Logs", job.name, job.log_url) }}
        {% endcall %}
      {% endfor %}
    </div>
  </section>
{% endif %}

{#
  The machine's vital signs over time. The history comes from
  /api/metrics/{metric} and the live edge rides the metrics event on the
  shared /events stream; panel.js owns both, keyed off the data-chart hooks.
  The buttons are read by the client rather than being links: switching the
  window re-reads history without a navigation, and a plain data attribute is
  all the delegated click listener needs under script-src 'self'.
#}
<section class="stack">
  <div class="charts__head">
    <h2 class="stack__title">Machine</h2>
    <div class="charts__windows" role="group" aria-label="History window">
      <button type="button" class="btn btn--sm btn--quiet"
              data-chart-window="1h" aria-pressed="true">1h</button>
      <button type="button" class="btn btn--sm btn--quiet"
              data-chart-window="24h" aria-pressed="false">24h</button>
    </div>
  </div>
  <div class="charts">
    <figure class="chart">
      <figcaption class="label chart__title">CPU</figcaption>
      <div class="chart__plot" data-chart="cpu.percent"></div>
    </figure>
    <figure class="chart">
      <figcaption class="label chart__title">Memory</figcaption>
      <div class="chart__plot" data-chart="mem.used_bytes"></div>
    </figure>
    <figure class="chart">
      <figcaption class="label chart__title">
        Network
        <span class="chart__key">
          <span class="chart__swatch chart__swatch--rx" aria-hidden="true"></span>rx
          <span class="chart__swatch chart__swatch--tx" aria-hidden="true"></span>tx
        </span>
      </figcaption>
      <div class="chart__plot" data-chart="net.bytes_s"></div>
    </figure>
    <figure class="chart">
      <figcaption class="label chart__title">Disk</figcaption>
      <div class="chart__plot" data-chart="disk.percent"></div>
    </figure>
  </div>
</section>

<section class="stack">
  <h2 class="stack__title">Applications</h2>

  {% if apps %}
    <div class="rows">
      {% for app in apps %}
        {% call m.row(app.domain, app.state, app.meta, app.href, "row-" ~ app.id,
                      none, app.state_text) %}
          {{ m.follow_button("Logs", app.domain, app.log_url) }}
          {{ m.action_button("Restart", app.restart_endpoint, none, "Restarted " ~ app.domain) }}
        {% endcall %}
      {% endfor %}
    </div>
  {% else %}
    {{ m.empty(
        "No applications yet",
        "Deploy one from a Git repository, an archive or a local directory.",
        command="wasm create -d example.com -s https://github.com/you/app") }}
  {% endif %}
</section>

<section>
  <h2 class="stack__title">Recent activity</h2>

  {% if activity %}
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Finished</th>
          <th scope="col">Action</th>
          <th scope="col">Resource</th>
          <th scope="col">Result</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in activity %}
          <tr>
            <td class="mono">{{ entry.finished }}</td>
            <td><a href="/activity">{{ entry.name }}</a></td>
            <td class="mono">{{ entry.resource }}</td>
            <td>{{ m.badge(entry.state, entry.status) }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="muted">Nothing has happened on this machine yet.</p>
  {% endif %}
</section>

{% endblock %}