From 957c78a3f663bdf82f92486c535a5fdb1b1ef84a Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Wed, 8 Sep 2021 14:59:38 +0530 Subject: [PATCH] Segregation of assets count on landing page and corresponding navigation to explore page (#424) * changed my-data page to show different entities count and make it clickable. * minor fixes * fixed my-data page count issue * Changed icons for summary data * addressing review comments * minor fix * removed commented code --- .../ui/src/assets/svg/dashboard-grey.svg | 4 + .../resources/ui/src/assets/svg/service.svg | 9 +- .../ui/src/assets/svg/table-grey.svg | 3 + .../resources/ui/src/assets/svg/terms.svg | 4 +- .../ui/src/assets/svg/topic-grey.svg | 8 ++ .../main/resources/ui/src/assets/svg/user.svg | 5 +- .../src/components/my-data/MyDataHeader.tsx | 102 +++++++++++------- .../resources/ui/src/constants/constants.ts | 10 +- .../ui/src/pages/explore/explore.constants.ts | 3 + .../ui/src/pages/explore/explore.interface.ts | 1 + .../resources/ui/src/pages/explore/index.tsx | 90 ++++++++++++---- .../resources/ui/src/pages/my-data/index.tsx | 12 ++- .../resources/ui/src/pages/tags/index.tsx | 13 ++- .../ui/src/router/AuthenticatedAppRouter.tsx | 1 + .../resources/ui/src/utils/ServiceUtils.ts | 36 ++++++- .../main/resources/ui/src/utils/SvgUtils.tsx | 18 ++++ 16 files changed, 241 insertions(+), 78 deletions(-) create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard-grey.svg create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/table-grey.svg create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard-grey.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard-grey.svg new file mode 100644 index 00000000000..18e8f2ac75c --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard-grey.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/service.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/service.svg index 8cb3fc6cff6..2e6b1a5632c 100644 --- a/catalog-rest-service/src/main/resources/ui/src/assets/svg/service.svg +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/service.svg @@ -1,4 +1,5 @@ - - - - + + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/table-grey.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/table-grey.svg new file mode 100644 index 00000000000..610d12e3d6b --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/table-grey.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/terms.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/terms.svg index 315ba95587f..f5f0dd4f092 100644 --- a/catalog-rest-service/src/main/resources/ui/src/assets/svg/terms.svg +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/terms.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg new file mode 100644 index 00000000000..7c9e7b8f0be --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/user.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/user.svg index a5b35445b3e..890cea0588f 100644 --- a/catalog-rest-service/src/main/resources/ui/src/assets/svg/user.svg +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/user.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data/MyDataHeader.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data/MyDataHeader.tsx index 9e903d58bf5..5d131a54cc7 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data/MyDataHeader.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data/MyDataHeader.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { observer } from 'mobx-react'; import React, { FunctionComponent, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import AppState from '../../AppState'; import { ROUTES } from '../../constants/constants'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; @@ -9,6 +9,16 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils'; type Props = { countServices: number; countAssets: number; + entityCounts: { + tableCount: number; + topicCount: number; + dashboardCount: number; + }; +}; +type Summary = { + icon: string; + data: string; + link?: string; }; const LANDING_STATES = [ @@ -29,32 +39,51 @@ const LANDING_STATES = [ const MyDataHeader: FunctionComponent = ({ countAssets, countServices, + entityCounts, }: Props) => { const history = useHistory(); const { users, userTeams } = AppState; - const [dataSummary, setdataSummary] = useState({ - asstes: { - icon: Icons.ASSETS, - data: `${countAssets} of Assets`, - }, - service: { - icon: Icons.SERVICE, - data: `${countServices} of Services`, - }, - user: { - icon: Icons.USERS, - data: `${users.length} of Users`, - }, - terms: { - icon: Icons.TERMS, - data: `${userTeams.length} of Teams`, - }, - }); + const [dataSummary, setdataSummary] = useState>({}); const getFormattedDescription = (description: string) => { return description.replaceAll('{countAssets}', countAssets.toString()); }; + const getSummarydata = () => { + return { + tables: { + icon: Icons.TABLE_GREY, + data: `${entityCounts.tableCount} Tables`, + link: `/explore/tables`, + }, + topics: { + icon: Icons.TOPIC_GREY, + data: `${entityCounts.topicCount} Topics`, + link: `/explore/topics`, + }, + dashboards: { + icon: Icons.DASHBOARD_GREY, + data: `${entityCounts.dashboardCount} Dashboards`, + link: `/explore/dashboards`, + }, + service: { + icon: Icons.SERVICE, + data: `${countServices} of Services`, + link: `/services`, + }, + user: { + icon: Icons.USERS, + data: `${users.length} of Users`, + link: `/teams`, + }, + terms: { + icon: Icons.TERMS, + data: `${userTeams.length} of Teams`, + link: `/teams`, + }, + }; + }; + const handleRouting = (url = '') => { if (url) { history.push(url); @@ -62,29 +91,12 @@ const MyDataHeader: FunctionComponent = ({ }; useEffect(() => { - setdataSummary({ - asstes: { - icon: Icons.ASSETS, - data: `${countAssets} Assets`, - }, - service: { - icon: Icons.SERVICE, - data: `${countServices} Services`, - }, - user: { - icon: Icons.USERS, - data: `${users.length} Users`, - }, - terms: { - icon: Icons.TERMS, - data: `${userTeams.length} Teams`, - }, - }); - }, [userTeams, users, countAssets, countServices]); + setdataSummary(getSummarydata()); + }, [userTeams, users, countServices]); return (
-

+

Open Metadata

@@ -92,11 +104,19 @@ const MyDataHeader: FunctionComponent = ({ {Object.values(dataSummary).map((data, index) => (
- -

{data.data}

+ {data.link ? ( + + + + ) : ( +

{data.data}

+ )}
))} +
{LANDING_STATES.map((d, i) => (
{ +export const getExplorePathWithSearch = (searchQuery = '', tab = 'tables') => { let path = ROUTES.EXPLORE_WITH_SEARCH; - path = path.replace(PLACEHOLDER_ROUTE_SEARCHQUERY, searchQuery); + path = path + .replace(PLACEHOLDER_ROUTE_SEARCHQUERY, searchQuery) + .replace(PLACEHOLDER_ROUTE_TAB, tab); return path; }; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts index 3af9afe8d0a..ba356eff70f 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts @@ -66,6 +66,7 @@ export const tabsInfo = [ sortingFields: tableSortingFields, sortField: tableSortingFields[0].value, tab: 1, + path: 'tables', }, { label: 'Topics', @@ -73,6 +74,7 @@ export const tabsInfo = [ sortingFields: topicSortingFields, sortField: topicSortingFields[0].value, tab: 2, + path: 'topics', }, { label: 'Dashboards', @@ -80,5 +82,6 @@ export const tabsInfo = [ sortingFields: topicSortingFields, sortField: topicSortingFields[0].value, tab: 3, + path: 'dashboards', }, ]; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.interface.ts b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.interface.ts index d510b3a4099..345678712df 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.interface.ts +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.interface.ts @@ -17,6 +17,7 @@ export type Params = { searchQuery: string; + tab: string; }; export type Service = { diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx index c2508144683..e20eb3317a0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx @@ -25,7 +25,7 @@ import { SearchResponse, } from 'Models'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { useLocation, useParams } from 'react-router-dom'; +import { useHistory, useLocation, useParams } from 'react-router-dom'; import { searchData } from '../../axiosAPIs/miscAPI'; import { Button } from '../../components/buttons/Button/Button'; import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES'; @@ -34,6 +34,7 @@ import DropDownList from '../../components/dropdown/DropDownList'; import SearchedData from '../../components/searched-data/SearchedData'; import { ERROR500, + getExplorePathWithSearch, PAGE_SIZE, tableSortingFields, } from '../../constants/constants'; @@ -68,15 +69,37 @@ const getQueryParam = (urlSearchQuery = ''): FilterObject => { }, {}) as FilterObject; }; +const getCurrentTab = (tab: string) => { + let currentTab = 1; + switch (tab) { + case 'topics': + currentTab = 2; + + break; + case 'dashboards': + currentTab = 3; + + break; + + case 'tables': + default: + currentTab = 1; + + break; + } + + return currentTab; +}; + const ExplorePage: React.FC = (): React.ReactElement => { const location = useLocation(); - + const history = useHistory(); const filterObject: FilterObject = { ...{ tags: [], service: [], tier: [] }, ...getQueryParam(location.search), }; const showToast = useToastContext(); - const { searchQuery } = useParams(); + const { searchQuery, tab } = useParams(); const [searchText, setSearchText] = useState(searchQuery || ''); const [data, setData] = useState>([]); const [filters, setFilters] = useState(filterObject); @@ -90,7 +113,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { const [sortField, setSortField] = useState('last_updated_timestamp'); const [sortOrder, setSortOrder] = useState('desc'); const [searchIndex, setSearchIndex] = useState(SearchIndex.TABLE); - const [currentTab, setCurrentTab] = useState(1); + const [currentTab, setCurrentTab] = useState(getCurrentTab(tab)); const [tableCount, setTableCount] = useState(0); const [topicCount, setTopicCount] = useState(0); const [dashboardCount, setDashboardCount] = useState(0); @@ -177,13 +200,32 @@ const ExplorePage: React.FC = (): React.ReactElement => { } }; + const setCount = (count = 0) => { + switch (searchIndex) { + case SearchIndex.TABLE: + setTableCount(count); + + break; + case SearchIndex.DASHBOARD: + setDashboardCount(count); + + break; + case SearchIndex.TOPIC: + setTopicCount(count); + + break; + default: + break; + } + }; + const fetchCounts = () => { const emptyValue = ''; const tableCount = searchData( searchText, 0, 0, - getFilterString(filters), + emptyValue, emptyValue, emptyValue, SearchIndex.TABLE @@ -192,7 +234,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { searchText, 0, 0, - getFilterString(filters), + emptyValue, emptyValue, emptyValue, SearchIndex.TOPIC @@ -201,7 +243,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { searchText, 0, 0, - getFilterString(filters), + emptyValue, emptyValue, emptyValue, SearchIndex.DASHBOARD @@ -270,6 +312,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { resAggTag, ]: Array) => { updateSearchResults(resSearchResults); + setCount(resSearchResults.data.hits.total.value); if (forceSetAgg) { setAggregations( resSearchResults.data.hits.hits.length > 0 @@ -379,8 +422,8 @@ const ExplorePage: React.FC = (): React.ReactElement => { ); }; - const getActiveTabClass = (tab: number) => { - return tab === currentTab ? 'active' : ''; + const getActiveTabClass = (selectedTab: number) => { + return selectedTab === currentTab ? 'active' : ''; }; const resetFilters = () => { @@ -401,7 +444,17 @@ const ExplorePage: React.FC = (): React.ReactElement => { return getCountBadge(); } }; - + const onTabChange = (selectedTab: number) => { + if (tabsInfo[selectedTab - 1].path !== tab) { + resetFilters(); + history.push({ + pathname: getExplorePathWithSearch( + searchQuery, + tabsInfo[selectedTab - 1].path + ), + }); + } + }; const getTabs = () => { return (
@@ -414,12 +467,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { )}`} key={index} onClick={() => { - setCurrentTab(tab.tab); - setSearchIndex(tab.index); - setFieldList(tab.sortingFields); - setSortField(tab.sortField); - setCurrentPage(1); - resetFilters(); + onTabChange(tab.tab); }}> {tab.label} {getTabCount(tab.index)} @@ -433,10 +481,14 @@ const ExplorePage: React.FC = (): React.ReactElement => { }; useEffect(() => { + setFilters(filterObject); setSearchText(searchQuery || ''); setCurrentPage(1); - setFilters(filterObject); - }, [searchQuery]); + setCurrentTab(getCurrentTab(tab)); + setSearchIndex(tabsInfo[getCurrentTab(tab) - 1].index); + setFieldList(tabsInfo[getCurrentTab(tab) - 1].sortingFields); + setSortField(tabsInfo[getCurrentTab(tab) - 1].sortField); + }, [searchQuery, tab]); useEffect(() => { if (getFilterString(filters)) { @@ -456,7 +508,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { useEffect(() => { fetchCounts(); - }, [searchText, filters]); + }, [searchText]); // alwyas Keep this useEffect at the end... useEffect(() => { diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx index 472180554cf..238aa38e5e5 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx @@ -18,7 +18,7 @@ import { AxiosError } from 'axios'; import { isEmpty } from 'lodash'; import { observer } from 'mobx-react'; -import { FormatedTableData, SearchResponse } from 'Models'; +import { Bucket, FormatedTableData, SearchResponse, Sterm } from 'Models'; import React, { useEffect, useRef, useState } from 'react'; import AppState from '../../AppState'; import { searchData } from '../../axiosAPIs/miscAPI'; @@ -31,7 +31,10 @@ import { Ownership } from '../../enums/mydata.enum'; import useToastContext from '../../hooks/useToastContext'; import { formatDataResponse } from '../../utils/APIUtils'; import { getCurrentUserId } from '../../utils/CommonUtils'; -import { getAllServices } from '../../utils/ServiceUtils'; +import { + getAllServices, + getEntityCountByService, +} from '../../utils/ServiceUtils'; const MyDataPage: React.FC = (): React.ReactElement => { const showToast = useToastContext(); @@ -42,6 +45,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { const [currentTab, setCurrentTab] = useState(1); const [error, setError] = useState(''); const [filter, setFilter] = useState(''); + const [aggregations, setAggregations] = useState>(); const [searchIndex] = useState( 'dashboard_search_index,topic_search_index,table_search_index' ); @@ -85,6 +89,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { setData(formatDataResponse(hits)); if (setAssetCount) { setCountAssets(total); + setAggregations(res.data.aggregations); } setIsLoading(false); } else { @@ -175,6 +180,9 @@ const MyDataPage: React.FC = (): React.ReactElement => { {getTabs()} diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx index 850d27ef8e8..0ff64c7f8a1 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx @@ -35,6 +35,7 @@ import FormModal from '../../components/Modals/FormModal'; import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor'; import TagsContainer from '../../components/tags-container/tags-container'; import Tags from '../../components/tags/tags'; +import { getExplorePathWithSearch } from '../../constants/constants'; import { isEven } from '../../utils/CommonUtils'; import SVGIcons from '../../utils/SvgUtils'; import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; @@ -155,6 +156,14 @@ const TagsPage = () => { setEditTag(undefined); }; + const getUsageCountLink = (tagFQN: string) => { + if (tagFQN.startsWith('Tier')) { + return `${getExplorePathWithSearch()}?tier=${tagFQN}`; + } else { + return `${getExplorePathWithSearch()}?tags=${tagFQN}`; + } + }; + useEffect(() => { fetchCategories(); }, []); @@ -333,7 +342,9 @@ const TagsPage = () => { {tag.usageCount ? ( + to={getUsageCountLink( + tag.fullyQualifiedName + )}> {tag.usageCount} ) : ( diff --git a/catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx b/catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx index 6b40b74420b..5f345b853a3 100644 --- a/catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx @@ -47,6 +47,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => { + diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/ServiceUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/ServiceUtils.ts index 85860dba940..7bf4e49bf54 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/ServiceUtils.ts +++ b/catalog-rest-service/src/main/resources/ui/src/utils/ServiceUtils.ts @@ -1,5 +1,5 @@ import { AxiosResponse } from 'axios'; -import { ServiceCollection, ServiceData, ServiceTypes } from 'Models'; +import { Bucket, ServiceCollection, ServiceData, ServiceTypes } from 'Models'; import { getServiceDetails, getServices } from '../axiosAPIs/serviceAPI'; import { ServiceDataObj } from '../components/Modals/AddServiceModal/AddServiceModal'; import { @@ -166,3 +166,37 @@ export const getServiceCategoryFromType = ( return serviceCategory; }; + +export const getEntityCountByService = (buckets: Array) => { + const entityCounts = { tableCount: 0, topicCount: 0, dashboardCount: 0 }; + buckets?.forEach((bucket) => { + switch (bucket.key) { + case DatabaseServiceType.ATHENA: + case DatabaseServiceType.BIGQUERY: + case DatabaseServiceType.HIVE: + case DatabaseServiceType.MSSQL: + case DatabaseServiceType.MYSQL: + case DatabaseServiceType.ORACLE: + case DatabaseServiceType.POSTGRES: + case DatabaseServiceType.PRESTO: + case DatabaseServiceType.REDSHIFT: + case DatabaseServiceType.SNOWFLAKE: + entityCounts.tableCount += bucket.doc_count; + + break; + case MessagingServiceType.KAFKA: + case MessagingServiceType.PULSAR: + entityCounts.topicCount += bucket.doc_count; + + break; + case DashboardServiceType.SUPERSET: + entityCounts.dashboardCount += bucket.doc_count; + + break; + default: + break; + } + }); + + return entityCounts; +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx index 439df3dda24..db7851a11df 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -3,6 +3,7 @@ import IconGoogle from '../assets/img/google-icon.png'; import IconWelcomePopper from '../assets/img/welcome-popper-icon.png'; import IconAPI from '../assets/svg/api.svg'; import IconSuccess from '../assets/svg/check.svg'; +import IconDashboardGrey from '../assets/svg/dashboard-grey.svg'; import IconDashboard from '../assets/svg/dashboard.svg'; import IconAsstest from '../assets/svg/data-assets.svg'; import IconDoc from '../assets/svg/doc.svg'; @@ -46,8 +47,10 @@ import IconInfo from '../assets/svg/info.svg'; import LogoMonogram from '../assets/svg/logo-monogram.svg'; import Logo from '../assets/svg/logo.svg'; import IconSetting from '../assets/svg/service.svg'; +import IconTableGrey from '../assets/svg/table-grey.svg'; import IconTable from '../assets/svg/table.svg'; import IconTerns from '../assets/svg/terms.svg'; +import IconTopicGrey from '../assets/svg/topic-grey.svg'; import IconTopic from '../assets/svg/topic.svg'; import IconUser from '../assets/svg/user.svg'; import IconWarning from '../assets/svg/warning.svg'; @@ -112,6 +115,9 @@ export const Icons = { TABLE: 'table', TOPIC: 'topic', DASHBOARD: 'dashboard', + TABLE_GREY: 'table-grey', + TOPIC_GREY: 'topic-grey', + DASHBOARD_GREY: 'dashboard-grey', }; const SVGIcons: FunctionComponent = ({ @@ -333,6 +339,18 @@ const SVGIcons: FunctionComponent = ({ case Icons.DASHBOARD: IconComponent = IconDashboard; + break; + case Icons.TABLE_GREY: + IconComponent = IconTableGrey; + + break; + case Icons.TOPIC_GREY: + IconComponent = IconTopicGrey; + + break; + case Icons.DASHBOARD_GREY: + IconComponent = IconDashboardGrey; + break; default: