Pei-Cheng-Yu commented on code in PR #56920:
URL: https://github.com/apache/airflow/pull/56920#discussion_r2455547595


##########
airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstancesFilter.tsx:
##########
@@ -16,39 +16,122 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { HStack, type SelectValueChangeDetails } from "@chakra-ui/react";
-import { useCallback } from "react";
+import { HStack, VStack, type SelectValueChangeDetails, Box } from 
"@chakra-ui/react";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams, useParams } from "react-router-dom";
 
-import type { TaskInstanceState } from "openapi/requests/types.gen";
+import type { TaskInstanceCollectionResponse } from "openapi/requests";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
+import { FilterBar, type FilterValue } from "src/components/FilterBar";
 import { SearchBar } from "src/components/SearchBar";
-import { StateBadge } from "src/components/StateBadge";
-import { Select } from "src/components/ui";
+import { ResetButton } from "src/components/ui";
 import { SearchParamsKeys, type SearchParamsKeysType } from 
"src/constants/searchParams";
-import { taskInstanceStateOptions } from "src/constants/stateOptions";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+import { AttrSelectFilterMulti } from "./AttrSelectFilterMulti";
+import { StateFilter } from "./StateFilter";
 
 const {
   DAG_ID_PATTERN: DAG_ID_PATTERN_PARAM,
+  DAG_VERSION: DAG_VERSION_PARAM,
+  DURATION_GTE: DURATION_GTE_PARAM,
+  DURATION_LTE: DURATION_LTE_PARAM,
+  END_DATE: END_DATE_PARAM,
+  LOGICAL_DATE_GTE: LOGICAL_DATE_GTE_PARAM,
+  LOGICAL_DATE_LTE: LOGICAL_DATE_LTE_PARAM,
+  MAP_INDEX: MAP_INDEX_PARAM,
   NAME_PATTERN: NAME_PATTERN_PARAM,
+  OPERATOR: OPERATOR_PARAM,
+  POOL: POOL_PARAM,
+  QUEUE: QUEUE_PARAM,
+  RUN_ID: RUN_ID_PARAM,
+  START_DATE: START_DATE_PARAM,
   STATE: STATE_PARAM,
+  TRY_NUMBER: TRY_NUMBER_PARAM,
 }: SearchParamsKeysType = SearchParamsKeys;
 
+type Props = {
+  readonly instances?: TaskInstanceCollectionResponse | undefined;
+  readonly setTaskDisplayNamePattern: 
React.Dispatch<React.SetStateAction<string | undefined>>;
+  readonly taskDisplayNamePattern: string | undefined;
+};
+
 export const TaskInstancesFilter = ({
+  instances,
   setTaskDisplayNamePattern,
   taskDisplayNamePattern,
-}: {
-  readonly setTaskDisplayNamePattern: 
React.Dispatch<React.SetStateAction<string | undefined>>;
-  readonly taskDisplayNamePattern: string | undefined;
-}) => {
+}: Props) => {
   const { dagId, runId } = useParams();
+  const paramKeys = useMemo((): Array<FilterableSearchParamsKeys> => {
+    const keys: Array<FilterableSearchParamsKeys> = [
+      LOGICAL_DATE_GTE_PARAM as FilterableSearchParamsKeys,
+      LOGICAL_DATE_LTE_PARAM as FilterableSearchParamsKeys,
+      START_DATE_PARAM as FilterableSearchParamsKeys,
+      END_DATE_PARAM as FilterableSearchParamsKeys,
+      DURATION_GTE_PARAM as FilterableSearchParamsKeys,
+      DURATION_LTE_PARAM as FilterableSearchParamsKeys,
+      TRY_NUMBER_PARAM as FilterableSearchParamsKeys,
+      MAP_INDEX_PARAM as FilterableSearchParamsKeys,
+      DAG_VERSION_PARAM as FilterableSearchParamsKeys,
+    ];
+
+    if (runId === undefined) {
+      keys.splice(1, 0, RUN_ID_PARAM as FilterableSearchParamsKeys);
+    }
+
+    return keys;
+  }, [runId]);
+
   const [searchParams, setSearchParams] = useSearchParams();
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
   const { t: translate } = useTranslation();
 
+  const { filterConfigs, handleFiltersChange } = useFiltersHandler(paramKeys);
+
+  const uniq = (xs: Array<string | null | undefined>) => [
+    ...new Set(xs.filter((x): x is string => x !== null && x !== undefined && 
x !== "")),
+  ];

Review Comment:
   this part is no longer used after integrate it with filterBar



-- 
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]

Reply via email to