forcloud/app-autotest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.2.9: Phase 1 — sidebar + views layout

Browse Source 
index.html: full rewrite
- Sidebar (192px/72px, blue top border): Верстак/Обзор/История/Сценарии/Логи
- Views: workbench (service left rail + instances/params right), overview, history, scenarios, logs
- Token form moved to sidebar bottom
- All existing DOM ids preserved: inst-list, params-area, params-form, btn-test,
  test-status, create-btn-area, history-card, history-body, scenario-card, scenario-body
- Log panel adjusted: left 72px (sidebar width)
- Fonts increased: 12-14px

views.js (NEW): switchView(id) — show/hide views, auto-load content on open
This commit is contained in:
naeel
2026-07-31 13:16:50 +04:00
parent 10377e9cdb
commit 2133a1b2fe
3 changed files with 134 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/app.py
+1 -1
View File
@@ -19,7 +19,7 @@ from routes.api_scenario_run import bp_run as api_scenario_run_bp
from routes.api_scenario_defs import bp_defs as api_scenario_defs_bp
# Версия — меняется при КАЖДОМ изменении кода. Показывается в топбаре UI.
VERSION = "1.2.8"
VERSION = "1.2.9"
app = Flask(__name__, template_folder="templates", static_folder="static")
app.config["NUBES_API_ENDPOINT"] = os.getenv("NUBES_API_ENDPOINT", "https://lk-api-gateway-test.ngcloud.ru/api/v1/svc")
site/static/js/views.js
+22
View File
@@ -0,0 +1,22 @@
// views.js — переключение видов (sidebar navigation)
function switchView(viewId) {
document.querySelectorAll('.view').forEach(v => v.classList.add('hidden'));
const target = document.getElementById('view-' + viewId);
if (target) target.classList.remove('hidden');
// Подсветка активного пункта
document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
const btn = document.querySelector('.sidebar-item[data-view="' + viewId + '"]');
if (btn) btn.classList.add('active');
// Автозагрузка при открытии вида
if (viewId === 'history-view' && typeof toggleHistory === 'function') {
if (!historyOpen) toggleHistory();
}
if (viewId === 'scenarios-view' && typeof toggleScenario === 'function') {
if (!scenarioOpen) toggleScenario();
}
if (viewId === 'logs-view' && typeof toggleLog === 'function') {
const lp = document.getElementById('log-panel');
if (lp && lp.style.display === 'none') toggleLog();
}
}
site/templates/index.html
+111 -98
View File
@@ -6,15 +6,9 @@
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<style>
.topbar { max-width:1200px; margin:0 auto; padding:10px 16px 0; display:flex; align-items:center; gap:12px; }
.layout { display:flex; gap:12px; max-width:1200px; margin:8px auto; padding:0 16px; }
.col-infra { width:280px; flex-shrink:0; }
.col-svc { width:240px; flex-shrink:0; max-height:calc(100vh - 50px); overflow-y:auto; }
.col-main { flex:1; min-width:0; }
#inst-list { max-height:calc(100vh - 250px); overflow-y:auto; }
.svc-item { cursor:pointer; padding:4px 8px; font-size:12px; border-radius:4px; }
.svc-item { cursor:pointer; padding:4px 8px; font-size:13px; border-radius:4px; }
.svc-item:hover, .svc-item.active { background:#dbeafe; font-weight:600; }
.inst-item { cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:12px; border-radius:4px; }
.inst-item { cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:13px; border-radius:4px; }
.inst-item:hover, .inst-item.active { background:var(--brand-grey-light); }
.inst-ops { display:none; margin-left:16px; }
.inst-ops.open { display:flex; flex-wrap:wrap; gap:4px; padding:4px 0; }
@@ -31,8 +25,6 @@
.op-btn-delete:hover { background:#fee2e2; }
.op-btn-redeploy { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; }
.op-btn-redeploy:hover { background:#ede9fe; }
.op-btn-reconcile { background:#f8fafc; border-color:#dbe4ea; color:#475569; }
.op-btn-reconcile:hover { background:#eef2f7; }
.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; }
@@ -41,109 +33,129 @@
#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; }
</style>
</head>
<body>
<!--
=== ПЕРЕМЕННЫЕ ШАБЛОНА JINJA2 ===
config.VERSION — версия приложения (топбар)
token_info.email — email пользователя (топбар)
token_info.company — профиль/компания (топбар)
stand — стенд: dev/test (топбар)
env_token_masked — маскированный env-токен (placeholder)
has_user_token — True если пользователь ввёл свой токен
organization — организация (serviceId=19)
instance_groups — {svc_name: [instances]} для левой колонки
error — сообщение об ошибке
-->
<nav class="sidebar">
<div class="sidebar-top">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" style="height:20px;" />
</div>
<div class="sidebar-nav">
<button class="sidebar-item active" data-view="workbench" onclick="switchView('workbench')"><span style="display:flex;align-items:center;gap:10px;">▶ Верстак</span></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="scenarios-view" onclick="switchView('scenarios-view')">🧪 Сценарии</button>
<button class="sidebar-item" data-view="logs-view" onclick="switchView('logs-view')">📜 Логи</button>
</div>
<div class="sidebar-bottom">
<div style="padding:4px 12px;font-size:10px;color:var(--muted);">v{{ config.VERSION }} | {{ stand.upper() }}</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">
<input type="password" name="token" placeholder="env: {{ env_token_masked }}" value="{{ '' if not has_user_token else '••••••••' }}" />
<button type="submit" name="action" value="save" class="btn btn-sm">OK</button>
{% if has_user_token %}<button type="submit" name="action" value="clear" class="btn btn-sm" style="color:var(--destructive);">✕</button>{% endif %}
</form>
{% if error %}<div style="padding:4px 12px;font-size:10px;color:var(--destructive);">{{ error }}</div>{% endif %}
</div>
</nav>
<div class="topbar">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" style="height:22px;" />
<span style="font-size:11px;color:var(--muted);">v{{ config.VERSION }}</span>
{% if token_info.email %}<span style="font-size:11px;color:var(--muted);">EMail: {{ token_info.email }} | Профиль: {{ token_info.company }} | Стенд: {{ stand.upper() }}</span>{% endif %}
<span style="flex:1;"></span>
<form method="post" style="display:flex;align-items:center;gap:6px;">
<input type="password" name="token" placeholder="env: {{ env_token_masked }}" value="{{ '' if not has_user_token else '••••••••' }}" style="height:28px;width:180px;font-size:12px;border:1px solid var(--brand-gray);border-radius:4px;padding:0 6px;" />
<button type="submit" name="action" value="save" class="btn" style="height:28px;font-size:12px;padding:0 8px;">OK</button>
{% if has_user_token %}<button type="submit" name="action" value="clear" class="btn btn-danger" style="height:28px;font-size:12px;padding:0 8px;">Выйти</button>{% endif %}
</form>
{% if error %}<span style="color:var(--destructive);font-size:12px;">{{ error }}</span>{% endif %}
<!-- VIEW: Верстак -->
<div class="view" id="view-workbench">
<div class="view-header">Верстак</div>
<div class="workbench-layout">
<div class="wb-left">
<div class="card">
<div class="card-header" style="font-size:13px;">Сервисы</div>
<div class="card-body" style="padding:4px;">
{% for svc in services %}{% if 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 class="wb-right">
<div class="card">
<div class="card-header" style="font-size:13px;">Инстансы</div>
<div class="card-body" style="padding:4px;" id="inst-list">
<span style="color:var(--muted);font-size:12px;">Загрузка...</span>
</div>
</div>
<div id="params-area" style="display:none;padding:0 8px 8px;">
<div id="params-form"></div>
<div style="padding:4px 0;">
<button class="btn btn-primary btn-sm" id="btn-test" style="display:none;">Запустить</button>
<span id="test-status" style="font-size:12px;margin-left:8px;"></span>
</div>
</div>
<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()">
<span style="flex:1;color:var(--brand-primary);cursor:pointer;font-size:13px;">+ Создать новый инстанс</span>
</div>
</div>
</div>
</div>
</div>
<div class="layout">
<!-- Инфраструктура -->
<div class="col-infra">
{% if organization %}
<div class="card">
<div class="card-header">Организация</div>
<div class="card-body" style="padding:6px 10px;font-size:12px;">
{{ organization.displayName }}{% if client_id %} ({{ client_id }}){% endif %}<br>
<span class="badge badge-success" style="font-size:10px;">{{ organization.explainedStatus or "OK" }}</span>
</div>
<!-- VIEW: Обзор -->
<div class="view hidden" id="view-overview">
<div class="view-header">Обзор</div>
{% if organization %}
<div class="card">
<div class="card-header">Организация</div>
<div class="card-body" style="padding:8px 12px;font-size:13px;">
{{ organization.displayName }}{% if client_id %} ({{ client_id }}){% endif %}<br>
<span class="badge badge-success" style="font-size:11px;">{{ organization.explainedStatus or "OK" }}</span>
</div>
{% endif %}
{% for svc_name, items in instance_groups.items() %}
<div class="card" style="margin-top:6px;">
<div class="card-header" style="font-size:12px;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:150px;overflow-y:auto;">
<table>
{% for i in items %}
<tr><td style="font-size:11px;padding:2px 8px;">{{ i.displayName }}<br><span style="color:var(--muted);font-size:9px;">{{ i.instanceUid }}</span></td><td><span class="badge badge-success" style="font-size:9px;">{{ i.explainedStatus or '?' }}</span></td></tr>
{% endfor %}
</table>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% for svc_name, items in instance_groups.items() %}
<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-body" style="padding:0;max-height:200px;overflow-y:auto;">
<table>
{% 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>
{% endfor %}
</table>
</div>
</div>
{% endfor %}
</div>
<!-- Сервисы -->
<div class="col-svc">
<div class="card">
<div class="card-header" style="font-size:12px;">Сервисы</div>
<div class="card-body" style="padding:4px;">
{% for svc in services %}{% if 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>
<!-- VIEW: История -->
<div class="view hidden" id="view-history-view">
<div class="view-header">История прогонов</div>
<div class="card" id="history-card">
<div class="card-header" style="cursor:pointer;" onclick="toggleHistory()">Последние 50 запусков</div>
<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>
</div>
</div>
</div>
<!-- Инстансы + Операции + Параметры -->
<div class="col-main">
<div class="card">
<div class="card-header" style="font-size:12px;">Инстансы</div>
<div class="card-body" style="padding:4px;" id="inst-list">
<span style="color:var(--muted);font-size:11px;">Загрузка...</span>
</div>
</div>
<div id="params-area" style="display:none;padding:0 8px 8px;">
<div id="params-form"></div>
<div style="padding:4px 0;">
<button class="btn btn-primary btn-sm" id="btn-test" style="display:none;">Запустить</button>
<span id="test-status" style="font-size:11px;margin-left:8px;"></span>
</div>
</div>
<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()">
<span style="flex:1;color:var(--brand-primary);cursor:pointer;">+ Создать новый инстанс</span>
</div>
</div>
<div class="card" id="history-card" style="margin-top:8px;">
<div class="card-header" style="font-size:12px;cursor:pointer;" onclick="toggleHistory()">История <span style="color:var(--muted);font-size:10px;">(последние 50)</span></div>
<div class="card-body" style="padding:4px;display:none;max-height:300px;overflow-y:auto;" id="history-body">
<span style="color:var(--muted);font-size:11px;">Загрузка...</span>
</div>
</div>
<div class="card" id="scenario-card" style="margin-top:8px;">
<div class="card-header" style="font-size:12px;cursor:pointer;" onclick="toggleScenario()">Сценарии <span style="color:var(--muted);font-size:10px;">(автотесты)</span></div>
<div class="card-body" style="padding:4px;display:none;" id="scenario-body">
<span style="color:var(--muted);font-size:11px;">Загрузка...</span>
</div>
<!-- VIEW: Сценарии -->
<div class="view hidden" id="view-scenarios-view">
<div class="view-header">Сценарии (автотесты)</div>
<div class="card" id="scenario-card">
<div class="card-body" style="padding:8px;" id="scenario-body">
<span style="color:var(--muted);font-size:12px;">Загрузка...</span>
</div>
</div>
</div>
<!-- VIEW: Логи -->
<div class="view hidden" id="view-logs-view">
<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>
<script>
// Переменные из Jinja2 для фронтенда
window.APP = {
version: "{{ config.VERSION | tojson }}",
stand: "{{ stand | tojson }}",
@@ -154,6 +166,7 @@ window.APP = {
<script src="{{ url_for('static', filename='js/icons.js') }}"></script>
<script src="{{ url_for('static', filename='js/snackbar.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/views.js') }}"></script>
<script src="{{ url_for('static', filename='js/params-render.js') }}"></script>
<script src="{{ url_for('static', filename='js/instances.js') }}"></script>
<script src="{{ url_for('static', filename='js/operations.js') }}"></script>
@@ -165,8 +178,8 @@ window.APP = {
<script src="{{ url_for('static', filename='js/scenario-list.js') }}"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
<div id="log-panel" style="display:none;position:fixed;bottom:0;left:0;right:0;height:180px;background:#1e1e1e;color:#d4d4d4;font:11px monospace;overflow-y:auto;padding:6px 10px;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:10px monospace;padding:2px 6px;cursor:pointer;">log</button>
<div id="log-panel" style="display:none;position:fixed;bottom:0;left:72px;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>
</html>
</html>