@myop/cli 0.1.6 → 0.1.8

package/dist/commands/dev/management-website/app.js

@@ -1,5 +1,101 @@
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
+// Storage keys
+const STORAGE_KEYS = {
+    REQUEST_LOG: 'myop_dev_request_log',
+    ORIGINS: 'myop_dev_origins',
+    COMPONENT_LINES: 'myop_dev_component_lines',
+    NODE_POSITIONS: 'myop_dev_node_positions',
+    EXPANDED_LABELS: 'myop_dev_expanded_labels',
+    ZOOM_LEVEL: 'myop_dev_zoom_level',
+    PAN_X: 'myop_dev_pan_x',
+    PAN_Y: 'myop_dev_pan_y'
+};
+
+// Load data from localStorage
+function loadFromStorage() {
+    try {
+        // Load request log
+        const savedRequestLog = localStorage.getItem(STORAGE_KEYS.REQUEST_LOG);
+        if (savedRequestLog) {
+            requestLog = JSON.parse(savedRequestLog);
+        }
+
+        // Load origins
+        const savedOrigins = localStorage.getItem(STORAGE_KEYS.ORIGINS);
+        if (savedOrigins) {
+            origins = JSON.parse(savedOrigins);
+        }
+
+        // Load component lines
+        const savedComponentLines = localStorage.getItem(STORAGE_KEYS.COMPONENT_LINES);
+        if (savedComponentLines) {
+            const parsed = JSON.parse(savedComponentLines);
+            componentLines = new Map(Object.entries(parsed));
+        }
+
+        // Load node positions
+        const savedNodePositions = localStorage.getItem(STORAGE_KEYS.NODE_POSITIONS);
+        if (savedNodePositions) {
+            const parsed = JSON.parse(savedNodePositions);
+            nodePositions = new Map(Object.entries(parsed));
+        }
+
+        // Load expanded labels
+        const savedExpandedLabels = localStorage.getItem(STORAGE_KEYS.EXPANDED_LABELS);
+        if (savedExpandedLabels) {
+            expandedLabels = new Set(JSON.parse(savedExpandedLabels));
+        }
+
+        // Load zoom and pan state
+        const savedZoomLevel = localStorage.getItem(STORAGE_KEYS.ZOOM_LEVEL);
+        if (savedZoomLevel) {
+            zoomLevel = parseFloat(savedZoomLevel);
+        }
+
+        const savedPanX = localStorage.getItem(STORAGE_KEYS.PAN_X);
+        if (savedPanX) {
+            panX = parseFloat(savedPanX);
+        }
+
+        const savedPanY = localStorage.getItem(STORAGE_KEYS.PAN_Y);
+        if (savedPanY) {
+            panY = parseFloat(savedPanY);
+        }
+    } catch (error) {
+        console.error('Error loading from localStorage:', error);
+    }
+}
+
+// Save data to localStorage
+function saveToStorage() {
+    try {
+        // Save request log
+        localStorage.setItem(STORAGE_KEYS.REQUEST_LOG, JSON.stringify(requestLog));
+
+        // Save origins
+        localStorage.setItem(STORAGE_KEYS.ORIGINS, JSON.stringify(origins));
+
+        // Save component lines (convert Map to object)
+        const componentLinesObj = Object.fromEntries(componentLines);
+        localStorage.setItem(STORAGE_KEYS.COMPONENT_LINES, JSON.stringify(componentLinesObj));
+
+        // Save node positions (convert Map to object)
+        const nodePositionsObj = Object.fromEntries(nodePositions);
+        localStorage.setItem(STORAGE_KEYS.NODE_POSITIONS, JSON.stringify(nodePositionsObj));
+
+        // Save expanded labels (convert Set to array)
+        localStorage.setItem(STORAGE_KEYS.EXPANDED_LABELS, JSON.stringify(Array.from(expandedLabels)));
+
+        // Save zoom and pan state
+        localStorage.setItem(STORAGE_KEYS.ZOOM_LEVEL, zoomLevel.toString());
+        localStorage.setItem(STORAGE_KEYS.PAN_X, panX.toString());
+        localStorage.setItem(STORAGE_KEYS.PAN_Y, panY.toString());
+    } catch (error) {
+        console.error('Error saving to localStorage:', error);
+    }
+}
+
 // Initialize data
 let components = []; // Array of {id, path, name}
 let origins = [];
@@ -22,6 +118,9 @@ let panY = 0;
 let isPanning = false;
 let panStart = { x: 0, y: 0 };
 
+// Load persisted data on startup
+loadFromStorage();
+
 // Connect to SSE
 const eventSource = new EventSource('/events');
 
