Skip to content

Commit 96cd350

Browse files
josixjosix
committed
feat(ui/Dag): Add dag details tab
1 parent f59f022 commit 96cd350

File tree

4 files changed

+220
-0
lines changed

4 files changed

+220
-0
lines changed

‎airflow/ui/src/pages/Dag/Dag.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const tabs = [
3636
{ icon: <FiRotateCcw />, label: "Backfills", value: "backfills" },
3737
{ icon: <MdOutlineEventNote />, label: "Events", value: "events" },
3838
{ icon: <FiCode />, label: "Code", value: "code" },
39+
// { label: "Details", value: "details" },
3940
];
4041

4142
export const Dag = () => {

‎airflow/ui/src/pages/Dag/Details/Details.tsx

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import { Box, Text, Table, Heading } from "@chakra-ui/react";
20+
import { useParams } from "react-router-dom";
21+
22+
import { useDagServiceGetDagDetails } from "openapi/queries";
23+
import Time from "src/components/Time";
24+
25+
export const Details = () => {
26+
const { dagId = "" } = useParams();
27+
28+
const { data: dag } = useDagServiceGetDagDetails({
29+
dagId,
30+
});
31+
32+
if (dag === undefined) {
33+
return <div />;
34+
}
35+
36+
return (
37+
<Box p={2}>
38+
<Heading py={2} size="sm">
39+
DAG Details
40+
</Heading>
41+
<Table.Root striped>
42+
<Table.Body>
43+
<Table.Row>
44+
<Table.Cell>Dag display name</Table.Cell>
45+
<Table.Cell>{dag.dag_display_name}</Table.Cell>
46+
</Table.Row>
47+
<Table.Row>
48+
<Table.Cell>Dag id</Table.Cell>
49+
<Table.Cell>{dag.dag_id}</Table.Cell>
50+
</Table.Row>
51+
<Table.Row>
52+
<Table.Cell>Description</Table.Cell>
53+
<Table.Cell>{dag.description}</Table.Cell>
54+
</Table.Row>
55+
<Table.Row>
56+
<Table.Cell>Fileloc</Table.Cell>
57+
<Table.Cell>{dag.fileloc}</Table.Cell>
58+
</Table.Row>
59+
<Table.Row>
60+
<Table.Cell>Has import errors</Table.Cell>
61+
<Table.Cell>{dag.has_import_errors ? "True" : "False"}</Table.Cell>
62+
</Table.Row>
63+
<Table.Row>
64+
<Table.Cell>Has task concurrency limits</Table.Cell>
65+
<Table.Cell>{dag.has_task_concurrency_limits ? "True" : "False"}</Table.Cell>
66+
</Table.Row>
67+
<Table.Row>
68+
<Table.Cell>Is active</Table.Cell>
69+
<Table.Cell>{dag.is_active ? "True" : "False"}</Table.Cell>
70+
</Table.Row>
71+
<Table.Row>
72+
<Table.Cell>Is paused</Table.Cell>
73+
<Table.Cell>{dag.is_paused ? "True" : "False"}</Table.Cell>
74+
</Table.Row>
75+
<Table.Row>
76+
<Table.Cell>Last expired</Table.Cell>
77+
<Table.Cell>{dag.last_expired}</Table.Cell>
78+
</Table.Row>
79+
<Table.Row>
80+
<Table.Cell>Last parsed time</Table.Cell>
81+
<Table.Cell>
82+
<Time datetime={dag.last_parsed_time} />
83+
</Table.Cell>
84+
</Table.Row>
85+
<Table.Row>
86+
<Table.Cell>Max active runs</Table.Cell>
87+
<Table.Cell>{dag.max_active_runs}</Table.Cell>
88+
</Table.Row>
89+
<Table.Row>
90+
<Table.Cell>Max active tasks</Table.Cell>
91+
<Table.Cell>{dag.max_active_tasks}</Table.Cell>
92+
</Table.Row>
93+
<Table.Row>
94+
<Table.Cell>Max consecutive failed dag runs</Table.Cell>
95+
<Table.Cell>{dag.max_consecutive_failed_dag_runs}</Table.Cell>
96+
</Table.Row>
97+
<Table.Row>
98+
<Table.Cell>Next dagrun</Table.Cell>
99+
<Table.Cell>
100+
<Time datetime={dag.next_dagrun} />
101+
</Table.Cell>
102+
</Table.Row>
103+
<Table.Row>
104+
<Table.Cell>Next dagrun create after</Table.Cell>
105+
<Table.Cell>
106+
<Time datetime={dag.next_dagrun_create_after} />
107+
</Table.Cell>
108+
</Table.Row>
109+
<Table.Row>
110+
<Table.Cell>Next dagrun data interval end</Table.Cell>
111+
<Table.Cell>
112+
<Time datetime={dag.next_dagrun_data_interval_end} />
113+
</Table.Cell>
114+
</Table.Row>
115+
<Table.Row>
116+
<Table.Cell>Next dagrun data interval start</Table.Cell>
117+
<Table.Cell>
118+
<Time datetime={dag.next_dagrun_data_interval_start} />
119+
</Table.Cell>
120+
</Table.Row>
121+
<Table.Row>
122+
<Table.Cell>Timetable description</Table.Cell>
123+
<Table.Cell>{dag.timetable_description}</Table.Cell>
124+
</Table.Row>
125+
<Table.Row>
126+
<Table.Cell>Asset expression</Table.Cell>
127+
<Table.Cell>{JSON.stringify(dag.asset_expression)}</Table.Cell>
128+
</Table.Row>
129+
<Table.Row>
130+
<Table.Cell>Catchup</Table.Cell>
131+
<Table.Cell>{dag.catchup}</Table.Cell>
132+
</Table.Row>
133+
<Table.Row>
134+
<Table.Cell>Doc md</Table.Cell>
135+
<Table.Cell>{dag.doc_md}</Table.Cell>
136+
</Table.Row>
137+
<Table.Row>
138+
<Table.Cell>End date</Table.Cell>
139+
<Table.Cell>
140+
<Time datetime={dag.end_date} />
141+
</Table.Cell>
142+
</Table.Row>
143+
<Table.Row>
144+
<Table.Cell>Is paused upon creation</Table.Cell>
145+
<Table.Cell>{dag.is_paused_upon_creation}</Table.Cell>
146+
</Table.Row>
147+
<Table.Row>
148+
<Table.Cell>Last parsed</Table.Cell>
149+
<Table.Cell>
150+
<Time datetime={dag.last_parsed} />
151+
</Table.Cell>
152+
</Table.Row>
153+
<Table.Row>
154+
<Table.Cell>Render template as native obj</Table.Cell>
155+
<Table.Cell>{dag.render_template_as_native_obj}</Table.Cell>
156+
</Table.Row>
157+
<Table.Row>
158+
<Table.Cell>Start date</Table.Cell>
159+
<Table.Cell>
160+
<Time datetime={dag.start_date} />
161+
</Table.Cell>
162+
</Table.Row>
163+
<Table.Row>
164+
<Table.Cell>Template search path</Table.Cell>
165+
<Table.Cell>{dag.template_search_path}</Table.Cell>
166+
</Table.Row>
167+
<Table.Row>
168+
<Table.Cell>Timezone</Table.Cell>
169+
<Table.Cell>{dag.timezone}</Table.Cell>
170+
</Table.Row>
171+
<Table.Row>
172+
<Table.Cell>Owners</Table.Cell>
173+
<Table.Cell>{dag.owners.join(", ")}</Table.Cell>
174+
</Table.Row>
175+
<Table.Row>
176+
<Table.Cell>Tags</Table.Cell>
177+
<Table.Cell>
178+
{dag.tags.length ? <Text>{dag.tags.map((tag) => tag.name).join(", ")}</Text> : undefined}
179+
</Table.Cell>
180+
</Table.Row>
181+
<Table.Row>
182+
<Table.Cell>Timetable</Table.Cell>
183+
<Table.Cell>{dag.timetable_summary}</Table.Cell>
184+
</Table.Row>
185+
<Table.Row>
186+
<Table.Cell>Dag run timeout</Table.Cell>
187+
<Table.Cell>{dag.dag_run_timeout}</Table.Cell>
188+
</Table.Row>
189+
<Table.Row>
190+
<Table.Cell>Params</Table.Cell>
191+
<Table.Cell>{JSON.stringify(dag.params)}</Table.Cell>
192+
</Table.Row>
193+
</Table.Body>
194+
</Table.Root>
195+
</Box>
196+
);
197+
};

‎airflow/ui/src/pages/Dag/Details/index.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*!
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
export { Details } from "./Details";

‎airflow/ui/src/router.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { Connections } from "src/pages/Connections";
2828
import { Dag } from "src/pages/Dag";
2929
import { Backfills } from "src/pages/Dag/Backfills";
3030
import { Code } from "src/pages/Dag/Code";
31+
import { Details as DagDetails } from "src/pages/Dag/Details";
3132
import { Overview } from "src/pages/Dag/Overview";
3233
import { Tasks } from "src/pages/Dag/Tasks";
3334
import { DagRuns } from "src/pages/DagRuns";
@@ -129,6 +130,7 @@ export const routerConfig = [
129130
{ element: <Backfills />, path: "backfills" },
130131
{ element: <Events />, path: "events" },
131132
{ element: <Code />, path: "code" },
133+
{ element: <DagDetails />, path: "details" },
132134
],
133135
element: <Dag />,
134136
path: "dags/:dagId",

0 commit comments

Comments
 (0)