{% extends "base.html" %}
{% block title %}Containers{% endblock %}
{% block page_id %}containers{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ aida_rel('static/vendor/xterm/xterm.css') }}">
<style>
.c-panel{background:#172531;border:1px solid #314454;border-radius:10px;padding:16px;margin:12px 0}.c-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.c-bar label{display:flex;flex-direction:column;gap:4px}.c-bar input,.c-bar select,.c-panel textarea{background:#0b1620;color:#e3edf5;border:1px solid #4a6479;padding:8px;border-radius:5px;max-width:100%}.c-bar input{min-width:140px}.c-panel textarea{width:100%;min-height:160px;font-family:monospace}.c-panel button,.c-tabs button{background:#23425b;color:white;border:1px solid #55738a;border-radius:5px;padding:7px 12px;cursor:pointer}.c-panel button:disabled{opacity:.5;cursor:wait}.c-tabs{display:flex;gap:8px;flex-wrap:wrap}.c-tabs button[aria-selected=true]{background:#367eae}.c-table{overflow:auto}.c-table table{width:100%;border-collapse:collapse}.c-table th,.c-table td{text-align:left;padding:8px;border-bottom:1px solid #314454;white-space:nowrap}.c-table td button{margin:2px}.c-output{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto;background:#0b1620;padding:12px}.c-error{color:#ffb5aa}.c-small{color:#bdd1df;font-size:.9rem}.c-grow{flex:1;min-width:180px}.c-field{margin:10px 0}dialog.c-panel{color:#e3edf5;width:min(900px,94vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#0009}[hidden]{display:none!important}@media(max-width:600px){.c-panel{padding:10px}.c-bar label{width:100%}.c-bar input,.c-bar select{width:100%}.c-table{max-width:100%}}
.c-terminal-pane{height:360px;min-height:200px;background:#05101a;padding:8px}.c-terminal-pane>.xterm{height:100%}#terminal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}#terminal-tabs span{display:flex;gap:2px}#terminal-tabs [aria-selected=true]{background:#367eae}#terminal-location{overflow-wrap:anywhere}
</style>
{% endblock %}
{% block content %}
<h1>Containers</h1><p>Docker, Compose and Kubernetes on this PC. Commands show their actual output and exit status.</p>
<p id="container-message" role="status" aria-live="polite"></p>
<div class="c-tabs" role="tablist" aria-label="Container tools">
<button type="button" data-tab="docker" role="tab" aria-selected="true">Docker</button>
<button type="button" data-tab="compose" role="tab" aria-selected="false">Compose</button>
<button type="button" data-tab="k8s" role="tab" aria-selected="false">Kubernetes</button>
<button type="button" data-tab="registry" role="tab" aria-selected="false">Registry</button>
</div>
<section id="pane-docker" class="c-panel">
<div class="c-bar"><h2>Docker</h2><button id="docker-refresh" type="button">Refresh</button><span id="docker-status" role="status"></span>
<label>Inventory<select id="docker-family"><option value="containers">Containers</option><option value="images">Images</option><option value="volumes">Volumes</option><option value="networks">Networks</option></select></label></div>
<div id="docker-table" class="c-table"></div><button id="volume-prune" type="button">Prune unused volumes</button>
<details class="c-field"><summary>Create a container</summary>
<form id="container-create" class="c-bar"><label>Image<input id="create-image" required placeholder="nginx:latest"></label><label>Name<input id="create-name" placeholder="Optional"></label>
<label>Ports (one per line)<textarea id="create-ports" placeholder="127.0.0.1:8080:80"></textarea></label><label>Volumes (one per line)<textarea id="create-volumes" placeholder="C:/data:/data"></textarea></label><label>Environment (one per line)<textarea id="create-env" placeholder="NAME=value"></textarea></label><label>Network<input id="create-network" placeholder="Optional"></label><label>Restart<select id="create-restart"><option value="no">No</option><option value="always">Always</option><option value="on-failure">On failure</option><option value="unless-stopped">Unless stopped</option></select></label><label>Command argv (JSON array)<input id="create-command" placeholder='["echo","hello"]'></label><label><input id="create-detach" type="checkbox" checked>Detached</label><label><input id="create-remove" type="checkbox">Remove on exit</label><label><input id="create-privileged" type="checkbox">Privileged</label><button type="submit">Create and run</button></form></details>
<div class="c-bar"><label>Image reference<input id="image-reference" placeholder="registry/repository:tag"></label><button type="button" id="image-pull">Pull image</button><button type="button" id="image-push">Push image</button></div>
<details class="c-field"><summary>Create a volume or network</summary><form id="docker-resource-create" class="c-bar"><label>Type<select id="resource-family"><option value="volumes">Volume</option><option value="networks">Network</option></select></label><label>Name<input id="resource-name" required></label><label>Driver<input id="resource-driver" placeholder="Optional"></label><label>Network subnet<input id="resource-subnet" placeholder="Optional"></label><button type="submit">Create</button></form></details>
</section>
<section id="pane-compose" class="c-panel" hidden>
<h2>Compose</h2><div class="c-bar"><button id="compose-refresh" type="button">List running projects</button><label class="c-grow">Compose file on this PC<input id="compose-path" placeholder="C:/project/compose.yaml"></label><button id="compose-open" type="button">Open file</button><button id="compose-new" type="button">New file</button></div>
<div id="compose-projects" class="c-table"></div>
<label class="c-field">Compose YAML<textarea id="compose-content" spellcheck="false" aria-label="Compose YAML"></textarea></label>
<div class="c-bar"><button id="compose-validate" type="button">Validate with Compose</button><button id="compose-save" type="button">Save file</button><button id="compose-services" type="button">Services</button><button id="compose-logs" type="button">Logs</button></div>
<div class="c-bar c-field"><label>Service<input id="compose-service" placeholder="All services"></label><label>Replicas<input id="compose-count" type="number" min="0" max="1000" value="1"></label><label>Command<input id="compose-command" placeholder="Command in selected service"></label></div>
<div class="c-bar" id="compose-actions">{% for action in ['up','down','restart','build','pull','start','stop','scale','exec'] %}<button type="button" data-compose-action="{{ action }}">{{ action|capitalize }}</button>{% endfor %}</div>
<p class="c-small">Up starts detached services. Down removes the project's containers and networks. Validate runs the native Compose validator; save writes the selected local file.</p><div id="compose-service-table" class="c-table"></div>
</section>
<section id="pane-k8s" class="c-panel" hidden>
<h2>Kubernetes</h2><div class="c-bar"><button id="k8s-refresh-contexts" type="button">Refresh contexts</button><label>Context<select id="k8s-context"></select></label><button id="k8s-use-context" type="button">Use context</button><label>Namespace<select id="k8s-namespace"><option value="default">default</option></select></label><label>Resource<select id="k8s-family">{% for item in ['pods','deployments','services','configmaps','secrets','ingresses','persistentvolumeclaims','events'] %}<option value="{{ item }}">{{ item|capitalize }}</option>{% endfor %}</select></label><button id="k8s-refresh" type="button">Refresh resources</button></div>
<div id="k8s-table" class="c-table"></div>
<details class="c-field"><summary>Apply YAML manifest</summary><textarea id="k8s-manifest" spellcheck="false" aria-label="Kubernetes manifest"></textarea><button id="k8s-apply" type="button">Apply to selected namespace</button></details>
<p class="c-small">Secret lists show key names. Opening a secret displays its actual owner-only JSON. Port forwarding binds to 127.0.0.1 on this PC for a bounded duration.</p>
</section>
<section id="pane-registry" class="c-panel" hidden>
<h2>Registry V2</h2><form id="registry-connect" class="c-bar"><label class="c-grow">Registry origin<input id="registry-url" required placeholder="https://registry.example.com"></label><label>Username<input id="registry-user" autocomplete="username"></label><label>Password<input id="registry-password" type="password" autocomplete="new-password"></label><label>Bearer token<input id="registry-token" type="password" autocomplete="off"></label><button type="submit">Connect</button><button id="registry-disconnect" type="button">Disconnect</button></form>
<p id="registry-status" class="c-small">Credentials stay in this browser session's server connection and are cleared when it closes.</p><button id="registry-refresh" type="button">Repositories</button><button id="registry-more-repos" type="button" hidden>More repositories</button><div id="registry-table" class="c-table"></div>
<div class="c-bar c-field"><label>Repository<input id="registry-repository" placeholder="library/nginx"></label><button id="registry-tags" type="button">Tags</button><button id="registry-more-tags" type="button" hidden>More tags</button></div><div id="registry-tags-table" class="c-table"></div>
<p class="c-small">Catalog support depends on the registry. Docker Hub's V2 catalog is unavailable; enter a known repository to retrieve its actual tags and manifests.</p>
</section>
<section id="terminal-panel" class="c-panel">
<h2>Interactive container and pod shells</h2><p class="c-small">Persistent /bin/sh shells in the selected running resource. Context, namespace and container are captured when opened. Ctrl-C interrupts, Tab completes, and F6 moves out of the terminal. Reopening this page reconnects to retained sessions.</p>
<div id="terminal-review" class="c-bar" hidden><strong id="terminal-target"></strong><label id="terminal-container-field" hidden>Pod container<select id="terminal-container" aria-label="Pod container"></select></label><button id="terminal-open" type="button" disabled>Open shell</button></div>
<div class="c-bar c-field"><button id="terminal-reconnect" type="button">Reconnect sessions</button><button id="terminal-interrupt" type="button">Ctrl-C</button><button id="terminal-tab" type="button">Tab</button><button id="terminal-clear" type="button">Clear display</button><button id="terminal-retry" type="button">Retry pending input</button><button id="terminal-smaller" type="button">Smaller</button><button id="terminal-larger" type="button">Larger</button></div>
<div id="terminal-tabs" role="tablist" aria-label="Container and pod terminal sessions"></div><p id="terminal-location" class="c-small"></p><p id="terminal-status" role="status" aria-live="polite"></p><div id="terminal-host"></div>
<div class="c-bar c-field"><label>Find in output<input id="terminal-search" type="search"></label><button id="terminal-find-previous" type="button">Find previous</button><button id="terminal-find-next" type="button">Find next</button></div>
</section>
<section class="c-panel"><div class="c-bar"><h2>Commands and streams</h2><button id="jobs-refresh" type="button">Refresh jobs</button></div><div id="container-jobs"></div></section>
<dialog id="container-dialog" class="c-panel"><div class="c-bar"><h2 id="dialog-title">Details</h2><button id="dialog-close" type="button">Close</button></div><pre id="dialog-output" class="c-output"></pre><textarea id="dialog-editor" aria-label="Resource JSON" spellcheck="false" hidden></textarea><button id="dialog-save" type="button" hidden>Replace resource</button>
<form id="command-form" class="c-bar" hidden><label class="c-grow">Command<input id="command-input" required></label><label>Duration (seconds)<input id="command-duration" type="number" min="1" max="600" value="60"></label><button type="submit">Run command</button></form>
<div id="dialog-log-actions" class="c-bar" hidden><button id="logs-follow" type="button">Follow for 60 seconds</button><button id="logs-stop" type="button" disabled>Stop following</button></div>
<form id="port-form" class="c-bar" hidden><label>Local port on this PC<input id="port-local" type="number" min="1024" max="65535" value="8080"></label><label>Target port<input id="port-remote" type="number" min="1" max="65535" value="80"></label><label>Duration (seconds)<input id="port-duration" type="number" min="1" max="600" value="60"></label><button type="submit">Start local forward</button></form>
</dialog>
{% endblock %}
{% block scripts %}<script src="{{ aida_rel('static/vendor/xterm/xterm.js') }}"></script><script src="{{ aida_rel('static/vendor/xterm/xterm-addon-fit.js') }}"></script><script src="{{ aida_rel('static/vendor/xterm/xterm-addon-search.js') }}"></script><script src="{{ aida_rel('static/vendor/socketio-4.7.2/socket.io.min.js') }}"></script><script src="{{ aida_rel('static/js/container_dashboard.js') }}"></script>{% endblock %}