v1.1.15: dynamic stages-box — inline after instance, not below all

site/app.py

@@ -18,7 +18,7 @@ from routes.api import bp as api_bp
 from routes.api_test import bp as api_test_bp
 
 # Версия — меняется при КАЖДОМ изменении кода. Показывается в топбаре UI.
-VERSION = "1.1.14"
+VERSION = "1.1.15"
 
 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/app.js

@@ -37,7 +37,7 @@ async function selectService(svcId){
     currentSvcId=svcId;
     selectedInst=null; selectedOp=null; stopPoll();
     document.getElementById('params-area').style.display='none';
-    document.getElementById('stages-box').style.display='none';
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
     // Подсветить активный сервис в боковой панели
     document.querySelectorAll('.svc-item').forEach(e=>e.classList.remove('active'));
     const svcEl=document.querySelector(`.svc-item[onclick*="${svcId}"]`);
@@ -135,7 +135,7 @@ function findInstName(){
 function showParams(opId,opName){
     selectedOp={opId,opName,svcId:currentSvcId};
     document.getElementById('params-area').style.display='block';
-    document.getElementById('stages-box').style.display='none';
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
     document.getElementById('test-status').textContent='';
 
     const isCreate=opName==='create';
@@ -304,8 +304,15 @@ async function executeOp(params){
     btn.textContent=selectedOp.opName+'...';
     btn.disabled=true;
     setRunningState(selectedOp.opName, displayName);
-    document.getElementById('stages-box').style.display='block';
-    document.getElementById('stages-box').innerHTML='';
+    // Создать динамический stages-box после инстанса
+    const instId=selectedInst||'';
+    const afterEl=instId?document.getElementById('ops-'+instId):null;
+    document.querySelectorAll('.stages-box').forEach(e=>e.remove());
+    const stagesBox=document.createElement('div');
+    stagesBox.className='stages-box';
+    stagesBox.style.cssText='max-height:200px;overflow-y:auto;padding:4px 8px;margin-left:16px;background:var(--brand-grey-light);border-radius:4px;';
+    if(afterEl){afterEl.after(stagesBox);}
+    else{document.getElementById('inst-list').appendChild(stagesBox);}
 
     try{
         const r=await fetch('/api/test',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
@@ -348,7 +355,8 @@ function showStages(stages){
         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;
+    const boxes=document.querySelectorAll('.stages-box');
+    if(boxes.length) boxes[boxes.length-1].innerHTML=html;
 }
 
 function stopPoll(){

site/templates/index.html

@@ -117,7 +117,6 @@
                 <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 id="stages-box" style="display:none;max-height:200px;overflow-y:auto;"></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()">