From e4efa011d22e2f9d61bb5a06c26a6df3c0c34673 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Wed, 11 Dec 2024 17:54:06 -0500 Subject: [PATCH 1/2] Update sort and filter defaults --- .../ui/src/components/TimeRangeSelector.tsx | 2 +- .../ui/src/pages/Dag/Overview/Overview.tsx | 2 +- airflow/ui/src/pages/Dag/Runs/Runs.tsx | 9 ++++++++- airflow/ui/src/pages/DagsList/DagsList.tsx | 20 ++++++++++++++----- .../HistoricalMetrics/HistoricalMetrics.tsx | 2 +- airflow/ui/src/pages/Run/TaskInstances.tsx | 9 ++++++++- airflow/ui/src/pages/Task/Instances.tsx | 9 ++++++++- 7 files changed, 42 insertions(+), 11 deletions(-) diff --git a/airflow/ui/src/components/TimeRangeSelector.tsx b/airflow/ui/src/components/TimeRangeSelector.tsx index 93f8d7674deb5..c236a39b46d47 100644 --- a/airflow/ui/src/components/TimeRangeSelector.tsx +++ b/airflow/ui/src/components/TimeRangeSelector.tsx @@ -41,7 +41,7 @@ const defaultTimeOptions = createListCollection({ { label: "Last 1 hour", value: "1" }, { label: "Last 12 hours", value: "12" }, { label: "Last 24 hours", value: "24" }, - { label: "Last week", value: "168" }, + { label: "Past week", value: "168" }, ], }); diff --git a/airflow/ui/src/pages/Dag/Overview/Overview.tsx b/airflow/ui/src/pages/Dag/Overview/Overview.tsx index dfe118bd18e10..bd6f09b280569 100644 --- a/airflow/ui/src/pages/Dag/Overview/Overview.tsx +++ b/airflow/ui/src/pages/Dag/Overview/Overview.tsx @@ -29,7 +29,7 @@ import TimeRangeSelector from "src/components/TimeRangeSelector"; import { TrendCountButton } from "src/components/TrendCountButton"; import { stateColor } from "src/utils/stateColor"; -const defaultHour = "12"; +const defaultHour = "168"; export const Overview = () => { const { dagId } = useParams(); diff --git a/airflow/ui/src/pages/Dag/Runs/Runs.tsx b/airflow/ui/src/pages/Dag/Runs/Runs.tsx index 02c157d90576a..3e80742cd4608 100644 --- a/airflow/ui/src/pages/Dag/Runs/Runs.tsx +++ b/airflow/ui/src/pages/Dag/Runs/Runs.tsx @@ -111,7 +111,14 @@ export const Runs = () => { const [searchParams, setSearchParams] = useSearchParams(); - const { setTableURLState, tableURLState } = useTableURLState(); + const { setTableURLState, tableURLState } = useTableURLState({ + sorting: [ + { + desc: true, + id: "start_date", + }, + ], + }); const { pagination, sorting } = tableURLState; const [sort] = sorting; const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx index 2ed1d11773118..55bbab0c332f9 100644 --- a/airflow/ui/src/pages/DagsList/DagsList.tsx +++ b/airflow/ui/src/pages/DagsList/DagsList.tsx @@ -100,11 +100,10 @@ const columns: Array> = [ nextDagrunCreateAfter={original.next_dagrun_create_after} /> ) : undefined, - enableSorting: false, header: "Next Dag Run", }, { - accessorKey: "latest_dag_runs", + accessorKey: "last_run_start_date", cell: ({ row: { original } }) => original.latest_dag_runs[0] ? ( > = [ state={original.latest_dag_runs[0].state} /> ) : undefined, - enableSorting: false, header: "Last Dag Run", }, { @@ -171,7 +169,15 @@ export const DagsList = () => { ) as DagRunState; const selectedTags = searchParams.getAll(TAGS_PARAM); - const { setTableURLState, tableURLState } = useTableURLState(); + const { setTableURLState, tableURLState } = useTableURLState({ + sorting: [ + { + desc: true, + id: "last_run_start_date", + }, + ], + }); + const { pagination, sorting } = tableURLState; const [dagDisplayNamePattern, setDagDisplayNamePattern] = useState( searchParams.get(NAME_PATTERN_PARAM) ?? undefined, @@ -254,7 +260,11 @@ export const DagsList = () => { ({ + ...dag, + last_run_start_date: dag.latest_dag_runs, + }))} displayMode={display} errorMessage={} initialState={tableURLState} diff --git a/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx b/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx index feb6ffeeb0b0d..00279b0d443c7 100644 --- a/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx +++ b/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx @@ -28,7 +28,7 @@ import { DagRunMetrics } from "./DagRunMetrics"; import { MetricSectionSkeleton } from "./MetricSectionSkeleton"; import { TaskInstanceMetrics } from "./TaskInstanceMetrics"; -const defaultHour = "12"; +const defaultHour = "168"; export const HistoricalMetrics = () => { const now = dayjs(); diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx index 95b1ebf3c92f7..fe0a1cd024669 100644 --- a/airflow/ui/src/pages/Run/TaskInstances.tsx +++ b/airflow/ui/src/pages/Run/TaskInstances.tsx @@ -88,7 +88,14 @@ const columns: Array> = [ export const TaskInstances = () => { const { dagId = "", runId = "" } = useParams(); - const { setTableURLState, tableURLState } = useTableURLState(); + const { setTableURLState, tableURLState } = useTableURLState({ + sorting: [ + { + desc: true, + id: "start_date", + }, + ], + }); const { pagination, sorting } = tableURLState; const [sort] = sorting; const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; diff --git a/airflow/ui/src/pages/Task/Instances.tsx b/airflow/ui/src/pages/Task/Instances.tsx index af72c865c8901..59e81f9ecfb0b 100644 --- a/airflow/ui/src/pages/Task/Instances.tsx +++ b/airflow/ui/src/pages/Task/Instances.tsx @@ -90,7 +90,14 @@ const columns = ( export const Instances = () => { const { dagId = "", taskId } = useParams(); - const { setTableURLState, tableURLState } = useTableURLState(); + const { setTableURLState, tableURLState } = useTableURLState({ + sorting: [ + { + desc: true, + id: "start_date", + }, + ], + }); const { pagination, sorting } = tableURLState; const [sort] = sorting; const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; From 2589aa75a85223aaea3ec9f72c4b8edddfeb2566 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 12 Dec 2024 15:33:03 -0500 Subject: [PATCH 2/2] Define default sort in orderBy param vs tableUrlState --- airflow/ui/src/pages/Dag/Runs/Runs.tsx | 11 ++-------- airflow/ui/src/pages/DagsList/DagsList.tsx | 19 +++++------------- airflow/ui/src/pages/Events/Events.tsx | 6 ++---- airflow/ui/src/pages/Run/TaskInstances.tsx | 11 ++-------- airflow/ui/src/pages/Task/Instances.tsx | 11 ++-------- airflow/ui/src/pages/Variables/Variables.tsx | 6 ++---- airflow/ui/src/queries/useDags.tsx | 21 ++++++++++++++------ 7 files changed, 30 insertions(+), 55 deletions(-) diff --git a/airflow/ui/src/pages/Dag/Runs/Runs.tsx b/airflow/ui/src/pages/Dag/Runs/Runs.tsx index 3e80742cd4608..ae2cf2201c0ff 100644 --- a/airflow/ui/src/pages/Dag/Runs/Runs.tsx +++ b/airflow/ui/src/pages/Dag/Runs/Runs.tsx @@ -111,17 +111,10 @@ export const Runs = () => { const [searchParams, setSearchParams] = useSearchParams(); - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [ - { - desc: true, - id: "start_date", - }, - ], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const { pagination, sorting } = tableURLState; const [sort] = sorting; - const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; + const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-start_date"; const filteredState = searchParams.get(STATE_PARAM); diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx index 55bbab0c332f9..c35132c1564e9 100644 --- a/airflow/ui/src/pages/DagsList/DagsList.tsx +++ b/airflow/ui/src/pages/DagsList/DagsList.tsx @@ -169,14 +169,7 @@ export const DagsList = () => { ) as DagRunState; const selectedTags = searchParams.getAll(TAGS_PARAM); - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [ - { - desc: true, - id: "last_run_start_date", - }, - ], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const { pagination, sorting } = tableURLState; const [dagDisplayNamePattern, setDagDisplayNamePattern] = useState( @@ -184,7 +177,9 @@ export const DagsList = () => { ); const [sort] = sorting; - const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; + const orderBy = sort + ? `${sort.desc ? "-" : ""}${sort.id}` + : "-last_run_start_date"; const handleSearchChange = (value: string) => { if (value) { @@ -260,11 +255,7 @@ export const DagsList = () => { ({ - ...dag, - last_run_start_date: dag.latest_dag_runs, - }))} + data={data.dags} displayMode={display} errorMessage={} initialState={tableURLState} diff --git a/airflow/ui/src/pages/Events/Events.tsx b/airflow/ui/src/pages/Events/Events.tsx index 703cfe7d6006b..95c7b888a815e 100644 --- a/airflow/ui/src/pages/Events/Events.tsx +++ b/airflow/ui/src/pages/Events/Events.tsx @@ -113,13 +113,11 @@ const eventsColumn = ( export const Events = () => { const { dagId, runId, taskId } = useParams(); - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [{ desc: true, id: "when" }], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const { pagination, sorting } = tableURLState; const [sort] = sorting; - const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; + const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-when"; const { data, diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx index fe0a1cd024669..a79be1212ba9b 100644 --- a/airflow/ui/src/pages/Run/TaskInstances.tsx +++ b/airflow/ui/src/pages/Run/TaskInstances.tsx @@ -88,17 +88,10 @@ const columns: Array> = [ export const TaskInstances = () => { const { dagId = "", runId = "" } = useParams(); - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [ - { - desc: true, - id: "start_date", - }, - ], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const { pagination, sorting } = tableURLState; const [sort] = sorting; - const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; + const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-start_date"; const { data, error, isFetching, isLoading } = useTaskInstanceServiceGetTaskInstances({ diff --git a/airflow/ui/src/pages/Task/Instances.tsx b/airflow/ui/src/pages/Task/Instances.tsx index 59e81f9ecfb0b..f318cb9385786 100644 --- a/airflow/ui/src/pages/Task/Instances.tsx +++ b/airflow/ui/src/pages/Task/Instances.tsx @@ -90,17 +90,10 @@ const columns = ( export const Instances = () => { const { dagId = "", taskId } = useParams(); - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [ - { - desc: true, - id: "start_date", - }, - ], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const { pagination, sorting } = tableURLState; const [sort] = sorting; - const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined; + const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-start_date"; const { data: task, diff --git a/airflow/ui/src/pages/Variables/Variables.tsx b/airflow/ui/src/pages/Variables/Variables.tsx index a68e7336b3964..bc3f2c310c49e 100644 --- a/airflow/ui/src/pages/Variables/Variables.tsx +++ b/airflow/ui/src/pages/Variables/Variables.tsx @@ -57,9 +57,7 @@ const columns: Array> = [ ]; export const Variables = () => { - const { setTableURLState, tableURLState } = useTableURLState({ - sorting: [{ desc: false, id: "key" }], - }); + const { setTableURLState, tableURLState } = useTableURLState(); const [searchParams, setSearchParams] = useSearchParams(); const { NAME_PATTERN: NAME_PATTERN_PARAM }: SearchParamsKeysType = SearchParamsKeys; @@ -70,7 +68,7 @@ export const Variables = () => { const [sort] = sorting; const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id === "value" ? "_val" : sort.id}` - : undefined; + : "-key"; const { data, error, isFetching, isLoading } = useVariableServiceGetVariables( { diff --git a/airflow/ui/src/queries/useDags.tsx b/airflow/ui/src/queries/useDags.tsx index 6e0d451ff3bcd..09f1562fc41f0 100644 --- a/airflow/ui/src/queries/useDags.tsx +++ b/airflow/ui/src/queries/useDags.tsx @@ -20,7 +20,10 @@ import { useDagServiceGetDags, useDagsServiceRecentDagRuns, } from "openapi/queries"; -import type { DagRunState } from "openapi/requests/types.gen"; +import type { + DagRunState, + DAGWithLatestDagRunsResponse, +} from "openapi/requests/types.gen"; const queryOptions = { refetchOnMount: true, @@ -29,6 +32,10 @@ const queryOptions = { staleTime: 5 * 60 * 1000, }; +export type DagWithLatest = { + last_run_start_date: string; +} & DAGWithLatestDagRunsResponse; + export const useDags = ( searchParams: { dagDisplayNamePattern?: string; @@ -69,11 +76,13 @@ export const useDags = ( (runsDag) => runsDag.dag_id === dag.dag_id, ); - // For dags with recent dag runs replace the dag data from useDagsServiceRecentDagRuns - // which might be stale with updated dag data from useDagServiceGetDags - return dagWithRuns - ? { ...dagWithRuns, ...dag } - : { ...dag, latest_dag_runs: [] }; + return { + latest_dag_runs: [], + ...dagWithRuns, + ...dag, + // We need last_run_start_date to exist on the object in order for react-table sort to work correctly + last_run_start_date: "", + }; }); return {