orfeas_lyra 0.6.0

data/app/views/lyra/dashboard/event_graph_view.html.erb

@@ -0,0 +1,525 @@
+<style>
+  .lyra-visualization { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1400px; margin: 0 auto; padding: 20px; }
+  .lyra-visualization h1 { color: #1a1a2e; border-bottom: 2px solid #4a4e69; padding-bottom: 10px; }
+  .lyra-visualization h2 { color: #4a4e69; margin-top: 30px; }
+  .lyra-visualization .breadcrumb { margin-bottom: 20px; font-size: 14px; }
+  .lyra-visualization .breadcrumb a { color: #4a4e69; text-decoration: none; }
+  .lyra-visualization .breadcrumb a:hover { text-decoration: underline; }
+  .lyra-visualization .controls { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
+  .lyra-visualization .controls label { font-weight: 500; color: #495057; }
+  .lyra-visualization .controls select { padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; min-width: 150px; }
+  .lyra-visualization .controls button { padding: 8px 16px; background: #4a4e69; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
+  .lyra-visualization .controls button:hover { background: #22223b; }
+
+  .graph-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; min-height: 500px; }
+  .entity-picker { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; display: flex; flex-direction: column; }
+  .entity-picker-header { padding: 15px; font-weight: 600; color: #1a1a2e; border-bottom: 1px solid #dee2e6; background: #f8f9fa; border-radius: 8px 8px 0 0; }
+  .entity-list { flex: 1; overflow-y: auto; max-height: 450px; }
+  .entity-item { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.15s; }
+  .entity-item:hover { background: #f8f9fa; }
+  .entity-item.selected { background: #e8f0fe; border-left: 3px solid #4a4e69; }
+  .entity-name { font-weight: 500; color: #1a1a2e; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .entity-meta { display: flex; gap: 10px; font-size: 12px; }
+  .entity-type { color: #4a4e69; font-weight: 500; }
+  .entity-events { color: #6c757d; }
+  .empty-message { padding: 30px; text-align: center; color: #6c757d; }
+  .loading-message { padding: 30px; text-align: center; color: #6c757d; }
+
+  .graph-panel { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; }
+  .graph-panel-header { font-weight: 600; color: #1a1a2e; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
+  .graph-content { flex: 1; min-height: 400px; }
+  .mermaid-container { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; overflow-x: auto; min-height: 300px; }
+  .placeholder-message { display: flex; align-items: center; justify-content: center; height: 300px; color: #6c757d; font-size: 14px; }
+
+  .legend { display: flex; gap: 20px; margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 6px; font-size: 13px; }
+  .legend-item { display: flex; align-items: center; gap: 6px; }
+  .legend-line { width: 24px; height: 2px; }
+  .legend-line.same-record { background: #10b981; }
+  .legend-line.correlation { background: #667eea; }
+  .legend-line.same-user { background: #9ca3af; border-style: dashed; }
+
+  .stats-row { display: flex; gap: 20px; margin-bottom: 15px; }
+  .stat-item { font-size: 13px; color: #6c757d; }
+  .stat-item strong { color: #1a1a2e; }
+
+  /* Event detail popup */
+  .event-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+  .event-popup { background: #fff; border-radius: 12px; padding: 0; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
+  .event-popup-header { padding: 16px 20px; background: #4a4e69; color: #fff; display: flex; justify-content: space-between; align-items: center; }
+  .event-popup-title { font-weight: 600; font-size: 16px; }
+  .event-popup-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; }
+  .event-popup-close:hover { opacity: 0.8; }
+  .event-popup-body { padding: 20px; overflow-y: auto; max-height: calc(80vh - 60px); }
+  .event-popup-meta { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+  .event-popup-badge { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+  .event-popup-badge.created { background: #d1fae5; color: #065f46; }
+  .event-popup-badge.updated { background: #dbeafe; color: #1e40af; }
+  .event-popup-badge.destroyed { background: #fee2e2; color: #991b1b; }
+  .event-popup-time { color: #6c757d; font-size: 13px; }
+  .event-popup-section { margin-bottom: 16px; }
+  .event-popup-section-title { font-weight: 600; color: #1a1a2e; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .changes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .changes-table th { text-align: left; padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; color: #495057; font-weight: 500; }
+  .changes-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; word-break: break-word; max-width: 200px; }
+  .changes-table .field-name { font-weight: 500; color: #1a1a2e; }
+  .changes-table .value-from { color: #dc2626; text-decoration: line-through; opacity: 0.7; }
+  .changes-table .value-to { color: #059669; }
+  .changes-table .value-null { color: #9ca3af; font-style: italic; }
+  .no-changes { color: #6c757d; font-style: italic; }
+  .click-hint { text-align: center; padding: 8px; background: #fef3c7; color: #92400e; font-size: 12px; border-radius: 4px; margin-top: 10px; }
+
+  /* PII field tags */
+  .pii-tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; margin-left: 6px; background: #fef3c7; color: #92400e; text-transform: uppercase; }
+  .pii-tag.email { background: #dbeafe; color: #1e40af; }
+  .pii-tag.name { background: #dcfce7; color: #166534; }
+  .pii-tag.phone { background: #f3e8ff; color: #7c3aed; }
+  .pii-tag.address { background: #ffedd5; color: #c2410c; }
+  .pii-tag.ssn, .pii-tag.financial { background: #fee2e2; color: #991b1b; }
+
+  /* Correlation ID tooltip */
+  .correlation-info { position: relative; display: inline-flex; align-items: center; gap: 6px; }
+  .correlation-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: 11px; cursor: help; font-weight: 600; }
+  .correlation-help:hover { background: #d1d5db; }
+  .correlation-tooltip { display: none; position: absolute; left: 0; top: 100%; margin-top: 8px; background: #1f2937; color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 12px; width: 280px; z-index: 1001; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
+  .correlation-tooltip::before { content: ''; position: absolute; top: -6px; left: 20px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #1f2937; }
+  .correlation-help:hover + .correlation-tooltip, .correlation-tooltip:hover { display: block; }
+
+  @media (max-width: 900px) {
+    .graph-layout { grid-template-columns: 1fr; }
+    .entity-list { max-height: 200px; }
+  }
+</style>
+
+<div class="lyra-visualization">
+  <div class="breadcrumb">
+    <%= link_to "Dashboard", lyra.dashboard_path %> &rsaquo; Event Graph
+  </div>
+
+  <h1>Event Graph Visualization</h1>
+  <p style="color: #6c757d; margin-bottom: 20px;">
+    Select an entity to view its event lifecycle. The graph shows how events are connected through entity lifecycle, correlations, and user activity.
+  </p>
+
+  <div class="controls">
+    <label for="model-filter">Filter by model:</label>
+    <select id="model-filter">
+      <option value="">All Models</option>
+      <% Lyra.config.monitored_models.each do |model| %>
+        <option value="<%= model.name %>"><%= model.name %></option>
+      <% end %>
+    </select>
+    <button type="button" id="refresh-btn">↻ Refresh</button>
+  </div>
+
+  <div class="graph-layout">
+    <div class="entity-picker">
+      <div class="entity-picker-header">Entities with Events</div>
+      <div class="entity-list" id="entity-list">
+        <div class="loading-message">Loading entities...</div>
+      </div>
+    </div>
+
+    <div class="graph-panel">
+      <div class="graph-panel-header">
+        <span id="graph-title">Select an entity to view its event graph</span>
+        <span id="graph-stats" class="stat-item"></span>
+      </div>
+      <div class="graph-content">
+        <div class="mermaid-container" id="mermaid-container">
+          <div class="placeholder-message">← Click an entity from the list to view its lifecycle graph</div>
+        </div>
+      </div>
+      <div class="legend">
+        <div class="legend-item">
+          <div class="legend-line same-record"></div>
+          <span>Same Entity (lifecycle)</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-line correlation"></div>
+          <span>Correlated Events</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-line same-user" style="border-top: 2px dashed #9ca3af;"></div>
+          <span>Same User</span>
+        </div>
+      </div>
+      <div class="click-hint">💡 Click on any event node to see full change details</div>
+    </div>
+  </div>
+</div>
+
+<!-- Event Detail Popup -->
+<div id="event-popup-overlay" class="event-popup-overlay" style="display: none;">
+  <div class="event-popup">
+    <div class="event-popup-header">
+      <span class="event-popup-title" id="popup-title">Event Details</span>
+      <button class="event-popup-close" id="popup-close">&times;</button>
+    </div>
+    <div class="event-popup-body" id="popup-body">
+    </div>
+  </div>
+</div>
+
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'neutral',
+    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' }
+  });
+
+  let selectedEntity = null;
+  let currentNodes = {};  // Store node data by sanitized ID
+
+  // Format changed fields for Mermaid label
+  function formatChangedFields(fields) {
+    if (!fields || fields.length === 0) return null;
+    // Limit to 3 fields to keep labels readable
+    if (fields.length > 3) {
+      return '📝 ' + fields.slice(0, 3).join(', ') + '...';
+    }
+    return '📝 ' + fields.join(', ');
+  }
+
+  // Show popup with event details (using safe DOM methods)
+  function showEventPopup(nodeId) {
+    const node = currentNodes[nodeId];
+    if (!node) return;
+
+    const overlay = document.getElementById('event-popup-overlay');
+    const title = document.getElementById('popup-title');
+    const body = document.getElementById('popup-body');
+
+    title.textContent = node.operation.toUpperCase() + ' - ' + node.model_class + '#' + node.model_id;
+
+    // Clear previous content
+    body.replaceChildren();
+
+    // Meta section
+    const metaDiv = document.createElement('div');
+    metaDiv.className = 'event-popup-meta';
+
+    const badge = document.createElement('span');
+    badge.className = 'event-popup-badge ' + node.operation;
+    badge.textContent = node.operation.toUpperCase();
+    metaDiv.appendChild(badge);
+
+    // Show PII badge only if there are changes in PII fields
+    const hasPiiChanges = node.changes && node.changes.some(function(c) { return c.pii_type; });
+    if (hasPiiChanges) {
+      const piiBadge = document.createElement('span');
+      piiBadge.className = 'event-popup-badge';
+      piiBadge.style.cssText = 'background: #fef3c7; color: #92400e;';
+      piiBadge.textContent = '⚠️ PII';
+      metaDiv.appendChild(piiBadge);
+    }
+
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'event-popup-time';
+    timeSpan.textContent = '🕐 ' + node.timestamp_formatted;
+    metaDiv.appendChild(timeSpan);
+
+    if (node.correlation_id) {
+      const corrContainer = document.createElement('span');
+      corrContainer.className = 'correlation-info';
+
+      const corrSpan = document.createElement('span');
+      corrSpan.className = 'event-popup-time';
+      corrSpan.textContent = '🔗 ' + node.correlation_id;
+      corrSpan.style.wordBreak = 'break-all';
+      corrContainer.appendChild(corrSpan);
+
+      const helpIcon = document.createElement('span');
+      helpIcon.className = 'correlation-help';
+      helpIcon.textContent = '?';
+      corrContainer.appendChild(helpIcon);
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'correlation-tooltip';
+      tooltip.textContent = 'Correlation ID groups related events that occur in the same transaction or workflow. Events with the same correlation ID were triggered together (e.g., updating a parent and child record in one request).';
+      corrContainer.appendChild(tooltip);
+
+      metaDiv.appendChild(corrContainer);
+    }
+    body.appendChild(metaDiv);
+
+    // Event ID section
+    const eventIdDiv = document.createElement('div');
+    eventIdDiv.className = 'event-popup-section';
+    const eventIdLabel = document.createElement('div');
+    eventIdLabel.className = 'event-popup-section-title';
+    eventIdLabel.textContent = 'Event ID';
+    eventIdDiv.appendChild(eventIdLabel);
+    const eventIdValue = document.createElement('code');
+    eventIdValue.style.cssText = 'font-size: 12px; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; word-break: break-all; display: block;';
+    eventIdValue.textContent = node.id;
+    eventIdDiv.appendChild(eventIdValue);
+    body.appendChild(eventIdDiv);
+
+    // Changes section
+    const sectionDiv = document.createElement('div');
+    sectionDiv.className = 'event-popup-section';
+
+    const sectionTitle = document.createElement('div');
+    sectionTitle.className = 'event-popup-section-title';
+    sectionTitle.textContent = 'Changed Fields';
+    sectionDiv.appendChild(sectionTitle);
+
+    if (node.changes && node.changes.length > 0) {
+      const table = document.createElement('table');
+      table.className = 'changes-table';
+
+      const thead = document.createElement('thead');
+      const headerRow = document.createElement('tr');
+      ['Field', 'From', 'To'].forEach(function(text) {
+        const th = document.createElement('th');
+        th.textContent = text;
+        headerRow.appendChild(th);
+      });
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+
+      const tbody = document.createElement('tbody');
+      node.changes.forEach(function(change) {
+        const tr = document.createElement('tr');
+
+        const fieldTd = document.createElement('td');
+        fieldTd.className = 'field-name';
+
+        const fieldText = document.createTextNode(change.field);
+        fieldTd.appendChild(fieldText);
+
+        // Add PII tag if this field contains PII
+        if (change.pii_type) {
+          const piiTag = document.createElement('span');
+          piiTag.className = 'pii-tag ' + change.pii_type;
+          piiTag.textContent = change.pii_type;
+          fieldTd.appendChild(piiTag);
+        }
+
+        tr.appendChild(fieldTd);
+
+        if (change.from !== undefined) {
+          const fromTd = document.createElement('td');
+          fromTd.className = change.from === null ? 'value-null' : 'value-from';
+          fromTd.textContent = formatValue(change.from);
+          tr.appendChild(fromTd);
+
+          const toTd = document.createElement('td');
+          toTd.className = change.to === null ? 'value-null' : 'value-to';
+          toTd.textContent = formatValue(change.to);
+          tr.appendChild(toTd);
+        } else {
+          const valueTd = document.createElement('td');
+          valueTd.colSpan = 2;
+          valueTd.className = 'value-to';
+          valueTd.textContent = formatValue(change.value);
+          tr.appendChild(valueTd);
+        }
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      sectionDiv.appendChild(table);
+    } else {
+      const noChanges = document.createElement('p');
+      noChanges.className = 'no-changes';
+      if (node.operation === 'created') {
+        noChanges.textContent = 'New record created with initial values';
+      } else if (node.operation === 'destroyed') {
+        noChanges.textContent = 'Record deleted';
+      } else {
+        noChanges.textContent = 'No field changes recorded';
+      }
+      sectionDiv.appendChild(noChanges);
+    }
+    body.appendChild(sectionDiv);
+
+    overlay.style.display = 'flex';
+  }
+
+  function hideEventPopup() {
+    document.getElementById('event-popup-overlay').style.display = 'none';
+  }
+
+  function formatValue(value) {
+    if (value === null || value === undefined) return 'null';
+    if (value === '') return 'empty';
+    return String(value);
+  }
+
+  // Setup popup close handlers
+  document.getElementById('popup-close').addEventListener('click', hideEventPopup);
+  document.getElementById('event-popup-overlay').addEventListener('click', function(e) {
+    if (e.target === this) hideEventPopup();
+  });
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') hideEventPopup();
+  });
+
+  function loadEntityList() {
+    const listEl = document.getElementById('entity-list');
+    const modelFilter = document.getElementById('model-filter');
+
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'loading-message';
+    loadingDiv.textContent = 'Loading entities...';
+    listEl.replaceChildren(loadingDiv);
+
+    let url = '/lyra/visualizations/event_list.json';
+    if (modelFilter && modelFilter.value) {
+      url += '?model_class=' + encodeURIComponent(modelFilter.value);
+    }
+
+    fetch(url)
+      .then(r => r.json())
+      .then(data => {
+        listEl.replaceChildren();
+
+        if (!data.entities || data.entities.length === 0) {
+          const emptyDiv = document.createElement('div');
+          emptyDiv.className = 'empty-message';
+          emptyDiv.textContent = 'No entities with events found';
+          listEl.appendChild(emptyDiv);
+          return;
+        }
+
+        data.entities.forEach(entity => {
+          const item = document.createElement('div');
+          item.className = 'entity-item';
+          if (selectedEntity && selectedEntity.model_class === entity.model_class && selectedEntity.model_id === entity.model_id) {
+            item.classList.add('selected');
+          }
+
+          const nameDiv = document.createElement('div');
+          nameDiv.className = 'entity-name';
+          nameDiv.textContent = entity.display_name;
+          nameDiv.title = entity.display_name;
+
+          const metaDiv = document.createElement('div');
+          metaDiv.className = 'entity-meta';
+
+          const typeSpan = document.createElement('span');
+          typeSpan.className = 'entity-type';
+          typeSpan.textContent = entity.model_class;
+
+          const eventsSpan = document.createElement('span');
+          eventsSpan.className = 'entity-events';
+          eventsSpan.textContent = entity.event_count + ' events';
+
+          metaDiv.appendChild(typeSpan);
+          metaDiv.appendChild(eventsSpan);
+          item.appendChild(nameDiv);
+          item.appendChild(metaDiv);
+
+          item.addEventListener('click', () => {
+            selectedEntity = entity;
+            document.querySelectorAll('.entity-item').forEach(el => el.classList.remove('selected'));
+            item.classList.add('selected');
+            loadEntityGraph(entity.model_class, entity.model_id, entity.display_name);
+          });
+
+          listEl.appendChild(item);
+        });
+      })
+      .catch(err => {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'empty-message';
+        errorDiv.textContent = 'Error loading entities';
+        listEl.replaceChildren(errorDiv);
+        console.error('Entity list error:', err);
+      });
+  }
+
+  function loadEntityGraph(modelClass, modelId, displayName) {
+    const container = document.getElementById('mermaid-container');
+    const titleEl = document.getElementById('graph-title');
+    const statsEl = document.getElementById('graph-stats');
+
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'placeholder-message';
+    loadingDiv.textContent = 'Loading graph...';
+    container.replaceChildren(loadingDiv);
+
+    titleEl.textContent = displayName + ' (' + modelClass + '#' + modelId + ')';
+
+    fetch('/lyra/visualizations/entity_graph/' + encodeURIComponent(modelClass) + '/' + modelId + '.json')
+      .then(r => r.json())
+      .then(data => {
+        if (!data.nodes || data.nodes.length === 0) {
+          const emptyDiv = document.createElement('div');
+          emptyDiv.className = 'placeholder-message';
+          emptyDiv.textContent = 'No events found for this entity';
+          container.replaceChildren(emptyDiv);
+          statsEl.textContent = '';
+          return;
+        }
+
+        statsEl.textContent = data.nodes.length + ' events, ' + data.links.length + ' connections';
+
+        // Store nodes for popup lookup
+        currentNodes = {};
+        data.nodes.forEach(node => {
+          const nodeId = node.id.replace(/[^a-zA-Z0-9]/g, '_');
+          currentNodes[nodeId] = node;
+        });
+
+        // Build Mermaid diagram
+        let mermaidCode = 'flowchart TD\n';
+        data.nodes.forEach(node => {
+          const nodeId = node.id.replace(/[^a-zA-Z0-9]/g, '_');
+          const time = node.timestamp_formatted.split(' ')[1];
+          const changedFields = formatChangedFields(node.changed_fields);
+          let label = node.operation.toUpperCase() + '\\n' + time;
+          if (changedFields) {
+            label += '\\n' + changedFields;
+          }
+          mermaidCode += '    ' + nodeId + '["' + label + '"]\n';
+        });
+        mermaidCode += '\n';
+        data.links.forEach(link => {
+          const sourceId = link.source.replace(/[^a-zA-Z0-9]/g, '_');
+          const targetId = link.target.replace(/[^a-zA-Z0-9]/g, '_');
+          const arrow = link.type === 'same_record' ? '-->' : '-.->';
+          mermaidCode += '    ' + sourceId + ' ' + arrow + ' ' + targetId + '\n';
+        });
+
+        const pre = document.createElement('pre');
+        pre.className = 'mermaid';
+        pre.textContent = mermaidCode;
+        container.replaceChildren(pre);
+
+        mermaid.run({ nodes: [pre] }).then(function() {
+          // After Mermaid renders, add click handlers to nodes
+          setTimeout(function() {
+            const svg = container.querySelector('svg');
+            if (!svg) return;
+
+            // Find all node elements and add click handlers
+            svg.querySelectorAll('.node').forEach(function(nodeEl) {
+              const nodeId = nodeEl.id.replace('flowchart-', '').replace(/-\d+$/, '');
+              if (currentNodes[nodeId]) {
+                nodeEl.style.cursor = 'pointer';
+                nodeEl.addEventListener('click', function(e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  showEventPopup(nodeId);
+                });
+              }
+            });
+          }, 100);
+        });
+      })
+      .catch(err => {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'placeholder-message';
+        errorDiv.textContent = 'Error loading graph';
+        container.replaceChildren(errorDiv);
+        console.error('Entity graph error:', err);
+      });
+  }
+
+  document.getElementById('model-filter').addEventListener('change', loadEntityList);
+  document.getElementById('refresh-btn').addEventListener('click', loadEntityList);
+
+  loadEntityList();
+</script>