|
{% extends "base.html" %}
|
|
{% from "_macros.html" import modal %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="/static/css/containers.css">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="ci-page" id="container-instance"
|
|
data-slug="{{ project_slug }}"
|
|
data-uid="{{ instance['uid'] }}"
|
|
data-name="{{ instance['name'] }}"
|
|
data-status="{{ instance['status'] }}">
|
|
<div class="ci-header">
|
|
<a href="/admin/containers" class="back-link">← Containers</a>
|
|
<div class="ci-titlebar">
|
|
<h1 class="ci-title">{{ instance['name'] }}</h1>
|
|
<span class="cm-badge cm-{{ instance['status'] }}" id="ci-status">{{ instance['status'] }}</span>
|
|
</div>
|
|
{% if project %}
|
|
<a class="ci-project" href="/projects/{{ project_slug }}/containers">{{ project['title'] or project_slug }}</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="ci-grid">
|
|
<section class="card ci-card ci-actions-card">
|
|
<h2>Controls</h2>
|
|
<div class="ci-actions" id="ci-actions"></div>
|
|
<div class="ci-runtime">
|
|
<div class="ci-kv"><span>Command</span><code>{{ runtime['command'] }}</code></div>
|
|
<div class="ci-kv"><span>Restart policy</span><code>{{ instance['restart_policy'] or 'never' }}</code></div>
|
|
<div class="ci-kv"><span>Restarts</span><code>{{ runtime['restart_count'] }}</code></div>
|
|
<div class="ci-kv"><span>Container</span><code id="ci-container-id">{{ runtime['container_id'] or '-' }}</code></div>
|
|
<div class="ci-kv"><span>Image</span><code>ppy:latest</code></div>
|
|
</div>
|
|
{% if instance['ingress_slug'] %}
|
|
<div class="ci-ingress" id="ci-ingress">
|
|
<span class="ci-ingress-label">Ingress</span>
|
|
<a href="/p/{{ instance['ingress_slug'] }}" target="_blank" rel="noopener">/p/{{ instance['ingress_slug'] }}</a>
|
|
<span class="cm-muted">container port {{ instance['ingress_port'] or '(first mapped)' }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="card ci-card ci-metrics-card">
|
|
<h2>Metrics</h2>
|
|
<div class="ci-metrics" id="ci-metrics">
|
|
<div class="ci-metric"><span class="ci-metric-label">Samples</span><span class="ci-metric-value" data-metric="samples">{{ stats['samples'] }}</span></div>
|
|
<div class="ci-metric"><span class="ci-metric-label">CPU avg</span><span class="ci-metric-value" data-metric="cpu_avg">{{ stats['cpu_avg'] }}%</span></div>
|
|
<div class="ci-metric"><span class="ci-metric-label">CPU p95</span><span class="ci-metric-value" data-metric="cpu_p95">{{ stats['cpu_p95'] }}%</span></div>
|
|
<div class="ci-metric"><span class="ci-metric-label">Mem max</span><span class="ci-metric-value" data-metric="mem_max">{{ stats['mem_max'] }}</span></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="card ci-card">
|
|
<div class="ci-card-head">
|
|
<h2>Schedules</h2>
|
|
<button type="button" class="btn btn-secondary btn-sm" data-modal="ci-schedule-modal">Add schedule</button>
|
|
</div>
|
|
<ul class="ci-schedules" id="ci-schedules">
|
|
{% for s in schedules %}
|
|
<li class="ci-schedule" data-sid="{{ s['uid'] }}">
|
|
<span class="ci-schedule-action">{{ s['action'] }}</span>
|
|
<span class="ci-schedule-next">next {{ s['next_run_at'] or '-' }}</span>
|
|
<span class="cm-muted">runs {{ s['run_count'] or 0 }}</span>
|
|
<button type="button" class="btn btn-secondary btn-sm" data-schedule-delete="{{ s['uid'] }}">Delete</button>
|
|
</li>
|
|
{% else %}
|
|
<li class="cm-muted ci-schedule-empty">No schedules.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="card ci-card">
|
|
<h2>Exec</h2>
|
|
<div class="ci-exec">
|
|
<input type="text" id="ci-exec-input" placeholder="one-shot command, e.g. ls -la /app">
|
|
<button type="button" class="btn btn-secondary" id="ci-exec-run">Run</button>
|
|
<button type="button" class="btn btn-secondary" id="ci-term-toggle">Open terminal</button>
|
|
</div>
|
|
<div class="ci-terminal" id="ci-terminal" hidden>
|
|
<pre class="ci-log ci-term-output" id="ci-term"></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card ci-card">
|
|
<h2>Logs</h2>
|
|
<pre class="ci-log" id="ci-log"></pre>
|
|
</section>
|
|
</div>
|
|
|
|
{% call modal('ci-schedule-modal', 'Add schedule') %}
|
|
<form id="ci-schedule-form" class="cm-modal-form">
|
|
<div class="grid-2col">
|
|
<div class="auth-field">
|
|
<label for="ci-sched-action">Action</label>
|
|
<select id="ci-sched-action" name="action">
|
|
<option value="start">start</option>
|
|
<option value="stop">stop</option>
|
|
</select>
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="ci-sched-kind">Kind</label>
|
|
<select id="ci-sched-kind" name="kind">
|
|
<option value="cron">cron</option>
|
|
<option value="interval">interval</option>
|
|
<option value="once">once</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="auth-field auth-field-gap" data-sched-field="cron">
|
|
<label for="ci-sched-cron">Cron expression</label>
|
|
<input type="text" id="ci-sched-cron" name="cron" placeholder="0 3 * * *">
|
|
</div>
|
|
<div class="auth-field auth-field-gap" data-sched-field="interval" hidden>
|
|
<label for="ci-sched-every">Every (seconds)</label>
|
|
<input type="number" id="ci-sched-every" name="every_seconds" min="1" placeholder="3600">
|
|
</div>
|
|
<div class="auth-field auth-field-gap" data-sched-field="once" hidden>
|
|
<label for="ci-sched-delay">Delay (seconds from now)</label>
|
|
<input type="number" id="ci-sched-delay" name="delay_seconds" min="1" placeholder="60">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="modal-close btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Add</button>
|
|
</div>
|
|
</form>
|
|
{% endcall %}
|
|
{% endblock %}
|
|
{% block extra_js %}
|
|
<script type="module">
|
|
import { ContainerInstance } from "/static/js/ContainerInstance.js";
|
|
const root = document.getElementById("container-instance");
|
|
const instance = new ContainerInstance(root);
|
|
instance.init();
|
|
window.app.containerInstance = instance;
|
|
</script>
|
|
{% endblock %}
|