diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Execution/Execution.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Execution/Execution.component.tsx index ca3db77d4d3..c970ce57201 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Execution/Execution.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Execution/Execution.component.tsx @@ -42,6 +42,7 @@ import { getEpochMillisForPastDays, } from '../../utils/date-time/DateTimeUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import Searchbar from '../common/SearchBarComponent/SearchBar.component'; import './execution.less'; import ListView from './ListView/ListViewTab.component'; import TreeViewTab from './TreeView/TreeViewTab.component'; @@ -54,6 +55,7 @@ interface ExecutionProps { const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => { const { t } = useTranslation(); const [view, setView] = useState(PIPELINE_EXECUTION_TABS.LIST_VIEW); + const [searchValue, setSearchValue] = useState(''); const [executions, setExecutions] = useState>(); const [datesSelected, setDatesSelected] = useState(false); const [startTime, setStartTime] = useState( @@ -132,6 +134,10 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => { fetchPipelineStatus(startTime, endTime); }, [pipelineFQN, datesSelected, startTime, endTime]); + const handleSearch = (value: string) => { + setSearchValue(value); + }; + return ( @@ -199,11 +205,25 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => { {view === PIPELINE_EXECUTION_TABS.LIST_VIEW ? ( - +
+ + + + + + +
) : ( { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.tsx index b29f2b1d06c..92a20ba7f90 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Execution/ListView/ListViewTab.component.tsx @@ -28,14 +28,20 @@ interface ListViewProps { executions: Array | undefined; status: string; loading: boolean; + searchString: string | undefined; } -const ListView = ({ executions, status, loading }: ListViewProps) => { +const ListView = ({ + executions, + status, + loading, + searchString, +}: ListViewProps) => { const { t } = useTranslation(); const tableData = useMemo( - () => getTableViewData(executions, status), - [executions, status] + () => getTableViewData(executions, status, searchString), + [executions, status, searchString] ); const columns = useMemo( diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/executionUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/executionUtils.tsx index dae3dfaf2c3..1b8d04de38d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/executionUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/executionUtils.tsx @@ -60,7 +60,8 @@ export const StatusIndicator = ({ status }: StatusIndicatorInterface) => ( */ export const getTableViewData = ( executions: PipelineStatus[] | undefined, - status: string | undefined + status: string | undefined, + searchString: string | undefined ): Array | undefined => { if (isUndefined(executions)) { return; @@ -80,11 +81,17 @@ export const getTableViewData = ( }); }); - return viewData.filter((data) => - status !== MenuOptions.all - ? toLower(data.status)?.includes(toLower(status)) - : data - ); + return viewData + .filter((view) => + searchString && searchString.length > 0 + ? toLower(view.name)?.includes(toLower(searchString)) + : true + ) + .filter((view) => + status !== MenuOptions.all + ? toLower(view.status)?.includes(toLower(status)) + : true + ); }; /** @@ -97,7 +104,7 @@ export const getTreeViewData = ( executions: PipelineStatus[], status: string | undefined ) => { - const taskStatusArr = getTableViewData(executions, status); + const taskStatusArr = getTableViewData(executions, status, undefined); return groupBy(taskStatusArr, 'name'); };