Skip to content

Add Gantt chart view #51667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bbovenzi merged 12 commits into from
Aug 20, 2025
Merged

Add Gantt chart view #51667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
424d866
Add Gantt chart
guan404ming Aug 5, 2025
d072838
Fix grid color in dark mode
guan404ming Aug 14, 2025
c94e63f
Sync selected color with Grid
guan404ming Aug 14, 2025
114d4c5
Enable showGantt button for run or TI selected
guan404ming Aug 14, 2025
0ecbb70
Set minimum width for TI
guan404ming Aug 14, 2025
201625b
Fix spacing
guan404ming Aug 14, 2025
d82a179
Fix single task layout
guan404ming Aug 14, 2025
289ccad
Update auto-refresh for TI and useMemo
guan404ming Aug 14, 2025
41a1865
Fix button visibility condition
guan404ming Aug 15, 2025
5fe4ce3
Update fixedHeight
guan404ming Aug 15, 2025
092ec46
Update DetailsLayout and Grid layout
guan404ming Aug 19, 2025
c744364
Update airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx
guan404ming Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions airflow-core/src/airflow/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"axios": "^1.8.4",
"chakra-react-select": "6.1.0",
"chart.js": "^4.4.9",
"chartjs-adapter-dayjs-4": "^1.0.4",
"chartjs-plugin-annotation": "^3.1.0",
"dayjs": "^1.11.13",
"debounce-promise": "^3.1.2",
Expand Down
15 changes: 15 additions & 0 deletions airflow-core/src/airflow/ui/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"panel": {
"buttons": {
"options": "Options",
"showGantt": "Show Gantt",
"showGraph": "Show Graph",
"showGrid": "Show Grid"
},
Expand Down
1 change: 1 addition & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/zh-TW/dag.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"panel": {
"buttons": {
"options": "選項",
"showGantt": "顯示甘特圖",
"showGraph": "顯示圖表",
"showGrid": "顯示網格"
},
Expand Down
23 changes: 20 additions & 3 deletions airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import { Tooltip } from "src/components/ui/Tooltip";
import { OpenGroupsProvider } from "src/context/openGroups";

import { DagBreadcrumb } from "./DagBreadcrumb";
import { Gantt } from "./Gantt/Gantt";
import { Graph } from "./Graph";
import { Grid } from "./Grid";
import { NavTabs } from "./NavTabs";
Expand All @@ -52,12 +53,14 @@ type Props = {

export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
const { t: translate } = useTranslation();
const { dagId = "" } = useParams();
const { dagId = "", runId } = useParams();
const { data: dag } = useDagServiceGetDag({ dagId });
const [defaultDagView] = useLocalStorage<"graph" | "grid">("default_dag_view", "grid");
const panelGroupRef = useRef(null);
const [dagView, setDagView] = useLocalStorage<"graph" | "grid">(`dag_view-${dagId}`, defaultDagView);
const [limit, setLimit] = useLocalStorage<number>(`dag_runs_limit-${dagId}`, 10);

const [showGantt, setShowGantt] = useLocalStorage<boolean>(`show_gantt-${dagId}`, true);
const { fitView, getZoom } = useReactFlow();
const { data: warningData } = useDagWarningServiceListDagWarnings({ dagId });
const { onClose, onOpen, open } = useDisclosure();
Expand Down Expand Up @@ -110,16 +113,30 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
key={`${dagView}-${direction}`}
ref={panelGroupRef}
>
<Panel defaultSize={dagView === "graph" ? 70 : 20} id="main-panel" minSize={6} order={1}>
<Panel
defaultSize={dagView === "graph" ? 70 : 20}
id="main-panel"
minSize={showGantt && dagView === "grid" && Boolean(runId) ? 30 : 6}
order={1}
>
<Box height="100%" marginInlineEnd={2} overflowY="auto" position="relative">
<PanelButtons
dagView={dagView}
limit={limit}
panelGroupRef={panelGroupRef}
setDagView={setDagView}
setLimit={setLimit}
setShowGantt={setShowGantt}
showGantt={showGantt}
/>
{dagView === "graph" ? <Graph /> : <Grid limit={limit} />}
{dagView === "graph" ? (
<Graph />
) : (
<HStack gap={0}>
<Grid limit={limit} showGantt={Boolean(runId) && showGantt} />
{showGantt ? <Gantt limit={limit} /> : undefined}
</HStack>
)}
</Box>
</Panel>
{!isRightPanelCollapsed && (
Expand Down
Loading
Loading