Airflow Command Center
Scheduler Online--:--:--Cloudflare Static PWA
Live Demo DAG • Scheduler • Worker • Metadata DB • Task Logs • Grid View • Graph View • Clean static ZIP • Cloudflare Pages Direct Upload • No backend server bundled •
Apache Airflow Static PWA

Workflow
Command
Center

Versi V4 memperbaiki bagian dashboard yang sebelumnya terlihat seperti gambar mentah. Sekarang tampil sebagai UI Airflow modern: sidebar, run status, DAG table, progress bar, event feed, search, tabs, dan mode gelap/terang yang kontras.

24DAG Runs
18Successful Tasks
03Running Jobs
01Failed Retry
$ wrangler pages deploy . --project-name airflow-command-center
✓ static assets validated
✓ service worker ready
✓ clean download package
↳ Airflow backend not bundled; showcase is static
https://airflow-command-center.pages.dev/dags/data_ingestion_daily/grid
data_ingestion_daily● runningschedule @daily
Search DAGs ⌘K
OverviewRunsTasksCalendarLogsCode
DAG Run Monitorlast 24h
queued
04
running
09
success
128
retry
06
failed
02
DAGOwnerStateDuration
extract_ordersdatasuccess1m 42s
feature_refreshmlrunning00:54
billing_syncfinopsfailedretry
dashboard_publishopssuccess2m 08s
Asset Eventsworker-03

task instance scheduled

worker picked queue slot

metadata DB state updated

billing_sync retry requested

dashboard_publish completed

logs streamed to UI panel

P200

Realistic DAG Studio

Pipeline divisualkan seperti canvas DAG: node, edge, status running/success/failed, retry, dan dependency yang lebih hidup daripada screenshot statis biasa.

DAG Graph — ML Feature Pipelinedependency view
extractvalidatetrainfeaturespubauditretrynotify

Yang diperbaiki di V4

  1. Bagian dashboard dibuat ulang sebagai komponen UI, bukan gambar mentah yang terlihat pecah.
  2. Progress bar, event feed, DAG table, status chips, dan command terminal diberi animasi halus.
  3. Mode terang/gelap memakai variabel warna berbeda agar kontras tetap jelas.
  4. Layout mobile dipadatkan sehingga panel tidak tumpah di layar kecil.
P300

Modern Airflow UI Panels

Empat panel ini mengganti tampilan sebelumnya yang terasa datar. Semuanya dibuat dari HTML/CSS/SVG agar tajam, responsive, dan tampak seperti dashboard operasional nyata.

Home Dashboardoverview
HomeDAGGridLogAdmin
128success
09running
06retry
02failed
data_ingestion_dailyrunning
ml_training_pipelinesuccess
warehouse_compactionsuccess
billing_syncfailed
DAG Graphdependency
startextractloadaudit✓✓
Grid Monitoringtask states
Task Logsdebug stream

[2026-07-09 09:12:11] Task instance started: feature_refresh

Loading provider package: apache-airflow-providers-amazon

INFO Running on worker airflow-worker-03

Reading partition dt=2026-07-09 from warehouse

WARN Retry policy active for billing_sync

SUCCESS feature_refresh completed in 48.21s

ERROR billing_sync returned HTTP 503, retry scheduled

Streaming logs to static preview panel...

P400

Airflow Architecture

Arsitektur inti Airflow ditampilkan sebagai konsep operasional: DAG Processor membaca DAG, Scheduler memilih task, Worker mengeksekusi, Metadata DB menyimpan state, dan UI menampilkan graph/grid/log.

Apache Airflow architecture diagram

Core Components

DAG ProcessorSchedulerWorkersMetadata DBWeb UITask LogsProvidersQueuesRetriesMonitoring

Execution Flow

  1. DAG ditulis sebagai kode Python.
  2. Scheduler membaca dependency dan state.
  3. Worker mengeksekusi task sesuai queue.
  4. Log dan status dikirim ke UI monitoring.
P500

Clean Download Package

Paket final tetap dibuat bersih untuk download dan Cloudflare Pages: tidak membawa backend Python Airflow mentah, nested archive, binary, installer, atau script shell.

Clean Rules

  • Root index.html langsung tampil setelah upload.
  • Tidak ada .exe, .dll, .jar, .bat, .cmd, .ps1, atau .sh.
  • Tidak ada nested .zip, .tar, .gz, .rar, .7z, atau .part.
  • Semua aset berada jauh di bawah batas 25 MiB per asset Cloudflare Pages.
100
STATIC
P600

Cloudflare Deploy Guide

Ekstrak ZIP V4, lalu upload isi folder hasil ekstrak ke Cloudflare Pages Direct Upload. Tidak perlu build command karena proyek ini prebuilt static PWA.

Langkah Upload

  1. Download ZIP final V4.
  2. Ekstrak ZIP di komputer.
  3. Buka Cloudflare Pages → Create project → Direct Upload.
  4. Upload semua isi folder hasil ekstrak.
  5. Deploy dan buka URL Pages.

Deploy Command

npx wrangler pages deploy . --project-name airflow-command-center

File penting: index.html, manifest.json, sw.js, _headers, _redirects, assets/, docs/.

P700

README.md Portfolio

README diperbarui agar menjelaskan bahwa V4 adalah clean static Airflow showcase dengan UI realistis, deployment guide, PWA, dan security clean report.

README Structure

README.md ├── Project Overview ├── Why Static Airflow Showcase ├── Realistic UI Panels ├── DAG Studio ├── Architecture ├── Cloudflare Pages Deployment ├── Clean Download Report ├── Security Notes └── Credits
Open README.mdDeployment GuideClean Report
Copied