89 أسطر
5.7 KiB
XML
89 أسطر
5.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 350" font-family="Segoe UI, Arial, sans-serif">
|
|
<defs>
|
|
<linearGradient id="cbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
|
<stop offset="100%" style="stop-color:#1e293b"/>
|
|
</linearGradient>
|
|
<filter id="csh" x="-10%" y="-10%" width="120%" height="130%">
|
|
<feDropShadow dx="0" dy="3" stdDeviation="5" flood-opacity="0.3"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<rect width="900" height="350" fill="url(#cbg)" rx="12"/>
|
|
|
|
<!-- Title -->
|
|
<text x="450" y="38" text-anchor="middle" fill="#e2e8f0" font-size="18" font-weight="700">Q3: CI/CD Pipeline — GitHub Actions + Ghaymah</text>
|
|
<text x="450" y="58" text-anchor="middle" fill="#94a3b8" font-size="11">Automated Build → Push → Deploy with Manual Approval Gate</text>
|
|
|
|
<!-- Pipeline Steps -->
|
|
<!-- Step 1: Push -->
|
|
<rect x="20" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1.5" filter="url(#csh)"/>
|
|
<text x="80" y="118" text-anchor="middle" fill="#64748b" font-size="9" font-weight="600">TRIGGER</text>
|
|
<text x="80" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">git push</text>
|
|
<text x="80" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">main branch</text>
|
|
|
|
<!-- Arrow 1 -->
|
|
<line x1="140" y1="130" x2="170" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
|
<defs><marker id="carrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#475569"/></marker></defs>
|
|
|
|
<!-- Step 2: Build -->
|
|
<rect x="175" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#3b82f6" stroke-width="1.5" filter="url(#csh)"/>
|
|
<text x="235" y="118" text-anchor="middle" fill="#3b82f6" font-size="9" font-weight="600">BUILD</text>
|
|
<text x="235" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Docker</text>
|
|
<text x="235" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">docker build</text>
|
|
|
|
<!-- Arrow 2 -->
|
|
<line x1="295" y1="130" x2="325" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
|
|
|
<!-- Step 3: Test -->
|
|
<rect x="330" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#eab308" stroke-width="1.5" filter="url(#csh)"/>
|
|
<text x="390" y="118" text-anchor="middle" fill="#eab308" font-size="9" font-weight="600">TEST</text>
|
|
<text x="390" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">npm test</text>
|
|
<text x="390" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">Verify build</text>
|
|
|
|
<!-- Arrow 3 -->
|
|
<line x1="450" y1="130" x2="480" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
|
|
|
<!-- Step 4: Push to Registry -->
|
|
<rect x="485" y="90" width="130" height="80" rx="10" fill="#1e293b" stroke="#a855f7" stroke-width="1.5" filter="url(#csh)"/>
|
|
<text x="550" y="118" text-anchor="middle" fill="#a855f7" font-size="9" font-weight="600">PUSH</text>
|
|
<text x="550" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Registry</text>
|
|
<text x="550" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">ghaymah CR</text>
|
|
|
|
<!-- Arrow 4 -->
|
|
<line x1="615" y1="130" x2="645" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
|
|
|
<!-- Step 5: Approval Gate -->
|
|
<rect x="650" y="80" width="130" height="100" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2.5" filter="url(#csh)"/>
|
|
<text x="715" y="108" text-anchor="middle" fill="#f97316" font-size="9" font-weight="700">APPROVAL</text>
|
|
<text x="715" y="130" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Manual Gate</text>
|
|
<text x="715" y="148" text-anchor="middle" fill="#94a3b8" font-size="9">Required before</text>
|
|
<text x="715" y="163" text-anchor="middle" fill="#94a3b8" font-size="9">production deploy</text>
|
|
|
|
<!-- Arrow 5 -->
|
|
<line x1="780" y1="130" x2="810" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
|
|
|
<!-- Step 6: Deploy -->
|
|
<rect x="815" y="90" width="75" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5" filter="url(#csh)"/>
|
|
<text x="852" y="118" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">DEPLOY</text>
|
|
<text x="852" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">Live</text>
|
|
<text x="852" y="158" text-anchor="middle" fill="#94a3b8" font-size="8">prod</text>
|
|
|
|
<!-- Environments Section -->
|
|
<rect x="20" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="30" y="225" fill="#94a3b8" font-size="11" font-weight="600">Staging Environment</text>
|
|
<line x1="30" y1="235" x2="430" y2="235" stroke="#334155" stroke-width="0.5"/>
|
|
<text x="40" y="255" fill="#94a3b8" font-size="9">• Test data, not real users</text>
|
|
<text x="40" y="273" fill="#94a3b8" font-size="9">• Auto-deploy on push to main</text>
|
|
<text x="40" y="291" fill="#94a3b8" font-size="9">• Developers & QA validate here</text>
|
|
<text x="40" y="309" fill="#94a3b8" font-size="9">• Mirrors production config</text>
|
|
|
|
<rect x="460" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
|
<text x="470" y="225" fill="#22c55e" font-size="11" font-weight="600">Production Environment</text>
|
|
<line x1="470" y1="235" x2="870" y2="235" stroke="#334155" stroke-width="0.5"/>
|
|
<text x="480" y="255" fill="#94a3b8" font-size="9">• Live users, real data</text>
|
|
<text x="480" y="273" fill="#94a3b8" font-size="9">• Requires manual approval</text>
|
|
<text x="480" y="291" fill="#94a3b8" font-size="9">• High availability & monitoring</text>
|
|
<text x="480" y="309" fill="#94a3b8" font-size="9">• Careful rollout process</text>
|
|
</svg>
|