ara/ara/ui/templates/index.html

239 lines
13 KiB
HTML

{% extends "base.html" %}
{% load datetime_formatting %}
{% load truncatepath %}
{% block body %}
{% if not static_generation %}
<div class="pf-l-flex">
<div class="pf-l-flex">
<form novalidate action="/" method="get" class="pf-c-form">
<div class="pf-c-form__group pf-m-inline">
<div class="pf-l-flex__item pf-m-flex-1">
<label class="pf-c-form__label" for="ansible_version">
<span class="pf-c-form__label-text">Ansible version</span>
</label>
<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="text" id="ansible_version" name="ansible_version" value="{% if search_form.ansible_version.value is not null %}{{ search_form.ansible_version.value }}{% endif %}" />
</div>
</div>
<div class="pf-l-flex__item pf-m-flex-1">
<label class="pf-c-form__label" for="controller">
<span class="pf-c-form__label-text">Controller</span>
</label>
<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="text" id="controller" name="controller" value="{% if search_form.controller.value is not null %}{{ search_form.controller.value }}{% endif %}" />
</div>
</div>
<div class="pf-l-flex__item pf-m-flex-1">
<label class="pf-c-form__label" for="name">
<span class="pf-c-form__label-text">Name</span>
</label>
<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="text" id="name" name="name" value="{% if search_form.name.value is not null %}{{ search_form.name.value }}{% endif %}" />
</div>
</div>
<div class="pf-l-flex__item pf-m-flex-1">
<label class="pf-c-form__label" for="path">
<span class="pf-c-form__label-text">Path</span>
</label>
<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="text" id="path" name="path" value="{% if search_form.path.value is not null %}{{ search_form.path.value }}{% endif %}" />
</div>
</div>
<div class="pf-l-flex__item pf-m-flex-1">
<div class="pf-c-form__group">
<label class="pf-c-form__label" for="label">
<span class="pf-c-form__label-text">Label</span>
</label>
<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="text" id="label" name="label" value="{% if search_form.label.value is not null %}{{ search_form.label.value }}{% endif %}" />
</div>
</div>
</div>
<div class="pf-l-flex__item">
<div class="pf-c-form__group">
<label class="pf-c-form__label" for="status">
<span class="pf-c-form__label-text">Status</span>
</label>
<div class="pf-c-form__group pf-m-inline">
<fieldset class="pf-c-form__fieldset" aria-labelledby="select-checkbox-expanded-label">
{% for value, text in search_form.status.field.choices %}
{% if value != "unknown" %}
<label class="pf-c-check pf-c-select__menu-item" for="{{ value }}">
{% if value in search_form.status.data %}
<input class="pf-c-check__input" type="checkbox" id="{{ value }}" name="status" value="{{ value }}" checked />
{% else %}
<input class="pf-c-check__input" type="checkbox" id="{{ value }}" name="status" value="{{ value }}" />
{% endif %}
<span class="pf-c-check__label">{{ value }}</span>
</label>
{% endif %}
{% endfor %}
</fieldset>
</div>
</div>
</div>
<div class="pf-l-flex__item">
<div class="pf-c-form__actions">
<button class="pf-c-button pf-m-primary" type="submit"><i class="fas fa-search"></i> Search</button>
</div>
</div>
{% if search_query %}
<div class="pf-l-flex__item">
<div class="pf-c-form__actions">
<a href="/">
<button class="pf-c-button pf-m-plain pf-m-link" type="button" aria-label="Remove">
<i class="fas fa-times" aria-hidden="true"></i> Clear filters
</button>
</a>
</div>
</div>
{% endif %}
</div>
</form>
</div>
<div class="pf-l-flex pf-m-align-right">
<div class="pf-l-flex__item">
<h1 class="pf-c-title pf-m-2xl"><i class="fas fa-clock"></i> Filter by date</h1>
<ul class="pf-c-list pf-m-inline">
<li><a href="?started_after={% past_timestamp with minutes=60 %}">Last 60 minutes</a></li>
<li><a href="?started_after={% past_timestamp with hours=24 %}">Last 24 hours</a></li>
<li><a href="?started_after={% past_timestamp with days=7 %}">Last 7 days</a></li>
<li><a href="?started_after={% past_timestamp with days=30 %}">Last 30 days</a></li>
</ul>
</div>
</div>
</div>
{% include "partials/pagination.html" %}
{% endif %}
<div class="pf-l-flex">
<table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" aria-label="Playbook runs" id="playbooks">
<thead>
<tr role="row">
<th role="columnheader" scope="col" class="pf-m-fit-content">Status</th>
<th role="columnheader" scope="col" class="pf-m-fit-content pf-c-table__sort">
{% include "partials/sort_by_date.html" %}
</th>
<th role="columnheader" scope="col" class="pf-m-fit-content pf-c-table__sort">
{% include "partials/sort_by_duration.html" %}
</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Ansible version</th>
<th role="columnheader" scope="col">Controller</th>
<th role="columnheader" scope="col">Name (or path)</th>
<th role="columnheader" scope="col">Labels</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Hosts</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Plays</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Tasks</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Results</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Files</th>
<th role="columnheader" scope="col" class="pf-m-fit-content">Records</th>
<th></th>
</tr>
</thead>
<tbody role="rowgroup">
{% for playbook in data.results %}
<tr role="row" class="pf-m-success">
<td role="cell" data-label="Status" class="pf-c-table__icon pf-m-fit-content">
{% if playbook.status == "completed" %}
<div class="pf-c-alert pf-m-success pf-m-inline">
{% elif playbook.status == "failed" %}
<div class="pf-c-alert pf-m-danger pf-m-inline">
{% elif playbook.status == "running" %}
<div class="pf-c-alert pf-m-info pf-m-inline">
{% else %}
<div class="pf-c-alert pf-m-warning pf-m-inline">
{% endif %}
{% include "partials/playbook_status_icon.html" with status=playbook.status %}
</div>
</td>
<td role="cell" data-label="Date" class="pf-m-fit-content">
<span title="Date at which the playbook started">
{{ playbook.started | format_date }}
</span>
</td>
<td role="cell" data-label="Duration" class="pf-m-fit-content">
<span title="Duration of the playbook (HH:MM:SS.ms)">
{{ playbook.duration | format_duration }}
</span>
</td>
<td role="cell" data-label="Ansible version" class="pf-m-fit-content">
{{ playbook.ansible_version }}
</td>
<td role="cell" data-label="Controller" class="pf-m-fit-content">
{{ playbook.controller }}
</td>
<td role="cell" data-label="Name (or path)" class="pf-m-fit-content">
{% if static_generation %}
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html" title="{{ playbook.path }}">
{% else %}
{% if playbook.status == "failed" %}
<a href="{% url 'ui:playbook' playbook.id %}?status=failed&status=unreachable#results">
{% else %}
<a href="{% url 'ui:playbook' playbook.id %}">
{% endif %}
{% endif %}
{% if playbook.name is not None %}{{ playbook.name }}{% else %}{{ playbook.path | truncatepath:50 }}{% endif %}
</a>
</td>
<td role="cell" data-label="Labels" class="pf-m-wrap">
<div class="pf-l-flex">
{% for label in playbook.labels %}
{% if not static_generation %}
<a class="pf-c-button pf-m-secondary pf-c-label pf-m-compact" title="Search for this label" href="{% if page != 'index' %}../{% endif %}?label={{ label.name }}">
{{ label.name }}
</a>
{% else %}
<span class="pf-c-badge pf-m-unread">{{ label.name }}</span>
{% endif %}
{% endfor %}
</div>
</td>
<td role="cell" data-label="Hosts" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#hosts">{{ playbook.items.hosts }}</a>
</td>
<td role="cell" data-label="Plays" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#plays">{{ playbook.items.plays }}</a>
</td>
<td role="cell" data-label="Tasks" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#results">{{ playbook.items.tasks }}</a>
</td>
<td role="cell" data-label="Results" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#results">{{ playbook.items.results }}</a>
</td>
<td role="cell" data-label="Files" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#files">{{ playbook.items.files }}</a>
</td>
<td role="cell" data-label="Records" class="pf-m-fit-content">
<a href="{% if page != "index" %}../{% endif %}playbooks/{{ playbook.id }}.html#records">{{ playbook.items.records }}</a>
</td>
<td role="cell" data-label="CLI arguments">
<details id="cli-arguments-details">
<summary><a>CLI arguments</a></summary>
<table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid" aria-label="cli-arguments" id="cli-arguments">
<thead>
<tr role="row">
<th role="columnheader" scope="col">Argument</th>
<th role="columnheader" scope="col">Value</th>
</tr>
</thead>
<tbody role="rowgroup">
{% for arg, value in playbook.arguments.items %}
<tr role="row">
<td role="cell" data-label="Argument" class="pf-m-fit-content" style="white-space: nowrap;">{{ arg }}</td>
<td role="cell" data-label="Value" class="pf-m-fit-content">{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</details>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if not static_generation %}
{% include "partials/pagination.html" %}
{% endif %}
{% endblock %}