@principal-ai/principal-view-react 0.6.21 → 0.6.23

package/src/stories/GraphRenderer.stories.tsx

@@ -640,3 +640,437 @@ export const ServiceArchitectureEditable: Story = {
     },
   },
 };
+
+// ============================================================================
+// OTEL Log Association Canvas
+// ============================================================================
+
+/**
+ * OTEL Log Association architecture canvas
+ * Demonstrates OTEL badges, tooltips, and info panel integration
+ */
+const otelLogAssociationCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'otel-log',
+      type: 'text',
+      text: 'OtelLog',
+      x: -304,
+      y: 147,
+      width: 120,
+      height: 118,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'OtelLog',
+        description:
+          'OpenTelemetry log record with timestamp, severity, body, resource, and trace context',
+        otel: {
+          kind: 'type',
+          category: 'log',
+          isNew: true,
+        },
+        shape: 'rectangle',
+        icon: 'FileText',
+        fill: '#4A90E2',
+      },
+    },
+    {
+      id: 'otel-resource',
+      type: 'text',
+      text: 'OtelResource',
+      x: -305,
+      y: 316,
+      width: 120,
+      height: 117,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'OtelResource',
+        description: 'OTEL resource attributes like service.name, k8s.*, deployment.*',
+        otel: {
+          kind: 'type',
+          category: 'resource',
+        },
+        shape: 'rectangle',
+        icon: 'Box',
+        fill: '#4A90E2',
+      },
+    },
+    {
+      id: 'canvas-scope',
+      type: 'text',
+      text: 'CanvasScope',
+      x: -77,
+      y: -48,
+      width: 130,
+      height: 118,
+      pv: {
+        nodeType: 'service',
+        name: 'CanvasScope',
+        description: 'Filters which logs are relevant to this canvas based on resource attributes',
+        shape: 'hexagon',
+        icon: 'Filter',
+        fill: '#9B59B6',
+      },
+    },
+    {
+      id: 'log-router',
+      type: 'text',
+      text: 'LogRouter',
+      x: -80,
+      y: 150,
+      width: 130,
+      height: 118,
+      pv: {
+        nodeType: 'otel-service',
+        name: 'LogRouter',
+        description: 'Routes incoming OTEL logs to canvas nodes based on scope and resourceMatch criteria',
+        otel: {
+          kind: 'service',
+          category: 'router',
+          isNew: true,
+        },
+        shape: 'hexagon',
+        icon: 'GitBranch',
+        fill: '#7ED321',
+      },
+    },
+    {
+      id: 'resource-matcher',
+      type: 'text',
+      text: 'ResourceMatcher',
+      x: -82,
+      y: 440,
+      width: 130,
+      height: 119,
+      pv: {
+        nodeType: 'service',
+        name: 'ResourceMatcher',
+        description: 'Matches log resources against node resourceMatch criteria',
+        otel: {
+          kind: 'service',
+          category: 'match',
+        },
+        shape: 'hexagon',
+        icon: 'Search',
+        fill: '#7ED321',
+      },
+    },
+    {
+      id: 'resource-match',
+      type: 'text',
+      text: 'ResourceMatch',
+      x: 179,
+      y: 445,
+      width: 120,
+      height: 117,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'ResourceMatch',
+        description: 'Criteria for matching OTEL resources to canvas nodes',
+        otel: {
+          kind: 'type',
+          category: 'match',
+        },
+        shape: 'rectangle',
+        icon: 'Target',
+        fill: '#4A90E2',
+      },
+    },
+    {
+      id: 'match-operator',
+      type: 'text',
+      text: 'MatchOperator',
+      x: 178,
+      y: 632,
+      width: 120,
+      height: 117,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'MatchOperator',
+        description: 'Matching operators: exact, glob, regex, exists, oneOf',
+        otel: {
+          kind: 'type',
+          category: 'match',
+        },
+        shape: 'diamond',
+        icon: 'Code',
+        fill: '#F5A623',
+      },
+    },
+    {
+      id: 'canvas-node',
+      type: 'text',
+      text: 'Canvas Node',
+      x: 172,
+      y: 277,
+      width: 132,
+      height: 121,
+      pv: {
+        nodeType: 'service',
+        name: 'Canvas Node',
+        description: 'A node in the canvas that can receive routed logs',
+        shape: 'rectangle',
+        icon: 'Square',
+        fill: '#00BCD4',
+      },
+    },
+    {
+      id: 'routing-result',
+      type: 'text',
+      text: 'LogRoutingResult',
+      x: 169,
+      y: 80,
+      width: 150,
+      height: 135,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'LogRoutingResult',
+        description: 'Result of routing a log: routed, orphaned, or out-of-scope',
+        otel: {
+          kind: 'type',
+          category: 'audit',
+        },
+        shape: 'rectangle',
+        icon: 'CheckCircle',
+        fill: '#4A90E2',
+      },
+    },
+    {
+      id: 'audit-collector',
+      type: 'text',
+      text: 'AuditCollector',
+      x: 380,
+      y: 150,
+      width: 130,
+      height: 117,
+      pv: {
+        nodeType: 'otel-service',
+        name: 'AuditCollector',
+        description: 'Tracks routing metrics, orphaned logs, silent nodes, and generates coverage reports',
+        otel: {
+          kind: 'service',
+          category: 'collector',
+          isNew: true,
+        },
+        shape: 'hexagon',
+        icon: 'BarChart2',
+        fill: '#7ED321',
+      },
+    },
+    {
+      id: 'orphaned-log',
+      type: 'text',
+      text: 'OrphanedLog',
+      x: 618,
+      y: 150,
+      width: 127,
+      height: 118,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'OrphanedLog',
+        description:
+          'Logs that matched canvas scope but no node resourceMatch - indicates missing nodes or misconfiguration',
+        otel: {
+          kind: 'type',
+          category: 'audit',
+          isNew: true,
+        },
+        shape: 'rectangle',
+        icon: 'AlertTriangle',
+        fill: '#D0021B',
+      },
+    },
+    {
+      id: 'audit-report',
+      type: 'text',
+      text: 'AuditReport',
+      x: 618,
+      y: 288,
+      width: 124,
+      height: 123,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'AuditReport',
+        description: 'Coverage report with node activity, orphans, and recommendations',
+        otel: {
+          kind: 'type',
+          category: 'audit',
+        },
+        shape: 'rectangle',
+        icon: 'FileText',
+        fill: '#4A90E2',
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'log-to-router',
+      fromNode: 'otel-log',
+      toNode: 'log-router',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'route()',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'router-checks-scope',
+      fromNode: 'log-router',
+      toNode: 'canvas-scope',
+      fromSide: 'top',
+      toSide: 'bottom',
+      label: 'isInScope()',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'router-uses-matcher',
+      fromNode: 'log-router',
+      toNode: 'resource-matcher',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'match()',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'matcher-uses-match',
+      fromNode: 'resource-matcher',
+      toNode: 'resource-match',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'criteria',
+      pv: { edgeType: 'db-query' },
+    },
+    {
+      id: 'match-has-operator',
+      fromNode: 'resource-match',
+      toNode: 'match-operator',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'operators',
+      pv: { edgeType: 'db-query' },
+    },
+    {
+      id: 'router-to-node',
+      fromNode: 'log-router',
+      toNode: 'canvas-node',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'routed',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'router-returns-result',
+      fromNode: 'log-router',
+      toNode: 'routing-result',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'returns',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'result-to-audit',
+      fromNode: 'routing-result',
+      toNode: 'audit-collector',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'track()',
+      pv: { edgeType: 'http-request' },
+    },
+    {
+      id: 'audit-tracks-orphans',
+      fromNode: 'audit-collector',
+      toNode: 'orphaned-log',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'unmatched',
+      pv: { edgeType: 'db-query' },
+    },
+    {
+      id: 'audit-generates-report',
+      fromNode: 'audit-collector',
+      toNode: 'audit-report',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'generate()',
+      pv: { edgeType: 'db-query' },
+    },
+    {
+      id: 'node-has-match',
+      fromNode: 'canvas-node',
+      toNode: 'resource-match',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'resourceMatch',
+      pv: { edgeType: 'db-query' },
+    },
+    {
+      id: 'log-has-resource',
+      fromNode: 'otel-log',
+      toNode: 'otel-resource',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'resource',
+      pv: { edgeType: 'db-query' },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'OTEL Log Association Architecture',
+    description: 'Shows how OtelLog flows through LogRouter to Canvas Nodes, with audit tracking',
+    nodeTypes: {
+      service: {
+        label: 'Component',
+        description: 'System component',
+        shape: 'hexagon',
+      },
+      'otel-type': {
+        label: 'Type',
+        description: 'TypeScript type or interface representing OTEL concepts',
+        shape: 'rectangle',
+      },
+      'otel-service': {
+        label: 'Service',
+        description: 'Runtime service component for OTEL processing',
+        shape: 'hexagon',
+      },
+    },
+    edgeTypes: {
+      'http-request': {
+        label: 'Flow',
+        style: 'solid',
+        color: '#4A90E2',
+        directed: true,
+      },
+      'db-query': {
+        label: 'Reference',
+        style: 'dashed',
+        color: '#999',
+        directed: true,
+      },
+    },
+  },
+};
+
+export const OtelLogAssociation: Story = {
+  args: {
+    canvas: otelLogAssociationCanvas,
+    width: 1000,
+    height: 800,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**OTEL Log Association Architecture** - Demonstrates the new OTEL visualization features:
+- **OTEL Badges**: Circular badges (T/S/I) in the top-right corner of nodes indicating Type, Service, or Instance
+- **Hover Tooltips**: Hover over any node to see the OTEL kind, category, NEW indicator, and description
+- **Node Info Panel**: Click a node to see the OpenTelemetry section in the info panel
+
+Color coding:
+- **Blue (T)**: Type nodes - TypeScript types/interfaces
+- **Green (S)**: Service nodes - Runtime services
+- **Purple (I)**: Instance nodes - Specific running instances
+        `,
+      },
+    },
+  },
+};

package/src/stories/OtelComponents.stories.tsx

@@ -0,0 +1,286 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ThemeProvider } from '@principal-ade/industry-theme';
+import { GraphRenderer } from '../components/GraphRenderer';
+import { NodeInfoPanel } from '../components/NodeInfoPanel';
+import { NodeTooltip } from '../components/NodeTooltip';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
+
+// OTEL Log Association canvas data
+const otelCanvas = {
+  nodes: [
+    {
+      id: 'otel-log',
+      type: 'text',
+      text: 'OtelLog',
+      x: -304,
+      y: 147,
+      width: 120,
+      height: 118,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'OtelLog',
+        description:
+          'OpenTelemetry log record with timestamp, severity, body, resource, and trace context',
+        otel: {
+          kind: 'type',
+          category: 'log',
+          isNew: true,
+        },
+        shape: 'rectangle',
+        icon: 'FileText',
+        fill: '#4A90E2',
+      },
+    },
+    {
+      id: 'log-router',
+      type: 'text',
+      text: 'LogRouter',
+      x: -80,
+      y: 150,
+      width: 130,
+      height: 118,
+      pv: {
+        nodeType: 'otel-service',
+        name: 'LogRouter',
+        description: 'Routes incoming OTEL logs to canvas nodes based on scope and resourceMatch criteria',
+        otel: {
+          kind: 'service',
+          category: 'router',
+          isNew: true,
+        },
+        shape: 'hexagon',
+        icon: 'GitBranch',
+        fill: '#7ED321',
+      },
+    },
+    {
+      id: 'orphaned-log',
+      type: 'text',
+      text: 'OrphanedLog',
+      x: 150,
+      y: 150,
+      width: 127,
+      height: 118,
+      pv: {
+        nodeType: 'otel-type',
+        name: 'OrphanedLog',
+        description:
+          'Logs that matched canvas scope but no node resourceMatch - indicates missing nodes or misconfiguration',
+        otel: {
+          kind: 'type',
+          category: 'audit',
+          isNew: true,
+        },
+        shape: 'rectangle',
+        icon: 'AlertTriangle',
+        fill: '#D0021B',
+      },
+    },
+    {
+      id: 'match-operator',
+      type: 'text',
+      text: 'MatchOperator',
+      x: -80,
+      y: 300,
+      width: 120,
+      height: 117,
+      pv: {
+        nodeType: 'service',
+        name: 'MatchOperator',
+        description: 'Matching operators: exact, glob, regex, exists, oneOf',
+        shape: 'diamond',
+        icon: 'Code',
+        fill: '#F5A623',
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'log-to-router',
+      fromNode: 'otel-log',
+      toNode: 'log-router',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'route()',
+    },
+    {
+      id: 'router-to-orphan',
+      fromNode: 'log-router',
+      toNode: 'orphaned-log',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'unmatched',
+    },
+    {
+      id: 'router-to-operator',
+      fromNode: 'log-router',
+      toNode: 'match-operator',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'uses',
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'OTEL Components Demo',
+    description: 'Demonstrates OTEL badges, tooltips, and info panel',
+    nodeTypes: {
+      'otel-type': {
+        label: 'Type',
+        description: 'TypeScript type or interface representing OTEL concepts',
+        shape: 'rectangle',
+      },
+      'otel-service': {
+        label: 'Service',
+        description: 'Runtime service component for OTEL processing',
+        shape: 'hexagon',
+      },
+      service: {
+        label: 'Component',
+        description: 'System component',
+        shape: 'hexagon',
+      },
+    },
+  },
+};
+
+const meta: Meta = {
+  title: 'OTEL/Components',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+/**
+ * Shows nodes with OTEL badges (T/S/I circles) and hover tooltips.
+ * Hover over any node to see the tooltip with OTEL kind, category, and description.
+ */
+export const OtelBadgesAndTooltips: StoryObj = {
+  render: () => (
+    <ThemeProvider theme="technology">
+      <div style={{ width: '100%', height: '600px' }}>
+        <GraphRenderer
+          canvas={otelCanvas}
+          initialViewport={{ x: 200, y: 50, zoom: 1 }}
+        />
+      </div>
+    </ThemeProvider>
+  ),
+};
+
+/**
+ * Standalone NodeTooltip component demo showing all OTEL kinds.
+ */
+export const TooltipVariants: StoryObj = {
+  render: () => (
+    <ThemeProvider theme="technology">
+      <div style={{ padding: '40px', display: 'flex', gap: '80px', flexWrap: 'wrap' }}>
+        <div style={{ position: 'relative', width: '200px', height: '150px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #4A90E2',
+              borderRadius: '8px',
+              textAlign: 'center',
+            }}
+          >
+            Type Node (hover below)
+          </div>
+          <NodeTooltip
+            description="OpenTelemetry log record with timestamp, severity, body"
+            otel={{ kind: 'type', category: 'log', isNew: true }}
+            visible={true}
+          />
+        </div>
+
+        <div style={{ position: 'relative', width: '200px', height: '150px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #7ED321',
+              borderRadius: '8px',
+              textAlign: 'center',
+            }}
+          >
+            Service Node (hover below)
+          </div>
+          <NodeTooltip
+            description="Routes logs to canvas nodes based on resourceMatch"
+            otel={{ kind: 'service', category: 'router' }}
+            visible={true}
+          />
+        </div>
+
+        <div style={{ position: 'relative', width: '200px', height: '150px' }}>
+          <div
+            style={{
+              padding: '20px',
+              border: '2px solid #9B59B6',
+              borderRadius: '8px',
+              textAlign: 'center',
+            }}
+          >
+            Instance Node (hover below)
+          </div>
+          <NodeTooltip
+            description="A specific running instance of a service"
+            otel={{ kind: 'instance', category: 'runtime' }}
+            visible={true}
+          />
+        </div>
+      </div>
+    </ThemeProvider>
+  ),
+};
+
+/**
+ * NodeInfoPanel with OTEL information section.
+ */
+export const InfoPanelWithOtel: StoryObj = {
+  render: () => {
+    const [selectedNode] = useState<NodeState>({
+      id: 'log-router',
+      type: 'otel-service',
+      name: 'LogRouter',
+      data: {
+        description: 'Routes incoming OTEL logs to canvas nodes based on scope and resourceMatch criteria',
+        otel: {
+          kind: 'service',
+          category: 'router',
+          isNew: true,
+        },
+        icon: 'GitBranch',
+        color: '#7ED321',
+        sources: ['src/services/LogRouter.ts'],
+      },
+      position: { x: 0, y: 0 },
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    });
+
+    const typeDefinition: NodeTypeDefinition = {
+      shape: 'hexagon',
+      color: '#7ED321',
+      icon: 'GitBranch',
+    };
+
+    return (
+      <ThemeProvider theme="technology">
+        <div style={{ padding: '20px', position: 'relative', minHeight: '400px' }}>
+          <h3 style={{ marginBottom: '20px' }}>NodeInfoPanel with OTEL Section</h3>
+          <p style={{ marginBottom: '20px', color: '#666' }}>
+            The panel shows the OpenTelemetry section with kind badge, category, and NEW indicator.
+          </p>
+          <NodeInfoPanel
+            node={selectedNode}
+            typeDefinition={typeDefinition}
+            onClose={() => {}}
+          />
+        </div>
+      </ThemeProvider>
+    );
+  },
+};