@@ -32,13 +131,36 @@ eventSource.onmessage = (event) => {
         components = data.components;
         updateComponentsList();
         renderArchitecture();
+        saveToStorage();
     } else if (data.type === 'origins') {
-        origins = data.origins;
+        // Merge new origins with existing ones from localStorage
+        const existingOriginsMap = new Map(origins.map(o => [o.url, o]));
+        data.origins.forEach(newOrigin => {
+            const existing = existingOriginsMap.get(newOrigin.url);
+            if (existing) {
+                // Keep the higher request count
+                newOrigin.requestCount = Math.max(existing.requestCount, newOrigin.requestCount);
+            }
+            existingOriginsMap.set(newOrigin.url, newOrigin);
+        });
+        origins = Array.from(existingOriginsMap.values());
         renderArchitecture();
+        saveToStorage();
     } else if (data.type === 'requestLog') {
-        requestLog = data.log;
+        // Merge server log with existing log from localStorage
+        const existingTimestamps = new Set(requestLog.map(r => r.timestamp));
+        data.log.forEach(entry => {
+            if (!existingTimestamps.has(entry.timestamp)) {
+                requestLog.push(entry);
+            }
+        });
+        // Keep only the most recent entries
+        if (requestLog.length > 100) {
+            requestLog = requestLog.slice(-100);
+        }
         updateActivityLog();
         updateStats();
+        saveToStorage();
     } else if (data.type === 'request') {
         handleNewRequest(data);
     }
@@ -91,6 +213,9 @@ function drag(evt) {
 }
 
 function endDrag(evt) {
+    if (draggedElement) {
+        saveToStorage(); // Save node positions after drag
+    }
     draggedElement = null;
     evt.preventDefault();
 }
@@ -140,11 +265,13 @@ function updateViewBox() {
 function zoomIn() {
     zoomLevel = Math.min(zoomLevel * 1.2, 5);
     updateViewBox();
+    saveToStorage();
 }
 
 function zoomOut() {
     zoomLevel = Math.max(zoomLevel / 1.2, 0.5);
     updateViewBox();
+    saveToStorage();
 }
 
 function resetZoom() {
@@ -152,6 +279,7 @@ function resetZoom() {
     panX = 0;
     panY = 0;
     updateViewBox();
+    saveToStorage();
 }
 
 function handleWheel(e) {
@@ -159,6 +287,7 @@ function handleWheel(e) {
     const delta = e.deltaY > 0 ? 0.9 : 1.1;
     zoomLevel = Math.max(0.5, Math.min(5, zoomLevel * delta));
     updateViewBox();
+    saveToStorage();
 }
 
 function startPan(e) {
@@ -182,6 +311,7 @@ function endPan() {
         isPanning = false;
         const svg = document.getElementById('architecture-svg');
         svg.classList.remove('panning');
+        saveToStorage(); // Save pan position after panning
     }
 }
 
@@ -602,6 +732,7 @@ function redrawRequestLines() {
                 expandedLabels.add(labelKey);
             }
             redrawRequestLines();
+            saveToStorage();
         };
 
         const labelBg = document.createElementNS(SVG_NS, 'rect');
@@ -669,6 +800,7 @@ function redrawRequestLines() {
                     expandedLabels.add(labelKey2);
                 }
                 redrawRequestLines();
+                saveToStorage();
             };
 
             const labelBg2 = document.createElementNS(SVG_NS, 'rect');
@@ -760,6 +892,12 @@ function updateStats() {
 
 function handleNewRequest(data) {
     requestLog.push(data);
+
+    // Keep log size limited
+    if (requestLog.length > 100) {
+        requestLog.shift();
+    }
+
     updateActivityLog();
     updateStats();
 
@@ -780,8 +918,48 @@ function handleNewRequest(data) {
 
     // Redraw lines
     redrawRequestLines();
+
+    // Save to localStorage
+    saveToStorage();
+}
+
+// Add clear data button functionality
+function clearStoredData() {
+    if (confirm('Clear all stored data (request logs, origins, positions)?')) {
+        // Clear localStorage
+        Object.values(STORAGE_KEYS).forEach(key => localStorage.removeItem(key));
+
+        // Reset in-memory data structures
+        requestLog.length = 0;
+        origins.length = 0;
+        componentLines.clear();
+        nodePositions.clear();
+        expandedLabels.clear();
+
+        // Reset zoom and pan
+        zoomLevel = 1;
+        panX = 0;
+        panY = 0;
+
+        // Reset stats
+        totalRequests = 0;
+        localRequests = 0;
+        proxiedRequests = 0;
+
+        // Re-render everything
+        renderArchitecture();
+        updateComponentsList();
+        updateActivityLog();
+        updateStats();
+        updateViewBox();
+
+        console.log('🗑️ All stored data cleared');
+    }
 }
 
+// Export function for use in HTML
+window.clearStoredData = clearStoredData;
+
 // Initial render
 renderArchitecture();
 updateComponentsList();

package/dist/commands/dev/management-website/index.js

@@ -32,6 +32,7 @@ ${styles}
         <div class="tab active">Network Architecture</div>
         <div class="tab">Performance</div>
         <div class="tab">Console</div>
+        <button class="clear-data-btn" onclick="clearStoredData()" title="Clear all stored data">🗑️ Clear Data</button>
     </div>
 
     <div class="main-content">

package/dist/commands/dev/management-website/styles.css

@@ -85,6 +85,33 @@ body {
     border-bottom: 2px solid #007acc;
 }
 
+.clear-data-btn {
+    margin-left: auto;
+    margin-right: 10px;
+    padding: 5px 12px;
+    background: #3e3e42;
+    border: 1px solid #5a5a5f;
+    color: #cccccc;
+    font-size: 11px;
+    font-family: inherit;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+}
+
+.clear-data-btn:hover {
+    background: #4e4e52;
+    border-color: #007acc;
+    color: #ffffff;
+}
+
+.clear-data-btn:active {
+    background: #2e2e32;
+}
+
 .main-content {
     display: flex;
     flex: 1;