117 lines
5.2 KiB
HTML
117 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Порты · {{.Agent.Name}} — LPRA</title>
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
<style>
|
|
.frow { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
|
|
.frow label { margin:0 0 6px; }
|
|
.frow .fld { display:flex; flex-direction:column; }
|
|
.frow select, .frow input, .frow button {
|
|
height:40px; box-sizing:border-box; font-size:14px; line-height:1; margin:0;
|
|
}
|
|
.frow select {
|
|
padding:0 32px 0 12px; border-radius:8px; border:1px solid var(--border);
|
|
background:#0c0f13; color:var(--text);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">LPRA · Порты — {{.Agent.Name}} <span class="muted">({{.Agent.Hostname}})</span></div>
|
|
<nav>
|
|
<a href="/">← Машины</a>
|
|
<a href="/agents/{{.Agent.ID}}/terminal">Терминал</a>
|
|
<a href="/agents/{{.Agent.ID}}/files">Файлы</a>
|
|
</nav>
|
|
</header>
|
|
<div class="wrap">
|
|
<h1>Проброс портов</h1>
|
|
<p class="muted">Порт сервиса на машине-клиенте становится доступен на порту хоста.
|
|
Клиент за NAT — трафик идёт исходящим подключением агента.</p>
|
|
{{if .Error}}<div class="err">{{.Error}}</div>{{end}}
|
|
|
|
<div class="card">
|
|
<h2>Правила</h2>
|
|
{{if .Rules}}
|
|
<table>
|
|
<thead><tr><th>Тип</th><th>Хост (порт)</th><th>→ Клиент (порт)</th><th>Слушать на</th><th></th></tr></thead>
|
|
<tbody>
|
|
{{range .Rules}}
|
|
<tr>
|
|
<td><code>{{.Proto}}</code></td>
|
|
<td class="muted">:{{.HostPort}}</td>
|
|
<td class="muted">127.0.0.1:{{.ClientPort}}</td>
|
|
<td class="muted">{{.ListenAddr}}</td>
|
|
<td style="text-align:right">
|
|
<form method="post" action="/forwards/{{.ID}}/delete" style="display:inline"
|
|
onsubmit="return confirm('Удалить правило?')">
|
|
<input type="hidden" name="csrf" value="{{$.CSRF}}">
|
|
<button class="btn danger small" type="submit">Удалить</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{else}}
|
|
<p class="muted">Правил пока нет.</p>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Новое правило</h2>
|
|
<form method="post" action="/agents/{{.Agent.ID}}/forwards/add">
|
|
<input type="hidden" name="csrf" value="{{.CSRF}}">
|
|
<div class="frow">
|
|
<div class="fld">
|
|
<label>Тип</label>
|
|
<select name="proto" id="proto">
|
|
<option value="http">http (long-poll, работает везде)</option>
|
|
<option value="tcp">tcp (прямой, низкая задержка, порт 8446)</option>
|
|
<option value="udp">udp (прямой, порт 8446)</option>
|
|
</select>
|
|
</div>
|
|
<div class="fld">
|
|
<label>Порт на клиенте</label>
|
|
<input type="text" name="client_port" placeholder="напр. 22" style="max-width:140px" required>
|
|
</div>
|
|
<div class="fld">
|
|
<label>Порт на хосте</label>
|
|
<input type="text" name="host_port" placeholder="напр. 2222" style="max-width:140px" required>
|
|
</div>
|
|
<div class="fld">
|
|
<label>Слушать на хосте</label>
|
|
<input type="text" name="listen_addr" value="0.0.0.0" style="max-width:160px">
|
|
</div>
|
|
<button type="submit">Создать</button>
|
|
</div>
|
|
</form>
|
|
<p class="muted" id="note" style="font-size:13px; margin-top:12px"></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Режимы</h2>
|
|
<ul class="muted" style="font-size:14px; line-height:1.7">
|
|
<li><b>http</b> — туннель поверх HTTP long-poll (через nginx :8445). Работает везде, где доступна панель, но задержка выше.</li>
|
|
<li><b>tcp</b> — прямой TCP-мультиплексор через порт <b>8446</b> хоста. Минимальная задержка, keep-alive, TCP_NODELAY. Нужно открыть 8446/tcp на хосте.</li>
|
|
<li><b>udp</b> — прямой UDP через порт <b>8446</b> хоста. Нужно открыть 8446/udp.</li>
|
|
</ul>
|
|
<p class="muted" style="font-size:13px">Для tcp/udp агент держит исходящее соединение к <code>host:8446</code>; несколько клиентов и портов мультиплексируются на нём.</p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var notes = {
|
|
http: 'Трафик идёт через :8445 (long-poll). Порт 8446 не требуется.',
|
|
tcp: 'Требуется открытый порт 8446/tcp на хосте. Самая низкая задержка.',
|
|
udp: 'Требуется открытый порт 8446/udp на хосте.'
|
|
};
|
|
var sel = document.getElementById('proto'), note = document.getElementById('note');
|
|
function upd(){ note.textContent = notes[sel.value] || ''; }
|
|
sel.onchange = upd; upd();
|
|
</script>
|
|
</body>
|
|
</html>
|