Feat : UI - Filter by database name. (#1599)

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -81,7 +81,7 @@ const Explore: React.FC<ExploreProps> = ({
   const location = useLocation();
   const history = useHistory();
   const filterObject: FilterObject = {
-    ...{ tags: [], service: [], tier: [] },
+    ...{ tags: [], service: [], tier: [], database: [] },
     ...getQueryParam(location.search),
   };
   const [data, setData] = useState<Array<FormatedTableData>>([]);
@@ -262,6 +262,15 @@ const Explore: React.FC<ExploreProps> = ({
         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<ExploreProps> = ({
           searchResult.resAggTag.data.aggregations,
           'tags'
         );
+        const aggDatabase = getAggregationList(
+          searchResult.resAggTag.data.aggregations,
+          'database'
+        );
 
-        updateAggregationCount([...aggServiceType, ...aggTier, ...aggTag]);
+        updateAggregationCount([
+          ...aggServiceType,
+          ...aggTier,
+          ...aggTag,
+          ...aggDatabase,
+        ]);
       }
       setIsEntityLoading(false);
     }

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', () => {

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 {

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx

@@ -31,6 +31,7 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
   const [showAllTags, setShowAllTags] = useState<boolean>(false);
   const [showAllServices, setShowAllServices] = useState<boolean>(false);
   const [showAllTier, setShowAllTier] = useState<boolean>(false);
+  const [showAllDatabase, setShowAllDatabase] = useState<boolean>(false);
   const getLinkText = (
     length: number,
     state: boolean,
@@ -44,8 +45,8 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
       )
     );
   };
-  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 ? (
       <div className="tw-filter-seperator" />
     ) : null;
   };
@@ -64,6 +65,8 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
         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<FacetProp> = ({
         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<FacetProp> = ({
                 <div className="sidebar-my-data-holder mt-2 mb-3">
                   {getFilterItems(aggregation)}
                 </div>
-                {getSeparator(aggregations.length, index)}
+                {getSeparator(
+                  aggregations.length,
+                  index,
+                  aggregations[index + 1]?.buckets?.length > 0
+                )}
               </>
             ) : null}
           </Fragment>

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 = {

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx

@@ -187,6 +187,7 @@ const ExplorePage: FunctionComponent = () => {
           resAggServiceType,
           resAggTier,
           resAggTag,
+          resAggDatabase,
         ]: Array<SearchResponse>) => {
           setError('');
           setSearchResult({
@@ -194,6 +195,7 @@ const ExplorePage: FunctionComponent = () => {
             resAggServiceType,
             resAggTier,
             resAggTag,
+            resAggDatabase,
           });
           setIsLoadingForData(false);
         }