Files
FabledSteward/fablednetmon/templates/ansible/browse.html
T

103 lines
5.4 KiB
HTML

{% extends "base.html" %}
{% block title %}Browse Playbooks — FabledNetMon{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
<h1 style="color:#c0c0ff;">Browse Playbooks</h1>
<a href="/ansible/" style="color:#a0a0ff;font-size:0.9rem;">← Run History</a>
</div>
{% if view_contents is defined %}
<div class="card">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
<h3 style="color:#8080ff;">{{ view_path }}</h3>
<a href="/ansible/browse" style="color:#a0a0ff;font-size:0.85rem;">← Back to browse</a>
</div>
<pre style="background:#0a0a1a;padding:1rem;border-radius:4px;overflow-x:auto;font-size:0.8rem;color:#c0c0c0;max-height:600px;overflow-y:auto;">{{ view_contents }}</pre>
</div>
{% endif %}
{% if not source_data %}
{% if view_contents is not defined %}
<div class="card">
<p style="color:#606080;">No Ansible sources configured. Add sources under <code>ansible.sources</code> in <code>config.yaml</code>.</p>
</div>
{% endif %}
{% else %}
{% for sd in source_data %}
<div class="card" style="margin-bottom:1.5rem;">
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
<h3 style="color:#8080ff;">{{ sd.source.name }}</h3>
<span style="color:#404060;font-size:0.8rem;background:#12122a;padding:0.2rem 0.5rem;border-radius:3px;">{{ sd.source.type }}</span>
<span style="color:#505070;font-size:0.8rem;">{{ sd.source.path }}</span>
</div>
{% if not sd.playbooks %}
<p style="color:#606080;font-size:0.9rem;">No playbooks found at this path.</p>
{% else %}
<table style="width:100%;border-collapse:collapse;margin-bottom:1rem;">
<thead>
<tr style="background:#12122a;">
<th style="padding:0.5rem 0.75rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.82rem;">Playbook</th>
<th style="padding:0.5rem 0.75rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.82rem;width:120px;"></th>
</tr>
</thead>
<tbody>
{% for pb in sd.playbooks %}
<tr style="border-top:1px solid #1a1a3a;">
<td style="padding:0.5rem 0.75rem;color:#c0c0e0;font-size:0.88rem;font-family:monospace;">{{ pb }}</td>
<td style="padding:0.5rem 0.75rem;">
<a href="/ansible/browse/{{ sd.source.name }}/{{ pb }}" style="color:#6060c0;font-size:0.82rem;margin-right:0.75rem;">View</a>
<a href="#run-form-{{ sd.source.name }}"
onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='block';
document.getElementById('run-playbook-{{ sd.source.name }}').value='{{ pb }}';
document.getElementById('run-playbook-display-{{ sd.source.name }}').value='{{ pb }}';
return false;"
style="color:#a0a0ff;font-size:0.82rem;">Run</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{# Run trigger form for this source #}
<div id="run-form-{{ sd.source.name }}" style="display:none;background:#12122a;border-radius:4px;padding:1rem;border:1px solid #2a2a4a;">
<h4 style="color:#8080ff;margin-bottom:0.75rem;">Trigger Run</h4>
<form hx-post="/ansible/runs" hx-target="#run-result-{{ sd.source.name }}" hx-swap="innerHTML">
<input type="hidden" name="source_name" value="{{ sd.source.name }}">
<input type="hidden" id="run-playbook-{{ sd.source.name }}" name="playbook_path" value="">
<div class="form-group">
<label>Playbook</label>
<input type="text" id="run-playbook-display-{{ sd.source.name }}"
readonly style="color:#8080a0;" value="">
</div>
<div class="form-group">
<label>Inventory</label>
<select name="inventory_path" style="width:100%;padding:0.5rem 0.75rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;font-size:1rem;">
{% for inv in sd.inventories %}
<option value="{{ inv }}">{{ inv }}</option>
{% endfor %}
<option value="">— Enter manually below —</option>
</select>
</div>
<div class="form-group">
<label>Or enter inventory path manually</label>
<input type="text" id="manual-inv-{{ sd.source.name }}" placeholder="inventories/production/hosts"
style="color:#c0c0e0;">
</div>
<div style="display:flex;gap:0.75rem;align-items:center;">
<button type="button" class="btn"
onclick="var manual=document.getElementById('manual-inv-{{ sd.source.name }}').value.trim();
if(manual){document.querySelector('[name=inventory_path]').value=manual;}
htmx.trigger(this.closest('form'),'submit');">Execute</button>
<a href="#" onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='none';return false;"
style="color:#606080;font-size:0.9rem;">Cancel</a>
</div>
</form>
<div id="run-result-{{ sd.source.name }}" style="margin-top:1rem;"></div>
</div>
{% endif %}
</div>
{% endfor %}
{% endif %}
{% endblock %}