Skip to content

[v3-1-test] Added Tooltip in Next Run (#60581) #60736

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

Closed
github-actions wants to merge 1 commit into from
Closed

[v3-1-test] Added Tooltip in Next Run (#60581) #60736

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 30 additions & 25 deletions airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
import Time from "src/components/Time";
import { Tooltip } from "src/components/ui";
import { getDuration } from "src/utils";
import { getRelativeTime } from "src/utils/datetimeUtils";

type Props = {
readonly endDate?: string | null;
Expand All @@ -40,39 +41,43 @@
<Tooltip
content={
<VStack align="left" gap={0}>
{state === undefined ? undefined : (
{state === undefined ? (
<Text>
{translate("state")}: {translate(`common:states.${state}`)}
{translate("dagDetails.nextRun")}: {getRelativeTime(runAfter)}

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render StateBadge as failed 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render StateBadge as success 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render next run section with timestamp 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render latest run section with actual run data 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render schedule section 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should show +X more text if there are more than 3 tags 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should not show +X more text if there is only +1 over the limit 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44

Check failure on line 46 in airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

View workflow job for this annotation

GitHub Actions / Basic tests / React UI tests

src/pages/DagsList/DagCard.test.tsx > DagCard > DagCard should render without tags 

TypeError: getRelativeTime is not a function
 ❯ DagRunInfo src/components/DagRunInfo.tsx:46:51
 ❯ Object.react_stack_bottom_frame node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20
 ❯ renderWithHooks node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22
 ❯ updateFunctionComponent node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19
 ❯ beginWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18
 ❯ runWithFiberInDEV node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:1522:13
 ❯ performUnitOfWork node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:15140:22
 ❯ workLoopSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41
 ❯ renderRootSync node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11
 ❯ performWorkOnRoot node_modules/.pnpm/react-dom@19.1.1_react@19.1.1/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44
</Text>
) : (
<>
<Text>
{translate("state")}: {translate(`common:states.${state}`)}
</Text>
{Boolean(logicalDate) && (
<Text>
{translate("logicalDate")}: <Time datetime={logicalDate} />
</Text>
)}
{Boolean(startDate) && (
<Text>
{translate("startDate")}: <Time datetime={startDate} />
</Text>
)}
{Boolean(endDate) && (
<Text>
{translate("endDate")}: <Time datetime={endDate} />
</Text>
)}
{Boolean(startDate) && (
<Text>
{translate("duration")}: {getDuration(startDate, endDate)}
</Text>
)}
</>
)}
{Boolean(logicalDate) ? (
<Text>
{translate("logicalDate")}: <Time datetime={logicalDate} />
</Text>
) : undefined}
{Boolean(startDate) ? (
<Text>
{translate("startDate")}: <Time datetime={startDate} />
</Text>
) : undefined}
{Boolean(endDate) ? (
<Text>
{translate("endDate")}: <Time datetime={endDate} />
</Text>
) : undefined}
{Boolean(startDate) ? (
<Text>
{translate("duration")}: {getDuration(startDate, endDate)}
</Text>
) : undefined}
</VStack>
}
>
<Box>
<Time datetime={runAfter} mr={2} showTooltip={false} />
{state === undefined ? undefined : (
<StateBadge aria-label={state} data-testid="state-badge" state={state} />
)}
{state !== undefined && <StateBadge aria-label={state} data-testid="state-badge" state={state} />}
</Box>
</Tooltip>
);
Expand Down
Loading