shokupan 0.7.0 → 0.9.0

package/dist/plugins/application/dashboard/static/styles.css

@@ -0,0 +1,175 @@
+:root {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-emphasis: #60a5fa;
+    --accent: #3b82f6;
+    --success: #22c55e;
+    --error: #ef4444;
+    --card-border: #334155;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    padding: 2rem;
+}
+
+header {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(to right, var(--accent), #8b5cf6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+select {
+    outline: none;
+}
+
+.container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    max-width: 1200px;
+    margin: 0 auto;
+    overflow: auto
+}
+
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--card-border);
+    border-radius: 1rem;
+    overflow: hidden;
+}
+
+.card canvas {
+    padding: 0 .5rem .5rem .5rem;
+}
+
+.card-chart {
+    flex: 1;
+}
+
+.card-value {
+    padding: 1rem;
+}
+
+.card-title {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    height: 48px;
+    line-height: 48px;
+    padding-left: 16px;
+    font-weight: 600;
+}
+
+.card-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+.text-success {
+    color: var(--success);
+}
+
+.text-error {
+    color: var(--error);
+}
+
+#chart-container,
+#table-container {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--card-border);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    overflow: hidden;
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 1rem;
+    border-bottom: 1px solid var(--card-border);
+    margin-bottom: 2rem;
+}
+
+.tab-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    padding: 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover {
+    color: var(--text-primary);
+}
+
+.tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* Graph */
+#cy {
+    width: 100%;
+    height: 600px;
+    background-color: var(--bg-secondary);
+    border-radius: 1rem;
+    border: 1px solid var(--card-border);
+}
+
+.card-container {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+}

package/dist/plugins/application/dashboard/static/tables.js

@@ -0,0 +1,92 @@
+
+// --- Table Config Helper ---
+function createTable(id, columns, placeholder = "No data available") {
+    return new Tabulator(id, {
+        layout: "fitColumns",
+        height: "300px",
+        placeholder: placeholder,
+        data: [],
+        columns: columns,
+        layoutColumnsOnNewData: true,
+    });
+}
+
+// --- Top Requests Table ---
+const topRequestsTable = createTable("#top-requests-table", [
+    { title: "Count", field: "count", align: "center", width: 100, sorter: "number" },
+    { title: "Method", field: "method", width: 110 },
+    { title: "URL", field: "url" },
+]);
+
+// --- Top Errors Table ---
+const topErrorsTable = createTable("#top-errors-table", [
+    { title: "Count", field: "count", align: "center", width: 100, sorter: "number" },
+    { title: "Error Message", field: "error" },
+]);
+
+// --- Failing Requests Table ---
+const failingRequestsTable = createTable("#failing-requests-table", [
+    { title: "Failures", field: "count", align: "center", width: 80, sorter: "number" },
+    { title: "Method", field: "method", width: 110 },
+    { title: "URL", field: "url" },
+]);
+
+// --- Slowest Requests Table ---
+const slowestRequestsTable = createTable("#slowest-requests-table", [
+    { title: "Duration (ms)", field: "duration", width: 130, sorter: "number", formatter: (cell) => printDuration(cell.getValue()) },
+    {
+        title: "URL", formatter: (cell) => {
+            const data = cell.getData() ?? {};
+            return data.method?.toUpperCase() + ": " + data.url;
+        }
+    },
+    {
+        title: "Status", field: "status", width: 100, align: "center", formatter: function (cell) {
+            const val = cell.getValue();
+            return `<span style="color: ${val >= 400 ? 'red' : 'green'}">${val}</span>`;
+        }
+    },
+    { title: "Time", field: "timestamp", width: 150, formatter: (cell) => new Date(cell.getValue()).toLocaleTimeString() }
+]);
+
+
+async function fetchTopStats() {
+    // Get request headers from global function if available
+    const headers = typeof getRequestHeaders !== 'undefined' ? getRequestHeaders() : {};
+
+    // Determine base path for API requests  
+    const basePath = window.location.pathname.endsWith('/') ? window.location.pathname.slice(0, -1) : window.location.pathname;
+    const url = basePath + '/';
+    const interval = document.getElementById('time-range-selector')?.value || '1m';
+    try {
+        // Top Requests
+        fetch(url + 'requests/top?interval=' + interval, { headers }).then(r => r.json()).then(d => {
+            if (d.top) topRequestsTable.setData(d.top);
+        });
+
+        // Top Errors
+        fetch(url + 'errors/top?interval=' + interval, { headers }).then(r => r.json()).then(d => {
+            if (d.top) topErrorsTable.setData(d.top);
+        });
+
+        // Failing Requests
+        fetch(url + 'requests/failing?interval=' + interval, { headers }).then(r => r.json()).then(d => {
+            if (d.top) failingRequestsTable.setData(d.top);
+        });
+
+        // Slowest Requests
+        fetch(url + 'requests/slowest?interval=' + interval, { headers }).then(r => r.json()).then(d => {
+            if (d.slowest) slowestRequestsTable.setData(d.slowest);
+        });
+
+    } catch (e) {
+        console.error("Failed to fetch top stats", e);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    fetchTopStats();
+    // Refresh periodically
+    setInterval(fetchTopStats, 10000);
+});
+

package/dist/plugins/application/dashboard/static/tabs.js

