diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx index 97616ed490bc9a..034482c4cf9b55 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useCallback } from 'react'; import { EuiBasicTable, EuiButton, @@ -144,13 +144,20 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { const [search, setSearch] = useState(defaultKuery); const { pagination, pageSizeOptions, setPagination } = usePagination(); - // Configs state (for filtering) + // Configs state for filtering const [isConfigsFilterOpen, setIsConfigsFilterOpen] = useState(false); const [selectedConfigs, setSelectedConfigs] = useState([]); + // Status for filtering const [isStatusFilterOpen, setIsStatutsFilterOpen] = useState(false); const [selectedStatus, setSelectedStatus] = useState([]); + const clearFilters = useCallback(() => { + setSearch(''); + setSelectedConfigs([]); + setSelectedStatus([]); + }, [setSearch, setSelectedConfigs, setSelectedStatus]); + // Add a config id to current search const addConfigFilter = (configId: string) => { setSelectedConfigs([...selectedConfigs, configId]); @@ -500,7 +507,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { className="fleet__agentList__table" data-test-subj="fleetAgentListTable" - loading={isLoading && agentsRequest.isInitialRequest} + loading={isLoading} hasActions={true} noItemsMessage={ isLoading && agentsRequest.isInitialRequest ? ( @@ -508,15 +515,13 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { id="xpack.ingestManager.agentList.loadingAgentsMessage" defaultMessage="Loading agents…" /> - ) : !search.trim() && selectedConfigs.length === 0 && totalAgents === 0 ? ( - emptyPrompt - ) : ( + ) : search.trim() || selectedConfigs.length || selectedStatus.length ? ( setSearch('')}> + clearFilters()}> = () => { ), }} /> - ) + ) : !isLoading && totalAgents === 0 ? ( + emptyPrompt + ) : undefined } items={totalAgents ? agents : []} itemId="id"