Add services dropdown with operations panel

site/templates/index.html

@@ -20,30 +20,89 @@
             </form>
         </div>
         <div class="card-body">
-            {% if organization %}
-            <table>
-                <thead>
-                    <tr>
-                        <th>Имя</th>
-                        <th>instanceUid</th>
-                        <th>Сервис</th>
-                        <th>Статус</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>{{ organization.displayName }}</td>
-                        <td style="font-family: monospace; font-size: 12px;">{{ organization.instanceUid }}</td>
-                        <td>{{ organization.svc }}</td>
-                        <td><span class="badge badge-success">{{ organization.explainedStatus or "OK" }}</span></td>
-                    </tr>
-                </tbody>
-            </table>
+            {% if error %}
+            <p style="color: var(--destructive);">{{ error }}</p>
+            {% elif organization %}
+            <p>{{ organization.displayName }} — {{ organization.explainedStatus or "OK" }}</p>
             {% else %}
-            <p style="color: var(--muted);">{% if error %}Ошибка: {{ error }}{% else %}Введите токен{% endif %}</p>
+            <p style="color: var(--muted);">Введите токен</p>
             {% endif %}
         </div>
     </div>
+
+    {% if services %}
+    <div class="card" style="max-width: 780px; margin: 16px auto;">
+        <div class="card-header">Сервисы ({{ services|length }})</div>
+        <div class="card-body" style="padding: 0;">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="width:50px;">#</th>
+                        <th>Сервис</th>
+                        <th style="width:80px;">Операции</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for s in services %}
+                    <tr class="svc-row" data-svc-id="{{ s.svcId }}" style="cursor:pointer;">
+                        <td>{{ s.svcId }}</td>
+                        <td>{{ s.svc }}{% if s.svcExtendedName %} — {{ s.svcExtendedName }}{% endif %}</td>
+                        <td style="text-align:center;">
+                            <span class="ops-count" id="ops-{{ s.svcId }}">?</span>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="card" id="ops-panel" style="max-width: 780px; margin: 16px auto; display: none;">
+        <div class="card-header" id="ops-title">Операции</div>
+        <div class="card-body" id="ops-body" style="padding: 8px 14px;"></div>
+    </div>
+
+    <script>
+    const opsCache = {};
+    document.querySelectorAll('.svc-row').forEach(row => {
+        row.addEventListener('click', async () => {
+            const svcId = row.dataset.svcId;
+            document.querySelectorAll('.svc-row').forEach(r => r.style.background = '');
+            row.style.background = 'var(--brand-grey-light)';
+            if (opsCache[svcId]) {
+                showOps(svcId, opsCache[svcId]);
+                return;
+            }
+            try {
+                const r = await fetch('/api/operations/' + svcId);
+                const d = await r.json();
+                opsCache[svcId] = d;
+                showOps(svcId, d);
+            } catch(e) {
+                document.getElementById('ops-body').innerHTML = '<p style=\"color:var(--destructive);\">Ошибка</p>';
+            }
+        });
+    });
+
+    function showOps(svcId, data) {
+        const panel = document.getElementById('ops-panel');
+        const title = document.getElementById('ops-title');
+        const body = document.getElementById('ops-body');
+        panel.style.display = 'block';
+        title.textContent = 'Операции: ' + data.svc + ' (svcId=' + svcId + ')';
+        if (data.error) {
+            body.innerHTML = '<p style=\"color:var(--destructive);\">' + data.error + '</p>';
+            return;
+        }
+        const ops = data.operations || [];
+        document.getElementById('ops-' + svcId).textContent = ops.length;
+        body.innerHTML = ops.map(o =>
+            '<span class=\"badge\" style=\"margin:2px;\">' + o.operation + '</span>'
+        ).join('') || '<p style=\"color:var(--muted);\">Нет операций</p>';
+    }
+    </script>
+    {% endif %}
+
     <script>lucide.createIcons();</script>
 </body>
 </html>