Skip to content

Instantly share code, notes, and snippets.

@lassebenni

lassebenni/container_app_vs_job_visual.html

Created March 10, 2026 22:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lassebenni/def227672a0a9fd8ad123a95350633b3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lassebenni/def227672a0a9fd8ad123a95350633b3 to your computer and use it in GitHub Desktop.
Download ZIP
Visual for: Container Apps - App vs Job lifecycle
Raw
container_app_vs_job_visual.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Apps: App vs Job Lifecycle</title>
<style>
body {
margin: 0;
padding: 20px;
background: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
svg {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<svg viewBox="0 0 700 380" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">
<!-- Background -->
<rect width="700" height="380" rx="12" fill="#1a1a2e"/>
<!-- Title -->
<text x="350" y="35" text-anchor="middle" fill="#e0e0e0" font-size="18" font-weight="bold">Container App vs Container App Job</text>
<!-- === LEFT: Container App === -->
<text x="175" y="70" text-anchor="middle" fill="#64b5f6" font-size="14" font-weight="bold">Container App (long-running)</text>
<!-- Timeline arrow -->
<line x1="40" y1="310" x2="330" y2="310" stroke="#444" stroke-width="1.5"/>
<polygon points="330,310 324,306 324,314" fill="#444"/>
<text x="185" y="330" text-anchor="middle" fill="#666" font-size="10">time →</text>
<!-- Always-running bar -->
<rect x="50" y="185" width="260" height="30" rx="4" fill="#1565c0" opacity="0.3" stroke="#64b5f6" stroke-width="1.5"/>
<text x="180" y="205" text-anchor="middle" fill="#64b5f6" font-size="11" font-weight="bold">Always Running</text>
<!-- HTTP requests coming in -->
<g fill="#81c784" font-size="10">
<rect x="70" y="100" width="55" height="22" rx="3" fill="#2e7d32" opacity="0.4" stroke="#81c784" stroke-width="1"/>
<text x="97" y="115" text-anchor="middle" fill="#81c784">GET /api</text>
<line x1="97" y1="122" x2="97" y2="185" stroke="#81c784" stroke-width="1" stroke-dasharray="4,3"/>
<rect x="150" y="100" width="55" height="22" rx="3" fill="#2e7d32" opacity="0.4" stroke="#81c784" stroke-width="1"/>
<text x="177" y="115" text-anchor="middle" fill="#81c784">POST /data</text>
<line x1="177" y1="122" x2="177" y2="185" stroke="#81c784" stroke-width="1" stroke-dasharray="4,3"/>
<rect x="230" y="100" width="55" height="22" rx="3" fill="#2e7d32" opacity="0.4" stroke="#81c784" stroke-width="1"/>
<text x="257" y="115" text-anchor="middle" fill="#81c784">GET /api</text>
<line x1="257" y1="122" x2="257" y2="185" stroke="#81c784" stroke-width="1" stroke-dasharray="4,3"/>
</g>
<!-- Responses -->
<g font-size="9" fill="#aaa">
<text x="97" y="245" text-anchor="middle">response</text>
<line x1="97" y1="215" x2="97" y2="237" stroke="#aaa" stroke-width="1" stroke-dasharray="3,3"/>
<text x="177" y="245" text-anchor="middle">response</text>
<line x1="177" y1="215" x2="177" y2="237" stroke="#aaa" stroke-width="1" stroke-dasharray="3,3"/>
<text x="257" y="245" text-anchor="middle">response</text>
<line x1="257" y1="215" x2="257" y2="237" stroke="#aaa" stroke-width="1" stroke-dasharray="3,3"/>
</g>
<!-- Status indicators -->
<circle cx="55" y="270" r="5" fill="#4caf50"/>
<text x="67" y="274" fill="#888" font-size="10">Running</text>
<circle cx="155" y="270" r="5" fill="#4caf50"/>
<text x="167" y="274" fill="#888" font-size="10">Running</text>
<circle cx="255" y="270" r="5" fill="#4caf50"/>
<text x="267" y="274" fill="#888" font-size="10">Running</text>
<!-- Divider -->
<line x1="350" y1="55" x2="350" y2="345" stroke="#333" stroke-width="1" stroke-dasharray="6,4"/>
<!-- === RIGHT: Container App Job === -->
<text x="525" y="70" text-anchor="middle" fill="#ffb74d" font-size="14" font-weight="bold">Container App Job (run &amp; exit)</text>
<!-- Timeline arrow -->
<line x1="380" y1="310" x2="670" y2="310" stroke="#444" stroke-width="1.5"/>
<polygon points="670,310 664,306 664,314" fill="#444"/>
<text x="525" y="330" text-anchor="middle" fill="#666" font-size="10">time →</text>
<!-- Trigger -->
<rect x="390" y="100" width="60" height="22" rx="3" fill="#e65100" opacity="0.3" stroke="#ffb74d" stroke-width="1"/>
<text x="420" y="115" text-anchor="middle" fill="#ffb74d" font-size="10">Trigger</text>
<line x1="420" y1="122" x2="420" y2="145" stroke="#ffb74d" stroke-width="1.5"/>
<polygon points="420,150 416,143 424,143" fill="#ffb74d"/>
<!-- Job phases -->
<!-- Start -->
<rect x="395" y="155" width="50" height="60" rx="4" fill="#e65100" opacity="0.25" stroke="#ffb74d" stroke-width="1.5"/>
<text x="420" y="180" text-anchor="middle" fill="#ffb74d" font-size="10" font-weight="bold">Start</text>
<text x="420" y="195" text-anchor="middle" fill="#ffb74d" font-size="9">container</text>
<!-- Arrow -->
<line x1="445" y1="185" x2="465" y2="185" stroke="#ffb74d" stroke-width="1.5"/>
<polygon points="468,185 462,181 462,189" fill="#ffb74d"/>
<!-- Run pipeline -->
<rect x="470" y="155" width="80" height="60" rx="4" fill="#e65100" opacity="0.25" stroke="#ffb74d" stroke-width="1.5"/>
<text x="510" y="175" text-anchor="middle" fill="#ffb74d" font-size="10" font-weight="bold">Run</text>
<text x="510" y="190" text-anchor="middle" fill="#ffb74d" font-size="9">pipeline</text>
<text x="510" y="203" text-anchor="middle" fill="#ffb74d" font-size="9">→ Postgres</text>
<!-- Arrow -->
<line x1="550" y1="185" x2="570" y2="185" stroke="#ffb74d" stroke-width="1.5"/>
<polygon points="573,185 567,181 567,189" fill="#ffb74d"/>
<!-- Exit -->
<rect x="575" y="155" width="50" height="60" rx="4" fill="#e65100" opacity="0.25" stroke="#ffb74d" stroke-width="1.5"/>
<text x="600" y="180" text-anchor="middle" fill="#ffb74d" font-size="10" font-weight="bold">Exit</text>
<text x="600" y="195" text-anchor="middle" fill="#ffb74d" font-size="9">done ✓</text>
<!-- Idle periods -->
<rect x="395" y="240" width="50" height="20" rx="3" fill="transparent" stroke="#555" stroke-width="1" stroke-dasharray="3,3"/>
<text x="420" y="254" text-anchor="middle" fill="#555" font-size="9">idle</text>
<rect x="470" y="240" width="80" height="20" rx="3" fill="transparent" stroke="#555" stroke-width="1" stroke-dasharray="3,3"/>
<text x="510" y="254" text-anchor="middle" fill="#555" font-size="9">idle (no cost)</text>
<rect x="575" y="240" width="50" height="20" rx="3" fill="transparent" stroke="#555" stroke-width="1" stroke-dasharray="3,3"/>
<text x="600" y="254" text-anchor="middle" fill="#555" font-size="9">idle</text>
<!-- Status indicators -->
<circle cx="405" y="280" r="5" fill="#666"/>
<text x="417" y="284" fill="#888" font-size="10">Off</text>
<circle cx="490" y="280" r="5" fill="#ff9800"/>
<text x="502" y="284" fill="#888" font-size="10">Running</text>
<circle cx="590" y="280" r="5" fill="#666"/>
<text x="602" y="284" fill="#888" font-size="10">Off</text>
<!-- Legend -->
<g transform="translate(200, 355)">
<rect x="0" y="0" width="12" height="12" rx="2" fill="#1565c0" opacity="0.5"/>
<text x="18" y="10" fill="#888" font-size="10">Web API / Dashboard</text>
<rect x="160" y="0" width="12" height="12" rx="2" fill="#e65100" opacity="0.5"/>
<text x="178" y="10" fill="#888" font-size="10">Data Pipeline / Batch Job</text>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment