From 622a7c70236bd360a92ff533b5527eb403a3ce51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Fri, 31 Jul 2026 11:40:29 +0400
Subject: [PATCH] v1.2.3: instance_ref shows cloud instances + bigger CRUD
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scenario-form.js:
- showScenarioEditor loads /api/instances/list alongside services
- renderStepRow: non-create instance_ref dropdown shows:
  🆕 outputs from previous create steps
  ☁ existing cloud instances filtered by service_id
- Removed separate instance_uid text field (now in dropdown)

scenario-list.js:
- CRUD buttons: ✏📋🗑 bigger (13px, padding), vertical layout
- Run button: full-width, left-aligned
---
 site/app.py                     |  2 +-
 site/static/js/scenario-form.js | 28 ++++++++++++++++++++--------
 site/static/js/scenario-list.js | 16 ++++++++--------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/site/app.py b/site/app.py
index c771804..75f1193 100644
--- a/site/app.py
+++ b/site/app.py
@@ -19,7 +19,7 @@ from routes.api_scenario_run import bp_run as api_scenario_run_bp
 from routes.api_scenario_defs import bp_defs as api_scenario_defs_bp
 
 # Версия — меняется при КАЖДОМ изменении кода. Показывается в топбаре UI.
-VERSION = "1.2.2"
+VERSION = "1.2.3"
 
 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")
diff --git a/site/static/js/scenario-form.js b/site/static/js/scenario-form.js
index 0454b7f..47a3765 100644
--- a/site/static/js/scenario-form.js
+++ b/site/static/js/scenario-form.js
@@ -17,11 +17,15 @@ async function showScenarioEditor(def) {
         services: [], opsCache: {}
     } : { defId: null, version: 1, name: '', steps: [], services: [], opsCache: {} };
 
-    // Загрузить список сервисов
+    // Загрузить список сервисов и облачные инстансы
     try {
-        const r = await fetch('/api/services');
-        scenarioEditorState.services = await r.json();
-    } catch (e) { scenarioEditorState.services = []; }
+        const [svcR, instR] = await Promise.all([
+            fetch('/api/services').then(r => r.json()),
+            fetch('/api/instances/list').then(r => r.json())
+        ]);
+        scenarioEditorState.services = svcR || [];
+        scenarioEditorState.cloudInstances = instR || [];
+    } catch (e) { scenarioEditorState.services = []; scenarioEditorState.cloudInstances = []; }
     renderEditor();
 }
 
@@ -110,10 +114,18 @@ function renderStepRow(idx, step) {
     if (op === 'create') {
         html += `<input type="text" id="step-${idx}-output" value="${_esc(out)}" placeholder="output (имя для ссылок)" style="width:180px;padding:3px;font-size:11px;">`;
     } else if (op) {
-        let refOpts = '<option value="">— instance_ref —</option>';
-        prevOutputs.forEach(o => { refOpts += `<option value="${o}" ${o == ref ? 'selected' : ''}>${_esc(o)}</option>`; });
-        html += `<select id="step-${idx}-ref" style="padding:3px;font-size:11px;">${refOpts}</select>`;
-        html += `<input type="text" id="step-${idx}-uid" value="${_esc(step.instance_uid || '')}" placeholder="или явный UUID" style="width:280px;padding:3px;font-size:11px;">`;
+        // Предыдущие output'ы + облачные инстансы этого сервиса
+        let refOpts = '<option value="">— инстанс —</option>';
+        // output'ы из предыдущих create-шагов
+        prevOutputs.forEach(o => { refOpts += `<option value="${o}" ${o == ref ? 'selected' : ''}>🆕 ${_esc(o)}</option>`; });
+        // Облачные инстансы того же сервиса
+        const cloudInsts = (st.cloudInstances || []).filter(i => i.serviceId == svcId && i.explainedStatus !== 'deleted');
+        if (cloudInsts.length) refOpts += '<option disabled>── облако ──</option>';
+        cloudInsts.forEach(i => {
+            const sel = i.instanceUid == ref ? 'selected' : '';
+            refOpts += `<option value="${i.instanceUid}" ${sel}>☁ ${_esc(i.displayName)} (${_esc(i.explainedStatus || '?')})</option>`;
+        });
+        html += `<select id="step-${idx}-ref" style="padding:3px;font-size:11px;max-width:400px;">${refOpts}</select>`;
     }
     html += '</div>';
 
diff --git a/site/static/js/scenario-list.js b/site/static/js/scenario-list.js
index 9d8c6e4..de08fd5 100644
--- a/site/static/js/scenario-list.js
+++ b/site/static/js/scenario-list.js
@@ -18,17 +18,17 @@ async function loadScenarios(){
             fetch('/api/scenario/status').then(r=>r.json()),
         ]);
         let html='';
-        html+=`<button class="btn btn-sm" style="font-size:10px;margin-bottom:4px;" onclick="createScenario()">+ Создать сценарий</button>`;
+        html+=`<button class="btn btn-sm" style="font-size:11px;margin-bottom:4px;" onclick="createScenario()">+ Создать сценарий</button>`;
         if(sr.length){
-            html+='<div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;">';
+            html+='<div style="display:flex;flex-direction:column;gap:4px;margin-bottom:4px;">';
             sr.forEach(s=>{
                 const seed = s.is_seed;
-                html+=`<div style="display:inline-flex;gap:2px;align-items:center;">`;
-                html+=`<button class="btn btn-sm" style="font-size:11px;" onclick="runScenario(${s.id})" title="Запустить">▶ ${_esc(s.name)} <span style="color:var(--muted);">(${s.steps} шагов)</span></button>`;
-                if(!seed) html+=`<button class="btn btn-sm" style="font-size:9px;padding:0 4px;" onclick="editScenario(${s.id})" title="Редактировать">✏</button>`;
-                html+=`<button class="btn btn-sm" style="font-size:9px;padding:0 4px;" onclick="cloneScenario(${s.id},'${_esc(s.name)}')" title="Клонировать">⎘</button>`;
-                if(!seed) html+=`<button class="btn btn-sm" style="font-size:9px;padding:0 4px;color:var(--destructive);" onclick="deleteScenario(${s.id},'${_esc(s.name)}')" title="Удалить">🗑</button>`;
-                if(seed) html+=`<span style="font-size:8px;color:var(--muted);">seed</span>`;
+                html+=`<div style="display:flex;align-items:center;gap:4px;">`;
+                html+=`<button class="btn btn-sm" style="font-size:12px;flex:1;text-align:left;" onclick="runScenario(${s.id})" title="Запустить">▶ ${_esc(s.name)} <span style="color:var(--muted);">(${s.steps} шагов)</span></button>`;
+                if(!seed) html+=`<button class="btn btn-sm" style="font-size:13px;padding:0 6px;" onclick="editScenario(${s.id})" title="Редактировать">✏</button>`;
+                html+=`<button class="btn btn-sm" style="font-size:13px;padding:0 6px;" onclick="cloneScenario(${s.id},'${_esc(s.name)}')" title="Копировать">📋</button>`;
+                if(!seed) html+=`<button class="btn btn-sm" style="font-size:13px;padding:0 6px;color:var(--destructive);" onclick="deleteScenario(${s.id},'${_esc(s.name)}')" title="Удалить">🗑</button>`;
+                if(seed) html+=`<span style="font-size:9px;color:var(--muted);padding:0 4px;">seed</span>`;
                 html+=`</div>`;
             });
             html+='</div>';