v1.0.62: immediate visual refresh after CREATE

site/templates/index.html

@@ -219,6 +219,13 @@ function setFinishedState(statusText, statusClass, statusError, statusDuration){
     document.getElementById('test-status').innerHTML=` <span class="badge ${statusClass}">${statusText}</span> ${statusError||''} ${statusDuration||''}s`;
 }
 
+function setRunningState(opName, displayName){
+    const btn=document.getElementById('btn-test');
+    const title=displayName || opName;
+    btn.textContent='Готово';
+    document.getElementById('test-status').textContent=' ⏳ '+title+' выполняется...';
+}
+
 async function executeOp(params){
     stopPoll();
     // Захватить displayName ДО очистки формы
@@ -229,7 +236,7 @@ async function executeOp(params){
     btn.style.display='inline-flex';
     btn.textContent=selectedOp.opName+'...';
     btn.disabled=true;
-    document.getElementById('test-status').textContent=' ⏳ '+selectedOp.opName+' выполняется...';
+    setRunningState(selectedOp.opName, displayName);
     document.getElementById('stages-box').style.display='block';
     document.getElementById('stages-box').innerHTML='';
 
@@ -283,32 +290,20 @@ async function refreshInstances(){
     const r=await fetch('/api/operations/'+SVC_ID);
     const d=await r.json();
     const newInsts=d.instances||[];
-    const oldUids=new Set(svcInstances.map(i=>i.instanceUid));
-    const added=newInsts.filter(i=>!oldUids.has(i.instanceUid));
     svcInstances=newInsts;
-    // обновить бейджи существующих
+    let html='';
     svcInstances.forEach(i=>{
-        const el=document.querySelector(`[data-iuid="${i.instanceUid}"] .badge`);
-        if(el){
-            el.textContent=i.explainedStatus||'?';
-            el.className='badge '+(i.explainedStatus==='running'?'badge-success':'');
-        }
+        const sc=i.explainedStatus==='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;">${i.explainedStatus||'?'}</span>
+        </div>`;
+        html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
     });
-    // добавить новые инстансы в список (перед кнопкой "+ Создать")
-    if(added.length){
-        const list=document.getElementById('inst-list');
-        const addBtn=list.querySelector('[onclick="startCreate()"]');
-        let html='';
-        added.forEach(i=>{
-            const sc=i.explainedStatus==='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;">${i.explainedStatus||'?'}</span>
-            </div>`;
-            html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
-        });
-        if(addBtn){addBtn.insertAdjacentHTML('beforebegin',html);}
-    }
+    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>