@@ -0,0 +1,113 @@
+// --- Tabs Logic ---
+function switchTab(tabId) {
+    console.log('Switching to tab:', tabId);
+    // Update buttons
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    // Find the button that was clicked
+    const btn = Array.from(document.querySelectorAll('.tab-btn')).find(b => b.getAttribute('onclick') === `switchTab('${tabId}')`);
+    if (btn) btn.classList.add('active');
+
+    // Update content
+    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+    document.getElementById('tab-' + tabId).classList.add('active');
+
+    if (tabId === 'overview') {
+        if (typeof fetchTopStats === 'function') fetchTopStats();
+    }
+    else if (tabId === 'graph') {
+        initGraph();
+    }
+    else if (tabId === 'requests') {
+        if (typeof fetchRequests === 'function') fetchRequests();
+    }
+    else if (tabId === 'failures') {
+        fetchFailures();
+    }
+    else if (tabId === 'middleware') {
+        fetchMiddleware();
+    }
+    else if (tabId === 'registry') {
+        if (typeof fetchRegistry === 'function') fetchRegistry();
+    }
+}
+
+// Middleware fetch function
+async function fetchMiddleware() {
+    try {
+        const headers = getRequestHeaders ? getRequestHeaders() : {};
+        const basePath = window.location.pathname.endsWith('/') ? '' : window.location.pathname;
+        const url = basePath + (basePath.endsWith('/') ? 'middleware' : '/middleware');
+
+        const res = await fetch(url, { headers });
+        if (!res.ok) return;
+        const data = await res.json();
+
+        // Initialize or update table
+        if (!window.middlewareTable) {
+            window.middlewareTable = new Tabulator("#middleware-table-container", {
+                layout: "fitColumns",
+                height: "500px",
+                placeholder: "No middleware executions tracked",
+                data: data.middleware || [],
+                columns: [
+                    {
+                        title: "Timestamp", field: "timestamp", width: 180, formatter: function (cell) {
+                            return new Date(cell.getValue()).toLocaleString();
+                        }
+                    },
+                    {
+                        title: "Name", field: "name", width: 200,
+                        formatter: function (cell) {
+                            const row = cell.getRow().getData();
+                            const isBuiltin = row.metadata?.isBuiltin;
+                            const pluginName = row.metadata?.pluginName;
+                            let badge = '';
+                            if (isBuiltin) {
+                                badge = ' <span style="background: #059669; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7em;">BUILTIN</span>';
+                            }
+                            const plugin = pluginName ? ` <span style="color: #6ee7b7;">[${pluginName}]</span>` : '';
+                            return cell.getValue() + badge + plugin;
+                        }
+                    },
+                    { title: "Path", field: "path", headerFilter: "input" },
+                    {
+                        title: "Duration (ms)", field: "duration", width: 120,
+                        formatter: (cell) => cell.getValue() ? cell.getValue().toFixed(2) : 'N/A'
+                    },
+                    {
+                        title: "Status", field: "error", width: 100, formatter: function (cell) {
+                            const error = cell.getValue();
+                            if (error) {
+                                return '<span style="color: #ef4444; font-weight: bold;">ERROR</span>';
+                            }
+                            return '<span style="color: #22c55e; font-weight: bold;">OK</span>';
+                        }
+                    }
+                ],
+                initialSort: [
+                    { column: "timestamp", dir: "desc" }
+                ]
+            });
+        } else {
+            window.middlewareTable.replaceData(data.middleware || []);
+        }
+    } catch (e) {
+        console.error("Failed to fetch middleware", e);
+    }
+}
+
+async function fetchFailures() {
+    try {
+        const headers = getRequestHeaders ? getRequestHeaders() : {};
+        // Handle relative path issue
+        const basePath = window.location.pathname.endsWith('/') ? '' : window.location.pathname;
+        const url = basePath + (basePath.endsWith('/') ? 'failures' : '/failures');
+
+        const res = await fetch(url, { headers });
+        if (!res.ok) return;
+        const data = await res.json();
+        failuresTable.replaceData(data.failures);
+    } catch (e) {
+        console.error("Failed to fetch failures", e);
+    }
+}

package/dist/plugins/application/dashboard/static/tabulator.css

@@ -0,0 +1,66 @@
+.tabulator {
+    height: 100%;
+    width: 100%;
+    background-color: #0f1322;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table {
+    color: #ccc;
+    background-color: #0f1322;
+}
+
+.tabulator .tabulator-header {
+    color: #ddd;
+    background-color: #0f1322;
+    border-top-color: #0b0b18;
+    border-bottom-color: #0b0b18;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+    border-right-color: #15162f;
+    background-color: #0f1322;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
+    color: #0d0f20;
+}
+
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
+    background-color: #111427;
+}
+
+.tabulator .tabulator-row {
+    border-bottom-color: #0c0d23;
+    transition: background-color 100ms ease;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+    border-right-color: #11152c;
+    align-content: center;
+}
+
+.tabulator .tabulator-row:hover {
+    background-color: #202540 !important;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+    background-color: #1c1e2c;
+}
+
+.tabulator .tabulator-row.tabulator-row-odd {
+    background-color: #171824;
+}
+
+.tabulator .tabulator-row.tabulator-selected {
+    background-color: #252a43;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
+    background-color: #0e1016ff;
+    color: #ccc;
+}
+
+.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus {
+    background-color: #212637ff;
+    color: #fff
+}