84 lines
3.8 KiB
XML
84 lines
3.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 300">
|
|
<defs>
|
|
<marker id="arr" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#e94560"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="700" height="300" fill="#1a1a2e"/>
|
|
|
|
<!-- Title -->
|
|
<text x="350" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">gRPC Client-Side Streaming</text>
|
|
|
|
<!-- Collector box -->
|
|
<g transform="translate(50, 80)">
|
|
<rect width="180" height="160" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
|
<text x="90" y="25" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="13" font-weight="bold">Collector</text>
|
|
|
|
<!-- Metric items -->
|
|
<g transform="translate(15, 45)">
|
|
<rect width="150" height="25" rx="4" fill="#0f3460"/>
|
|
<text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">CPU: 45%</text>
|
|
</g>
|
|
<g transform="translate(15, 75)">
|
|
<rect width="150" height="25" rx="4" fill="#0f3460"/>
|
|
<text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">Memory: 62%</text>
|
|
</g>
|
|
<g transform="translate(15, 105)">
|
|
<rect width="150" height="25" rx="4" fill="#0f3460"/>
|
|
<text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">Disk: 78%</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Stream visualization -->
|
|
<g transform="translate(250, 100)">
|
|
<!-- Stream line -->
|
|
<line x1="0" y1="60" x2="180" y2="60" stroke="#e94560" stroke-width="3" stroke-dasharray="8,4"/>
|
|
|
|
<!-- Metric packets -->
|
|
<g transform="translate(20, 45)">
|
|
<rect width="30" height="30" rx="4" fill="#e94560"/>
|
|
<text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M1</text>
|
|
</g>
|
|
<g transform="translate(70, 45)">
|
|
<rect width="30" height="30" rx="4" fill="#e94560" opacity="0.8"/>
|
|
<text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M2</text>
|
|
</g>
|
|
<g transform="translate(120, 45)">
|
|
<rect width="30" height="30" rx="4" fill="#e94560" opacity="0.6"/>
|
|
<text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M3</text>
|
|
</g>
|
|
|
|
<text x="90" y="110" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Continuous stream of metrics</text>
|
|
</g>
|
|
|
|
<!-- Aggregator box -->
|
|
<g transform="translate(450, 80)">
|
|
<rect width="180" height="160" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
|
<text x="90" y="25" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="13" font-weight="bold">Aggregator</text>
|
|
|
|
<!-- Batch indicator -->
|
|
<g transform="translate(15, 45)">
|
|
<rect width="150" height="40" rx="4" fill="#0f3460"/>
|
|
<text x="75" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="10">Batch: 20 metrics</text>
|
|
<text x="75" y="32" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9">Flush to storage</text>
|
|
</g>
|
|
|
|
<!-- Storage icons -->
|
|
<g transform="translate(15, 100)">
|
|
<rect width="65" height="30" rx="4" fill="#0f3460"/>
|
|
<text x="32" y="20" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Redis</text>
|
|
</g>
|
|
<g transform="translate(95, 100)">
|
|
<rect width="70" height="30" rx="4" fill="#0f3460"/>
|
|
<text x="35" y="20" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Timescale</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Legend -->
|
|
<g transform="translate(50, 260)">
|
|
<text x="0" y="0" fill="#a0a0a0" font-family="system-ui" font-size="11">One persistent connection. Metrics flow continuously. No polling overhead.</text>
|
|
</g>
|
|
</svg>
|