This commit is contained in:
2026-10-27 14:34:27 +03:00
parent e0130a2baf
commit 33de1cbd9f
+472 -111
View File
@@ -1,73 +1,354 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Autotest</title> <title>Autotest</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" /> <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<style> <style>
.svc-item { cursor:pointer; padding:4px 8px; font-size:13px; border-radius:4px; } .svc-item {
.svc-item:hover, .svc-item.active { background:#dbeafe; font-weight:600; } cursor: pointer;
.inst-item { cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:13px; border-radius:4px; } padding: 4px 8px;
.inst-item:hover, .inst-item.active { background:var(--brand-grey-light); } font-size: 13px;
.inst-ops { display:none; margin-left:16px; } border-radius: 4px;
.inst-ops.open { display:flex; flex-wrap:wrap; gap:4px; padding:4px 0; } }
.btn-sm { height:24px; font-size:11px; padding:0 8px; }
.op-btn { border-color:#d1d5db; color:#374151; background:#f8fafc; } .svc-item:hover,
.op-btn:hover { background:#eef2f7; } .svc-item.active {
.op-btn-modify { background:#eef2ff; border-color:#c7d2fe; color:#3730a3; } background: #dbeafe;
.op-btn-modify:hover { background:#e0e7ff; } font-weight: 600;
.op-btn-suspend { background:#fff7ed; border-color:#fed7aa; color:#9a3412; } }
.op-btn-suspend:hover { background:#ffedd5; }
.op-btn-resume { background:#ecfeff; border-color:#a5f3fc; color:#155e75; } .inst-item {
.op-btn-resume:hover { background:#cffafe; } cursor: pointer;
.op-btn-delete { background:#fef2f2; border-color:#fecaca; color:#b91c1c; } display: flex;
.op-btn-delete:hover { background:#fee2e2; } align-items: center;
.op-btn-redeploy { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; } gap: 6px;
.op-btn-redeploy:hover { background:#ede9fe; } padding: 4px 8px;
.param-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; } font-size: 13px;
.param-row label { width:160px; font-size:11px; text-align:right; flex-shrink:0; } border-radius: 4px;
.param-row label.req { font-weight:600; } }
.param-row label.req-nodfl { font-weight:600; color:var(--destructive); }
.param-row input,.param-row select { flex:1; height:28px; font-size:12px; border:1px solid var(--brand-gray); border-radius:4px; padding:0 6px; } .inst-item:hover,
#scenario-modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10000; } .inst-item.active {
.modal-backdrop { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); } background: var(--brand-grey-light);
.modal-content { position:relative; max-width:800px; margin:20px auto; background:#fff; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.3); } }
.workbench-layout { display:flex; gap:12px; }
.wb-left { width:260px; flex-shrink:0; } .inst-ops {
.wb-right { flex:1; min-width:0; } display: none;
#inst-list { max-height:calc(100vh - 300px); overflow-y:auto; } margin-left: 16px;
.token-row { display:flex; gap:4px; padding:8px 12px; } }
.token-row input { flex:1; height:26px; font-size:11px; border:1px solid var(--brand-gray); border-radius:3px; padding:0 4px; background:var(--brand-grey-light); }
.token-row button { height:26px; font-size:10px; padding:0 6px; } .inst-ops.open {
.overview-table { width:100%; table-layout:fixed; } display: flex;
.overview-table td:first-child { width:auto; } flex-wrap: wrap;
.overview-table td:last-child { width:70px; text-align:center; } gap: 4px;
.help-content { max-width:1080px; padding:4px 16px 40px; } padding: 4px 0;
.help-warning, .help-note { border-left:3px solid var(--brand-primary); background:#eff6ff; padding:10px 12px; margin:8px 0 14px; } }
.help-note { background:#fff7ed; border-color:#ea580c; margin:12px 0 0; }
.help-toc { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 0; border-bottom:1px solid var(--brand-gray); } .btn-sm {
.help-toc a { color:var(--brand-primary-dark); font-size:12px; text-decoration:none; } height: 24px;
.help-toc a:hover { text-decoration:underline; } font-size: 11px;
.help-section { padding:18px 0; border-bottom:1px solid var(--brand-gray); scroll-margin-top:12px; } padding: 0 8px;
.help-section h2 { font-size:17px; margin:0 0 10px; } }
.help-section h3 { font-size:13px; margin:0 0 6px; }
.help-section p { margin:8px 0; max-width:900px; } .op-btn {
.help-section ol { padding-left:22px; margin:6px 0 10px; } border-color: #d1d5db;
.help-section li { padding:2px 0; } color: #374151;
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:900px; } background: #f8fafc;
.help-example { max-width:900px; background:var(--brand-grey-light); border-left:3px solid var(--green); padding:10px 12px; margin:12px 0; } }
.help-glossary { display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:6px 14px; max-width:900px; }
.help-glossary dt { font-weight:600; } .op-btn:hover {
.help-glossary dd { margin:0; } background: #eef2f7;
}
.op-btn-modify {
background: #eef2ff;
border-color: #c7d2fe;
color: #3730a3;
}
.op-btn-modify:hover {
background: #e0e7ff;
}
.op-btn-suspend {
background: #fff7ed;
border-color: #fed7aa;
color: #9a3412;
}
.op-btn-suspend:hover {
background: #ffedd5;
}
.op-btn-resume {
background: #ecfeff;
border-color: #a5f3fc;
color: #155e75;
}
.op-btn-resume:hover {
background: #cffafe;
}
.op-btn-delete {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.op-btn-delete:hover {
background: #fee2e2;
}
.op-btn-redeploy {
background: #f5f3ff;
border-color: #ddd6fe;
color: #6d28d9;
}
.op-btn-redeploy:hover {
background: #ede9fe;
}
.param-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.param-row label {
width: 160px;
font-size: 11px;
text-align: right;
flex-shrink: 0;
}
.param-row label.req {
font-weight: 600;
}
.param-row label.req-nodfl {
font-weight: 600;
color: var(--destructive);
}
.param-row input,
.param-row select {
flex: 1;
height: 28px;
font-size: 12px;
border: 1px solid var(--brand-gray);
border-radius: 4px;
padding: 0 6px;
}
#scenario-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
.modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
max-width: 800px;
margin: 20px auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.workbench-layout {
display: flex;
gap: 12px;
}
.wb-left {
width: 260px;
flex-shrink: 0;
}
.wb-right {
flex: 1;
min-width: 0;
}
#inst-list {
max-height: calc(100vh - 300px);
overflow-y: auto;
}
.token-row {
display: flex;
gap: 4px;
padding: 8px 12px;
}
.token-row input {
flex: 1;
height: 26px;
font-size: 11px;
border: 1px solid var(--brand-gray);
border-radius: 3px;
padding: 0 4px;
background: var(--brand-grey-light);
}
.token-row button {
height: 26px;
font-size: 10px;
padding: 0 6px;
}
.overview-table {
width: 100%;
table-layout: fixed;
}
.overview-table td:first-child {
width: auto;
}
.overview-table td:last-child {
width: 70px;
text-align: center;
}
.help-content {
max-width: 1080px;
padding: 4px 16px 40px;
}
.help-warning,
.help-note {
border-left: 3px solid var(--brand-primary);
background: #eff6ff;
padding: 10px 12px;
margin: 8px 0 14px;
}
.help-note {
background: #fff7ed;
border-color: #ea580c;
margin: 12px 0 0;
}
.help-toc {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
padding: 10px 0;
border-bottom: 1px solid var(--brand-gray);
}
.help-toc a {
color: var(--brand-primary-dark);
font-size: 12px;
text-decoration: none;
}
.help-toc a:hover {
text-decoration: underline;
}
.help-section {
padding: 18px 0;
border-bottom: 1px solid var(--brand-gray);
scroll-margin-top: 12px;
}
.help-section h2 {
font-size: 17px;
margin: 0 0 10px;
}
.help-section h3 {
font-size: 13px;
margin: 0 0 6px;
}
.help-section p {
margin: 8px 0;
max-width: 900px;
}
.help-section ol {
padding-left: 22px;
margin: 6px 0 10px;
}
.help-section li {
padding: 2px 0;
}
.help-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 900px;
}
.help-example {
max-width: 900px;
background: var(--brand-grey-light);
border-left: 3px solid var(--green);
padding: 10px 12px;
margin: 12px 0;
}
.help-glossary {
display: grid;
grid-template-columns: minmax(110px, 170px) 1fr;
gap: 6px 14px;
max-width: 900px;
}
.help-glossary dt {
font-weight: 600;
}
.help-glossary dd {
margin: 0;
}
@media (max-width:700px) { @media (max-width:700px) {
.help-content { padding:4px 10px 28px; } .help-content {
.help-grid { grid-template-columns:1fr; gap:8px; } padding: 4px 10px 28px;
.help-glossary { grid-template-columns:1fr; gap:2px; } }
.help-glossary dd { margin-bottom:8px; }
.help-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.help-glossary {
grid-template-columns: 1fr;
gap: 2px;
}
.help-glossary dd {
margin-bottom: 8px;
}
} }
</style> </style>
</head> </head>
<body> <body>
<nav class="sidebar"> <nav class="sidebar">
@@ -75,10 +356,13 @@
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" style="height:20px;" /> <img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" style="height:20px;" />
</div> </div>
<div class="sidebar-nav" style="flex:0 0 auto;"> <div class="sidebar-nav" style="flex:0 0 auto;">
<button class="sidebar-item active" data-view="workbench" onclick="switchView('workbench')">🖥 Консоль</button> <button class="sidebar-item active" data-view="workbench" onclick="switchView('workbench')">🖥
Консоль</button>
<button class="sidebar-item" data-view="overview" onclick="switchView('overview')">📊 Обзор</button> <button class="sidebar-item" data-view="overview" onclick="switchView('overview')">📊 Обзор</button>
<button class="sidebar-item" data-view="history-view" onclick="switchView('history-view')">📋 История</button> <button class="sidebar-item" data-view="history-view" onclick="switchView('history-view')">📋
<button class="sidebar-item" data-view="scenarios-view" onclick="switchView('scenarios-view')">🧪 Сценарии</button> История</button>
<button class="sidebar-item" data-view="scenarios-view" onclick="switchView('scenarios-view')">🧪
Сценарии</button>
<button class="sidebar-item" data-view="logs-view" onclick="switchView('logs-view')">📜 Логи</button> <button class="sidebar-item" data-view="logs-view" onclick="switchView('logs-view')">📜 Логи</button>
<button class="sidebar-item" data-view="help-view" onclick="switchView('help-view')">❔ Справка</button> <button class="sidebar-item" data-view="help-view" onclick="switchView('help-view')">❔ Справка</button>
</div> </div>
@@ -86,37 +370,51 @@
<form method="post" style="padding:4px 12px 6px;margin-top:auto;margin-bottom:auto;"> <form method="post" style="padding:4px 12px 6px;margin-top:auto;margin-bottom:auto;">
<input type="hidden" name="action" value="set_mode" /> <input type="hidden" name="action" value="set_mode" />
<div style="display:flex;gap:8px;margin-bottom:4px;"> <div style="display:flex;gap:8px;margin-bottom:4px;">
<label style="font-size:10px;cursor:pointer;display:flex;align-items:center;gap:2px;color:var(--muted);"> <label
<input type="radio" name="mode" value="polygon" onclick="this.form.submit()" {% if mode == 'polygon' %}checked{% endif %} /> Эмуляция style="font-size:10px;cursor:pointer;display:flex;align-items:center;gap:2px;color:var(--muted);">
<input type="radio" name="mode" value="polygon" onclick="this.form.submit()" {% if mode=='polygon'
%}checked{% endif %} /> Эмуляция
</label> </label>
<label style="font-size:10px;cursor:pointer;display:flex;align-items:center;gap:2px;color:var(--muted);"> <label
<input type="radio" name="mode" value="cloud" onclick="this.form.submit()" {% if mode == 'cloud' %}checked{% endif %} /> Облако style="font-size:10px;cursor:pointer;display:flex;align-items:center;gap:2px;color:var(--muted);">
<input type="radio" name="mode" value="cloud" onclick="this.form.submit()" {% if mode=='cloud'
%}checked{% endif %} /> Облако
</label> </label>
</div> </div>
{% if mode == 'polygon' %} {% if mode == 'polygon' %}
<div style="display:flex;gap:6px;"> <div style="display:flex;gap:6px;">
<label style="font-size:10px;cursor:pointer;color:var(--muted);"> <label style="font-size:10px;cursor:pointer;color:var(--muted);">
<input type="radio" name="polygon_stand" value="dev" onclick="this.form.submit()" {% if polygon_stand == 'dev' %}checked{% endif %} /> DEV <input type="radio" name="polygon_stand" value="dev" onclick="this.form.submit()" {% if
polygon_stand=='dev' %}checked{% endif %} /> DEV
</label> </label>
<label style="font-size:10px;cursor:pointer;color:var(--muted);"> <label style="font-size:10px;cursor:pointer;color:var(--muted);">
<input type="radio" name="polygon_stand" value="test" onclick="this.form.submit()" {% if polygon_stand == 'test' %}checked{% endif %} /> TEST <input type="radio" name="polygon_stand" value="test" onclick="this.form.submit()" {% if
polygon_stand=='test' %}checked{% endif %} /> TEST
</label> </label>
<label style="font-size:10px;cursor:pointer;color:var(--muted);"> <label style="font-size:10px;cursor:pointer;color:var(--muted);">
<input type="radio" name="polygon_stand" value="prod" onclick="this.form.submit()" {% if polygon_stand == 'prod' %}checked{% endif %} /> PROD <input type="radio" name="polygon_stand" value="prod" onclick="this.form.submit()" {% if
polygon_stand=='prod' %}checked{% endif %} /> PROD
</label> </label>
</div> </div>
{% endif %} {% endif %}
</form> </form>
{% endif %} {% endif %}
<div class="sidebar-bottom"> <div class="sidebar-bottom">
<div style="padding:4px 12px;font-size:10px;color:var(--muted);">v{{ config.VERSION }} | {{ stand.upper().replace('_', ' ') }}</div> <div style="padding:4px 12px;font-size:10px;color:var(--muted);">v{{ config.VERSION }} | {{
{% if token_info.email %}<div style="padding:0 12px 4px;font-size:10px;color:var(--muted);">{{ token_info.email }}</div>{% endif %} stand.upper().replace('_', ' ') }}</div>
{% if token_info.email %}<div style="padding:0 12px 4px;font-size:10px;color:var(--muted);">{{
token_info.email }}</div>{% endif %}
<form method="post" class="token-row"> <form method="post" class="token-row">
<input type="password" name="token" placeholder="env: {{ env_token_masked }}" value="{{ '' if not has_user_token else '••••••••' }}" {% if mode == 'polygon' %}disabled style="opacity:0.4;"{% endif %} /> <input type="password" name="token" placeholder="env: {{ env_token_masked }}"
<button type="submit" name="action" value="save" class="btn btn-sm" {% if mode == 'polygon' %}disabled{% endif %}>OK</button> value="{{ '' if not has_user_token else '••••••••' }}" {% if mode=='polygon' %}disabled
{% if has_user_token %}<button type="submit" name="action" value="clear" class="btn btn-sm" style="color:var(--destructive);">✕</button>{% endif %} style="opacity:0.4;" {% endif %} />
<button type="submit" name="action" value="save" class="btn btn-sm" {% if mode=='polygon' %}disabled{%
endif %}>OK</button>
{% if has_user_token %}<button type="submit" name="action" value="clear" class="btn btn-sm"
style="color:var(--destructive);">✕</button>{% endif %}
</form> </form>
{% if error %}<div style="padding:4px 12px;font-size:10px;color:var(--destructive);">{{ error }}</div>{% endif %} {% if error %}<div style="padding:4px 12px;font-size:10px;color:var(--destructive);">{{ error }}</div>{%
endif %}
</div> </div>
</nav> </nav>
@@ -128,7 +426,10 @@
<div class="card"> <div class="card">
<div class="card-header" style="font-size:13px;">Сервисы</div> <div class="card-header" style="font-size:13px;">Сервисы</div>
<div class="card-body" style="padding:4px;"> <div class="card-body" style="padding:4px;">
{% for svc in services %}{% if not config.service_ids or svc.svcId in config.service_ids %}<div class="svc-item {% if loop.first %}active{% endif %}" onclick="selectService({{ svc.svcId }})">{{ svc.svcId }}. {{ svc.svc }}</div>{% endif %}{% endfor %} {% for svc in services %}{% if not config.service_ids or svc.svcId in config.service_ids %}<div
class="svc-item {% if loop.first %}active{% endif %}"
onclick="selectService({{ svc.svcId }})">{{ svc.svcId }}. {{ svc.svc }}</div>{% endif %}{%
endfor %}
</div> </div>
</div> </div>
</div> </div>
@@ -147,8 +448,11 @@
</div> </div>
</div> </div>
<div id="create-btn-area" style="padding:0 8px 8px;"> <div id="create-btn-area" style="padding:0 8px 8px;">
<div class="inst-item" style="border-top:1px solid var(--brand-gray);padding-top:8px;margin-top:4px;" onclick="startCreate()"> <div class="inst-item"
<span style="flex:1;color:var(--brand-primary);cursor:pointer;font-size:13px;">+ Создать новый инстанс</span> style="border-top:1px solid var(--brand-gray);padding-top:8px;margin-top:4px;"
onclick="startCreate()">
<span style="flex:1;color:var(--brand-primary);cursor:pointer;font-size:13px;">+ Создать новый
инстанс</span>
</div> </div>
</div> </div>
</div> </div>
@@ -160,21 +464,35 @@
<div class="view-header">Обзор</div> <div class="view-header">Обзор</div>
{% if organization %} {% if organization %}
<div class="card"> <div class="card">
<div class="card-header" style="cursor:pointer;" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">Организация{% if client_id %} ({{ client_id }}){% endif %}</div> <div class="card-header" style="cursor:pointer;"
onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">
Организация{% if client_id %} ({{ client_id }}){% endif %}</div>
<div class="card-body" style="padding:0;"> <div class="card-body" style="padding:0;">
<table class="overview-table"> <table class="overview-table">
<tr><td style="font-size:12px;padding:3px 10px;">{{ organization.displayName }}<br><span style="color:var(--muted);font-size:10px;">{{ organization.instanceUid }}</span></td><td><span class="badge badge-success" style="font-size:10px;">{{ organization.explainedStatus or 'OK' }}</span></td></tr> <tr>
<td style="font-size:12px;padding:3px 10px;">{{ organization.displayName }}<br><span
style="color:var(--muted);font-size:10px;">{{ organization.instanceUid }}</span></td>
<td><span class="badge badge-success" style="font-size:10px;">{{ organization.explainedStatus or
'OK' }}</span></td>
</tr>
</table> </table>
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% for svc_name, items in instance_groups.items() %} {% for svc_name, items in instance_groups.items() %}
<div class="card" style="margin-top:8px;"> <div class="card" style="margin-top:8px;">
<div class="card-header" style="cursor:pointer;" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">{{ svc_name }} ({{ items|length }})</div> <div class="card-header" style="cursor:pointer;"
onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">
{{ svc_name }} ({{ items|length }})</div>
<div class="card-body" style="padding:0;max-height:200px;overflow-y:auto;"> <div class="card-body" style="padding:0;max-height:200px;overflow-y:auto;">
<table class="overview-table"> <table class="overview-table">
{% for i in items %} {% for i in items %}
<tr><td style="font-size:12px;padding:3px 10px;">{{ i.displayName }}<br><span style="color:var(--muted);font-size:10px;">{{ i.instanceUid }}</span></td><td><span class="badge badge-success" style="font-size:10px;">{{ i.explainedStatus or '?' }}</span></td></tr> <tr>
<td style="font-size:12px;padding:3px 10px;">{{ i.displayName }}<br><span
style="color:var(--muted);font-size:10px;">{{ i.instanceUid }}</span></td>
<td><span class="badge badge-success" style="font-size:10px;">{{ i.explainedStatus or '?'
}}</span></td>
</tr>
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
@@ -187,7 +505,8 @@
<div class="view-header">История прогонов</div> <div class="view-header">История прогонов</div>
<div class="card" id="history-card"> <div class="card" id="history-card">
<div class="card-header" style="cursor:pointer;" onclick="toggleHistory()">Последние 25 операций</div> <div class="card-header" style="cursor:pointer;" onclick="toggleHistory()">Последние 25 операций</div>
<div class="card-body" style="padding:4px;max-height:calc(100vh - 200px);overflow-y:auto;" id="history-body"> <div class="card-body" style="padding:4px;max-height:calc(100vh - 200px);overflow-y:auto;"
id="history-body">
<span style="color:var(--muted);font-size:12px;">Загрузка...</span> <span style="color:var(--muted);font-size:12px;">Загрузка...</span>
</div> </div>
</div> </div>
@@ -206,14 +525,18 @@
<!-- VIEW: Логи --> <!-- VIEW: Логи -->
<div class="view hidden" id="view-logs-view"> <div class="view hidden" id="view-logs-view">
<div class="view-header">Логи</div> <div class="view-header">Логи</div>
<div id="log-view-content" style="background:#1e1e1e;color:#d4d4d4;font:12px monospace;padding:10px;border-radius:6px;min-height:300px;max-height:calc(100vh - 200px);overflow-y:auto;"></div> <div id="log-view-content"
style="background:#1e1e1e;color:#d4d4d4;font:12px monospace;padding:10px;border-radius:6px;min-height:300px;max-height:calc(100vh - 200px);overflow-y:auto;">
</div>
</div> </div>
<!-- VIEW: Справка --> <!-- VIEW: Справка -->
<div class="view hidden" id="view-help-view"> <div class="view hidden" id="view-help-view">
<div class="view-header">Справка: как работать с Autotest</div> <div class="view-header">Справка: как работать с Autotest</div>
<div class="help-content"> <div class="help-content">
<div class="help-warning"><strong>Сначала проверьте среду.</strong> «Эмуляция» отправляет запросы в Polygon и меняет только его тестовое состояние. «Облако» обращается к реальному Nubes API. Перед запуском create, modify или delete в облаке проверьте режим, стенд и параметры.</div> <div class="help-warning"><strong>Сначала проверьте среду.</strong> «Эмуляция» отправляет запросы в Polygon
и меняет только его тестовое состояние. «Облако» обращается к реальному Nubes API. Перед запуском
create, modify или delete в облаке проверьте режим, стенд и параметры.</div>
<nav class="help-toc" aria-label="Разделы справки"> <nav class="help-toc" aria-label="Разделы справки">
<a href="#help-start">Быстрый старт</a> <a href="#help-start">Быстрый старт</a>
<a href="#help-console">Консоль и операции</a> <a href="#help-console">Консоль и операции</a>
@@ -226,10 +549,14 @@
<section class="help-section" id="help-start"> <section class="help-section" id="help-start">
<h2>1. Быстрый старт</h2> <h2>1. Быстрый старт</h2>
<ol> <ol>
<li><strong>Выберите режим.</strong> Если переключателя «Эмуляция / Облако» нет, Polygon не подключён к приложению. В cloud-режиме вставьте пользовательский токен в поле внизу бокового меню и нажмите «OK». Стенд определяется по токену: DEV, TEST или PROD.</li> <li><strong>Выберите режим.</strong> Если переключателя «Эмуляция / Облако» нет, Polygon не
<li><strong>Для эмуляции</strong> выберите «Эмуляция», затем стенд DEV, TEST или PROD. Данные стендов разделены; операции не создают реальные ресурсы Nubes.</li> подключён к приложению. В cloud-режиме вставьте пользовательский токен в поле внизу бокового
меню и нажмите «OK». Стенд определяется по токену: DEV, TEST или PROD.</li>
<li><strong>Для эмуляции</strong> выберите «Эмуляция», затем стенд DEV, TEST или PROD. Данные
стендов разделены; операции не создают реальные ресурсы Nubes.</li>
<li>Откройте «Консоль» для одной операции или «Сценарии» для последовательности шагов.</li> <li>Откройте «Консоль» для одной операции или «Сценарии» для последовательности шагов.</li>
<li>Результат текущего действия смотрите рядом с формой. Сохранённые операции находятся в «Истории», технические сообщения приложения — в «Логах».</li> <li>Результат текущего действия смотрите рядом с формой. Сохранённые операции находятся в «Истории»,
технические сообщения приложения — в «Логах».</li>
</ol> </ol>
</section> </section>
@@ -250,22 +577,30 @@
<ol> <ol>
<li>Выберите сервис, затем нажмите строку нужного инстанса.</li> <li>Выберите сервис, затем нажмите строку нужного инстанса.</li>
<li>Под строкой появится список доступных для него операций.</li> <li>Под строкой появится список доступных для него операций.</li>
<li>Выберите операцию, проверьте подставленные значения, внесите изменения и нажмите «Запустить».</li> <li>Выберите операцию, проверьте подставленные значения, внесите изменения и нажмите
«Запустить».</li>
</ol> </ol>
</div> </div>
</div> </div>
<p>Параметры загружаются из API. Обязательные поля выделены; некоторые представлены списками, ссылками на другие инстансы или JSON. Невалидный JSON не отправится. После запуска интерфейс показывает статус и этапы; по завершении список инстансов обновляется.</p> <p>Параметры загружаются из API. Обязательные поля выделены; некоторые представлены списками, ссылками
<div class="help-note"><strong>Осторожно:</strong> в режиме «Облако» операции затрагивают реальные ресурсы выбранного стенда. Удаление успешно удалённого ресурса необратимо.</div> на другие инстансы или JSON. Невалидный JSON не отправится. После запуска интерфейс показывает
статус и этапы; по завершении список инстансов обновляется.</p>
<div class="help-note"><strong>Осторожно:</strong> в режиме «Облако» операции затрагивают реальные
ресурсы выбранного стенда. Удаление успешно удалённого ресурса необратимо.</div>
</section> </section>
<section class="help-section" id="help-scenarios"> <section class="help-section" id="help-scenarios">
<h2>3. Сценарии: последовательность операций</h2> <h2>3. Сценарии: последовательность операций</h2>
<p>Сценарий — сохранённый рецепт; запуск сценария — отдельное выполнение этого рецепта. Шаги выполняются по порядку. Если шаг завершается ошибкой, оставшиеся шаги не выполняются.</p> <p>Сценарий — сохранённый рецепт; запуск сценария — отдельное выполнение этого рецепта. Шаги выполняются
по порядку. Если шаг завершается ошибкой, оставшиеся шаги не выполняются.</p>
<ol> <ol>
<li>Откройте «Сценарии» и нажмите «+ Создать сценарий».</li> <li>Откройте «Сценарии» и нажмите «+ Создать сценарий».</li>
<li>Введите название. Добавьте шаги, в каждом выберите сервис, затем доступную операцию.</li> <li>Введите название. Добавьте шаги, в каждом выберите сервис, затем доступную операцию.</li>
<li>Для <code>create</code> укажите output, например <code>vm1</code>. Это имя-ссылка на созданный инстанс для следующих шагов.</li> <li>Для <code>create</code> укажите output, например <code>vm1</code>. Это имя-ссылка на созданный
<li>Для <code>modify</code>, <code>delete</code> и других операций выберите ссылку из предыдущего create-шага или откройте список инстансов облака. Существующий список включает инстансы с префиксом <code>autotest-</code> того же сервиса.</li> инстанс для следующих шагов.</li>
<li>Для <code>modify</code>, <code>delete</code> и других операций выберите ссылку из предыдущего
create-шага или откройте список инстансов облака. Существующий список включает инстансы с
префиксом <code>autotest-</code> того же сервиса.</li>
<li>Раскройте «Параметры» и задайте значения. Кнопки ↑/↓ меняют порядок, ✕ удаляет шаг.</li> <li>Раскройте «Параметры» и задайте значения. Кнопки ↑/↓ меняют порядок, ✕ удаляет шаг.</li>
<li>Нажмите «Сохранить». «Отмена» закрывает редактор без сохранения.</li> <li>Нажмите «Сохранить». «Отмена» закрывает редактор без сохранения.</li>
</ol> </ol>
@@ -277,36 +612,58 @@
</ol> </ol>
Output доступен следующим шагам того же сервиса. Вместо него можно выбрать существующий инстанс. Output доступен следующим шагам того же сервиса. Вместо него можно выбрать существующий инстанс.
</div> </div>
<p>У сценария можно открыть шаги, запустить, редактировать, скопировать или удалить. Seed-сценарии отмечены «seed» и не удаляются из интерфейса. Одновременно выполняется не более одного сценария для вашего пользователя и стенда.</p> <p>У сценария можно открыть шаги, запустить, редактировать, скопировать или удалить. Seed-сценарии
<p>Во время выполнения показывается <code>RUNNING</code> и номер шага. В разделе «Сценарии» доступна сводка последних 10 запусков. Каждый шаг также записывается отдельной операцией в «Историю».</p> отмечены «seed» и не удаляются из интерфейса. Одновременно выполняется не более одного сценария для
вашего пользователя и стенда.</p>
<p>Во время выполнения показывается <code>RUNNING</code> и номер шага. В разделе «Сценарии» доступна
сводка последних 10 запусков. Каждый шаг также записывается отдельной операцией в «Историю».</p>
</section> </section>
<section class="help-section" id="help-history"> <section class="help-section" id="help-history">
<h2>4. История операций</h2> <h2>4. История операций</h2>
<p>«История» показывает последние 25 операций для вашего ClientID и стенда: ручные операции и шаги сценариев. В таблице указаны время, операция, инстанс, статус и длительность.</p> <p>«История» показывает последние 25 операций для вашего ClientID и стенда: ручные операции и шаги
<p>Нажмите строку, чтобы раскрыть этапы выполнения, полученные от API. Если этапов нет, для этой записи они не были получены или сохранены. Сводка запуска сценария находится в «Сценариях», отдельные результаты его шагов — здесь.</p> сценариев. В таблице указаны время, операция, инстанс, статус и длительность.</p>
<p>Нажмите строку, чтобы раскрыть этапы выполнения, полученные от API. Если этапов нет, для этой записи
они не были получены или сохранены. Сводка запуска сценария находится в «Сценариях», отдельные
результаты его шагов — здесь.</p>
</section> </section>
<section class="help-section" id="help-logs"> <section class="help-section" id="help-logs">
<h2>5. Логи</h2> <h2>5. Логи</h2>
<p>Раздел «Логи» показывает снимок последних технических сообщений приложения. Это не история операций и не журнал этапов Nubes.</p> <p>Раздел «Логи» показывает снимок последних технических сообщений приложения. Это не история операций и
<p>Кнопка <code>log</code> внизу справа открывает компактную панель, которая обновляется раз в 2 секунды, пока видна. Текущий статус и этапы запуска смотрите рядом с формой или в карточке сценария; сохранённые результаты — в «Истории».</p> не журнал этапов Nubes.</p>
<p>Кнопка <code>log</code> внизу справа открывает компактную панель, которая обновляется раз в 2
секунды, пока видна. Текущий статус и этапы запуска смотрите рядом с формой или в карточке сценария;
сохранённые результаты — в «Истории».</p>
</section> </section>
<section class="help-section" id="help-terms"> <section class="help-section" id="help-terms">
<h2>6. Словарь</h2> <h2>6. Словарь</h2>
<dl class="help-glossary"> <dl class="help-glossary">
<dt>Сервис</dt><dd>Тип ресурса в каталоге Nubes, например виртуальная машина или база данных.</dd> <dt>Сервис</dt>
<dt>Инстанс</dt><dd>Конкретный ресурс сервиса; у него есть имя, UUID и статус.</dd> <dd>Тип ресурса в каталоге Nubes, например виртуальная машина или база данных.</dd>
<dt>Операция</dt><dd>Одно действие над сервисом или инстансом: create, modify, delete и другие.</dd> <dt>Инстанс</dt>
<dt>Сценарий</dt><dd>Сохранённое описание нескольких операций, выполняемых последовательно.</dd> <dd>Конкретный ресурс сервиса; у него есть имя, UUID и статус.</dd>
<dt>Шаг</dt><dd>Одна операция внутри сценария. Порядок шагов важен.</dd> <dt>Операция</dt>
<dt>Output</dt><dd>Имя-ссылка на инстанс, созданный шагом create; следующие шаги используют его для выбора ресурса.</dd> <dd>Одно действие над сервисом или инстансом: create, modify, delete и другие.</dd>
<dt>Запуск</dt><dd>Конкретное выполнение операции или сценария. Сохранённый сценарий можно запускать повторно.</dd> <dt>Сценарий</dt>
<dt>Этап</dt><dd>Внутренняя стадия операции, возвращаемая API; этапы можно раскрыть в строке истории.</dd> <dd>Сохранённое описание нескольких операций, выполняемых последовательно.</dd>
<dt>Лог</dt><dd>Техническое сообщение приложения. Сам по себе лог не является результатом операции.</dd> <dt>Шаг</dt>
<dd>Одна операция внутри сценария. Порядок шагов важен.</dd>
<dt>Output</dt>
<dd>Имя-ссылка на инстанс, созданный шагом create; следующие шаги используют его для выбора ресурса.
</dd>
<dt>Запуск</dt>
<dd>Конкретное выполнение операции или сценария. Сохранённый сценарий можно запускать повторно.</dd>
<dt>Этап</dt>
<dd>Внутренняя стадия операции, возвращаемая API; этапы можно раскрыть в строке истории.</dd>
<dt>Лог</dt>
<dd>Техническое сообщение приложения. Сам по себе лог не является результатом операции.</dd>
</dl> </dl>
<p><strong>Статусы:</strong> <code>RUNNING</code> — выполняется; <code>OK</code> — успешно завершено; <code>FAIL</code> — ошибка; <code>TIMEOUT</code> — интерфейс потерял связь при проверке статуса. TIMEOUT не доказывает, что операция остановилась: проверьте инстанс и историю перед повторным запуском.</p> <p><strong>Статусы:</strong> <code>RUNNING</code> — выполняется; <code>OK</code> — успешно завершено;
<code>FAIL</code> — ошибка; <code>TIMEOUT</code> — интерфейс потерял связь при проверке статуса.
TIMEOUT не доказывает, что операция остановилась: проверьте инстанс и историю перед повторным
запуском.</p>
</section> </section>
</div> </div>
</div> </div>
@@ -334,8 +691,12 @@ window.APP = {
<script src="{{ url_for('static', filename='js/scenario-list.js') }}"></script> <script src="{{ url_for('static', filename='js/scenario-list.js') }}"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script> <script src="{{ url_for('static', filename='app.js') }}"></script>
<div id="log-panel" style="display:none;position:fixed;bottom:0;left:192px;right:0;height:180px;background:#1e1e1e;color:#d4d4d4;font:12px monospace;overflow-y:auto;padding:8px 12px;border-top:2px solid #555;z-index:9999;"></div> <div id="log-panel"
<button onclick="toggleLog()" title="Логи" style="position:fixed;bottom:4px;right:8px;z-index:10000;background:#1e1e1e;color:#888;border:1px solid #555;border-radius:3px;font:11px monospace;padding:3px 8px;cursor:pointer;">log</button> style="display:none;position:fixed;bottom:0;left:192px;right:0;height:180px;background:#1e1e1e;color:#d4d4d4;font:12px monospace;overflow-y:auto;padding:8px 12px;border-top:2px solid #555;z-index:9999;">
</div>
<button onclick="toggleLog()" title="Логи"
style="position:fixed;bottom:4px;right:8px;z-index:10000;background:#1e1e1e;color:#888;border:1px solid #555;border-radius:3px;font:11px monospace;padding:3px 8px;cursor:pointer;">log</button>
</body> </body>
</html> </html>