{% extends "hq/base.html" %}
{% load static humanize i18n hq %}

{% block title %}{% translate "Website status" %}{% endblock %}
{% block heading %}{% translate "Website status" %}{% endblock %}

{% block module_css %}<link rel="stylesheet" href="{% static 'hq/status/css/status.css' %}">{% endblock %}

{% block actions %}
    {% comment %}
        A format switch rather than a disclosure: the same facts are either laid out as cards or
        printed as the JSON an API reader would get, never both at once. The two panels are
        siblings so the button can simply swap which is on.
    {% endcomment %}
    <div class="hq-actions">
        <a class="hq-link hq-raw-open" href="{{ json_url }}" target="_blank" rel="noopener">
            {% translate "Open endpoint" %}{% hq_icon "external-link" %}
        </a>
        <button type="button"
                class="btn-secondary hq-raw-toggle"
                data-url="{{ json_url }}"
                data-label-show="{% translate 'Show JSON' %}"
                data-label-hide="{% translate 'Show cards' %}"
                aria-expanded="false"
                aria-controls="hq-json">
            {% hq_icon "braces" %}
            <span class="hq-raw-label">{% translate "Show JSON" %}</span>
        </button>
    </div>
{% endblock %}

{% block content %}
    <div id="hq-cards" class="hq-panel">
        <div class="tiles hq-tiles">
            {% comment %}
                The environment's warning colour rides on the tile's stripe, which is what a
                .tile is already built to be told.
            {% endcomment %}
            {% if environment %}
                <div class="tile hq-tile-env env-{{ environment_slug }}">
                    <div class="label">{% translate "Environment" %}</div>
                    <div class="value">{{ environment }}</div>
                </div>
            {% endif %}
            {% if repo_url %}
                <div class="tile violet">
                    <div class="label">{% translate "Repository" %}</div>
                    <div class="value hq-value-sm">
                        <a class="hq-link" href="{{ repo_url }}" target="_blank" rel="noopener">
                            {{ repo_name }}{% hq_icon "external-link" %}
                        </a>
                    </div>
                </div>
            {% endif %}
            <div class="tile gold">
                <div class="label">{% translate "Branch" %}</div>
                <div class="value">{{ branch|default:"—" }}</div>
            </div>
            <div class="tile">
                <div class="label">{% translate "Version" %}</div>
                <div class="value">{{ version|default:"—" }}</div>
            </div>
            {% comment %}
                The number is the CI run, so it is worth a click: it opens the log of the build
                that produced this image. A local build has no run behind it and the tile says so
                rather than borrowing a number.
            {% endcomment %}
            <div class="tile accent">
                <div class="label">{% translate "Build" %}</div>
                <div class="value num">
                    {% if build_url %}
                        <a class="hq-link" href="{{ build_url }}" target="_blank" rel="noopener">
                            #{{ build_number }}{% hq_icon "external-link" %}
                        </a>
                    {% else %}
                        {{ build_number|default:"—" }}
                    {% endif %}
                </div>
            </div>
            {% comment %}
                The string Sentry files events under, so a stack trace and this page can be
                matched to each other. Empty exactly when Sentry is not reporting at all.
            {% endcomment %}
            <div class="tile teal">
                <div class="label">{% translate "Release" %}</div>
                <div class="value hq-value-sm mono">{{ sentry_release|default:"—" }}</div>
            </div>
        </div>
        <div class="card hq-card">
            <h2 class="card-title">{% hq_icon "git-commit-horizontal" %} {% translate "Deployment" %}</h2>
            <p class="card-sub">{% translate "What the image now running in this container was built from" %}</p>
            <dl class="hq-facts">
                <div class="hq-row">
                    <dt>{% translate "Commit" %}</dt>
                    <dd>
                        {% if commit_url %}
                            <a class="hq-link mono" href="{{ commit_url }}" target="_blank" rel="noopener">
                                {{ commit_short }}{% hq_icon "external-link" %}
                            </a>
                        {% elif commit_short %}
                            <span class="mono">{{ commit_short }}</span>
                        {% else %}
                            <span class="muted">—</span>
                        {% endif %}
                    </dd>
                </div>
                {% comment %}
                    The half `git describe --abbrev=0` throws away. It belongs next to the commit
                    rather than beside the version: it qualifies which commit is deployed, not
                    what the release is called.
                {% endcomment %}
                <div class="hq-row">
                    <dt>{% translate "Ahead of tag" %}</dt>
                    <dd>
                        {% if commits_since_tag is None %}
                            <span class="muted">—</span>
                        {% elif commits_since_tag %}
                            <span class="num">+{{ commits_since_tag }}</span>
                            <span class="hq-hint">{% blocktranslate with tag=version %}past {{ tag }}{% endblocktranslate %}</span>
                        {% else %}
                            <span class="num">{% translate "on the tag" %}</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="hq-row">
                    <dt>{% translate "Subject" %}</dt>
                    <dd class="hq-subject">{{ subject|default:"—" }}</dd>
                </div>
                <div class="hq-row">
                    <dt>{% translate "Committed" %}</dt>
                    <dd>
                        {% if committed_at %}
                            <span class="num">{{ committed_at|date:"j M Y H:i" }}</span>
                            <span class="hq-hint">{{ committed_at|naturaltime }}</span>
                        {% else %}
                            <span class="muted">—</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="hq-row">
                    <dt>{% translate "Built" %}</dt>
                    <dd>
                        {% if built_at %}
                            <span class="num">{{ built_at|date:"j M Y H:i" }}</span>
                            <span class="hq-hint">{{ built_at|naturaltime }}</span>
                        {% else %}
                            <span class="muted">—</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="hq-row">
                    <dt>{% translate "Deployed" %}</dt>
                    <dd>
                        {% if deployed_at %}
                            <span class="num">{{ deployed_at|date:"j M Y H:i" }}</span>
                            <span class="hq-hint">{{ deployed_at|naturaltime }}</span>
                        {% else %}
                            <span class="muted">—</span>
                        {% endif %}
                    </dd>
                </div>
            </dl>
            {% if pipeline %}
                {% comment %}
                    The commit → build → deploy span, drawn to scale. The segments are sized by JS
                    from data-seconds rather than a style attribute; the CSS min-width keeps a
                    near-instant stage from vanishing, and a segment too thin to read still has
                    its figure in the legend below.
                {% endcomment %}
                <div class="hq-pipeline">
                    <div class="hq-pipeline-head">
                        <span class="label">{% translate "Path to production" %}</span>
                        <span class="hq-total num">{% blocktranslate with total=pipeline.total %}{{ total }} in total{% endblocktranslate %}</span>
                    </div>
                    <div class="hq-track">
                        {% for stage in pipeline.stages %}
                            <div class="hq-seg hq-seg-{{ stage.key }}"
                                 data-seconds="{{ stage.seconds }}"
                                 title="{{ stage.label }}: {{ stage.text }}"></div>
                        {% endfor %}
                    </div>
                    <div class="hq-legend">
                        {% for stage in pipeline.stages %}
                            <span class="hq-key">
                                <span class="hq-dot hq-dot-{{ stage.key }}"></span>
                                {{ stage.label }}
                                <b class="num">{{ stage.text }}</b>
                            </span>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            {% comment %}
                Said plainly, because the number is only as honest as its source: the container
                start time is stamped by the entrypoint, so a restart or a reboot moves it without
                anything having been released.
            {% endcomment %}
            <p class="note hq-note">
                {% hq_icon "info" %}
                <span>{% translate "“Deployed” is the container start time — a restart or a reboot moves it with nothing having been released." %}</span>
            </p>
        </div>
        {% comment %}
            Side by side: the runtime rows are a narrow label-and-value list, and "everything
            applied" is a single line — each was claiming a full-width strip for content that
            fills a third of it. They stack again below 900px.
        {% endcomment %}
        <div class="hq-pair">
            {% comment %}
                Everything above describes the image. This describes the process running out of
                it — which container answered, how long it has been up, and what versions it
                really has as opposed to what the lock file asks for.
            {% endcomment %}
            <div class="card hq-card">
                <h2 class="card-title">{% hq_icon "server" %} {% translate "Runtime" %}</h2>
                <p class="card-sub">{% translate "The container that served this request, and the versions it runs on" %}</p>
                <dl class="hq-facts">
                    <div class="hq-row">
                        <dt>
                            {% include "hq/status/_brand_mark.html" with brand=docker_icon only %}
                            {% translate "Container" %}
                        </dt>
                        <dd>
                            {% if container_id %}
                                <span class="mono">{{ container_id }}</span>
                            {% else %}
                                <span class="muted">{% translate "outside Docker" %}</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div class="hq-row">
                        <dt>{% hq_icon "timer" %}{% translate "Uptime" %}</dt>
                        <dd>
                            {% if uptime %}
                                <span class="num">{{ uptime }}</span>
                            {% else %}
                                <span class="muted">—</span>
                            {% endif %}
                        </dd>
                    </div>
                    {% comment %}
                        DEBUG on a deployed box leaks tracebacks and settings to anyone who can
                        provoke an error, so it is stated rather than assumed — and coloured when
                        it is on.
                    {% endcomment %}
                    <div class="hq-row">
                        <dt>{% hq_icon "bug" %}{% translate "Debug" %}</dt>
                        <dd>
                            {% if debug %}
                                <span class="hq-flag hq-flag-on">{% translate "on" %}</span>
                            {% else %}
                                <span class="num">{% translate "off" %}</span>
                            {% endif %}
                        </dd>
                    </div>
                    {% for entry in runtime %}
                        <div class="hq-row">
                            <dt>
                                {% include "hq/status/_brand_mark.html" with brand=entry.brand only %}
                                {{ entry.label }}
                            </dt>
                            <dd class="num">{{ entry.value }}</dd>
                        </div>
                    {% endfor %}
                </dl>
            </div>
            {% comment %}
                The whole plan, not a count: a number says something is wrong without saying what,
                and this is the page you would open to find out.
            {% endcomment %}
            <div class="card hq-card">
                <h2 class="card-title">{% hq_icon "layers" %} {% translate "Migrations" %}</h2>
                <p class="card-sub">{% translate "What this database still owes the code running against it" %}</p>
                {% if migrations is None %}
                    <p class="note hq-note">
                        {% hq_icon "info" %}
                        <span>{% translate "The migration plan could not be read." %}</span>
                    </p>
                {% elif migrations %}
                    <ol class="hq-plan">
                        {% for migration in migrations %}
                            <li>
                                <span class="hq-plan-app">{{ migration.app }}</span>
                                <span class="mono">{{ migration.name }}</span>
                            </li>
                        {% endfor %}
                    </ol>
                    <p class="note hq-note">
                        {% hq_icon "triangle-alert" %}
                        <span>
                            {% blocktranslate count counter=migrations|length %}
                                One migration is waiting — the code is running against a schema it does not expect.
                            {% plural %}
                                {{ counter }} migrations are waiting — the code is running against a schema it does not expect.
                            {% endblocktranslate %}
                        </span>
                    </p>
                {% else %}
                    <p class="hq-ok">{% hq_icon "check" %} {% translate "Everything applied." %}</p>
                {% endif %}
            </div>
        </div>
        {% comment %}
            Two donuts and not one, because the disk is measured in hundreds of gigabytes and this
            application in tens of megabytes — a single chart would give the database an arc
            thinner than a pixel and call it a reading.
        {% endcomment %}
        <div class="card hq-card">
            <h2 class="card-title">{% hq_icon "hard-drive" %} {% translate "Storage" %}</h2>
            <p class="card-sub">{% translate "How full the box is, and what this application accounts for" %}</p>
            <div class="hq-donuts">
                {% if storage.disk_chart %}
                    {% include "hq/status/_donut.html" with chart=storage.disk_chart chart_title=_("Disk") only %}
                {% endif %}
                {% if storage.application_chart %}
                    {% include "hq/status/_donut.html" with chart=storage.application_chart chart_title=_("This application") only %}
                {% endif %}
            </div>
            {% if not storage.media_measured %}
                <p class="note hq-note">
                    {% hq_icon "info" %}
                    <span>{% translate "The media directory was not measured." %}</span>
                </p>
            {% elif storage.media is None and storage.media_path %}
                <p class="note hq-note">
                    {% hq_icon "info" %}
                    <span>{% blocktranslate with path=storage.media_path %}{{ path }} could not be measured — it is missing, or larger than the file budget.{% endblocktranslate %}</span>
                </p>
            {% endif %}
        </div>
        {% if show_environment_variables %}
            {% include "hq/status/_secret_list.html" with entries=environment_variables list_title=_("Environment variables") list_icon="sliders-horizontal" only %}
        {% endif %}
        {% if show_django_settings %}
            {% include "hq/status/_secret_list.html" with entries=django_settings list_title=_("Django settings") list_icon="settings" only %}
        {% endif %}
    </div>
    {% comment %}
        The same facts, in the shape a script would get them. Fetched rather than rendered inline
        so what you read is genuinely the endpoint's answer — if the JSON ever disagreed with the
        cards, this is where it would show.
    {% endcomment %}
    <pre id="hq-json" class="hq-json hq-panel" data-loading="{% translate 'Loading…' %}" hidden></pre>
{% endblock %}

{% block scripts %}<script src="{% static 'hq/status/js/status.js' %}" defer></script>{% endblock %}