From fd92e5c6b7977e2c4bfb88c3ee742d8e327dbfd4 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Wed, 8 Dec 2021 02:25:28 +0530 Subject: [PATCH] Feat : UI - Filter by database name. (#1599) --- .../components/Explore/Explore.component.tsx | 22 +++++++++++++++++-- .../src/components/Explore/Explore.test.tsx | 1 + .../components/Explore/explore.interface.ts | 1 + .../common/facetfilter/FacetFilter.tsx | 15 ++++++++++--- .../resources/ui/src/constants/constants.ts | 6 ++++- .../pages/explore/ExplorePage.component.tsx | 2 ++ 6 files changed, 41 insertions(+), 6 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index abff71ba10e..5348c3f4095 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -81,7 +81,7 @@ const Explore: React.FC = ({ const location = useLocation(); const history = useHistory(); const filterObject: FilterObject = { - ...{ tags: [], service: [], tier: [] }, + ...{ tags: [], service: [], tier: [], database: [] }, ...getQueryParam(location.search), }; const [data, setData] = useState>([]); @@ -262,6 +262,15 @@ const Explore: React.FC = ({ sortOrder: sortOrder, searchIndex: searchIndex, }, + { + queryString: searchText, + from: currentPage, + size: ZERO_SIZE, + filters: getFilterString(filters, ['database']), + sortField: sortField, + sortOrder: sortOrder, + searchIndex: searchIndex, + }, ]; fetchData(fetchParams); @@ -476,8 +485,17 @@ const Explore: React.FC = ({ searchResult.resAggTag.data.aggregations, 'tags' ); + const aggDatabase = getAggregationList( + searchResult.resAggTag.data.aggregations, + 'database' + ); - updateAggregationCount([...aggServiceType, ...aggTier, ...aggTag]); + updateAggregationCount([ + ...aggServiceType, + ...aggTier, + ...aggTag, + ...aggDatabase, + ]); } setIsEntityLoading(false); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx index 97afe117c5a..1877b9eade7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx @@ -43,6 +43,7 @@ const mockSearchResult = { resAggServiceType: mockResponse as unknown as SearchResponse, resAggTier: mockResponse as unknown as SearchResponse, resAggTag: mockResponse as unknown as SearchResponse, + resAggDatabase: mockResponse as unknown as SearchResponse, }; describe('Test Explore component', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts index 68ca2b68901..b42f0f426dc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts @@ -23,6 +23,7 @@ export type ExploreSearchData = { resAggServiceType: SearchResponse; resAggTier: SearchResponse; resAggTag: SearchResponse; + resAggDatabase: SearchResponse; }; export interface ExploreProps { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx index 207be6c9005..97b786115e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx @@ -31,6 +31,7 @@ const FacetFilter: FunctionComponent = ({ const [showAllTags, setShowAllTags] = useState(false); const [showAllServices, setShowAllServices] = useState(false); const [showAllTier, setShowAllTier] = useState(false); + const [showAllDatabase, setShowAllDatabase] = useState(false); const getLinkText = ( length: number, state: boolean, @@ -44,8 +45,8 @@ const FacetFilter: FunctionComponent = ({ ) ); }; - const getSeparator = (length: number, index: number) => { - return length !== 1 && index < length - 1 ? ( + const getSeparator = (length: number, index: number, flag: boolean) => { + return length !== 1 && index < length - 1 && flag ? (
) : null; }; @@ -64,6 +65,8 @@ const FacetFilter: FunctionComponent = ({ return getLinkText(bucketLength, showAllTags, setShowAllTags); case 'Tier': return getLinkText(bucketLength, showAllTier, setShowAllTier); + case 'Database': + return getLinkText(bucketLength, showAllDatabase, setShowAllDatabase); default: return null; } @@ -77,6 +80,8 @@ const FacetFilter: FunctionComponent = ({ return getBuckets(buckets, showAllTags); case 'Tier': return getBuckets(buckets, showAllTier); + case 'Database': + return getBuckets(buckets, showAllDatabase); default: return []; } @@ -172,7 +177,11 @@ const FacetFilter: FunctionComponent = ({
{getFilterItems(aggregation)}
- {getSeparator(aggregations.length, index)} + {getSeparator( + aggregations.length, + index, + aggregations[index + 1]?.buckets?.length > 0 + )} ) : null} diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts index 2d5f047b145..830f221243f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts @@ -63,7 +63,7 @@ export const versionTypes = [ { name: 'Minor', value: 'minor' }, ]; -export const visibleFilters = ['service', 'tier', 'tags']; +export const visibleFilters = ['service', 'tier', 'tags', 'database']; export const tableSortingFields = [ { @@ -100,6 +100,10 @@ export const facetFilterPlaceholder = [ name: 'Tags', value: 'Tags', }, + { + name: 'Database', + value: 'Database', + }, ]; export const ROUTES = { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx index b9e4524c398..7ce7274052c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx @@ -187,6 +187,7 @@ const ExplorePage: FunctionComponent = () => { resAggServiceType, resAggTier, resAggTag, + resAggDatabase, ]: Array) => { setError(''); setSearchResult({ @@ -194,6 +195,7 @@ const ExplorePage: FunctionComponent = () => { resAggServiceType, resAggTier, resAggTag, + resAggDatabase, }); setIsLoadingForData(false); }