d-bis/Sankofa
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7cd7022f6e0d6ff4232c47cbf4c19cfbc704e102
Sankofa/docs/architecture/data-flow.svg
defiQUG 6f28146ac3 Initial Phoenix Sankofa Cloud setup 
- Complete project structure with Next.js frontend
- GraphQL API backend with Apollo Server
- Portal application with NextAuth
- Crossplane Proxmox provider
- GitOps configurations
- CI/CD pipelines
- Testing infrastructure (Vitest, Jest, Go tests)
- Error handling and monitoring
- Security hardening
- UI component library
- Documentation
2025-11-28 12:54:33 -08:00

226 lines
11 KiB
XML
Raw Blame History

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900">
<defs>
<style>
.user { fill: #9B59B6; stroke: #7D3C98; stroke-width: 2; }
.cloudflare { fill: #F38020; stroke: #C85F00; }
.portal { fill: #00D4AA; stroke: #00A888; }
.auth { fill: #E74C3C; stroke: #C0392B; }
.k8s { fill: #326CE5; stroke: #1E4A8A; }
.proxmox { fill: #E57000; stroke: #B85900; }
.text { font-family: Arial, sans-serif; font-size: 11px; fill: #333; }
.title { font-size: 14px; font-weight: bold; }
.arrow { stroke: #333; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
.flow-label { font-size: 10px; fill: #666; }
</style>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#333" />
</marker>
</defs>
<text x="700" y="30" text-anchor="middle" class="text title">Data Flow Diagrams - Authentication & Provisioning</text>
<!-- Authentication Flow Section -->
<text x="350" y="70" text-anchor="middle" class="text title">1. Authentication Flow</text>
<!-- User -->
<circle cx="100" cy="150" r="40" class="user"/>
<text x="100" y="155" text-anchor="middle" class="text" fill="white">User</text>
<!-- Cloudflare Access -->
<rect x="200" y="120" width="120" height="60" class="cloudflare" rx="5"/>
<text x="260" y="145" text-anchor="middle" class="text" fill="white">Cloudflare</text>
<text x="260" y="165" text-anchor="middle" class="text" fill="white">Access</text>
<!-- Portal -->
<rect x="380" y="120" width="120" height="60" class="portal" rx="5"/>
<text x="440" y="145" text-anchor="middle" class="text" fill="white">Portal</text>
<text x="440" y="165" text-anchor="middle" class="text" fill="white">(Next.js)</text>
<!-- Keycloak -->
<rect x="560" y="120" width="120" height="60" class="auth" rx="5"/>
<text x="620" y="145" text-anchor="middle" class="text" fill="white">Keycloak</text>
<text x="620" y="165" text-anchor="middle" class="text" fill="white">OIDC</text>
<!-- Auth Flow Arrows -->
<line x1="140" y1="150" x2="200" y2="150" class="arrow"/>
<text x="170" y="145" class="flow-label">1. Request</text>
<line x1="320" y1="150" x2="380" y2="150" class="arrow"/>
<text x="350" y="145" class="flow-label">2. Redirect</text>
<line x1="500" y1="150" x2="560" y2="150" class="arrow"/>
<text x="530" y="145" class="flow-label">3. Auth</text>
<line x1="560" y1="180" x2="500" y2="180" class="arrow"/>
<text x="530" y="185" class="flow-label">4. JWT</text>
<line x1="380" y1="180" x2="320" y2="180" class="arrow"/>
<text x="350" y="185" class="flow-label">5. Token</text>
<line x1="200" y1="180" x2="140" y2="180" class="arrow"/>
<text x="170" y="185" class="flow-label">6. Session</text>
<!-- Provisioning Flow Section -->
<text x="1050" y="70" text-anchor="middle" class="text title">2. VM Provisioning Flow</text>
<!-- User Action -->
<circle cx="900" cy="150" r="40" class="user"/>
<text x="900" y="155" text-anchor="middle" class="text" fill="white">User</text>
<!-- Portal -->
<rect x="1000" y="120" width="120" height="60" class="portal" rx="5"/>
<text x="1060" y="145" text-anchor="middle" class="text" fill="white">Portal</text>
<text x="1060" y="165" text-anchor="middle" class="text" fill="white">UI</text>
<!-- Crossplane -->
<rect x="1180" y="120" width="120" height="60" class="k8s" rx="5"/>
<text x="1240" y="145" text-anchor="middle" class="text" fill="white">Crossplane</text>
<text x="1240" y="165" text-anchor="middle" class="text" fill="white">API</text>
<!-- ArgoCD -->
<rect x="1360" y="120" width="120" height="60" class="k8s" rx="5"/>
<text x="1420" y="145" text-anchor="middle" class="text" fill="white">ArgoCD</text>
<text x="1420" y="165" text-anchor="middle" class="text" fill="white">GitOps</text>
<!-- Provisioning Flow Arrows -->
<line x1="940" y1="150" x2="1000" y2="150" class="arrow"/>
<text x="970" y="145" class="flow-label">1. Create VM</text>
<line x1="1120" y1="150" x2="1180" y2="150" class="arrow"/>
<text x="1150" y="145" class="flow-label">2. CRD</text>
<line x1="1300" y1="150" x2="1360" y2="150" class="arrow"/>
<text x="1330" y="145" class="flow-label">3. Sync</text>
<!-- Proxmox Provider -->
<rect x="1180" y="250" width="120" height="60" class="proxmox" rx="5"/>
<text x="1240" y="275" text-anchor="middle" class="text" fill="white">Proxmox</text>
<text x="1240" y="295" text-anchor="middle" class="text" fill="white">Provider</text>
<!-- Proxmox Site -->
<rect x="1360" y="250" width="120" height="60" class="proxmox" rx="5"/>
<text x="1420" y="275" text-anchor="middle" class="text" fill="white">Proxmox</text>
<text x="1420" y="295" text-anchor="middle" class="text" fill="white">Site</text>
<line x1="1240" y1="250" x2="1240" y2="220" class="arrow"/>
<text x="1270" y="235" class="flow-label">4. Reconcile</text>
<line x1="1300" y1="280" x2="1360" y2="280" class="arrow"/>
<text x="1330" y="275" class="flow-label">5. API Call</text>
<line x1="1360" y1="310" x2="1300" y2="310" class="arrow"/>
<text x="1330" y="315" class="flow-label">6. Status</text>
<!-- Monitoring Flow Section -->
<text x="350" y="400" text-anchor="middle" class="text title">3. Monitoring & Observability Flow</text>
<!-- Proxmox Node -->
<rect x="50" y="450" width="120" height="60" class="proxmox" rx="5"/>
<text x="110" y="475" text-anchor="middle" class="text" fill="white">Proxmox</text>
<text x="110" y="495" text-anchor="middle" class="text" fill="white">Node</text>
<!-- Exporter -->
<rect x="220" y="450" width="120" height="60" class="k8s" rx="5"/>
<text x="280" y="475" text-anchor="middle" class="text" fill="white">pve-exporter</text>
<text x="280" y="495" text-anchor="middle" class="text" fill="white">Prometheus</text>
<!-- Prometheus -->
<rect x="390" y="450" width="120" height="60" class="k8s" rx="5"/>
<text x="450" y="475" text-anchor="middle" class="text" fill="white">Prometheus</text>
<text x="450" y="495" text-anchor="middle" class="text" fill="white">Metrics DB</text>
<!-- Grafana -->
<rect x="560" y="450" width="120" height="60" class="portal" rx="5"/>
<text x="620" y="475" text-anchor="middle" class="text" fill="white">Grafana</text>
<text x="620" y="495" text-anchor="middle" class="text" fill="white">Dashboards</text>
<!-- Portal -->
<rect x="730" y="450" width="120" height="60" class="portal" rx="5"/>
<text x="790" y="475" text-anchor="middle" class="text" fill="white">Portal</text>
<text x="790" y="495" text-anchor="middle" class="text" fill="white">Embed</text>
<!-- Monitoring Flow Arrows -->
<line x1="170" y1="480" x2="220" y2="480" class="arrow"/>
<text x="195" y="475" class="flow-label">1. Metrics</text>
<line x1="340" y1="480" x2="390" y2="480" class="arrow"/>
<text x="365" y="475" class="flow-label">2. Scrape</text>
<line x1="510" y1="480" x2="560" y2="480" class="arrow"/>
<text x="535" y="475" class="flow-label">3. Query</text>
<line x1="680" y1="480" x2="730" y2="480" class="arrow"/>
<text x="705" y="475" class="flow-label">4. Display</text>
<!-- Log Flow Section -->
<text x="1050" y="400" text-anchor="middle" class="text title">4. Log Aggregation Flow</text>
<!-- Services -->
<rect x="900" y="450" width="120" height="60" class="k8s" rx="5"/>
<text x="960" y="475" text-anchor="middle" class="text" fill="white">Services</text>
<text x="960" y="495" text-anchor="middle" class="text" fill="white">(K8s/VMs)</text>
<!-- Promtail -->
<rect x="1070" y="450" width="120" height="60" class="k8s" rx="5"/>
<text x="1130" y="475" text-anchor="middle" class="text" fill="white">Promtail</text>
<text x="1130" y="495" text-anchor="middle" class="text" fill="white">Collector</text>
<!-- Loki -->
<rect x="1240" y="450" width="120" height="60" class="k8s" rx="5"/>
<text x="1300" y="475" text-anchor="middle" class="text" fill="white">Loki</text>
<text x="1300" y="495" text-anchor="middle" class="text" fill="white">Log Store</text>
<!-- Portal -->
<rect x="1410" y="450" width="120" height="60" class="portal" rx="5"/>
<text x="1470" y="475" text-anchor="middle" class="text" fill="white">Portal</text>
<text x="1470" y="495" text-anchor="middle" class="text" fill="white">Viewer</text>
<!-- Log Flow Arrows -->
<line x1="1020" y1="480" x2="1070" y2="480" class="arrow"/>
<text x="1045" y="475" class="flow-label">1. Logs</text>
<line x1="1190" y1="480" x2="1240" y2="480" class="arrow"/>
<text x="1215" y="475" class="flow-label">2. Ship</text>
<line x1="1360" y1="480" x2="1410" y2="480" class="arrow"/>
<text x="1385" y="475" class="flow-label">3. Query</text>
<!-- GitOps Flow Section -->
<text x="700" y="600" text-anchor="middle" class="text title">5. GitOps Deployment Flow</text>
<!-- Developer -->
<circle cx="200" cy="700" r="40" class="user"/>
<text x="200" y="705" text-anchor="middle" class="text" fill="white">Dev</text>
<!-- Git Repo -->
<rect x="300" y="670" width="120" height="60" class="k8s" rx="5"/>
<text x="360" y="695" text-anchor="middle" class="text" fill="white">Git Repo</text>
<text x="360" y="715" text-anchor="middle" class="text" fill="white">(Manifests)</text>
<!-- ArgoCD -->
<rect x="480" y="670" width="120" height="60" class="k8s" rx="5"/>
<text x="540" y="695" text-anchor="middle" class="text" fill="white">ArgoCD</text>
<text x="540" y="715" text-anchor="middle" class="text" fill="white">Controller</text>
<!-- Kubernetes -->
<rect x="660" y="670" width="120" height="60" class="k8s" rx="5"/>
<text x="720" y="695" text-anchor="middle" class="text" fill="white">Kubernetes</text>
<text x="720" y="715" text-anchor="middle" class="text" fill="white">API Server</text>
<!-- Crossplane -->
<rect x="840" y="670" width="120" height="60" class="k8s" rx="5"/>
<text x="900" y="695" text-anchor="middle" class="text" fill="white">Crossplane</text>
<text x="900" y="715" text-anchor="middle" class="text" fill="white">Providers</text>
<!-- Infrastructure -->
<rect x="1020" y="670" width="120" height="60" class="proxmox" rx="5"/>
<text x="1080" y="695" text-anchor="middle" class="text" fill="white">Infra</text>
<text x="1080" y="715" text-anchor="middle" class="text" fill="white">(Proxmox)</text>
<!-- GitOps Flow Arrows -->
<line x1="240" y1="700" x2="300" y2="700" class="arrow"/>
<text x="270" y="695" class="flow-label">1. Commit</text>
<line x1="420" y1="700" x2="480" y2="700" class="arrow"/>
<text x="450" y="695" class="flow-label">2. Poll</text>
<line x1="600" y1="700" x2="660" y2="700" class="arrow"/>
<text x="630" y="695" class="flow-label">3. Apply</text>
<line x1="780" y1="700" x2="840" y2="700" class="arrow"/>
<text x="810" y="695" class="flow-label">4. Reconcile</text>
<line x1="960" y1="700" x2="1020" y2="700" class="arrow"/>
<text x="990" y="695" class="flow-label">5. Provision</text>
<!-- Status Feedback -->
<line x1="1020" y1="730" x2="960" y2="730" class="arrow" stroke-dasharray="3,3"/>
<text x="990" y="735" class="flow-label">6. Status</text>
<line x1="840" y1="730" x2="780" y2="730" class="arrow" stroke-dasharray="3,3"/>
<line x1="660" y1="730" x2="600" y2="730" class="arrow" stroke-dasharray="3,3"/>
<line x1="480" y1="730" x2="420" y2="730" class="arrow" stroke-dasharray="3,3"/>
</svg>
Reference in New Issue View Git Blame Copy Permalink