yuseok89 commented on code in PR #74426:
URL: https://github.com/apache/airflow/pull/74426#discussion_r4215019738
##########
airflow-core/src/airflow/ui/src/pages/DagsList/DagsListColumns.tsx:
##########
@@ -34,52 +34,157 @@ import { TeamName } from "src/components/TeamName";
import { TogglePause } from "src/components/TogglePause";
import { TriggerDAGButton } from "src/components/TriggerDag/TriggerDAGButton";
-import type { RecentTasks } from "src/queries/useRecentTaskStateCounts";
-
import { DagRunStateCounts } from "./DagRunStateCounts";
import { DagTags } from "./DagTags";
+import { useDagsListCounts } from "./DagsListCountsContext";
import { buildRecentTaskStateCountsColumns } from
"./RecentTaskStateCountsColumn";
import { Schedule } from "./Schedule";
export const getRowKey = (dag: DAGWithLatestDagRunsResponse) => dag.dag_id;
type GetColumnsParams = {
readonly multiTeam: boolean;
- readonly recentTasks: RecentTasks;
+ readonly showRecentTasks: boolean;
};
-export type RunStateCountsContext = {
- readonly countsByDag: Record<string, Record<string, number> | undefined>;
- readonly isLoading: boolean;
- readonly stateCountLimit: number | undefined;
+/**
+ * Every cell renderer below is a module-level component rather than an inline
arrow.
+ * `flexRender` renders them as component types, so a new function identity
each render would
+ * remount the cell instead of updating it — see `DagsListCountsContext`.
+ */
+type CellProps = { readonly row: { readonly original:
DAGWithLatestDagRunsResponse } };
+
+const SelectHeader = () => <SelectionHeaderCheckbox colorPalette="brand" />;
+
+const SelectCell = ({ row }: CellProps) => (
+ <SelectionRowCheckbox colorPalette="brand" rowKey={getRowKey(row.original)}
/>
+);
+
+const PauseCell = ({ row: { original } }: CellProps) => (
+ <TogglePause
+ dagDisplayName={original.dag_display_name}
+ dagId={original.dag_id}
+ hasUnfinishedRuns={original.has_unfinished_runs}
+ isPaused={original.is_paused}
+ schedulingState={original.scheduling_state}
+ />
+);
+
+const DagNameCell = ({ row: { original } }: CellProps) => (
+ <RouterLink fontWeight="bold" to={`/dags/${original.dag_id}`}
whiteSpace="nowrap">
+ {original.dag_display_name}
+ </RouterLink>
+);
+
+const ScheduleCell = ({ row: { original } }: CellProps) => (
+ <Box whiteSpace="nowrap">
+ <Schedule
+ assetExpression={original.asset_expression}
+ dagId={original.dag_id}
+ timetableDescription={original.timetable_description}
+ timetablePartitioned={original.timetable_partitioned}
+ timetableSummary={original.timetable_summary}
+ />
+ </Box>
+);
+
+const NextRunCell = ({ row: { original } }: CellProps) =>
+ original.is_paused ? undefined : original.scheduling_state === "draining" ? (
+ <DrainingBadge />
+ ) : Boolean(original.next_dagrun_run_after) ? (
+ <Box whiteSpace="nowrap">
+ <DagRunInfo
+ logicalDate={original.next_dagrun_logical_date}
+ runAfter={original.next_dagrun_run_after as string}
+ />
+ </Box>
+ ) : undefined;
+
+const LatestRunCell = ({ row: { original } }: CellProps) =>
+ original.latest_dag_runs[0] ? (
+ <RouterLink
+ fontWeight="bold"
+
to={`/dags/${original.dag_id}/runs/${original.latest_dag_runs[0].run_id}`}
+ whiteSpace="nowrap"
+ >
+ <DagRunInfo
+ endDate={original.latest_dag_runs[0].end_date}
+ logicalDate={original.latest_dag_runs[0].logical_date}
+ runAfter={original.latest_dag_runs[0].run_after}
+ startDate={original.latest_dag_runs[0].start_date}
+ state={original.latest_dag_runs[0].state}
+ />
+ </RouterLink>
+ ) : undefined;
+
+const RunStateCountsCell = ({ row: { original } }: CellProps) => {
+ const { runStateCounts } = useDagsListCounts();
+
+ return (
+ <DagRunStateCounts
+ compact
+ counts={runStateCounts.countsByDag[original.dag_id]}
+ dagId={original.dag_id}
+ isLoading={runStateCounts.isLoading}
+ stateCountLimit={runStateCounts.stateCountLimit}
+ />
+ );
};
+const TagsCell = ({
+ row: {
+ original: { tags },
+ },
+}: CellProps) => (
+ <Box whiteSpace="nowrap">
+ <DagTags hideIcon tags={tags} />
+ </Box>
+);
+
+const TeamNameCell = ({ row: { original } }: CellProps) => (
+ <Box whiteSpace="nowrap">
+ <TeamName teamName={original.team_name} />
+ </Box>
+);
+
+const PendingActionsCell = ({ row: { original: dag } }: CellProps) => (
+ <NeedsReviewBadge pendingActions={dag.pending_actions} />
+);
+
+const TriggerCell = ({ row: { original } }: CellProps) => (
+ <TriggerDAGButton
+ allowedRunTypes={original.allowed_run_types}
+ dagDisplayName={original.dag_display_name}
+ dagId={original.dag_id}
+ />
+);
+
+const FavoriteCell = ({ row: { original } }: CellProps) => (
+ <FavoriteDagButton dagId={original.dag_id} isFavorite={original.is_favorite}
/>
+);
+
+const DeleteCell = ({ row: { original } }: CellProps) => (
+ <DeleteDagButton dagDisplayName={original.dag_display_name}
dagId={original.dag_id} />
+);
+
export const createColumns = (
translate: (key: string, options?: Record<string, unknown>) => string,
runStateContext: RunStateCountsContext,
Review Comment:
```suggestion
```
I think this leftover parameter needs to go. Removing it makes
`DagsList.test.tsx` and `documentTitle.test.tsx` pass and `tsc` clean locally.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
