migrated spr stuff
This commit is contained in:
buenosairesam
@@ -0,0 +1,106 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
|
||||
<defs>
|
||||
<linearGradient id="headerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#16213e"/>
|
||||
<stop offset="100%" style="stop-color:#533483"/>
|
||||
</linearGradient>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#e94560"/>
|
||||
</marker>
|
||||
<marker id="arrowhead-gray" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="400" fill="#1a1a2e"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="18" font-weight="bold">System Architecture Overview</text>
|
||||
|
||||
<!-- Machine boxes (left side) -->
|
||||
<g transform="translate(50, 70)">
|
||||
<rect width="120" height="60" rx="8" fill="#0f3460" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="60" y="25" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="12" font-weight="bold">Machine 1</text>
|
||||
<text x="60" y="42" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Collector</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(50, 150)">
|
||||
<rect width="120" height="60" rx="8" fill="#0f3460" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="60" y="25" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="12" font-weight="bold">Machine 2</text>
|
||||
<text x="60" y="42" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Collector</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(50, 230)">
|
||||
<rect width="120" height="60" rx="8" fill="#0f3460" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="60" y="25" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="12" font-weight="bold">Machine N</text>
|
||||
<text x="60" y="42" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Collector</text>
|
||||
</g>
|
||||
|
||||
<!-- Aggregator (center) -->
|
||||
<g transform="translate(280, 130)">
|
||||
<rect width="140" height="80" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="70" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="14" font-weight="bold">Aggregator</text>
|
||||
<text x="70" y="50" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">gRPC Server</text>
|
||||
<text x="70" y="65" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Batch Processing</text>
|
||||
</g>
|
||||
|
||||
<!-- Storage (bottom center) -->
|
||||
<g transform="translate(250, 300)">
|
||||
<rect width="80" height="50" rx="6" fill="#0f3460" stroke="#64748b" stroke-width="1"/>
|
||||
<text x="40" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Redis</text>
|
||||
<text x="40" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Hot Data</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(350, 300)">
|
||||
<rect width="100" height="50" rx="6" fill="#0f3460" stroke="#64748b" stroke-width="1"/>
|
||||
<text x="50" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">TimescaleDB</text>
|
||||
<text x="50" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Historical</text>
|
||||
</g>
|
||||
|
||||
<!-- Gateway (right) -->
|
||||
<g transform="translate(520, 130)">
|
||||
<rect width="120" height="80" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="60" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="14" font-weight="bold">Gateway</text>
|
||||
<text x="60" y="50" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">FastAPI</text>
|
||||
<text x="60" y="65" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">WebSocket</text>
|
||||
</g>
|
||||
|
||||
<!-- Browser (far right) -->
|
||||
<g transform="translate(700, 140)">
|
||||
<rect width="80" height="60" rx="8" fill="#0f3460" stroke="#4ade80" stroke-width="2"/>
|
||||
<text x="40" y="25" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Browser</text>
|
||||
<text x="40" y="42" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Dashboard</text>
|
||||
</g>
|
||||
|
||||
<!-- Alerts (bottom right) -->
|
||||
<g transform="translate(540, 300)">
|
||||
<rect width="100" height="50" rx="6" fill="#0f3460" stroke="#fbbf24" stroke-width="1"/>
|
||||
<text x="50" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Alerts</text>
|
||||
<text x="50" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Threshold Rules</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrows: Collectors to Aggregator -->
|
||||
<line x1="170" y1="100" x2="275" y2="160" stroke="#e94560" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
<line x1="170" y1="180" x2="275" y2="170" stroke="#e94560" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
<line x1="170" y1="260" x2="275" y2="185" stroke="#e94560" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Arrow: Aggregator to Storage -->
|
||||
<line x1="320" y1="210" x2="300" y2="295" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-gray)"/>
|
||||
<line x1="380" y1="210" x2="400" y2="295" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-gray)"/>
|
||||
|
||||
<!-- Arrow: Aggregator to Gateway -->
|
||||
<line x1="420" y1="170" x2="515" y2="170" stroke="#e94560" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Arrow: Gateway to Browser -->
|
||||
<line x1="640" y1="170" x2="695" y2="170" stroke="#4ade80" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Arrow: Event stream to Alerts -->
|
||||
<path d="M 400 210 Q 450 260 535 325" stroke="#fbbf24" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Labels for arrows -->
|
||||
<text x="220" y="125" fill="#e94560" font-family="system-ui" font-size="9">gRPC Stream</text>
|
||||
<text x="460" y="155" fill="#e94560" font-family="system-ui" font-size="9">Events</text>
|
||||
<text x="660" y="155" fill="#4ade80" font-family="system-ui" font-size="9">WS</text>
|
||||
<text x="470" y="280" fill="#fbbf24" font-family="system-ui" font-size="9">Pub/Sub</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
83
atlas/books/sysmonstm/explainer/images/02-grpc-streaming.svg
Normal file
83
atlas/books/sysmonstm/explainer/images/02-grpc-streaming.svg
Normal file
@@ -0,0 +1,83 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
83
atlas/books/sysmonstm/explainer/images/03-storage-tiers.svg
Normal file
83
atlas/books/sysmonstm/explainer/images/03-storage-tiers.svg
Normal file
@@ -0,0 +1,83 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
84
atlas/books/sysmonstm/explainer/images/04-event-driven.svg
Normal file
84
atlas/books/sysmonstm/explainer/images/04-event-driven.svg
Normal file
@@ -0,0 +1,84 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 280">
|
||||
<defs>
|
||||
<marker id="arrPink" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#e94560"/>
|
||||
</marker>
|
||||
<marker id="arrYellow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
<marker id="arrGreen" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4ade80"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="700" height="280" fill="#1a1a2e"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="350" y="28" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">Event-Driven Architecture</text>
|
||||
|
||||
<!-- Aggregator (publisher) -->
|
||||
<g transform="translate(50, 70)">
|
||||
<rect width="120" height="70" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="60" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="12" font-weight="bold">Aggregator</text>
|
||||
<text x="60" y="50" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Publisher</text>
|
||||
</g>
|
||||
|
||||
<!-- Event Stream (center) -->
|
||||
<g transform="translate(230, 55)">
|
||||
<rect width="200" height="100" rx="8" fill="#0f3460" stroke="#fbbf24" stroke-width="2"/>
|
||||
<text x="100" y="25" text-anchor="middle" fill="#fbbf24" font-family="system-ui" font-size="13" font-weight="bold">Event Stream</text>
|
||||
<text x="100" y="45" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Redis Pub/Sub</text>
|
||||
|
||||
<!-- Topics -->
|
||||
<g transform="translate(15, 55)">
|
||||
<rect width="80" height="22" rx="4" fill="#16213e"/>
|
||||
<text x="40" y="15" text-anchor="middle" fill="#e94560" font-family="monospace" font-size="9">metrics.raw</text>
|
||||
</g>
|
||||
<g transform="translate(105, 55)">
|
||||
<rect width="80" height="22" rx="4" fill="#16213e"/>
|
||||
<text x="40" y="15" text-anchor="middle" fill="#fbbf24" font-family="monospace" font-size="9">alerts.*</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Subscribers -->
|
||||
<g transform="translate(490, 50)">
|
||||
<rect width="130" height="50" rx="6" fill="#16213e" stroke="#4ade80" stroke-width="2"/>
|
||||
<text x="65" y="22" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="11" font-weight="bold">Gateway</text>
|
||||
<text x="65" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">WebSocket push</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(490, 115)">
|
||||
<rect width="130" height="50" rx="6" fill="#16213e" stroke="#fbbf24" stroke-width="2"/>
|
||||
<text x="65" y="22" text-anchor="middle" fill="#fbbf24" font-family="system-ui" font-size="11" font-weight="bold">Alerts</text>
|
||||
<text x="65" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Threshold check</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrows -->
|
||||
<line x1="170" y1="105" x2="225" y2="105" stroke="#e94560" stroke-width="2" marker-end="url(#arrPink)"/>
|
||||
<line x1="430" y1="85" x2="485" y2="75" stroke="#4ade80" stroke-width="2" marker-end="url(#arrGreen)"/>
|
||||
<line x1="430" y1="115" x2="485" y2="140" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrYellow)"/>
|
||||
|
||||
<!-- Benefits box -->
|
||||
<g transform="translate(50, 180)">
|
||||
<rect width="600" height="80" rx="8" fill="#0f3460"/>
|
||||
<text x="20" y="25" fill="#eee" font-family="system-ui" font-size="12" font-weight="bold">Benefits:</text>
|
||||
|
||||
<g transform="translate(20, 40)">
|
||||
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
||||
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Decoupled services - can restart independently</text>
|
||||
</g>
|
||||
<g transform="translate(20, 58)">
|
||||
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
||||
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Easy to add new subscribers without changing publisher</text>
|
||||
</g>
|
||||
<g transform="translate(320, 40)">
|
||||
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
||||
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Abstraction allows switching backends (Kafka)</text>
|
||||
</g>
|
||||
<g transform="translate(320, 58)">
|
||||
<circle cx="6" cy="6" r="4" fill="#4ade80"/>
|
||||
<text x="16" y="10" fill="#a0a0a0" font-family="system-ui" font-size="10">Natural audit trail of all events</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
80
atlas/books/sysmonstm/explainer/images/05-domain-mapping.svg
Normal file
80
atlas/books/sysmonstm/explainer/images/05-domain-mapping.svg
Normal file
@@ -0,0 +1,80 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 350">
|
||||
<defs>
|
||||
<marker id="arrRight" 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="350" fill="#1a1a2e"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="350" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">Domain Mapping: Monitoring to Payments</text>
|
||||
|
||||
<!-- Left column header -->
|
||||
<g transform="translate(50, 55)">
|
||||
<rect width="250" height="35" rx="6" fill="#16213e" stroke="#e94560" stroke-width="2"/>
|
||||
<text x="125" y="23" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="13" font-weight="bold">System Monitoring</text>
|
||||
</g>
|
||||
|
||||
<!-- Right column header -->
|
||||
<g transform="translate(400, 55)">
|
||||
<rect width="250" height="35" rx="6" fill="#16213e" stroke="#4ade80" stroke-width="2"/>
|
||||
<text x="125" y="23" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="13" font-weight="bold">Payment Processing</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 1 -->
|
||||
<g transform="translate(50, 105)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Machine</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">workstation, laptop, server</text>
|
||||
</g>
|
||||
<line x1="305" y1="125" x2="395" y2="125" stroke="#e94560" stroke-width="2" marker-end="url(#arrRight)"/>
|
||||
<g transform="translate(400, 105)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Payment Processor</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Stripe, PayPal, bank API</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<g transform="translate(50, 155)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Metrics Stream</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">CPU, memory, disk usage</text>
|
||||
</g>
|
||||
<line x1="305" y1="175" x2="395" y2="175" stroke="#e94560" stroke-width="2" marker-end="url(#arrRight)"/>
|
||||
<g transform="translate(400, 155)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Transaction Stream</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">payments, refunds, disputes</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 3 -->
|
||||
<g transform="translate(50, 205)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Alert Thresholds</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">CPU > 80%, disk > 90%</text>
|
||||
</g>
|
||||
<line x1="305" y1="225" x2="395" y2="225" stroke="#e94560" stroke-width="2" marker-end="url(#arrRight)"/>
|
||||
<g transform="translate(400, 205)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Fraud Detection</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">amount > $10k, velocity checks</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 4 -->
|
||||
<g transform="translate(50, 255)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Aggregator</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">normalize, store, publish</text>
|
||||
</g>
|
||||
<line x1="305" y1="275" x2="395" y2="275" stroke="#e94560" stroke-width="2" marker-end="url(#arrRight)"/>
|
||||
<g transform="translate(400, 255)">
|
||||
<rect width="250" height="40" rx="4" fill="#0f3460"/>
|
||||
<text x="125" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Payment Hub</text>
|
||||
<text x="125" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">normalize, ledger, audit</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer note -->
|
||||
<text x="350" y="330" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="11" font-style="italic">Same architecture, different domain vocabulary</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,125 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 380">
|
||||
<defs>
|
||||
<marker id="arrBlue" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/>
|
||||
</marker>
|
||||
<marker id="arrPurple" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#a855f7"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="700" height="380" fill="#1a1a2e"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="350" y="28" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">Deskmeter: Current vs Enhanced Architecture</text>
|
||||
|
||||
<!-- Current section -->
|
||||
<g transform="translate(30, 50)">
|
||||
<text x="150" y="15" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="12" font-weight="bold">CURRENT</text>
|
||||
|
||||
<!-- Daemon -->
|
||||
<g transform="translate(20, 30)">
|
||||
<rect width="100" height="50" rx="6" fill="#16213e" stroke="#64748b" stroke-width="1"/>
|
||||
<text x="50" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="10" font-weight="bold">dmcore</text>
|
||||
<text x="50" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">polls wmctrl</text>
|
||||
</g>
|
||||
|
||||
<!-- MongoDB -->
|
||||
<g transform="translate(160, 30)">
|
||||
<rect width="80" height="50" rx="6" fill="#0f3460" stroke="#64748b" stroke-width="1"/>
|
||||
<text x="40" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="10" font-weight="bold">MongoDB</text>
|
||||
<text x="40" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">all data</text>
|
||||
</g>
|
||||
|
||||
<!-- Flask -->
|
||||
<g transform="translate(90, 100)">
|
||||
<rect width="100" height="50" rx="6" fill="#16213e" stroke="#64748b" stroke-width="1"/>
|
||||
<text x="50" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="10" font-weight="bold">Flask</text>
|
||||
<text x="50" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">AJAX polling</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrows -->
|
||||
<line x1="120" y1="55" x2="155" y2="55" stroke="#64748b" stroke-width="1"/>
|
||||
<line x1="200" y1="80" x2="155" y2="100" stroke="#64748b" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Arrow between sections -->
|
||||
<g transform="translate(320, 100)">
|
||||
<line x1="0" y1="30" x2="50" y2="30" stroke="#e94560" stroke-width="3" marker-end="url(#arrBlue)"/>
|
||||
<text x="25" y="50" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="10">enhance</text>
|
||||
</g>
|
||||
|
||||
<!-- Enhanced section -->
|
||||
<g transform="translate(380, 50)">
|
||||
<text x="150" y="15" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="12" font-weight="bold">ENHANCED</text>
|
||||
|
||||
<!-- Multiple machines -->
|
||||
<g transform="translate(0, 30)">
|
||||
<rect width="70" height="35" rx="4" fill="#16213e" stroke="#3b82f6" stroke-width="1"/>
|
||||
<text x="35" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="9">Machine 1</text>
|
||||
</g>
|
||||
<g transform="translate(0, 70)">
|
||||
<rect width="70" height="35" rx="4" fill="#16213e" stroke="#3b82f6" stroke-width="1"/>
|
||||
<text x="35" y="22" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="9">Machine 2</text>
|
||||
</g>
|
||||
|
||||
<!-- Event stream -->
|
||||
<g transform="translate(100, 40)">
|
||||
<rect width="80" height="55" rx="6" fill="#0f3460" stroke="#fbbf24" stroke-width="2"/>
|
||||
<text x="40" y="22" text-anchor="middle" fill="#fbbf24" font-family="system-ui" font-size="9" font-weight="bold">Events</text>
|
||||
<text x="40" y="38" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">Pub/Sub</text>
|
||||
</g>
|
||||
|
||||
<!-- Gateway with WebSocket -->
|
||||
<g transform="translate(210, 30)">
|
||||
<rect width="90" height="50" rx="6" fill="#16213e" stroke="#4ade80" stroke-width="2"/>
|
||||
<text x="45" y="20" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9" font-weight="bold">Gateway</text>
|
||||
<text x="45" y="35" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">WebSocket</text>
|
||||
<text x="45" y="45" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">real-time</text>
|
||||
</g>
|
||||
|
||||
<!-- Focus Alerts -->
|
||||
<g transform="translate(210, 90)">
|
||||
<rect width="90" height="40" rx="6" fill="#16213e" stroke="#a855f7" stroke-width="2"/>
|
||||
<text x="45" y="17" text-anchor="middle" fill="#a855f7" font-family="system-ui" font-size="9" font-weight="bold">Focus Alerts</text>
|
||||
<text x="45" y="32" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="8">thresholds</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrows -->
|
||||
<line x1="70" y1="47" x2="95" y2="60" stroke="#3b82f6" stroke-width="1.5" marker-end="url(#arrBlue)"/>
|
||||
<line x1="70" y1="87" x2="95" y2="75" stroke="#3b82f6" stroke-width="1.5" marker-end="url(#arrBlue)"/>
|
||||
<line x1="180" y1="60" x2="205" y2="55" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<line x1="180" y1="75" x2="205" y2="110" stroke="#a855f7" stroke-width="1.5" marker-end="url(#arrPurple)"/>
|
||||
</g>
|
||||
|
||||
<!-- Benefits list -->
|
||||
<g transform="translate(30, 200)">
|
||||
<rect width="640" height="160" rx="8" fill="#0f3460"/>
|
||||
<text x="320" y="25" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="13" font-weight="bold">What sysmonstm Patterns Add to Deskmeter</text>
|
||||
|
||||
<g transform="translate(30, 45)">
|
||||
<circle cx="8" cy="8" r="5" fill="#4ade80"/>
|
||||
<text x="22" y="12" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Real-time updates</text>
|
||||
<text x="22" y="28" fill="#a0a0a0" font-family="system-ui" font-size="10">WebSocket push instead of AJAX polling every 5 seconds</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(30, 75)">
|
||||
<circle cx="8" cy="8" r="5" fill="#3b82f6"/>
|
||||
<text x="22" y="12" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Multi-machine tracking</text>
|
||||
<text x="22" y="28" fill="#a0a0a0" font-family="system-ui" font-size="10">Monitor workstation + laptop productivity in one dashboard</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(30, 105)">
|
||||
<circle cx="8" cy="8" r="5" fill="#a855f7"/>
|
||||
<text x="22" y="12" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Focus alerts</text>
|
||||
<text x="22" y="28" fill="#a0a0a0" font-family="system-ui" font-size="10">Notify when context-switching too often or idle too long</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(30, 135)">
|
||||
<circle cx="8" cy="8" r="5" fill="#fbbf24"/>
|
||||
<text x="22" y="12" fill="#eee" font-family="system-ui" font-size="11" font-weight="bold">Event-driven architecture</text>
|
||||
<text x="22" y="28" fill="#a0a0a0" font-family="system-ui" font-size="10">Decoupled services, easy to add new subscribers</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
282
atlas/books/sysmonstm/explainer/other-applications.md
Normal file
282
atlas/books/sysmonstm/explainer/other-applications.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# Same Patterns, Different Domains
|
||||
|
||||
The architecture behind sysmonstm isn't specific to system monitoring. The patterns - streaming data collection, event-driven processing, tiered storage, real-time dashboards - apply to many domains. This article explores two: payment processing systems and desktop productivity tracking.
|
||||
|
||||
|
||||
|
||||
## Payment Processing Systems
|
||||
|
||||
The sysmonstm architecture was intentionally designed to map to payment processing. Here's how each component translates.
|
||||
|
||||
### Domain Mapping
|
||||
|
||||
| sysmonstm | Payment System |
|
||||
|-----------|----------------|
|
||||
| Machine | Payment Processor (Stripe, PayPal, bank API) |
|
||||
| Metrics Stream | Transaction Stream |
|
||||
| Aggregator | Payment Hub |
|
||||
| Alert Thresholds | Fraud Detection Rules |
|
||||
| Alert Service | Risk Management |
|
||||
| Redis (current state) | Transaction Cache |
|
||||
| TimescaleDB (history) | Transaction Ledger |
|
||||
| Event Stream | Audit Trail |
|
||||
|
||||
### How It Would Work
|
||||
|
||||
**Collectors become processor adapters.** Instead of collecting CPU and memory via psutil, each adapter connects to a payment processor's API or webhook endpoint:
|
||||
|
||||
```python
|
||||
# Conceptual - not actual code
|
||||
class StripeAdapter:
|
||||
async def stream_transactions(self):
|
||||
async for event in stripe.webhook_events():
|
||||
yield Transaction(
|
||||
processor="stripe",
|
||||
amount=event.amount,
|
||||
currency=event.currency,
|
||||
status=event.status,
|
||||
customer_id=event.customer,
|
||||
timestamp=event.created,
|
||||
)
|
||||
```
|
||||
|
||||
The gRPC streaming pattern remains identical. Each adapter streams transactions to a central aggregator.
|
||||
|
||||
**The aggregator normalizes data.** Stripe sends amounts in cents. PayPal sends them in dollars. Bank APIs use different currency codes. The aggregator normalizes everything to a consistent format before storage:
|
||||
|
||||
```python
|
||||
# In the aggregator's StreamTransactions handler
|
||||
async for tx in request_iterator:
|
||||
normalized = normalize_transaction(tx)
|
||||
await self.store(normalized)
|
||||
await self.publisher.publish("transactions.raw", normalized)
|
||||
```
|
||||
|
||||
This is the same pattern as `services/aggregator/main.py:47-95` - receive stream, batch, flush to storage, publish events.
|
||||
|
||||
**Alerts become fraud detection.** Instead of "CPU > 80%", rules look like:
|
||||
|
||||
- Transaction amount > $10,000 (large transaction)
|
||||
- More than 5 transactions from same card in 1 minute (velocity check)
|
||||
- Transaction from country different than cardholder's (geographic anomaly)
|
||||
|
||||
The `AlertEvaluator` pattern from `services/alerts/main.py:44-77` handles this:
|
||||
|
||||
```python
|
||||
class FraudEvaluator:
|
||||
RULES = [
|
||||
FraudRule("large_transaction", "amount", "gt", 10000, "review"),
|
||||
FraudRule("velocity", "transactions_per_minute", "gt", 5, "block"),
|
||||
]
|
||||
|
||||
def evaluate(self, transaction: dict) -> list[FraudAlert]:
|
||||
# Same operator-based evaluation as AlertEvaluator
|
||||
pass
|
||||
```
|
||||
|
||||
**The event stream becomes an audit trail.** Financial systems require complete audit logs. Every transaction, every state change, every decision must be recorded. The event abstraction from `shared/events/base.py` already provides this:
|
||||
|
||||
```python
|
||||
await self.publisher.publish(
|
||||
topic="transactions.processed",
|
||||
payload={
|
||||
"transaction_id": tx.id,
|
||||
"processor": tx.processor,
|
||||
"amount": tx.amount,
|
||||
"decision": "approved",
|
||||
"timestamp": datetime.utcnow().isoformat(),
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
Subscribe to these events for compliance reporting, analytics, or real-time monitoring.
|
||||
|
||||
**Tiered storage handles transaction volumes.** Hot transactions (last hour) in Redis for quick lookups. Recent transactions (last month) in PostgreSQL for operational queries. Historical transactions archived to S3 for compliance retention. Same pattern as sysmonstm's Redis + TimescaleDB setup.
|
||||
|
||||
### What Changes
|
||||
|
||||
- **Authentication**: Payment APIs require OAuth, API keys, mTLS. The collector adapters need credential management.
|
||||
- **Idempotency**: Transactions must be processed exactly once. The aggregator needs deduplication.
|
||||
- **Compliance**: PCI-DSS requires encryption, access controls, audit logging. More infrastructure, same patterns.
|
||||
|
||||
### What Stays the Same
|
||||
|
||||
- gRPC streaming from multiple sources to central aggregator
|
||||
- Event-driven processing for decoupled services
|
||||
- Threshold-based alerting
|
||||
- Real-time dashboard via WebSocket
|
||||
- Tiered storage for different access patterns
|
||||
|
||||
## Deskmeter: A Workspace Timer Application
|
||||
|
||||
Deskmeter is a productivity tracking application that monitors desktop workspace switches and task changes. It runs on Linux, tracks time spent on different tasks, and displays the data through a web dashboard.
|
||||
|
||||
Current architecture:
|
||||
- **dmcore daemon**: Polls workspace state every 2 seconds using `wmctrl`
|
||||
- **MongoDB**: Stores workspace switches with timestamps and durations
|
||||
- **Flask web server**: Serves calendar views and task summaries
|
||||
- **GNOME extension**: Shows current task in the top panel
|
||||
|
||||
This works, but sysmonstm patterns could enhance it significantly.
|
||||
|
||||
|
||||
|
||||
### Current Deskmeter Implementation
|
||||
|
||||
The core daemon (`dmapp/dmcore/main.py`) polls in a loop:
|
||||
|
||||
```python
|
||||
while True:
|
||||
current_workspace = active_workspace() # Calls wmctrl
|
||||
current_task = state.retrieve("current").get("task")
|
||||
|
||||
# Track the switch
|
||||
last_switch_time = track_workspace_switch(
|
||||
current_workspace,
|
||||
current_task,
|
||||
last_switch_time
|
||||
)
|
||||
|
||||
time.sleep(2)
|
||||
```
|
||||
|
||||
The web server (`dmapp/dmweb/dm.py`) uses Flask with template rendering:
|
||||
|
||||
```python
|
||||
@dmbp.route("/calendar/<string:scope>")
|
||||
def calendar_view(scope="daily", year=None, month=None, day=None):
|
||||
blocks = get_task_blocks_calendar(start, end, task, ...)
|
||||
return render_template("calendar_view.html", blocks=blocks, ...)
|
||||
```
|
||||
|
||||
The dashboard refreshes via page reload or AJAX polling.
|
||||
|
||||
### How sysmonstm Patterns Would Improve It
|
||||
|
||||
**Replace polling with streaming.** Instead of the daemon polling every 2 seconds and the web dashboard polling for updates, use the same event-driven architecture as sysmonstm.
|
||||
|
||||
The daemon becomes an event publisher:
|
||||
|
||||
```python
|
||||
# Conceptual improvement
|
||||
class WorkspaceMonitor:
|
||||
async def run(self):
|
||||
publisher = get_publisher(source="workspace-monitor")
|
||||
await publisher.connect()
|
||||
|
||||
while self.running:
|
||||
workspace = await self.detect_workspace()
|
||||
task = await self.get_current_task()
|
||||
|
||||
if workspace != self.last_workspace or task != self.last_task:
|
||||
await publisher.publish(
|
||||
topic="workspace.switch",
|
||||
payload={
|
||||
"workspace": workspace,
|
||||
"task": task,
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
},
|
||||
)
|
||||
self.last_workspace = workspace
|
||||
self.last_task = task
|
||||
|
||||
await asyncio.sleep(2)
|
||||
```
|
||||
|
||||
The web server subscribes to events and pushes to browsers via WebSocket - exactly like `services/gateway/main.py:88-130`:
|
||||
|
||||
```python
|
||||
async def event_listener():
|
||||
async with get_subscriber(topics=["workspace.*"]) as subscriber:
|
||||
async for event in subscriber.consume():
|
||||
await manager.broadcast({
|
||||
"type": "workspace_switch",
|
||||
"data": event.payload,
|
||||
})
|
||||
```
|
||||
|
||||
The GNOME extension could subscribe directly instead of polling an HTTP endpoint.
|
||||
|
||||
**Add multi-machine support.** With sysmonstm's architecture, tracking multiple machines is trivial. Run the workspace monitor daemon on each machine. Each streams events to an aggregator. The dashboard shows all machines.
|
||||
|
||||
```python
|
||||
# Each machine's monitor includes machine_id
|
||||
await publisher.publish(
|
||||
topic="workspace.switch",
|
||||
payload={
|
||||
"machine_id": self.machine_id, # "workstation", "laptop", etc.
|
||||
"workspace": workspace,
|
||||
"task": task,
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
The dashboard groups by machine or shows a combined view. Same pattern as sysmonstm's multi-machine monitoring.
|
||||
|
||||
**Add focus alerts.** The alert service pattern from `services/alerts/main.py` applies directly:
|
||||
|
||||
```python
|
||||
# Focus time rules
|
||||
FocusRule("context_switching", "switches_per_hour", "gt", 10, "warning")
|
||||
FocusRule("long_idle", "idle_minutes", "gt", 30, "info")
|
||||
FocusRule("deep_work", "focus_minutes", "gt", 90, "success")
|
||||
```
|
||||
|
||||
When you switch tasks more than 10 times in an hour, get a notification. When you've been focused for 90 minutes, celebrate. The evaluator pattern handles both alerts and achievements.
|
||||
|
||||
**Improve time-series storage.** Deskmeter uses MongoDB for everything. With sysmonstm's tiered approach:
|
||||
|
||||
- **Redis**: Current task, current workspace, last 5 minutes of switches
|
||||
- **TimescaleDB**: Historical switches with automatic downsampling
|
||||
|
||||
Query "what was I doing at 3pm yesterday" hits warm storage. Query "how much time did I spend on project X this month" uses aggregated data. Same queries, faster execution.
|
||||
|
||||
### Implementation Path
|
||||
|
||||
1. **Add event publishing to dmcore.** Keep the polling loop but publish events instead of writing directly to MongoDB.
|
||||
|
||||
2. **Add WebSocket to dmweb.** Subscribe to events, push to connected browsers. The calendar view updates in real-time.
|
||||
|
||||
3. **Add Redis for current state.** Dashboard reads current task from Redis instead of querying MongoDB.
|
||||
|
||||
4. **Add focus alerts.** New service that subscribes to workspace events, evaluates rules, publishes alerts.
|
||||
|
||||
5. **Add multi-machine support.** Run dmcore on multiple machines. Aggregate events centrally.
|
||||
|
||||
Each step is independent. The system works after each one. Same phased approach as sysmonstm.
|
||||
|
||||
### Code Mapping
|
||||
|
||||
| sysmonstm Component | Deskmeter Equivalent |
|
||||
|---------------------|---------------------|
|
||||
| `services/collector/` | `dmapp/dmcore/main.py` - workspace monitoring |
|
||||
| `services/aggregator/` | Event aggregation (new) |
|
||||
| `services/gateway/` | `dmapp/dmweb/dm.py` + WebSocket (enhanced) |
|
||||
| `services/alerts/` | Focus alerts service (new) |
|
||||
| `proto/metrics.proto` | Workspace event schema |
|
||||
| `shared/events/` | Same - reusable |
|
||||
|
||||
The event abstraction from sysmonstm (`shared/events/`) works directly. The configuration pattern from `shared/config.py` works directly. The structured logging from `shared/logging.py` works directly.
|
||||
|
||||
## The Common Thread
|
||||
|
||||
Both payment processing and productivity tracking share the same fundamental pattern:
|
||||
|
||||
1. **Multiple data sources** streaming to a central point
|
||||
2. **Normalization** of different formats into consistent schema
|
||||
3. **Real-time processing** for dashboards and alerts
|
||||
4. **Historical storage** for analysis and compliance
|
||||
5. **Event-driven decoupling** for extensibility
|
||||
|
||||
sysmonstm demonstrates these patterns with system metrics. The patterns transfer to any domain with similar characteristics:
|
||||
|
||||
- IoT sensor networks (temperature, humidity, motion)
|
||||
- Log aggregation (application logs from multiple services)
|
||||
- Social media analytics (tweets, posts, mentions)
|
||||
- Trading systems (market data from multiple exchanges)
|
||||
- Fleet management (GPS, fuel, diagnostics from vehicles)
|
||||
|
||||
The specific metrics change. The thresholds change. The domain vocabulary changes. The architecture stays the same.
|
||||
|
||||
Build it once for metrics. Apply it anywhere.
|
||||
@@ -0,0 +1,421 @@
|
||||
# Building sysmonstm: From Idea to Working System
|
||||
|
||||
This is the story of building a distributed system monitoring platform. Not a tutorial with sanitized examples, but an explanation of the actual decisions made, the trade-offs considered, and the code that resulted.
|
||||
|
||||
|
||||
|
||||
## The Problem
|
||||
|
||||
I have multiple development machines. A workstation, a laptop, sometimes a remote VM. Each one occasionally runs out of disk space, hits memory limits, or has a runaway process eating CPU. The pattern was always the same: something breaks, I SSH in, run `htop`, realize the problem, fix it.
|
||||
|
||||
The obvious solution is a monitoring dashboard. Something that shows all machines in one place, updates in real-time, and alerts before things break.
|
||||
|
||||
But the real motivation was an interview. The job description mentioned gRPC, streaming patterns, event-driven architecture. Building a monitoring system would demonstrate all of these while solving an actual problem.
|
||||
|
||||
## Architecture Decisions
|
||||
|
||||
### Why gRPC Instead of REST
|
||||
|
||||
REST would work fine. Poll each machine every few seconds, aggregate the results. Simple.
|
||||
|
||||
But gRPC offers streaming. Instead of the aggregator asking each machine "what are your metrics right now?", each machine opens a persistent connection and continuously pushes metrics. This is more efficient (one connection instead of repeated requests) and lower latency (metrics arrive as soon as they're collected).
|
||||
|
||||
The proto definition in `proto/metrics.proto` defines this as client-side streaming:
|
||||
|
||||
```protobuf
|
||||
service MetricsService {
|
||||
// Client-side streaming: collector streams metrics to aggregator
|
||||
rpc StreamMetrics(stream Metric) returns (StreamAck) {}
|
||||
}
|
||||
```
|
||||
|
||||
The collector is the client. It streams metrics. The aggregator is the server. It receives them. When the stream ends (collector shuts down, network drops), the aggregator gets a `StreamAck` response.
|
||||
|
||||
|
||||
|
||||
### Why This Storage Tier Approach
|
||||
|
||||
Metrics have different access patterns at different ages:
|
||||
|
||||
- **Right now**: The dashboard needs current CPU/memory/disk for all machines. Access pattern: read all, very frequently.
|
||||
- **Last hour**: Graphs showing recent trends. Access pattern: read range, somewhat frequently.
|
||||
- **Last week**: Investigating what happened yesterday. Access pattern: read range, occasionally.
|
||||
- **Last month**: Capacity planning. Access pattern: aggregated queries, rarely.
|
||||
|
||||
Storing everything in one place forces a choice between fast reads (keep it all in memory) and storage efficiency (keep it on disk). The solution is tiered storage:
|
||||
|
||||
- **Redis** (`services/aggregator/storage.py`): Current state only. Each machine's latest metrics, with 5-minute TTL. Dashboard reads hit Redis.
|
||||
- **TimescaleDB** (`scripts/init-db.sql`): Historical data. Raw metrics at 5-second resolution for 24 hours, then automatically downsampled to 1-minute and 1-hour aggregates with longer retention.
|
||||
|
||||
The aggregator writes to both on every batch. Redis for live dashboard. TimescaleDB for history.
|
||||
|
||||
|
||||
|
||||
### Why Event-Driven for Alerts
|
||||
|
||||
The alerts service needs to evaluate every metric against threshold rules. Two options:
|
||||
|
||||
1. **Direct call**: Aggregator calls alerts service for each metric batch.
|
||||
2. **Event stream**: Aggregator publishes events. Alerts service subscribes.
|
||||
|
||||
Option 2 decouples them. The aggregator doesn't know or care if the alerts service is running. It publishes events regardless. The alerts service can be restarted, scaled, or replaced without touching the aggregator.
|
||||
|
||||
The event abstraction in `shared/events/base.py` defines the interface:
|
||||
|
||||
```python
|
||||
class EventPublisher(ABC):
|
||||
@abstractmethod
|
||||
async def publish(self, topic: str, payload: dict[str, Any], **kwargs) -> str:
|
||||
pass
|
||||
|
||||
class EventSubscriber(ABC):
|
||||
@abstractmethod
|
||||
async def consume(self) -> AsyncIterator[Event]:
|
||||
pass
|
||||
```
|
||||
|
||||
Currently backed by Redis Pub/Sub (`shared/events/redis_pubsub.py`). The abstraction means switching to Kafka or RabbitMQ later requires implementing a new backend, not changing any service code.
|
||||
|
||||
|
||||
|
||||
## Phase 1: MVP - Getting Streaming to Work
|
||||
|
||||
The goal was simple: run a collector, see metrics appear in the aggregator's logs.
|
||||
|
||||
### The Collector
|
||||
|
||||
`services/collector/main.py` is a gRPC client. The core is an async generator that yields metrics forever:
|
||||
|
||||
```python
|
||||
async def _metric_generator(self):
|
||||
"""Async generator that yields metrics at the configured interval."""
|
||||
while self.running:
|
||||
batch = self.collector.collect()
|
||||
protos = self._batch_to_proto(batch)
|
||||
|
||||
for proto in protos:
|
||||
yield proto
|
||||
|
||||
await asyncio.sleep(self.config.collection_interval)
|
||||
```
|
||||
|
||||
This generator is passed directly to the gRPC stub:
|
||||
|
||||
```python
|
||||
response = await self.stub.StreamMetrics(self._metric_generator())
|
||||
```
|
||||
|
||||
The gRPC library handles the streaming. Each `yield` sends a message. The connection stays open until the generator stops or the network fails.
|
||||
|
||||
The actual metric collection happens in `services/collector/metrics.py` using `psutil`:
|
||||
|
||||
```python
|
||||
def _collect_cpu(self) -> list[MetricValue]:
|
||||
metrics = []
|
||||
cpu_percent = psutil.cpu_percent(interval=None)
|
||||
metrics.append(MetricValue("CPU_PERCENT", cpu_percent))
|
||||
|
||||
per_core = psutil.cpu_percent(interval=None, percpu=True)
|
||||
for i, pct in enumerate(per_core):
|
||||
metrics.append(MetricValue(
|
||||
"CPU_PERCENT_PER_CORE",
|
||||
pct,
|
||||
{"core": str(i)}
|
||||
))
|
||||
return metrics
|
||||
```
|
||||
|
||||
### The Aggregator
|
||||
|
||||
`services/aggregator/main.py` is a gRPC server. The `StreamMetrics` method receives the stream:
|
||||
|
||||
```python
|
||||
async def StreamMetrics(self, request_iterator, context):
|
||||
metrics_received = 0
|
||||
current_batch: list[tuple[str, float, dict]] = []
|
||||
|
||||
async for metric in request_iterator:
|
||||
metrics_received += 1
|
||||
|
||||
metric_type = metrics_pb2.MetricType.Name(metric.type)
|
||||
current_batch.append((metric_type, metric.value, dict(metric.labels)))
|
||||
|
||||
if len(current_batch) >= 20:
|
||||
await self._flush_batch(...)
|
||||
current_batch = []
|
||||
```
|
||||
|
||||
The `request_iterator` is an async iterator over incoming metrics. The `async for` loop processes them as they arrive. Batching (flush every 20 metrics) reduces storage writes.
|
||||
|
||||
### Retry Logic
|
||||
|
||||
Networks fail. The collector needs to reconnect. The pattern is exponential backoff:
|
||||
|
||||
```python
|
||||
retry_count = 0
|
||||
max_retries = 10
|
||||
base_delay = 1.0
|
||||
|
||||
while self.running:
|
||||
try:
|
||||
await self.stub.StreamMetrics(self._metric_generator())
|
||||
retry_count = 0 # Success - reset counter
|
||||
except grpc.aio.AioRpcError as e:
|
||||
retry_count += 1
|
||||
delay = min(base_delay * (2**retry_count), 60.0) # Cap at 60 seconds
|
||||
await asyncio.sleep(delay)
|
||||
await self.disconnect()
|
||||
await self.connect()
|
||||
```
|
||||
|
||||
First failure waits 2 seconds. Second waits 4. Third waits 8. Capped at 60 seconds. After 10 failures, give up.
|
||||
|
||||
## Phase 2: Dashboard - Making It Visible
|
||||
|
||||
Metrics in logs are useless. A dashboard makes them useful.
|
||||
|
||||
### The Gateway
|
||||
|
||||
`services/gateway/main.py` is a FastAPI application serving two purposes:
|
||||
|
||||
1. **REST API**: Query current and historical metrics
|
||||
2. **WebSocket**: Push real-time updates to browsers
|
||||
|
||||
The WebSocket connection manager (`services/gateway/main.py:40-67`) tracks active connections:
|
||||
|
||||
```python
|
||||
class ConnectionManager:
|
||||
def __init__(self):
|
||||
self.active_connections: list[WebSocket] = []
|
||||
|
||||
async def broadcast(self, message: dict) -> None:
|
||||
data = json.dumps(message)
|
||||
for connection in self.active_connections:
|
||||
await connection.send_text(data)
|
||||
```
|
||||
|
||||
### Event to WebSocket Bridge
|
||||
|
||||
The gateway subscribes to the same event stream as alerts. When a metric event arrives, it broadcasts to all connected browsers:
|
||||
|
||||
```python
|
||||
async def event_listener():
|
||||
async with get_subscriber(topics=["metrics.raw", "alerts.*"]) as subscriber:
|
||||
async for event in subscriber.consume():
|
||||
await manager.broadcast({
|
||||
"type": "metrics",
|
||||
"data": event.payload,
|
||||
"timestamp": event.timestamp.isoformat(),
|
||||
})
|
||||
```
|
||||
|
||||
This runs as a background task, started in the FastAPI lifespan handler (`services/gateway/main.py:145-175`).
|
||||
|
||||
### Handling Partial Batches
|
||||
|
||||
The aggregator batches metrics (flush every 20). This means a single collection cycle might arrive as multiple events. The dashboard needs complete machine state, not partial updates.
|
||||
|
||||
Solution: merge incoming metrics into a cache (`services/gateway/main.py:108-120`):
|
||||
|
||||
```python
|
||||
machine_metrics_cache: dict[str, dict] = {}
|
||||
|
||||
# In event_listener:
|
||||
machine_id = event.payload.get("machine_id", "")
|
||||
incoming_metrics = event.payload.get("metrics", {})
|
||||
|
||||
if machine_id not in machine_metrics_cache:
|
||||
machine_metrics_cache[machine_id] = {}
|
||||
machine_metrics_cache[machine_id].update(incoming_metrics)
|
||||
```
|
||||
|
||||
New metrics merge with existing. The broadcast includes the full merged state.
|
||||
|
||||
## Phase 3: Alerts - Adding Intelligence
|
||||
|
||||
The alerts service subscribes to metric events and evaluates them against rules.
|
||||
|
||||
### Rule Evaluation
|
||||
|
||||
`services/alerts/main.py` defines an `AlertEvaluator` class:
|
||||
|
||||
```python
|
||||
class AlertEvaluator:
|
||||
OPERATORS = {
|
||||
"gt": lambda v, t: v > t,
|
||||
"lt": lambda v, t: v < t,
|
||||
"gte": lambda v, t: v >= t,
|
||||
"lte": lambda v, t: v <= t,
|
||||
"eq": lambda v, t: v == t,
|
||||
}
|
||||
|
||||
def evaluate(self, machine_id: str, metrics: dict[str, float]) -> list[Alert]:
|
||||
new_alerts = []
|
||||
for metric_type, value in metrics.items():
|
||||
rule = self.rules.get(metric_type)
|
||||
if not rule:
|
||||
continue
|
||||
|
||||
op_func = self.OPERATORS.get(rule.operator)
|
||||
if op_func(value, rule.threshold):
|
||||
# Threshold exceeded
|
||||
new_alerts.append(Alert(...))
|
||||
return new_alerts
|
||||
```
|
||||
|
||||
### Avoiding Duplicate Alerts
|
||||
|
||||
If CPU stays above 80% for an hour, we want one alert, not 720 (one per 5-second check).
|
||||
|
||||
The evaluator tracks active alerts:
|
||||
|
||||
```python
|
||||
self.active_alerts: dict[str, Alert] = {} # key: f"{machine_id}:{rule_name}"
|
||||
|
||||
# In evaluate():
|
||||
alert_key = f"{machine_id}:{rule.name}"
|
||||
if op_func(value, rule.threshold):
|
||||
if alert_key not in self.active_alerts:
|
||||
# New alert - trigger it
|
||||
self.active_alerts[alert_key] = alert
|
||||
new_alerts.append(alert)
|
||||
# Otherwise already active - ignore
|
||||
else:
|
||||
# Threshold no longer exceeded - resolve
|
||||
if alert_key in self.active_alerts:
|
||||
del self.active_alerts[alert_key]
|
||||
```
|
||||
|
||||
New alert only triggers if not already in `active_alerts`. When the metric drops below threshold, the alert is removed and can trigger again later.
|
||||
|
||||
## Phase 4: Polish - Production Patterns
|
||||
|
||||
### Structured Logging
|
||||
|
||||
Every service uses `shared/logging.py` for structured JSON logging:
|
||||
|
||||
```python
|
||||
logger.info(
|
||||
"stream_completed",
|
||||
machine_id=current_machine,
|
||||
metrics_received=metrics_received,
|
||||
)
|
||||
```
|
||||
|
||||
Output:
|
||||
```json
|
||||
{"event": "stream_completed", "machine_id": "workstation", "metrics_received": 1500, "timestamp": "..."}
|
||||
```
|
||||
|
||||
This is searchable. "Show me all logs where metrics_received > 1000" is a simple query.
|
||||
|
||||
### Health Checks
|
||||
|
||||
Every service has health endpoints. The aggregator uses gRPC health checking (`services/aggregator/main.py:236-240`):
|
||||
|
||||
```python
|
||||
health_servicer = health.HealthServicer()
|
||||
health_servicer.set("", health_pb2.HealthCheckResponse.SERVING)
|
||||
health_servicer.set("MetricsService", health_pb2.HealthCheckResponse.SERVING)
|
||||
health_pb2_grpc.add_HealthServicer_to_server(health_servicer, self.server)
|
||||
```
|
||||
|
||||
The gateway has HTTP health endpoints (`services/gateway/main.py:197-216`):
|
||||
|
||||
```python
|
||||
@app.get("/ready")
|
||||
async def readiness_check():
|
||||
checks = {"gateway": "ok"}
|
||||
|
||||
try:
|
||||
await grpc_stub.GetAllStates(metrics_pb2.Empty(), timeout=2.0)
|
||||
checks["aggregator"] = "ok"
|
||||
except Exception as e:
|
||||
checks["aggregator"] = f"error: {str(e)}"
|
||||
|
||||
return {"status": "ready", "checks": checks}
|
||||
```
|
||||
|
||||
### Graceful Degradation
|
||||
|
||||
The aggregator continues streaming even if storage fails (`services/aggregator/main.py:137-152`):
|
||||
|
||||
```python
|
||||
try:
|
||||
await self.redis.update_machine_state(...)
|
||||
except Exception as e:
|
||||
self.logger.warning("redis_update_failed", error=str(e))
|
||||
# Don't re-raise - continue processing
|
||||
|
||||
try:
|
||||
await self.timescale.insert_metrics(...)
|
||||
except Exception as e:
|
||||
self.logger.warning("timescale_insert_failed", error=str(e))
|
||||
# Don't re-raise - continue processing
|
||||
```
|
||||
|
||||
Redis down? Metrics still flow to TimescaleDB. TimescaleDB down? Metrics still flow to the event stream. This keeps the system partially functional during partial failures.
|
||||
|
||||
### Configuration
|
||||
|
||||
All configuration uses Pydantic with environment variable support (`shared/config.py`):
|
||||
|
||||
```python
|
||||
class CollectorConfig(BaseSettings):
|
||||
machine_id: str = Field(default_factory=lambda: socket.gethostname())
|
||||
aggregator_url: str = "aggregator:50051"
|
||||
collection_interval: int = 5
|
||||
|
||||
model_config = SettingsConfigDict(env_prefix="COLLECTOR_")
|
||||
```
|
||||
|
||||
Set `COLLECTOR_AGGREGATOR_URL=192.168.1.100:50051` and it overrides the default. No code changes for different environments.
|
||||
|
||||
## What Worked
|
||||
|
||||
**The event abstraction.** Adding a new consumer (like the gateway's WebSocket bridge) required zero changes to the aggregator. Subscribe to the topic, process events.
|
||||
|
||||
**Tiered storage.** Redis handles the hot path (dashboard reads). TimescaleDB handles history. Each optimized for its access pattern.
|
||||
|
||||
**Graceful degradation.** During development, I regularly restarted individual services. The system stayed partially functional throughout.
|
||||
|
||||
## What Could Be Better
|
||||
|
||||
**No backpressure.** If the aggregator falls behind, events accumulate in memory. A production system would need flow control.
|
||||
|
||||
**Alert rules are database-only.** Changing thresholds requires database updates. A proper config management system would be better.
|
||||
|
||||
**No authentication.** The gRPC channels are insecure. Production would need TLS and service authentication.
|
||||
|
||||
## Key Files Reference
|
||||
|
||||
| Component | File | Purpose |
|
||||
|-----------|------|---------|
|
||||
| Proto definitions | `proto/metrics.proto` | gRPC service and message definitions |
|
||||
| Collector main | `services/collector/main.py` | gRPC client, streaming logic |
|
||||
| Metric collection | `services/collector/metrics.py` | psutil wrappers |
|
||||
| Aggregator main | `services/aggregator/main.py` | gRPC server, batch processing |
|
||||
| Storage layer | `services/aggregator/storage.py` | Redis + TimescaleDB abstraction |
|
||||
| Gateway main | `services/gateway/main.py` | FastAPI, WebSocket, event bridge |
|
||||
| Alerts main | `services/alerts/main.py` | Event subscription, rule evaluation |
|
||||
| Event abstraction | `shared/events/base.py` | Publisher/subscriber interfaces |
|
||||
| Redis events | `shared/events/redis_pubsub.py` | Redis Pub/Sub implementation |
|
||||
| Configuration | `shared/config.py` | Pydantic settings for all services |
|
||||
| DB initialization | `scripts/init-db.sql` | TimescaleDB schema, hypertables |
|
||||
| Docker setup | `docker-compose.yml` | Full stack orchestration |
|
||||
|
||||
## Running It
|
||||
|
||||
```bash
|
||||
docker compose up
|
||||
```
|
||||
|
||||
Open `http://localhost:8000` for the dashboard. Metrics appear within seconds.
|
||||
|
||||
To add another machine, run the collector pointed at your aggregator:
|
||||
|
||||
```bash
|
||||
COLLECTOR_AGGREGATOR_URL=your-server:50051 python services/collector/main.py
|
||||
```
|
||||
|
||||
It connects, starts streaming, and appears on the dashboard.
|
||||
425
atlas/books/sysmonstm/explainer/viewer.html
Normal file
425
atlas/books/sysmonstm/explainer/viewer.html
Normal file
@@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loading... - System Monitor Docs</title>
|
||||
<link rel="stylesheet" href="../architecture/styles.css">
|
||||
<link rel="stylesheet" href="../static/prism/prism-tomorrow.min.css">
|
||||
<link rel="stylesheet" href="../static/prism/prism-line-numbers.min.css">
|
||||
<style>
|
||||
/* Article layout */
|
||||
.article-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.article-header h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Markdown content styling */
|
||||
.markdown-content {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.markdown-content h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--accent);
|
||||
margin: 2rem 0 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.markdown-content h2 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
margin: 2rem 0 1rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.markdown-content h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent);
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-content h4 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.markdown-content p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-content ul, .markdown-content ol {
|
||||
margin: 1rem 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.markdown-content li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.markdown-content blockquote {
|
||||
border-left: 4px solid var(--accent);
|
||||
margin: 1.5rem 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.markdown-content blockquote p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown-content pre {
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-content pre[class*="language-"] {
|
||||
background: #1e293b;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.markdown-content code:not([class*="language-"]) {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
color: var(--accent);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
}
|
||||
|
||||
.markdown-content code[class*="language-"] {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.markdown-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.markdown-content th,
|
||||
.markdown-content td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.markdown-content th {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-content td {
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.markdown-content tr:hover td {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Strong/bold */
|
||||
.markdown-content strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Horizontal rules */
|
||||
.markdown-content hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Images/Diagrams */
|
||||
.markdown-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Diagram container */
|
||||
.diagram {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.diagram img {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.diagram-caption {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 4rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-left: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Error state */
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 4rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Table of contents */
|
||||
.toc {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.toc h4 {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--accent);
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.toc .toc-h3 {
|
||||
padding-left: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>System Monitoring Platform</h1>
|
||||
<p class="subtitle">Documentation</p>
|
||||
</header>
|
||||
|
||||
<main class="article-container">
|
||||
<a href="../index.html" class="back-link">← Back to Index</a>
|
||||
|
||||
<div id="toc" class="toc" style="display: none;">
|
||||
<h4>Contents</h4>
|
||||
<ul id="toc-list"></ul>
|
||||
</div>
|
||||
|
||||
<article id="content" class="markdown-content">
|
||||
<div class="loading">Loading article</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>System Monitoring Platform - Documentation</p>
|
||||
</footer>
|
||||
|
||||
<!-- Markdown parser -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
|
||||
<!-- Prism syntax highlighting -->
|
||||
<script src="../static/prism/prism.min.js"></script>
|
||||
<script src="../static/prism/prism-python.min.js"></script>
|
||||
<script src="../static/prism/prism-bash.min.js"></script>
|
||||
<script src="../static/prism/prism-protobuf.min.js"></script>
|
||||
<script src="../static/prism/prism-json.min.js"></script>
|
||||
<script src="../static/prism/prism-line-numbers.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Get the markdown file from URL parameter
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const file = params.get('file');
|
||||
|
||||
if (!file) {
|
||||
document.getElementById('content').innerHTML = '<div class="error">No file specified. Use ?file=filename.md</div>';
|
||||
} else {
|
||||
loadMarkdown(file);
|
||||
}
|
||||
|
||||
async function loadMarkdown(filename) {
|
||||
try {
|
||||
const response = await fetch(filename);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load ${filename}`);
|
||||
}
|
||||
|
||||
const markdown = await response.text();
|
||||
renderMarkdown(markdown, filename);
|
||||
} catch (error) {
|
||||
document.getElementById('content').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderMarkdown(markdown, filename) {
|
||||
// Configure marked
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
breaks: false,
|
||||
headerIds: true,
|
||||
mangle: false,
|
||||
});
|
||||
|
||||
// Custom renderer for code blocks
|
||||
const renderer = new marked.Renderer();
|
||||
|
||||
renderer.code = function(code, language) {
|
||||
const lang = language || 'plaintext';
|
||||
const langClass = `language-${lang}`;
|
||||
// Escape HTML in code
|
||||
const escaped = code
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
return `<pre class="line-numbers"><code class="${langClass}">${escaped}</code></pre>`;
|
||||
};
|
||||
|
||||
// Custom heading renderer to add IDs
|
||||
renderer.heading = function(text, level) {
|
||||
const id = text.toLowerCase()
|
||||
.replace(/<[^>]*>/g, '')
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/\s+/g, '-');
|
||||
return `<h${level} id="${id}">${text}</h${level}>`;
|
||||
};
|
||||
|
||||
marked.setOptions({ renderer });
|
||||
|
||||
// Render markdown
|
||||
const html = marked.parse(markdown);
|
||||
document.getElementById('content').innerHTML = html;
|
||||
|
||||
// Extract title from first h1
|
||||
const titleMatch = markdown.match(/^#\s+(.+)$/m);
|
||||
if (titleMatch) {
|
||||
document.title = titleMatch[1] + ' - System Monitor Docs';
|
||||
}
|
||||
|
||||
// Build table of contents
|
||||
buildToc();
|
||||
|
||||
// Apply Prism highlighting
|
||||
Prism.highlightAll();
|
||||
}
|
||||
|
||||
function buildToc() {
|
||||
const content = document.getElementById('content');
|
||||
const headings = content.querySelectorAll('h2, h3');
|
||||
const tocList = document.getElementById('toc-list');
|
||||
|
||||
if (headings.length < 3) {
|
||||
return; // Don't show TOC for short articles
|
||||
}
|
||||
|
||||
headings.forEach(heading => {
|
||||
const li = document.createElement('li');
|
||||
if (heading.tagName === 'H3') {
|
||||
li.className = 'toc-h3';
|
||||
}
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = '#' + heading.id;
|
||||
a.textContent = heading.textContent;
|
||||
li.appendChild(a);
|
||||
tocList.appendChild(li);
|
||||
});
|
||||
|
||||
document.getElementById('toc').style.display = 'block';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user