icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_analytics.html

@@ -0,0 +1,360 @@
+<!-- CUI // SP-CTI -->
+{% extends "base.html" %}
+{% block title %}Forge Studio — Analytics{% endblock %}
+{% block content %}
+<style>
+.fsa-wrap{max-width:1200px;margin:0 auto;padding:24px}
+.fsa-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
+.fsa-header h1{font-size:24px;font-weight:700;color:#e2e8f0}
+.fsa-header .fsa-back{color:#94a3b8;text-decoration:none;font-size:18px}
+.fsa-header .fsa-back:hover{color:#e2e8f0}
+
+/* Time range filter */
+.fsa-filter{display:flex;gap:8px;margin-bottom:24px}
+.fsa-filter-btn{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid #334155;background:#1e293b;color:#94a3b8;transition:all .15s}
+.fsa-filter-btn:hover{border-color:#3b82f6;color:#e2e8f0}
+.fsa-filter-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
+
+/* Metric cards */
+.fsa-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
+.fsa-metric{background:#1e293b;border-radius:10px;padding:20px;border:1px solid #334155;text-align:center}
+.fsa-metric .val{font-size:28px;font-weight:700;color:#3b82f6}
+.fsa-metric .val.green{color:#22c55e}
+.fsa-metric .val.amber{color:#f59e0b}
+.fsa-metric .lbl{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
+
+/* Section headers */
+.fsa-section{margin-bottom:32px}
+.fsa-section h2{font-size:18px;font-weight:600;color:#e2e8f0;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #334155}
+
+/* Bar chart */
+.fsa-bar-list{display:flex;flex-direction:column;gap:10px}
+.fsa-bar-row{display:flex;align-items:center;gap:12px}
+.fsa-bar-label{width:160px;font-size:13px;color:#e2e8f0;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fsa-bar-track{flex:1;height:28px;background:#0f172a;border-radius:6px;overflow:hidden;position:relative}
+.fsa-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#3b82f6,#818cf8);transition:width .6s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;min-width:32px}
+.fsa-bar-count{font-size:12px;font-weight:600;color:#fff}
+
+/* Event breakdown table */
+.fsa-table-wrap{background:#1e293b;border-radius:10px;border:1px solid #334155;overflow:hidden}
+.fsa-table{width:100%;border-collapse:collapse;font-size:13px}
+.fsa-table th{text-align:left;padding:12px 16px;background:#0f172a;color:#94a3b8;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
+.fsa-table td{padding:10px 16px;color:#e2e8f0;border-top:1px solid #334155}
+.fsa-table tr:hover td{background:rgba(59,130,246,.04)}
+.fsa-table .pct-bar{display:inline-block;height:6px;border-radius:3px;background:#3b82f6;vertical-align:middle;margin-right:8px}
+
+/* Deployment stats */
+.fsa-deploy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
+.fsa-deploy-card{background:#1e293b;border-radius:10px;padding:20px;border:1px solid #334155;text-align:center;transition:border-color .15s}
+.fsa-deploy-card:hover{border-color:#3b82f6}
+.fsa-deploy-card .provider{font-size:12px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
+.fsa-deploy-card .count{font-size:24px;font-weight:700;color:#e2e8f0}
+.fsa-deploy-card .icon{font-size:20px;margin-bottom:8px}
+.fsa-deploy-card.aws .icon{color:#ff9900}
+.fsa-deploy-card.azure .icon{color:#0078d4}
+.fsa-deploy-card.gcp .icon{color:#4285f4}
+.fsa-deploy-card.onprem .icon{color:#22c55e}
+
+/* Conformance */
+.fsa-conform{background:#1e293b;border-radius:10px;padding:24px;border:1px solid #334155}
+.fsa-conform-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
+.fsa-conform-rate{font-size:32px;font-weight:700;color:#22c55e}
+.fsa-conform-rate.warn{color:#f59e0b}
+.fsa-conform-rate.bad{color:#ef4444}
+.fsa-conform-label{font-size:13px;color:#94a3b8}
+.fsa-progress-track{width:100%;height:12px;background:#0f172a;border-radius:6px;overflow:hidden;margin-bottom:12px}
+.fsa-progress-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .6s ease}
+.fsa-progress-fill.warn{background:linear-gradient(90deg,#f59e0b,#d97706)}
+.fsa-progress-fill.bad{background:linear-gradient(90deg,#ef4444,#dc2626)}
+.fsa-conform-stats{display:flex;gap:24px;font-size:13px;color:#94a3b8}
+.fsa-conform-stats span{color:#e2e8f0;font-weight:600}
+
+/* Loading & error states */
+.fsa-loading{text-align:center;padding:40px;color:#94a3b8;font-size:14px}
+.fsa-loading .spinner{display:inline-block;width:20px;height:20px;border:2px solid #334155;border-top-color:#3b82f6;border-radius:50%;animation:fsa-spin .6s linear infinite;margin-right:8px;vertical-align:middle}
+@keyframes fsa-spin{to{transform:rotate(360deg)}}
+.fsa-error{text-align:center;padding:24px;color:#ef4444;font-size:13px;background:#1e293b;border-radius:10px;border:1px solid #334155}
+
+@media (max-width:900px){
+    .fsa-metrics{grid-template-columns:repeat(2,1fr)}
+    .fsa-deploy-grid{grid-template-columns:repeat(2,1fr)}
+}
+@media (max-width:600px){
+    .fsa-metrics{grid-template-columns:1fr}
+    .fsa-deploy-grid{grid-template-columns:1fr}
+    .fsa-bar-label{width:100px;font-size:12px}
+}
+</style>
+
+<div class="fsa-wrap">
+    <!-- Header -->
+    <div class="fsa-header">
+        <a href="/forge-studio" class="fsa-back" title="Back to Forge Studio">&larr; Forge Studio</a>
+        <h1>Analytics &amp; Process Mining</h1>
+    </div>
+
+    <!-- Time range filter -->
+    <div class="fsa-filter" id="fsa-range-filter">
+        <button class="fsa-filter-btn" data-range="7">7d</button>
+        <button class="fsa-filter-btn active" data-range="30">30d</button>
+        <button class="fsa-filter-btn" data-range="90">90d</button>
+        <button class="fsa-filter-btn" data-range="0">All</button>
+    </div>
+
+    <!-- Metric cards -->
+    <div class="fsa-metrics" id="fsa-metrics">
+        <div class="fsa-metric">
+            <div class="val" id="m-total-events">-</div>
+            <div class="lbl">Total Events</div>
+        </div>
+        <div class="fsa-metric">
+            <div class="val" id="m-unique-apps">-</div>
+            <div class="lbl">Unique Apps</div>
+        </div>
+        <div class="fsa-metric">
+            <div class="val green" id="m-success-rate">-</div>
+            <div class="lbl">Success Rate</div>
+        </div>
+        <div class="fsa-metric">
+            <div class="val" id="m-avg-time">-</div>
+            <div class="lbl">Avg Generation Time</div>
+        </div>
+    </div>
+
+    <!-- Component Usage -->
+    <div class="fsa-section" id="sec-component-usage">
+        <h2>Component Usage</h2>
+        <div id="fsa-bar-chart" class="fsa-bar-list">
+            <div class="fsa-loading"><span class="spinner"></span>Loading component data...</div>
+        </div>
+    </div>
+
+    <!-- Event Breakdown -->
+    <div class="fsa-section" id="sec-event-breakdown">
+        <h2>Event Breakdown</h2>
+        <div class="fsa-table-wrap">
+            <table class="fsa-table">
+                <thead>
+                    <tr>
+                        <th>Event Type</th>
+                        <th>Count</th>
+                        <th>Percentage</th>
+                    </tr>
+                </thead>
+                <tbody id="fsa-event-tbody">
+                    <tr><td colspan="3" style="text-align:center;color:#94a3b8">Loading...</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Deployment Stats -->
+    <div class="fsa-section" id="sec-deploy-stats">
+        <h2>Deployment Stats</h2>
+        <div class="fsa-deploy-grid" id="fsa-deploy-grid">
+            <div class="fsa-deploy-card aws">
+                <div class="icon">&#9729;</div>
+                <div class="provider">AWS</div>
+                <div class="count" id="d-aws">0</div>
+            </div>
+            <div class="fsa-deploy-card azure">
+                <div class="icon">&#9670;</div>
+                <div class="provider">Azure</div>
+                <div class="count" id="d-azure">0</div>
+            </div>
+            <div class="fsa-deploy-card gcp">
+                <div class="icon">&#9650;</div>
+                <div class="provider">GCP</div>
+                <div class="count" id="d-gcp">0</div>
+            </div>
+            <div class="fsa-deploy-card onprem">
+                <div class="icon">&#9632;</div>
+                <div class="provider">On-Prem</div>
+                <div class="count" id="d-onprem">0</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Conformance -->
+    <div class="fsa-section" id="sec-conformance">
+        <h2>Conformance</h2>
+        <div class="fsa-conform" id="fsa-conform">
+            <div class="fsa-conform-header">
+                <div>
+                    <div class="fsa-conform-rate" id="c-rate">-</div>
+                    <div class="fsa-conform-label">Conformance Rate</div>
+                </div>
+            </div>
+            <div class="fsa-progress-track">
+                <div class="fsa-progress-fill" id="c-progress" style="width:0%"></div>
+            </div>
+            <div class="fsa-conform-stats">
+                <div>Conformant: <span id="c-conformant">-</span></div>
+                <div>Deviant: <span id="c-deviant">-</span></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% raw %}
+<script>
+(function() {
+    var currentRange = 30;
+
+    // --- Range filter buttons ---
+    var filterBtns = document.querySelectorAll('#fsa-range-filter .fsa-filter-btn');
+    filterBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            filterBtns.forEach(function(b) { b.classList.remove('active'); });
+            btn.classList.add('active');
+            currentRange = parseInt(btn.getAttribute('data-range'), 10);
+            loadAll();
+        });
+    });
+
+    function loadAll() {
+        loadMetrics();
+        loadComponentUsage();
+        loadConformance();
+    }
+
+    // --- Metrics + Event Breakdown + Deploy Stats ---
+    function loadMetrics() {
+        var url = '/api/forge-studio/analytics/metrics?range=' + currentRange;
+        fetch(url)
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                // Top metric cards
+                document.getElementById('m-total-events').textContent = formatNum(data.total_events || 0);
+                document.getElementById('m-unique-apps').textContent = formatNum(data.unique_apps || 0);
+
+                var gen = data.generation || {};
+                var rate = gen.success_rate != null ? gen.success_rate : 0;
+                var rateEl = document.getElementById('m-success-rate');
+                rateEl.textContent = rate.toFixed(1) + '%';
+                rateEl.className = 'val ' + (rate >= 90 ? 'green' : rate >= 70 ? 'amber' : '');
+
+                var avgTime = gen.avg_time_ms != null ? gen.avg_time_ms : 0;
+                document.getElementById('m-avg-time').textContent = formatNum(Math.round(avgTime)) + ' ms';
+
+                // Deployment stats
+                var dep = data.deployments || {};
+                document.getElementById('d-aws').textContent = formatNum(dep.aws || 0);
+                document.getElementById('d-azure').textContent = formatNum(dep.azure || 0);
+                document.getElementById('d-gcp').textContent = formatNum(dep.gcp || 0);
+                document.getElementById('d-onprem').textContent = formatNum(dep.on_prem || dep.onprem || 0);
+
+                // Event breakdown table
+                renderEventBreakdown(data.event_breakdown || []);
+            })
+            .catch(function(err) {
+                console.error('Failed to load metrics:', err);
+                document.getElementById('m-total-events').textContent = '!';
+                document.getElementById('m-unique-apps').textContent = '!';
+                document.getElementById('m-success-rate').textContent = '!';
+                document.getElementById('m-avg-time').textContent = '!';
+            });
+    }
+
+    function renderEventBreakdown(breakdown) {
+        var tbody = document.getElementById('fsa-event-tbody');
+        // API returns event_breakdown as dict {event_type: count} — convert to array
+        if (breakdown && !Array.isArray(breakdown)) {
+            breakdown = Object.keys(breakdown).map(function(k) {
+                return { event_type: k, count: breakdown[k] };
+            });
+        }
+        if (!breakdown || breakdown.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;color:#94a3b8">No event data available</td></tr>';
+            return;
+        }
+        var total = breakdown.reduce(function(s, e) { return s + (e.count || 0); }, 0);
+        var html = '';
+        breakdown.forEach(function(evt) {
+            var pct = total > 0 ? ((evt.count / total) * 100) : 0;
+            html += '<tr>';
+            html += '<td>' + escapeHtml(evt.event_type || evt.type || '-') + '</td>';
+            html += '<td>' + formatNum(evt.count || 0) + '</td>';
+            html += '<td><span class="pct-bar" style="width:' + Math.max(pct, 2) + 'px"></span>' + pct.toFixed(1) + '%</td>';
+            html += '</tr>';
+        });
+        tbody.innerHTML = html;
+    }
+
+    // --- Component Usage ---
+    function loadComponentUsage() {
+        var container = document.getElementById('fsa-bar-chart');
+        container.innerHTML = '<div class="fsa-loading"><span class="spinner"></span>Loading component data...</div>';
+
+        var url = '/api/forge-studio/analytics/component-usage?range=' + currentRange;
+        fetch(url)
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                var items = (data.component_usage || []).slice(0, 10);
+                if (items.length === 0) {
+                    container.innerHTML = '<div style="text-align:center;color:#94a3b8;padding:24px">No component usage data</div>';
+                    return;
+                }
+                var maxCount = Math.max.apply(null, items.map(function(c) { return c.count || 0; }));
+                var html = '';
+                items.forEach(function(item) {
+                    var pct = maxCount > 0 ? ((item.count / maxCount) * 100) : 0;
+                    html += '<div class="fsa-bar-row">';
+                    html += '<div class="fsa-bar-label" title="' + escapeHtml(item.component) + '">' + escapeHtml(item.component) + '</div>';
+                    html += '<div class="fsa-bar-track">';
+                    html += '<div class="fsa-bar-fill" style="width:' + pct.toFixed(1) + '%">';
+                    html += '<span class="fsa-bar-count">' + formatNum(item.count) + '</span>';
+                    html += '</div></div></div>';
+                });
+                container.innerHTML = html;
+            })
+            .catch(function(err) {
+                console.error('Failed to load component usage:', err);
+                container.innerHTML = '<div class="fsa-error">Failed to load component usage data</div>';
+            });
+    }
+
+    // --- Conformance ---
+    function loadConformance() {
+        var url = '/api/forge-studio/analytics/conformance?range=' + currentRange;
+        fetch(url)
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                var rate = data.conformance_rate != null ? data.conformance_rate : 0;
+                var rateEl = document.getElementById('c-rate');
+                rateEl.textContent = rate.toFixed(1) + '%';
+
+                var cls = rate >= 90 ? '' : rate >= 70 ? 'warn' : 'bad';
+                rateEl.className = 'fsa-conform-rate' + (cls ? ' ' + cls : '');
+
+                var progressEl = document.getElementById('c-progress');
+                progressEl.style.width = rate.toFixed(1) + '%';
+                progressEl.className = 'fsa-progress-fill' + (cls ? ' ' + cls : '');
+
+                document.getElementById('c-conformant').textContent = formatNum(data.conformant || 0);
+                document.getElementById('c-deviant').textContent = formatNum(data.deviant || 0);
+            })
+            .catch(function(err) {
+                console.error('Failed to load conformance:', err);
+                document.getElementById('c-rate').textContent = '!';
+            });
+    }
+
+    // --- Helpers ---
+    function formatNum(n) {
+        if (n == null) return '-';
+        return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    function escapeHtml(str) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(str || ''));
+        return div.innerHTML;
+    }
+
+    // Initial load
+    loadAll();
+})();
+</script>
+{% endraw %}
+{% endblock %}