This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new e2b69e7d83e Update sort and filter defaults (#44855)
e2b69e7d83e is described below
commit e2b69e7d83ef02016189dedde5075f28f0cd85be
Author: Brent Bovenzi <[email protected]>
AuthorDate: Thu Dec 12 15:51:55 2024 -0500
Update sort and filter defaults (#44855)
* Update sort and filter defaults
* Define default sort in orderBy param vs tableUrlState
---
airflow/ui/src/components/TimeRangeSelector.tsx | 2 +-
airflow/ui/src/pages/Dag/Overview/Overview.tsx | 2 +-
airflow/ui/src/pages/Dag/Runs/Runs.tsx | 2 +-
airflow/ui/src/pages/DagsList/DagsList.tsx | 9 +++++----
.../HistoricalMetrics/HistoricalMetrics.tsx | 2 +-
airflow/ui/src/pages/Events/Events.tsx | 6 ++----
airflow/ui/src/pages/Run/TaskInstances.tsx | 2 +-
airflow/ui/src/pages/Task/Instances.tsx | 2 +-
airflow/ui/src/pages/Variables/Variables.tsx | 6 ++----
airflow/ui/src/queries/useDags.tsx | 21 +++++++++++++++------
10 files changed, 30 insertions(+), 24 deletions(-)
diff --git a/airflow/ui/src/components/TimeRangeSelector.tsx
b/airflow/ui/src/components/TimeRangeSelector.tsx
index 93f8d7674de..c236a39b46d 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 dfe118bd18e..bd6f09b2805 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 02c157d9057..ae2cf2201c0 100644
--- a/airflow/ui/src/pages/Dag/Runs/Runs.tsx
+++ b/airflow/ui/src/pages/Dag/Runs/Runs.tsx
@@ -114,7 +114,7 @@ export const Runs = () => {
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 2ed1d117731..c35132c1564 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -100,11 +100,10 @@ const columns:
Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
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] ? (
<DagRunInfo
@@ -115,7 +114,6 @@ const columns:
Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
state={original.latest_dag_runs[0].state}
/>
) : undefined,
- enableSorting: false,
header: "Last Dag Run",
},
{
@@ -172,13 +170,16 @@ export const DagsList = () => {
const selectedTags = searchParams.getAll(TAGS_PARAM);
const { setTableURLState, tableURLState } = useTableURLState();
+
const { pagination, sorting } = tableURLState;
const [dagDisplayNamePattern, setDagDisplayNamePattern] = useState(
searchParams.get(NAME_PATTERN_PARAM) ?? undefined,
);
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) {
diff --git
a/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
b/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
index feb6ffeeb0b..00279b0d443 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/Events/Events.tsx
b/airflow/ui/src/pages/Events/Events.tsx
index 703cfe7d600..95c7b888a81 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 95b1ebf3c92..a79be1212ba 100644
--- a/airflow/ui/src/pages/Run/TaskInstances.tsx
+++ b/airflow/ui/src/pages/Run/TaskInstances.tsx
@@ -91,7 +91,7 @@ export const TaskInstances = () => {
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 af72c865c89..f318cb93857 100644
--- a/airflow/ui/src/pages/Task/Instances.tsx
+++ b/airflow/ui/src/pages/Task/Instances.tsx
@@ -93,7 +93,7 @@ export const Instances = () => {
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 a68e7336b39..bc3f2c310c4 100644
--- a/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow/ui/src/pages/Variables/Variables.tsx
@@ -57,9 +57,7 @@ const columns: Array<ColumnDef<VariableResponse>> = [
];
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 6e0d451ff3b..09f1562fc41 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 {
