349 lines
17 KiB
HTML
349 lines
17 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') }}" />
|
|
<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; }
|
|
.col-main { flex:1; min-width:0; }
|
|
.svc-item { cursor:pointer; padding:4px 8px; font-size:12px; border-radius:4px; }
|
|
.svc-item:hover, .svc-item.active { background:var(--brand-grey-light); }
|
|
.inst-item { cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:12px; 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; }
|
|
.btn-sm { height:24px; font-size:11px; padding:0 8px; }
|
|
.op-btn { border-color:#d1d5db; color:#374151; background:#f8fafc; }
|
|
.op-btn:hover { 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; }
|
|
.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; }
|
|
.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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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);">{{ token_info.email }} | {{ token_info.company }} | test</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 %}
|
|
</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>
|
|
</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 }}</td><td><span class="badge badge-success" style="font-size:9px;">{{ 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;">
|
|
<div class="svc-item active" onclick="selectService(1)">1. Болванка</div>
|
|
</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 class="card" id="params-card" style="margin-top:8px;display:none;">
|
|
<div class="card-header" style="font-size:12px;">Параметры</div>
|
|
<div class="card-body" style="padding:8px;" id="params-form"></div>
|
|
<div style="padding:0 8px 8px;">
|
|
<button class="btn btn-primary btn-sm" onclick="runTest()" id="btn-test" style="display:none;">Запустить тест</button>
|
|
<span id="test-status" style="font-size:11px;margin-left:8px;"></span>
|
|
</div>
|
|
<div id="stages-box" style="display:none;padding:0 8px 8px;max-height:200px;overflow-y:auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let svcInstances=[], selectedInst=null, selectedOp=null, pollTimer=null;
|
|
const SVC_ID=1;
|
|
const AUTOTEST_PREFIX='autotest-';
|
|
|
|
selectService(SVC_ID);
|
|
|
|
async function selectService(svcId){
|
|
selectedInst=null; selectedOp=null; stopPoll();
|
|
document.getElementById('params-card').style.display='none';
|
|
document.getElementById('stages-box').style.display='none';
|
|
|
|
const r=await fetch('/api/operations/'+svcId);
|
|
const d=await r.json();
|
|
svcInstances=d.instances||[];
|
|
|
|
let html='';
|
|
svcInstances.forEach(i=>{
|
|
const status=i.status||i.explainedStatus||'?';
|
|
const sc=status==='running'?'badge-success':'';
|
|
html+=`<div class="inst-item" onclick="toggleInstance('${i.instanceUid}')" data-iuid="${i.instanceUid}">
|
|
<span style="flex:1;">${i.displayName}</span>
|
|
<span class="badge ${sc}" style="font-size:9px;">${status}</span>
|
|
</div>`;
|
|
html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
|
|
});
|
|
html+=`<div class="inst-item" style="margin-top:8px;border-top:1px solid var(--brand-gray);padding-top:8px;" onclick="startCreate()">
|
|
<span style="flex:1;color:var(--brand-primary);">+ Создать новый инстанс</span>
|
|
</div>`;
|
|
document.getElementById('inst-list').innerHTML=html;
|
|
}
|
|
|
|
async function toggleInstance(iuid){
|
|
selectedInst=iuid; stopPoll();
|
|
document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.toggle('active',e.dataset.iuid===iuid));
|
|
document.getElementById('params-card').style.display='none';
|
|
|
|
const opsEl=document.getElementById('ops-'+iuid);
|
|
if(opsEl.classList.contains('open')){opsEl.classList.remove('open');return;}
|
|
document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
|
|
|
|
const r=await fetch('/api/operations/'+SVC_ID);
|
|
const d=await r.json();
|
|
const ops=d.operations.filter(o=>o.operation!=='reconcile'&&o.operation!=='create');
|
|
opsEl.innerHTML=ops.map(o=>
|
|
`<button class="btn btn-sm op-btn ${opClass(o.operation)}" onclick="runOp('${o.operation}',${o.svcOperationId})">${o.operation}</button>`
|
|
).join('');
|
|
opsEl.classList.add('open');
|
|
}
|
|
|
|
function opClass(opName){
|
|
if(opName==='modify') return 'op-btn-modify';
|
|
if(opName==='suspend') return 'op-btn-suspend';
|
|
if(opName==='resume') return 'op-btn-resume';
|
|
if(opName==='delete') return 'op-btn-delete';
|
|
if(opName==='redeploy') return 'op-btn-redeploy';
|
|
if(opName==='reconcile') return 'op-btn-reconcile';
|
|
return '';
|
|
}
|
|
|
|
function startCreate(){
|
|
selectedInst=null; stopPoll();
|
|
document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.remove('active'));
|
|
document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
|
|
showParams(18,'create');
|
|
}
|
|
|
|
function makeCreateDisplayName(){
|
|
const suffix = Date.now().toString(36);
|
|
return suffix;
|
|
}
|
|
|
|
function runOp(opName,opId){
|
|
stopPoll();
|
|
selectedOp={opId,opName,svcId:SVC_ID};
|
|
if(opName==='modify'){
|
|
showParams(opId,opName);
|
|
}else{
|
|
// confirm and execute immediately
|
|
if(!confirm(`Запустить ${opName} для ${findInstName()}?`)) return;
|
|
executeOp({});
|
|
}
|
|
}
|
|
|
|
function findInstName(){
|
|
const i=svcInstances.find(x=>x.instanceUid===selectedInst);
|
|
return i?i.displayName:selectedInst;
|
|
}
|
|
|
|
function showParams(opId,opName){
|
|
selectedOp={opId,opName,svcId:SVC_ID};
|
|
document.getElementById('params-card').style.display='block';
|
|
document.getElementById('stages-box').style.display='none';
|
|
document.getElementById('test-status').textContent='';
|
|
|
|
fetch('/api/params/'+opId).then(r=>r.json()).then(params=>{
|
|
const form=document.getElementById('params-form');
|
|
const displayNameValue=opName==='create'?makeCreateDisplayName():'';
|
|
form.innerHTML=(opName==='create'?`<div class="param-row"><label class="req">displayName</label><span style="font-size:12px;color:var(--muted);white-space:nowrap;">${AUTOTEST_PREFIX}</span><input type="text" id="param-displayname" value="${displayNameValue}" autocomplete="off"></div>`:'')
|
|
+ params.map(p=>{
|
|
const req=p.isRequired;
|
|
const hasDfl=p.defaultValue!==null&&p.defaultValue!==undefined&&p.defaultValue!=='';
|
|
const labelCls=req?(hasDfl?'req':'req-nodfl'):'';
|
|
const dfl=hasDfl?p.defaultValue:(req?'':'');
|
|
const vl=p.valueList;
|
|
let input;
|
|
if(vl&&Array.isArray(vl)){
|
|
input=`<select name="p_${p.svcOperationCfsParamId}" data-type="${p.dataType}">${vl.map(v=>`<option value="${v}" ${v==dfl?'selected':''}>${v}</option>`).join('')}</select>`;
|
|
}else if(p.dataType==='boolean'){
|
|
input=`<select name="p_${p.svcOperationCfsParamId}" data-type="boolean"><option value="true" ${dfl==='true'||dfl===true?'selected':''}>true</option><option value="false" ${dfl==='false'||dfl===false?'selected':''}>false</option></select>`;
|
|
}else{
|
|
input=`<input type="text" name="p_${p.svcOperationCfsParamId}" value="${dfl}" placeholder="${req&&!hasDfl?'обязательно':''}">`;
|
|
}
|
|
return `<div class="param-row"><label class="${labelCls}">${p.name}</label>${input}</div>`;
|
|
}).join('');
|
|
const btn=document.getElementById('btn-test');
|
|
btn.style.display='inline-flex';
|
|
btn.textContent='Запустить';
|
|
btn.onclick=()=>{
|
|
const pp={};
|
|
document.querySelectorAll('#params-form [name^="p_"]').forEach(el=>{
|
|
let v=el.value;
|
|
const dt=el.dataset.type||'';
|
|
if(dt==='array'||dt.startsWith('array')) v=JSON.stringify([v]);
|
|
if(dt==='map'||dt==='map-fixed') v=v||'{}';
|
|
pp[el.name.replace('p_','')]=v;
|
|
});
|
|
executeOp(pp);
|
|
};
|
|
});
|
|
}
|
|
|
|
function setFinishedState(statusText, statusClass, statusError, statusDuration, instanceName){
|
|
const btn=document.getElementById('btn-test');
|
|
btn.disabled=false;
|
|
btn.textContent='Готово';
|
|
btn.onclick=null;
|
|
const opName=selectedOp?.opName||'операция';
|
|
const durationText=statusDuration!==undefined&&statusDuration!==null?`${statusDuration}s`:'0s';
|
|
const extra=statusError||'';
|
|
const instName=instanceName||findInstName()||selectedInst||'';
|
|
document.getElementById('test-status').innerHTML=` <span class="badge ${statusClass}">${statusText}</span> <span style="color:var(--muted);">${opName}</span> <span style="color:var(--muted);">${durationText}</span> <span style="color:var(--muted);">${instName}</span> ${extra}`;
|
|
}
|
|
|
|
function setRunningState(opName, displayName){
|
|
const btn=document.getElementById('btn-test');
|
|
const title=displayName || opName;
|
|
btn.textContent=opName+'...';
|
|
document.getElementById('test-status').textContent=' ⏳ '+title+' выполняется...';
|
|
}
|
|
|
|
async function executeOp(params){
|
|
stopPoll();
|
|
const isCreate=selectedOp?.opName==='create';
|
|
const displayNameInput=document.getElementById('param-displayname');
|
|
const displayNameSuffix=(displayNameInput?.value||'').trim();
|
|
const displayName=isCreate ? `${AUTOTEST_PREFIX}${displayNameSuffix || makeCreateDisplayName()}` : findInstName();
|
|
document.getElementById('params-card').style.display='block';
|
|
document.getElementById('params-form').innerHTML='';
|
|
const btn=document.getElementById('btn-test');
|
|
btn.style.display='inline-flex';
|
|
btn.textContent=selectedOp.opName+'...';
|
|
btn.disabled=true;
|
|
setRunningState(selectedOp.opName, displayName);
|
|
document.getElementById('stages-box').style.display='block';
|
|
document.getElementById('stages-box').innerHTML='';
|
|
|
|
try{
|
|
const r=await fetch('/api/test',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
|
|
serviceId:SVC_ID,
|
|
operation:selectedOp.opName,
|
|
svcOperationId:selectedOp.opId,
|
|
params,
|
|
instanceUid:selectedInst||'',
|
|
displayName:isCreate ? displayName : ''
|
|
})});
|
|
const d=await r.json();
|
|
if(d.status==='FAIL'){document.getElementById('test-status').innerHTML=` <span class="badge">FAIL</span> ${d.error||''}`;btn.disabled=false;return;}
|
|
// start polling
|
|
const opUid=d.opUid;
|
|
const instanceName=d.displayName||displayName||findInstName();
|
|
pollTimer=setInterval(async()=>{
|
|
const sr=await fetch('/api/test/status/'+opUid);
|
|
const sd=await sr.json();
|
|
showStages(sd.stages||[]);
|
|
if(sd.status!=='RUNNING'){
|
|
stopPoll();
|
|
setFinishedState(sd.status, sd.status==='OK'?'badge-success':'badge', sd.error||sd.errorLog, sd.duration, sd.displayName||instanceName);
|
|
if(sd.status==='OK'){
|
|
await refreshInstances();
|
|
}
|
|
}
|
|
},2000);
|
|
}catch(e){
|
|
document.getElementById('test-status').textContent=' Ошибка: '+e.message;
|
|
btn.disabled=false;
|
|
}
|
|
}
|
|
|
|
function showStages(stages){
|
|
if(!stages||!stages.length) return;
|
|
let html='<div style="font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;">Этапы</div>';
|
|
stages.forEach(s=>{
|
|
const done=!!s.dtFinish;
|
|
const icon=done?(s.isSuccessful?'✅':'❌'):'⏳';
|
|
html+=`<div style="font-size:11px;padding:2px 0;">${icon} ${s.stage} — ${(s.duration||0).toFixed(1)}s</div>`;
|
|
});
|
|
document.getElementById('stages-box').innerHTML=html;
|
|
}
|
|
|
|
function stopPoll(){
|
|
if(pollTimer){clearInterval(pollTimer);pollTimer=null;}
|
|
}
|
|
|
|
async function refreshInstances(){
|
|
const r=await fetch('/api/operations/'+SVC_ID);
|
|
const d=await r.json();
|
|
const newInsts=d.instances||[];
|
|
svcInstances=newInsts;
|
|
let html='';
|
|
svcInstances.forEach(i=>{
|
|
const status=i.status||i.explainedStatus||'?';
|
|
const sc=status==='running'?'badge-success':'';
|
|
html+=`<div class="inst-item" onclick="toggleInstance('${i.instanceUid}')" data-iuid="${i.instanceUid}">
|
|
<span style="flex:1;">${i.displayName}</span>
|
|
<span class="badge ${sc}" style="font-size:9px;">${status}</span>
|
|
</div>`;
|
|
html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
|
|
});
|
|
html+=`<div class="inst-item" style="margin-top:8px;border-top:1px solid var(--brand-gray);padding-top:8px;" onclick="startCreate()">
|
|
<span style="flex:1;color:var(--brand-primary);">+ Создать новый инстанс</span>
|
|
</div>`;
|
|
document.getElementById('inst-list').innerHTML=html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |