Async ops + progressive stages + buttons + confirm, v1.0.42
This commit is contained in:
+98
-74
@@ -97,16 +97,15 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let svcInstances=[], selectedInst=null, selectedOp=null;
|
||||
let svcInstances=[], selectedInst=null, selectedOp=null, pollTimer=null;
|
||||
const SVC_ID=1;
|
||||
|
||||
// Загрузка при старте
|
||||
selectService(SVC_ID);
|
||||
|
||||
async function selectService(svcId){
|
||||
selectedInst=null; selectedOp=null;
|
||||
selectedInst=null; selectedOp=null; stopPoll();
|
||||
document.getElementById('params-card').style.display='none';
|
||||
document.getElementById('btn-test').style.display='none';
|
||||
document.getElementById('stages-box').style.display='none';
|
||||
|
||||
const r=await fetch('/api/operations/'+svcId);
|
||||
const d=await r.json();
|
||||
@@ -121,7 +120,6 @@ async function selectService(svcId){
|
||||
</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>`;
|
||||
@@ -129,16 +127,12 @@ async function selectService(svcId){
|
||||
}
|
||||
|
||||
async function toggleInstance(iuid){
|
||||
selectedInst=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');
|
||||
document.getElementById('params-card').style.display='none';
|
||||
return;
|
||||
}
|
||||
// Закрыть все
|
||||
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);
|
||||
@@ -146,71 +140,86 @@ async function toggleInstance(iuid){
|
||||
const ops=d.operations.filter(o=>o.operation!=='reconcile'&&o.operation!=='create');
|
||||
opsEl.innerHTML=ops.map(o=>
|
||||
`<div class="inst-item" style="margin-left:0;">
|
||||
<span style="flex:1;">${o.operation}</span>
|
||||
<button class="btn btn-primary btn-sm" onclick="startOperation(${o.svcOperationId},'${o.operation}')">Тест</button>
|
||||
<button class="btn btn-sm" onclick="runOp('${o.operation}',${o.svcOperationId})">${o.operation}</button>
|
||||
</div>`
|
||||
).join('');
|
||||
opsEl.classList.add('open');
|
||||
}
|
||||
|
||||
function startCreate(){
|
||||
selectedInst=null;
|
||||
selectedInst=null; stopPoll();
|
||||
document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.remove('active'));
|
||||
document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
|
||||
loadParams(18,'create'); // svcOperationId for create = 18
|
||||
showParams(18,'create');
|
||||
}
|
||||
|
||||
function startOperation(opId,opName){
|
||||
loadParams(opId,opName);
|
||||
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({});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadParams(opId,opName){
|
||||
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('btn-test').style.display='inline-flex';
|
||||
|
||||
const r=await fetch('/api/params/'+opId);
|
||||
const params=await r.json();
|
||||
const form=document.getElementById('params-form');
|
||||
|
||||
const displayName=opName==='create'?('autotest-1-'+Date.now().toString(36)):'';
|
||||
form.innerHTML=(opName==='create'?`<div class="param-row"><label class="req">displayName</label><input type="text" id="param-displayname" value="${displayName}"></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('');
|
||||
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 displayName=opName==='create'?('autotest-1-'+Date.now().toString(36)):'';
|
||||
form.innerHTML=(opName==='create'?`<div class="param-row"><label class="req">displayName</label><input type="text" id="param-displayname" value="${displayName}"></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);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function runTest(){
|
||||
if(!selectedOp) return;
|
||||
async function executeOp(params){
|
||||
stopPoll();
|
||||
const btn=document.getElementById('btn-test');
|
||||
btn.disabled=true;
|
||||
document.getElementById('test-status').textContent=' ⏳ выполняется...';
|
||||
const stagesBox=document.getElementById('stages-box');
|
||||
stagesBox.style.display='block';
|
||||
stagesBox.innerHTML='';
|
||||
|
||||
const params={};
|
||||
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||'{}';
|
||||
params[el.name.replace('p_','')]=v;
|
||||
});
|
||||
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({
|
||||
@@ -219,28 +228,43 @@ async function runTest(){
|
||||
svcOperationId:selectedOp.opId,
|
||||
params,
|
||||
instanceUid:selectedInst||'',
|
||||
displayName:document.getElementById('param-displayname')?.value||('autotest-1')
|
||||
displayName:document.getElementById('param-displayname')?.value||'autotest-1'
|
||||
})});
|
||||
const d=await r.json();
|
||||
const cls=d.status==='OK'?'badge badge-success':'badge';
|
||||
document.getElementById('test-status').innerHTML=` <span class="${cls}">${d.status}</span> ${d.error||''} ${d.duration||''}s`;
|
||||
|
||||
// Показать стадии
|
||||
if(d.stages&&d.stages.length){
|
||||
let sh='<div style="font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;">Этапы</div>';
|
||||
d.stages.forEach(s=>{
|
||||
const ok=s.isSuccessful;
|
||||
const icon=ok===true?'✅':ok===false?'❌':'⏳';
|
||||
sh+=`<div style="font-size:11px;padding:2px 0;">${icon} ${s.stage} — ${(s.duration||0).toFixed(1)}s</div>`;
|
||||
});
|
||||
stagesBox.innerHTML=sh;
|
||||
}
|
||||
|
||||
if(d.status==='OK'&&selectedOp.opName==='create'){await selectService(SVC_ID);}
|
||||
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;
|
||||
pollTimer=setInterval(async()=>{
|
||||
const sr=await fetch('/api/test/status/'+opUid);
|
||||
const sd=await sr.json();
|
||||
showStages(sd.stages||[]);
|
||||
if(sd.status!=='RUNNING'){
|
||||
stopPoll();
|
||||
const cls=sd.status==='OK'?'badge-success':'badge';
|
||||
document.getElementById('test-status').innerHTML=` <span class="badge ${cls}">${sd.status}</span> ${sd.error||''} ${sd.duration||''}s`;
|
||||
btn.disabled=false;
|
||||
if(sd.status==='OK'&&selectedOp.opName==='create') await selectService(SVC_ID);
|
||||
}
|
||||
},2000);
|
||||
}catch(e){
|
||||
document.getElementById('test-status').textContent=' Ошибка: '+e.message;
|
||||
btn.disabled=false;
|
||||
}
|
||||
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 ok=s.isSuccessful;
|
||||
const icon=ok===true?'✅':ok===false?'❌':'⏳';
|
||||
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;}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user