84 lines
5.1 KiB
XML
84 lines
5.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 320">
|
|
<defs>
|
|
<linearGradient id="hotGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#ef4444"/>
|
|
<stop offset="100%" style="stop-color:#f97316"/>
|
|
</linearGradient>
|
|
<linearGradient id="warmGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#f97316"/>
|
|
<stop offset="100%" style="stop-color:#eab308"/>
|
|
</linearGradient>
|
|
<linearGradient id="coldGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#6366f1"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="700" height="320" fill="#1a1a2e"/>
|
|
|
|
<!-- Title -->
|
|
<text x="350" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">Tiered Storage Architecture</text>
|
|
|
|
<!-- Hot tier -->
|
|
<g transform="translate(50, 60)">
|
|
<rect width="180" height="100" rx="8" fill="#16213e" stroke="url(#hotGrad)" stroke-width="3"/>
|
|
<rect x="10" y="10" width="30" height="10" rx="2" fill="url(#hotGrad)"/>
|
|
<text x="50" y="18" fill="#ef4444" font-family="system-ui" font-size="11" font-weight="bold">HOT</text>
|
|
<text x="90" y="45" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="14" font-weight="bold">Redis</text>
|
|
<text x="90" y="65" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">5 second resolution</text>
|
|
<text x="90" y="80" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">5 minute retention</text>
|
|
</g>
|
|
|
|
<!-- Warm tier - Raw -->
|
|
<g transform="translate(260, 60)">
|
|
<rect width="180" height="100" rx="8" fill="#16213e" stroke="url(#warmGrad)" stroke-width="3"/>
|
|
<rect x="10" y="10" width="40" height="10" rx="2" fill="url(#warmGrad)"/>
|
|
<text x="58" y="18" fill="#f97316" font-family="system-ui" font-size="11" font-weight="bold">WARM</text>
|
|
<text x="90" y="45" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="14" font-weight="bold">TimescaleDB</text>
|
|
<text x="90" y="65" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">5 second resolution</text>
|
|
<text x="90" y="80" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">24 hour retention</text>
|
|
</g>
|
|
|
|
<!-- Cold tier - Aggregates -->
|
|
<g transform="translate(470, 60)">
|
|
<rect width="180" height="100" rx="8" fill="#16213e" stroke="url(#coldGrad)" stroke-width="3"/>
|
|
<rect x="10" y="10" width="40" height="10" rx="2" fill="url(#coldGrad)"/>
|
|
<text x="58" y="18" fill="#3b82f6" font-family="system-ui" font-size="11" font-weight="bold">COLD</text>
|
|
<text x="90" y="45" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="14" font-weight="bold">Aggregates</text>
|
|
<text x="90" y="65" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">1 min / 1 hour resolution</text>
|
|
<text x="90" y="80" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">7 / 90 day retention</text>
|
|
</g>
|
|
|
|
<!-- Use cases -->
|
|
<g transform="translate(50, 180)">
|
|
<rect width="180" height="60" rx="6" fill="#0f3460"/>
|
|
<text x="90" y="20" text-anchor="middle" fill="#ef4444" font-family="system-ui" font-size="11" font-weight="bold">Dashboard</text>
|
|
<text x="90" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">"What's the CPU now?"</text>
|
|
<text x="90" y="52" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9">Fast in-memory reads</text>
|
|
</g>
|
|
|
|
<g transform="translate(260, 180)">
|
|
<rect width="180" height="60" rx="6" fill="#0f3460"/>
|
|
<text x="90" y="20" text-anchor="middle" fill="#f97316" font-family="system-ui" font-size="11" font-weight="bold">Recent Graphs</text>
|
|
<text x="90" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">"Last hour of metrics"</text>
|
|
<text x="90" y="52" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9">Hypertable queries</text>
|
|
</g>
|
|
|
|
<g transform="translate(470, 180)">
|
|
<rect width="180" height="60" rx="6" fill="#0f3460"/>
|
|
<text x="90" y="20" text-anchor="middle" fill="#3b82f6" font-family="system-ui" font-size="11" font-weight="bold">Trends / Reports</text>
|
|
<text x="90" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">"Weekly CPU average"</text>
|
|
<text x="90" y="52" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9">Pre-aggregated data</text>
|
|
</g>
|
|
|
|
<!-- Arrow showing flow -->
|
|
<g transform="translate(50, 260)">
|
|
<line x1="90" y1="15" x2="560" y2="15" stroke="#64748b" stroke-width="2"/>
|
|
<polygon points="560,10 580,15 560,20" fill="#64748b"/>
|
|
<text x="90" y="40" fill="#ef4444" font-family="system-ui" font-size="10">Fastest</text>
|
|
<text x="320" y="40" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Access Time</text>
|
|
<text x="550" y="40" text-anchor="end" fill="#3b82f6" font-family="system-ui" font-size="10">Slowest</text>
|
|
</g>
|
|
</svg>
|