Three-column cascade UI: services → operations → params → test, v1.1.0

site/app.py

@@ -4,8 +4,9 @@ from flask import Flask
 
 from routes.main import bp as main_bp
 from routes.api import bp as api_bp
+from routes.api_test import bp as api_test_bp
 
-VERSION = "1.0.5"
+VERSION = "1.1.0"
 
 app = Flask(__name__, template_folder="templates", static_folder="static")
 app.config["NUBES_API_ENDPOINT"] = os.getenv("NUBES_API_ENDPOINT", "https://lk-api-gateway-dev.ngcloud.ru/api/v1/svc")
@@ -13,6 +14,7 @@ app.config["NUBES_API_TOKEN"] = os.getenv("NUBES_API_TOKEN", "")
 app.config["VERSION"] = VERSION
 app.register_blueprint(main_bp)
 app.register_blueprint(api_bp)
+app.register_blueprint(api_test_bp)
 
 
 @app.route("/health")

site/routes/api_test.py

@@ -0,0 +1,146 @@
+from flask import Blueprint, current_app, jsonify, request
+
+from api.http_client import HttpClient
+from operations.get_services import get_services, get_service_detail
+from operations.get_instances import get_instances
+
+bp = Blueprint("api_test", __name__)
+
+
+def _client():
+    token = request.cookies.get("token") or current_app.config["NUBES_API_TOKEN"]
+    return HttpClient(current_app.config["NUBES_API_ENDPOINT"], token)
+
+
+@bp.route("/api/services")
+def api_services():
+    try:
+        raw = get_services(_client())
+        svc_list = [{"svcId": s["svcId"], "svc": s["svc"], "svcExtendedName": s.get("svcExtendedName", "")} for s in raw]
+        svc_list.sort(key=lambda s: s["svcId"])
+        return jsonify(svc_list)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@bp.route("/api/instances/list")
+def api_instances_list():
+    try:
+        raw = get_instances(_client())
+        inst = [{"instanceUid": i["instanceUid"], "displayName": i["displayName"], "serviceId": i["serviceId"], "svc": i["svc"], "explainedStatus": i.get("explainedStatus", "?")} for i in raw]
+        return jsonify(inst)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@bp.route("/api/operations/<int:svc_id>")
+def api_operations(svc_id):
+    try:
+        detail = get_service_detail(_client(), svc_id)
+        ops = detail.get("operations", [])
+        instances = get_instances(_client())
+        svc_instances = [i for i in instances if i.get("serviceId") == svc_id and i.get("explainedStatus") not in ("deleted", "not created")]
+        return jsonify({
+            "svc": detail.get("svc", ""),
+            "operations": [{"svcOperationId": o["svcOperationId"], "operation": o["operation"]} for o in ops],
+            "instances": svc_instances,
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@bp.route("/api/params/<int:op_id>")
+def api_params(op_id):
+    try:
+        data = _client().get(f"/instanceOperations/default/{op_id}")
+        params = data["svcOperation"]["cfsParams"]
+        result = []
+        for p in params:
+            result.append({
+                "svcOperationCfsParamId": p["svcOperationCfsParamId"],
+                "name": p.get("svcOperationCfsParam", ""),
+                "dataType": p.get("dataType", ""),
+                "isRequired": p.get("isRequired", False),
+                "defaultValue": p.get("defaultValue"),
+                "valueList": p.get("valueList"),
+                "dataDescriptor": {k: {"dataType": v.get("dataType",""), "valueList": v.get("valueList",""), "isRequired": v.get("isRequired", False)} for k, v in p.get("dataDescriptor", {}).items()} if p.get("dataDescriptor") else None,
+            })
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@bp.route("/api/test", methods=["POST"])
+def api_test():
+    """Запустить одну операцию."""
+    import threading, time
+
+    data = request.get_json()
+    svc_id = data["serviceId"]
+    op_name = data["operation"]
+    svc_op_id = data["svcOperationId"]
+    params = data.get("params", {})
+    instance_uid = data.get("instanceUid")
+    display_name = data.get("displayName", f"autotest-{svc_id}")
+
+    client = _client()
+
+    result = {"status": "RUNNING", "error": None, "instanceUid": None, "duration": 0}
+    t0 = time.time()
+
+    try:
+        if op_name == "create":
+            payload = {"serviceId": svc_id, "displayName": display_name}
+            if params:
+                payload["cfsParams"] = [{"svcOperationCfsParamId": int(k), "paramValue": str(v)} for k, v in params.items()]
+            resp = client.post("/instances", payload)
+            instance_uid = resp.get("instanceUid") or _find_uid(resp)
+
+            # wait
+            deadline = time.time() + 300
+            while time.time() < deadline:
+                insts = get_instances(client)
+                for i in insts:
+                    if i.get("instanceUid") == instance_uid:
+                        if not i.get("operationIsInProgress") and i.get("explainedStatus") not in ("creating",):
+                            result["status"] = "OK"
+                            result["instanceUid"] = instance_uid
+                            result["duration"] = round(time.time() - t0, 1)
+                            return jsonify(result)
+                time.sleep(5)
+            result["status"] = "TIMEOUT"
+        else:
+            if not instance_uid:
+                return jsonify({"status": "FAIL", "error": "Нет instanceUid"}), 400
+            payload = {"instanceUid": instance_uid, "svcOperationId": svc_op_id}
+            if params:
+                payload["cfsParams"] = [{"svcOperationCfsParamId": int(k), "paramValue": str(v)} for k, v in params.items()]
+            client.post("/instanceOperations", payload)
+
+            deadline = time.time() + 300
+            while time.time() < deadline:
+                insts = get_instances(client)
+                for i in insts:
+                    if i.get("instanceUid") == instance_uid:
+                        if not i.get("operationIsInProgress"):
+                            result["status"] = "OK"
+                            result["instanceUid"] = instance_uid
+                            result["duration"] = round(time.time() - t0, 1)
+                            return jsonify(result)
+                time.sleep(5)
+            result["status"] = "TIMEOUT"
+    except Exception as e:
+        result["status"] = "FAIL"
+        result["error"] = str(e)
+
+    result["instanceUid"] = instance_uid
+    result["duration"] = round(time.time() - t0, 1)
+    return jsonify(result)
+
+
+def _find_uid(resp):
+    if isinstance(resp, dict):
+        for v in resp.values():
+            if isinstance(v, str) and len(v) == 36 and v.count("-") == 4:
+                return v
+    return None

site/templates/index.html

@@ -6,54 +6,195 @@
     <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>
-        .layout { display:flex; gap:16px; max-width:900px; margin:16px auto; padding:0 16px; }
-        .left { width:380px; flex-shrink:0; }
-        .right { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; color:var(--muted); }
+        .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); }
+        .op-item { display:flex; align-items:center; gap:6px; padding:3px 8px; font-size:12px; }
+        .op-item.disabled { opacity:0.4; }
+        .btn-sm { height:24px; font-size:11px; padding:0 8px; }
+        .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 style="max-width:900px;margin:0 auto;padding:12px 16px 0;display:flex;align-items:center;gap:12px;">
-    <img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" style="height:24px;" />
-    <span style="font-size:11px;color:var(--muted);">v{{ config.VERSION if config else '?' }}</span>
+<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:200px;font-size:12px;border:1px solid var(--brand-gray);border-radius:4px;padding:0 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 %}
-    {% if error %}<span style="color:var(--destructive);font-size:12px;">{{ error }}</span>{% endif %}
+        {% 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="left">
+    <!-- Инфраструктура -->
+    <div class="col-infra">
         {% if organization %}
         <div class="card">
             <div class="card-header">Организация</div>
-            <div class="card-body" style="padding:8px 14px;font-size:12px;">
-                {{ organization.displayName }}{% if client_id %} ({{ client_id }}){% endif %} — <span class="badge badge-success">{{ organization.explainedStatus or "OK" }}</span>
+            <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:8px;">
-            <div class="card-header" style="cursor:pointer;font-size:13px;" 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:200px;overflow-y:auto;">
+        <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:12px;">{{ i.displayName }}</td><td><span class="badge badge-success" style="font-size:10px;">{{ i.explainedStatus or "?" }}</span></td></tr>
+                    <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="right">
-        <p>Скоро здесь будут тесты.</p>
+
+    <!-- Сервисы -->
+    <div class="col-svc">
+        <div class="card">
+            <div class="card-header" style="font-size:12px;">Сервисы</div>
+            <div class="card-body" style="padding:4px;max-height:70vh;overflow-y:auto;" id="svc-list">
+                <span style="color:var(--muted);font-size:11px;">Загрузка...</span>
+            </div>
         </div>
     </div>
 
+    <!-- Операции + Параметры + Результат -->
+    <div class="col-main">
+        <div class="card" id="ops-card" style="display:none;">
+            <div class="card-header" style="font-size:12px;" id="ops-title">Операции</div>
+            <div class="card-body" style="padding:4px;" id="ops-list"></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>
+    </div>
+</div>
+
+<script>
+let selectedSvc=null, selectedOp=null, svcInstances=[];
+
+// Load services
+fetch('/api/services').then(r=>r.json()).then(data=>{
+    const el=document.getElementById('svc-list');
+    el.innerHTML=data.map(s=>`<div class="svc-item" data-svc-id="${s.svcId}" onclick="selectService(${s.svcId})">${s.svcId}. ${s.svc}${s.svcExtendedName?' — '+s.svcExtendedName:''}</div>`).join('');
+});
+
+async function selectService(svcId){
+    selectedSvc=svcId; selectedOp=null;
+    document.querySelectorAll('.svc-item').forEach(e=>e.classList.toggle('active',e.dataset.svcId==String(svcId)));
+    document.getElementById('params-card').style.display='none';
+    document.getElementById('btn-test').style.display='none';
+
+    const r=await fetch('/api/operations/'+svcId);
+    const d=await r.json();
+    svcInstances=d.instances||[];
+    const hasInstance=svcInstances.length>0;
+    const activeStatuses=svcInstances.map(i=>i.explainedStatus);
+
+    const opsCard=document.getElementById('ops-card');
+    opsCard.style.display='block';
+    document.getElementById('ops-title').textContent=d.svc+' — операции';
+
+    const opsList=document.getElementById('ops-list');
+    opsList.innerHTML=d.operations.map(o=>{
+        let disabled=!hasInstance && o.operation!=='create';
+        if(hasInstance && o.operation==='create') disabled=true;
+        if(o.operation==='reconcile') disabled=false;
+        const cls=disabled?'op-item disabled':'op-item';
+        const btn=disabled?'':'<button class="btn btn-primary btn-sm" onclick="selectOperation('+o.svcOperationId+',\''+o.operation+'\','+svcId+')">Тест</button>';
+        const hint=disabled?`<span style="font-size:10px;color:var(--muted);">${hasInstance?'уже есть':'нет инстанса'}</span>`:'';
+        const instUid=svcInstances.length>0?`<span style="font-size:10px;color:var(--muted);">${svcInstances[0].instanceUid.slice(0,8)}...</span>`:'';
+        return `<div class="${cls}">${btn} ${o.operation} ${hint} ${instUid}</div>`;
+    }).join('');
+}
+
+async function selectOperation(opId,opName,svcId){
+    selectedOp={opId,opName,svcId};
+    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');
+
+    form.innerHTML=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}">${vl.map(v=>`<option value="${v}" ${v==dfl?'selected':''}>${v}</option>`).join('')}</select>`;
+        }else if(p.dataType==='boolean'){
+            input=`<select name="p_${p.svcOperationCfsParamId}"><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('test-status').textContent='';
+}
+
+async function runTest(){
+    if(!selectedOp) return;
+    const btn=document.getElementById('btn-test');
+    btn.disabled=true;
+    document.getElementById('test-status').textContent=' ⏳ выполняется...';
+
+    const params={};
+    document.querySelectorAll('#params-form [name^="p_"]').forEach(el=>{
+        params[el.name.replace('p_','')]=el.value;
+    });
+
+    let instUid='';
+    if(selectedOp.opName!=='create'&&svcInstances.length>0){
+        instUid=svcInstances[0].instanceUid;
+    }
+
+    try{
+        const r=await fetch('/api/test',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
+            serviceId:selectedOp.svcId,
+            operation:selectedOp.opName,
+            svcOperationId:selectedOp.opId,
+            params,
+            instanceUid:instUid,
+            displayName:'autotest-'+selectedOp.svcId
+        })});
+        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.status==='OK'&&selectedOp.opName==='create'){
+            // refresh services to update instance state
+            selectService(selectedOp.svcId);
+        }
+    }catch(e){
+        document.getElementById('test-status').textContent=' Ошибка: '+e.message;
+    }
+    btn.disabled=false;
+}
+</script>
 </body>
 </html>