Files
app-autotest/site/templates/index.html
T

113 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Autotest</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<div class="card" style="max-width: 780px; margin: 32px auto;">
<div class="card-header" style="justify-content: space-between;">
<span>Организация</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:200px;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>
</div>
<div class="card-body">
{% if error %}
<p style="color: var(--destructive);">{{ error }}</p>
{% elif organization %}
<p>{{ organization.displayName }} — {{ organization.explainedStatus or "OK" }}</p>
{% else %}
<p style="color: var(--muted);">Введите токен</p>
{% endif %}
</div>
</div>
{% if services %}
<div class="card" style="max-width: 780px; margin: 16px auto;">
<div class="card-header">Сервисы ({{ services|length }})</div>
<div class="card-body" style="padding: 0;">
<table>
<thead>
<tr>
<th style="width:50px;">#</th>
<th>Сервис</th>
<th style="width:80px;">Операции</th>
</tr>
</thead>
<tbody>
{% for s in services %}
<tr class="svc-row" data-svc-id="{{ s.svcId }}" style="cursor:pointer;">
<td>{{ s.svcId }}</td>
<td>{{ s.svc }}{% if s.svcExtendedName %} — {{ s.svcExtendedName }}{% endif %}</td>
<td style="text-align:center;">
<span class="ops-count" id="ops-{{ s.svcId }}">?</span>
</td>
</tr>
<tr class="ops-detail" id="detail-{{ s.svcId }}" style="display:none;">
<td colspan="3" style="padding:4px 10px;background:var(--brand-grey-light);">
<span style="color:var(--muted);font-size:12px;">Загрузка...</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
const opsCache = {};
document.querySelectorAll('.svc-row').forEach(row => {
row.addEventListener('click', async () => {
const svcId = row.dataset.svcId;
const detail = document.getElementById('detail-' + svcId);
if (detail.style.display === 'table-row') {
detail.style.display = 'none';
row.style.background = '';
return;
}
document.querySelectorAll('.ops-detail').forEach(d => d.style.display = 'none');
document.querySelectorAll('.svc-row').forEach(r => r.style.background = '');
row.style.background = 'var(--brand-grey-light)';
detail.style.display = 'table-row';
if (opsCache[svcId]) {
fillDetail(svcId, opsCache[svcId]);
return;
}
try {
const r = await fetch('/api/operations/' + svcId);
const d = await r.json();
opsCache[svcId] = d;
fillDetail(svcId, d);
} catch(e) {
detail.cells[0].innerHTML = '<span style=\"color:var(--destructive);font-size:12px;\">Ошибка загрузки</span>';
}
});
});
function fillDetail(svcId, data) {
const detail = document.getElementById('detail-' + svcId);
if (data.error) {
detail.cells[0].innerHTML = '<span style=\"color:var(--destructive);font-size:12px;\">' + data.error + '</span>';
return;
}
const ops = data.operations || [];
document.getElementById('ops-' + svcId).textContent = ops.length;
detail.cells[0].innerHTML = ops.map(o =>
'<span class=\"badge\" style=\"margin:2px;\">' + o.operation + '</span>'
).join('') || '<span style=\"color:var(--muted);font-size:12px;\">Нет операций</span>';
}
</script>
{% endif %}
<script>lucide.createIcons();</script>
</body>
</html>