Skip to content

Commit

Permalink
Add task row selection support.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tirkarthi
tirkarthi committed Nov 28, 2023
1 parent 86f0382 commit fbccdd1
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 126 deletions.
235 changes: 129 additions & 106 deletions airflow/www/static/js/dag/details/index.tsx
View file
Expand Up @@ -82,8 +82,6 @@ const tabToIndex = (tab?: string) => {
case "logs":
case "mapped_tasks":
return 4;
case "task_duration":
return 5;
case "details":
default:
return 0;
Expand All @@ -94,8 +92,12 @@ const indexToTab = (
index: number,
taskId: string | null,
showLogs: boolean,
showMappedTasks: boolean
showMappedTasks: boolean,
showTaskDuration: boolean
) => {
if (showTaskDuration) {
return "task_duration";
}
switch (index) {
case 1:
return "graph";
Expand Down Expand Up @@ -143,7 +145,7 @@ const Details = ({
const isGroup = !!children;
const isGroupOrMappedTaskSummary = isGroup || isMappedTaskSummary;
const showLogs = !!(isTaskInstance && !isGroupOrMappedTaskSummary);
const showTaskDuration = !!isTaskInstance;
const showTaskDuration = !!(taskId && !runId);
const showMappedTasks = !!(isTaskInstance && isMappedTaskSummary && !isGroup);

const [searchParams, setSearchParams] = useSearchParams();
Expand All @@ -153,12 +155,25 @@ const Details = ({
const onChangeTab = useCallback(
(index: number) => {
const params = new URLSearchParamsWrapper(searchParams);
const newTab = indexToTab(index, taskId, showLogs, showMappedTasks);
const newTab = indexToTab(
index,
taskId,
showLogs,
showMappedTasks,
showTaskDuration
);
if (newTab) params.set(TAB_PARAM, newTab);
else params.delete(TAB_PARAM);
setSearchParams(params);
},
[setSearchParams, searchParams, showLogs, showMappedTasks, taskId]
[
setSearchParams,
searchParams,
showLogs,
showMappedTasks,
showTaskDuration,
taskId,
]
);

useEffect(() => {
Expand Down Expand Up @@ -234,129 +249,137 @@ const Details = ({
index={tabIndex}
onChange={onChangeTab}
>
<TabList>
<Tab>
<MdDetails size={16} />
<Text as="strong" ml={1}>
Details
</Text>
</Tab>
<Tab>
<MdAccountTree size={16} />
<Text as="strong" ml={1}>
Graph
</Text>
</Tab>
<Tab>
<MdOutlineViewTimeline size={16} />
<Text as="strong" ml={1}>
Gantt
</Text>
</Tab>
<Tab>
<MdCode size={16} />
<Text as="strong" ml={1}>
Code
</Text>
</Tab>
{showLogs && (
{!showTaskDuration && (
<TabList>
<Tab>
<MdReorder size={16} />
<MdDetails size={16} />
<Text as="strong" ml={1}>
Logs
Details
</Text>
</Tab>
)}
{showMappedTasks && (
<Tab>
<BiBracket size={16} />
<MdAccountTree size={16} />
<Text as="strong" ml={1}>
Mapped Tasks
Graph
</Text>
</Tab>
)}
{showTaskDuration && (
<Tab>
<MdOutlineViewTimeline size={16} />
<Text as="strong" ml={1}>
Gantt
</Text>
</Tab>
<Tab>
<MdCode size={16} />
<Text as="strong" ml={1}>
Code
</Text>
</Tab>
{showLogs && (
<Tab>
<MdReorder size={16} />
<Text as="strong" ml={1}>
Logs
</Text>
</Tab>
)}
{showMappedTasks && (
<Tab>
<BiBracket size={16} />
<Text as="strong" ml={1}>
Mapped Tasks
</Text>
</Tab>
)}
</TabList>
)}
{showTaskDuration && (
<TabList>
<Tab>
<MdHourglassBottom size={16} />
<Text as="strong" ml={1}>
Task Duration
</Text>
</Tab>
)}
</TabList>
<TabPanels height="100%">
<TabPanel height="100%">
{isDag && <DagContent />}
{isDagRun && <DagRunContent runId={runId} />}
{isTaskInstance && (
<>
</TabList>
)}
{!showTaskDuration && (
<TabPanels height="100%">
<TabPanel height="100%">
{isDag && <DagContent />}
{isDagRun && <DagRunContent runId={runId} />}
{isTaskInstance && (
<>
<BackToTaskSummary
isMapIndexDefined={mapIndex !== undefined && mapIndex > -1}
onClick={() => onSelect({ runId, taskId })}
/>
<TaskInstanceContent
runId={runId}
taskId={taskId}
mapIndex={mapIndex}
/>
</>
)}
</TabPanel>
<TabPanel p={0} height="100%">
<Graph
openGroupIds={openGroupIds}
onToggleGroups={onToggleGroups}
hoveredTaskState={hoveredTaskState}
/>
</TabPanel>
<TabPanel p={0} height="100%">
<Gantt
openGroupIds={openGroupIds}
gridScrollRef={gridScrollRef}
ganttScrollRef={ganttScrollRef}
/>
</TabPanel>
<TabPanel height="100%">
<DagCode />
</TabPanel>
{showLogs && run && (
<TabPanel
pt={mapIndex !== undefined ? "0px" : undefined}
height="100%"
>
<BackToTaskSummary
isMapIndexDefined={mapIndex !== undefined && mapIndex > -1}
isMapIndexDefined={mapIndex !== undefined}
onClick={() => onSelect({ runId, taskId })}
/>
<TaskInstanceContent
runId={runId}
<Logs
dagId={dagId}
dagRunId={runId}
taskId={taskId}
mapIndex={mapIndex}
executionDate={run?.executionDate}
tryNumber={instance?.tryNumber}
state={instance?.state}
/>
</>
</TabPanel>
)}
</TabPanel>
<TabPanel p={0} height="100%">
<Graph
openGroupIds={openGroupIds}
onToggleGroups={onToggleGroups}
hoveredTaskState={hoveredTaskState}
/>
</TabPanel>
<TabPanel p={0} height="100%">
<Gantt
openGroupIds={openGroupIds}
gridScrollRef={gridScrollRef}
ganttScrollRef={ganttScrollRef}
/>
</TabPanel>
<TabPanel height="100%">
<DagCode />
</TabPanel>
{showLogs && run && (
<TabPanel
pt={mapIndex !== undefined ? "0px" : undefined}
height="100%"
>
<BackToTaskSummary
isMapIndexDefined={mapIndex !== undefined}
onClick={() => onSelect({ runId, taskId })}
/>
<Logs
dagId={dagId}
dagRunId={runId}
taskId={taskId}
mapIndex={mapIndex}
executionDate={run?.executionDate}
tryNumber={instance?.tryNumber}
state={instance?.state}
/>
</TabPanel>
)}
{showMappedTasks && (
<TabPanel height="100%">
<MappedInstances
dagId={dagId}
runId={runId}
taskId={taskId}
onRowClicked={(row) =>
onSelect({ runId, taskId, mapIndex: row.values.mapIndex })
}
/>
</TabPanel>
)}
{showTaskDuration && (
<TabPanel height="100%">
{showMappedTasks && (
<TabPanel height="100%">
<MappedInstances
dagId={dagId}
runId={runId}
taskId={taskId}
onRowClicked={(row) =>
onSelect({ runId, taskId, mapIndex: row.values.mapIndex })
}
/>
</TabPanel>
)}
</TabPanels>
)}
{showTaskDuration && (
<TabPanels height="100%">
<TabPanel height="50%">
<TaskDuration />
</TabPanel>
)}
</TabPanels>
</TabPanels>
)}
</Tabs>
</Flex>
);
Expand Down
26 changes: 6 additions & 20 deletions airflow/www/static/js/dag/details/taskDuration/index.tsx
View file
Expand Up @@ -20,7 +20,6 @@
/* global moment */

import React from "react";
import { Box } from "@chakra-ui/react";

import useSelection from "src/dag/useSelection";
import { useGridData } from "src/api";
Expand Down Expand Up @@ -53,7 +52,6 @@ class TaskInstanceDuration {
const TaskDuration = () => {
const {
selected: { taskId },
onSelect,
} = useSelection();

const {
Expand Down Expand Up @@ -107,26 +105,19 @@ const TaskDuration = () => {
unit = "days";
}

/* eslint-disable no-param-reassign */
durations.forEach((instance) => {
if (unit === "seconds") {
// eslint-disable-next-line no-param-reassign
instance.runDurationUnit = instance.runDuration.asSeconds();
// eslint-disable-next-line no-param-reassign
instance.queuedDurationUnit = instance.queuedDuration.asSeconds();
} else if (unit === "minutes") {
// eslint-disable-next-line no-param-reassign
instance.runDurationUnit = instance.runDuration.asMinutes();
// eslint-disable-next-line no-param-reassign
instance.queuedDurationUnit = instance.queuedDuration.asMinutes();
} else if (unit === "hours") {
// eslint-disable-next-line no-param-reassign
instance.runDurationUnit = instance.runDuration.asHours();
// eslint-disable-next-line no-param-reassign
instance.queuedDurationUnit = instance.queuedDuration.asHours();
} else {
// eslint-disable-next-line no-param-reassign
instance.runDurationUnit = instance.runDuration.asDays();
// eslint-disable-next-line no-param-reassign
instance.queuedDurationUnit = instance.queuedDuration.asDays();
}
});
Expand All @@ -135,17 +126,16 @@ const TaskDuration = () => {
function formatTooltip(args) {
const { data } = args[0];
const {
instance: { runId, taskId: selectTaskId, queuedDttm, startDate, endDate },
instance: { runId, queuedDttm, startDate, endDate },
queuedDurationUnit,
runDurationUnit,
} = data;
onSelect({ taskId: selectTaskId, runId });

return `
Run ID : ${runId} <br>
Queued : ${formatDateTime(queuedDttm)} <br>
Started : ${formatDateTime(startDate)} <br>
Ended : ${formatDateTime(endDate)} <br>
Queued : ${queuedDttm && formatDateTime(queuedDttm)} <br>
Started : ${startDate && formatDateTime(startDate)} <br>
Ended : ${endDate && formatDateTime(endDate)} <br>
Queued Duration : ${queuedDurationUnit.toFixed(2)} ${unit}<br>
Run Duration : ${runDurationUnit.toFixed(2)} ${unit}<br>
Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
Expand Down Expand Up @@ -194,11 +184,7 @@ Total : ${(queuedDurationUnit + runDurationUnit).toFixed(2)} ${unit}<br>
},
};

return (
<Box height="50%">
<ReactECharts option={option} />
</Box>
);
return <ReactECharts option={option} />;
};

export default TaskDuration;

0 comments on commit fbccdd1

Please sign in to comment.