-
Notifications
You must be signed in to change notification settings - Fork 16.4k
Fill out Dag Run and Task Instance Details pages with Grid and Gantt buttons. #44656
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.
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
Conversation
|
The components and pages can later have clipboard button in relevant places to copy dag_id, run_id, task_id etc. which was present in the old UI and was handy. |
|
One way to handle mapped task instances might be to pass diff --git a/airflow/ui/src/pages/Events/Events.tsx b/airflow/ui/src/pages/Events/Events.tsx
index 60663aefec..d311471252 100644
--- a/airflow/ui/src/pages/Events/Events.tsx
+++ b/airflow/ui/src/pages/Events/Events.tsx
@@ -18,7 +18,7 @@
*/
import { Box } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
-import { useParams } from "react-router-dom";
+import { useSearchParams, useParams } from "react-router-dom";
import { useEventLogServiceGetEventLogs } from "openapi/queries";
import type { EventLogResponse } from "openapi/requests/types.gen";
@@ -113,6 +113,8 @@ const eventsColumn = (
export const Events = () => {
const { dagId, runId, taskId } = useParams();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const mapIndex = searchParams.get("map_index");
const { setTableURLState, tableURLState } = useTableURLState({
sorting: [{ desc: true, id: "when" }],
});
@@ -132,6 +134,8 @@ export const Events = () => {
offset: pagination.pageIndex * pagination.pageSize,
orderBy,
runId,
+ taskId,
+ mapIndex,
});
return (
diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx
index e96ff55d46..4e4127cdfc 100644
--- a/airflow/ui/src/pages/Run/TaskInstances.tsx
+++ b/airflow/ui/src/pages/Run/TaskInstances.tsx
@@ -35,7 +35,7 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
cell: ({ row: { original } }) => (
<Link asChild color="fg.info" fontWeight="bold">
<RouterLink
- to={`/dags/${original.dag_id}/runs/${original.dag_run_id}/tasks/${original.task_id}`}
+ to={`/dags/${original.dag_id}/runs/${original.dag_run_id}/tasks/${original.task_id}?map_index=${original.map_index}`}
>
{original.task_display_name}
</RouterLink>
diff --git a/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx b/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
index b9e41de93d..d0f5ca9930 100644
--- a/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
+++ b/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
@@ -17,37 +17,51 @@
* under the License.
*/
import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink } from "react-router-dom";
+import {
+ useParams,
+ useSearchParams,
+ Link as RouterLink,
+} from "react-router-dom";
import {
useDagServiceGetDagDetails,
useTaskInstanceServiceGetTaskInstance,
+ useTaskInstanceServiceGetMappedTaskInstance,
} from "openapi/queries";
import { Breadcrumb } from "src/components/ui";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { Header } from "./Header";
-const tabs = [
- { label: "Logs", value: "" },
- { label: "Events", value: "events" },
- { label: "XCom", value: "xcom" },
- { label: "Code", value: "code" },
- { label: "Details", value: "details" },
-];
-
export const TaskInstance = () => {
const { dagId = "", runId = "", taskId = "" } = useParams();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const mapIndex = searchParams.get("map_index");
+
+ const tabs = [
+ { label: "Logs", value: "" },
+ { label: "Events", value: `events?map_index=${mapIndex}` },
+ { label: "XCom", value: `xcom?map_index=${mapIndex}` },
+ { label: "Code", value: `code?map_index=${mapIndex}` },
+ { label: "Details", value: `details?map_index=${mapIndex}` },
+ ];
const {
data: taskInstance,
error,
isLoading,
- } = useTaskInstanceServiceGetTaskInstance({
- dagId,
- dagRunId: runId,
- taskId,
- });
+ } = Boolean(mapIndex) && mapIndex > -1
+ ? useTaskInstanceServiceGetMappedTaskInstance({
+ dagId,
+ dagRunId: runId,
+ taskId,
+ mapIndex,
+ })
+ : useTaskInstanceServiceGetTaskInstance({
+ dagId,
+ dagRunId: runId,
+ taskId,
+ });
const {
data: dag, |
4cbb64b to
7868676
Compare
Updated everything to accept |
shubhamraj-git
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the changes! This looks perfect overall. Just one minor suggestion.
pierrejeambrun
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Working as expected. Code looks good!
…buttons. (apache#44656) * Rebasing * Handle mapped instances * Handle null in Status component
Make a shared DetailsLayout component to help render the pages for a Dag, Dag Run, and Task Instance. The layout handles errors, loading, tabs and the visualizations modal. Also updated the visualizations modal to include space for the Grid and Gantt charts
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named
{pr_number}.significant.rstor{issue_number}.significant.rst, in newsfragments.