78 lines
4.4 KiB
HTML
78 lines
4.4 KiB
HTML
|
<h2>AppConfigDetailPage — Merged "Traces & Taps" Section</h2>
|
||
|
|
<p class="subtitle">Single table combining traced processors and data extraction taps</p>
|
||
|
|
|
||
|
|
<div class="mockup">
|
||
|
|
<div class="mockup-header">Traces & Taps — Merged Table</div>
|
||
|
|
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
|
||
|
|
|
||
|
|
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;">
|
||
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
||
|
|
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Traces & Taps</div>
|
||
|
|
<span style="font-size:11px;color:#6b7280;">2 traced · 3 taps · manage taps on route pages</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table style="width:100%;border-collapse:collapse;font-size:12px;">
|
||
|
|
<thead>
|
||
|
|
<tr style="border-bottom:1px solid #2d2d50;">
|
||
|
|
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
|
||
|
|
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Capture</th>
|
||
|
|
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Taps</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- Processor with both trace + taps -->
|
||
|
|
<tr style="border-bottom:1px solid #161630;">
|
||
|
|
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">BOTH</span>
|
||
|
|
</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
|
|
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderId <span style="color:#4ade80;margin-left:2px;">✓</span></span>
|
||
|
|
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">customerId <span style="color:#4ade80;margin-left:2px;">✓</span></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<!-- Processor with trace only -->
|
||
|
|
<tr style="border-bottom:1px solid #161630;">
|
||
|
|
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">toDatabase</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">INPUT</span>
|
||
|
|
</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<span style="color:#6b7280;font-size:11px;">—</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<!-- Processor with tap only (no trace override) -->
|
||
|
|
<tr>
|
||
|
|
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">enrichPrice</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<span style="color:#6b7280;font-size:11px;">—</span>
|
||
|
|
</td>
|
||
|
|
<td style="padding:8px;">
|
||
|
|
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
|
|
<span style="background:#3b2f1f;color:#fcd34d;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderTotal <span style="color:#6b7280;margin-left:2px;">✗</span></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top:16px;"></div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h3>Design Notes</h3>
|
||
|
|
<ul style="font-size:14px;line-height:1.8;">
|
||
|
|
<li><strong>One row per processor</strong> that has either a capture override or taps (or both)</li>
|
||
|
|
<li><strong>Capture column:</strong> shows the trace capture mode badge, or em-dash if default</li>
|
||
|
|
<li><strong>Taps column:</strong> attribute name badges with enabled/disabled indicator (✓ / ✗), or em-dash if none</li>
|
||
|
|
<li><strong>Tap badges color-coded by language:</strong> blue = simple, yellow = jsonpath (matches RouteDetail tap table)</li>
|
||
|
|
<li><strong>Edit mode:</strong> capture column becomes a dropdown, taps remain read-only (manage on route pages)</li>
|
||
|
|
<li><strong>Empty state:</strong> "No processor-specific traces or taps configured" with link to route pages</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|