diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/external-link.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/external-link.svg new file mode 100644 index 00000000000..00b24407916 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/external-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx index a9632df3107..973682a65c3 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -106,7 +106,7 @@ const Appbar: React.FC = (): JSX.Element => { ), }, { - name: `Slack Channel`, + name: `Slack`, to: 'https://openmetadata.slack.com/join/shared_invite/zt-udl8ris3-Egq~YtJU_yJgJTtROo00dQ#/shared-invite/email', disabled: false, isOpenNewTab: true, @@ -252,8 +252,8 @@ const Appbar: React.FC = (): JSX.Element => { diff --git a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx index 8caae36d48d..2b7588b3b09 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx @@ -18,6 +18,7 @@ import classNames from 'classnames'; import React from 'react'; import { Link } from 'react-router-dom'; +import SVGIcons from '../../utils/SvgUtils'; import { DropDownListItem, DropDownListProp } from './types'; const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => { @@ -54,9 +55,37 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => { setIsOpen && setIsOpen(false); }}> {item.icon ? ( - + ) : ( - item.name + <> + {item.isOpenNewTab ? ( + + {item.name} + + + ) : ( + item.name + )} + )} diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx index 20ef39a45a6..c86dff77fe0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx @@ -1,7 +1,6 @@ import { AxiosPromise, AxiosResponse } from 'axios'; import classNames from 'classnames'; import { compare } from 'fast-json-patch'; -import { isNil } from 'lodash'; import { ColumnTags, TableDetail, User } from 'Models'; import React, { useEffect, useState } from 'react'; import { Link, useParams } from 'react-router-dom'; @@ -42,7 +41,6 @@ import { getOwnerFromId, getTagsWithoutTier, getTierFromTableTags, - getUsagePercentile, } from '../../utils/TableUtils'; import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; type ChartType = { @@ -70,8 +68,8 @@ const MyDashBoardPage = () => { const [activeTab, setActiveTab] = useState(1); const [isEdit, setIsEdit] = useState(false); const [charts, setCharts] = useState([]); - const [usage, setUsage] = useState(''); - const [weeklyUsageCount, setWeeklyUsageCount] = useState(''); + // const [usage, setUsage] = useState(''); + // const [weeklyUsageCount, setWeeklyUsageCount] = useState(''); const [slashedDashboardName, setSlashedDashboardName] = useState< TitleBreadcrumbProps['titleLinks'] >([]); @@ -119,8 +117,8 @@ const MyDashBoardPage = () => { const extraInfo = [ { key: 'Owner', value: owner?.name || '' }, { key: 'Tier', value: tier ? tier.split('.')[1] : '' }, - { key: 'Usage', value: usage }, - { key: 'Queries', value: `${weeklyUsageCount} past week` }, + // { key: 'Usage', value: usage }, + // { key: 'Queries', value: `${weeklyUsageCount} past week` }, ]; const fetchTags = () => { getTagCategories().then((res) => { @@ -180,7 +178,7 @@ const MyDashBoardPage = () => { owner, displayName, charts, - usageSummary, + // usageSummary, } = res.data; setDashboardDetails(res.data); setDashboardId(id); @@ -221,17 +219,17 @@ const MyDashBoardPage = () => { } ); fetchCharts(charts).then((charts) => setCharts(charts)); - if (!isNil(usageSummary?.weeklyStats.percentileRank)) { - const percentile = getUsagePercentile( - usageSummary.weeklyStats.percentileRank - ); - setUsage(percentile); - } else { - setUsage('--'); - } - setWeeklyUsageCount( - usageSummary?.weeklyStats.count.toLocaleString() || '--' - ); + // if (!isNil(usageSummary?.weeklyStats.percentileRank)) { + // const percentile = getUsagePercentile( + // usageSummary.weeklyStats.percentileRank + // ); + // setUsage(percentile); + // } else { + // setUsage('--'); + // } + // setWeeklyUsageCount( + // usageSummary?.weeklyStats.count.toLocaleString() || '--' + // ); setLoading(false); }); @@ -480,7 +478,17 @@ const MyDashBoardPage = () => { - {chart.displayName} + + + {chart.displayName} + + + diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx index b32865d9e1a..224884ec040 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx @@ -235,7 +235,17 @@ const ServicePage: FunctionComponent = () => { href={serviceDetails.schemaRegistry} rel="noopener noreferrer" target="_blank"> - {serviceDetails.schemaRegistry} + <> + + {serviceDetails.schemaRegistry} + + + ) : ( '--' @@ -270,7 +280,17 @@ const ServicePage: FunctionComponent = () => { href={serviceDetails.dashboardUrl} rel="noopener noreferrer" target="_blank"> - {serviceDetails.dashboardUrl} + <> + + {serviceDetails.dashboardUrl} + + + ) : ( '--' @@ -296,7 +316,17 @@ const ServicePage: FunctionComponent = () => { href={serviceDetails.dashboardUrl} rel="noopener noreferrer" target="_blank"> - {serviceDetails.dashboardUrl} + <> + + {serviceDetails.dashboardUrl} + + + ) : ( '--' 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 602c8a26e19..b272191e930 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 @@ -12,6 +12,7 @@ import IconDashboard from '../assets/svg/dashboard.svg'; import IconAsstest from '../assets/svg/data-assets.svg'; import IconDoc from '../assets/svg/doc.svg'; import IconError from '../assets/svg/error.svg'; +import IconExternalLink from '../assets/svg/external-link.svg'; import IconCheckCircle from '../assets/svg/ic-check-circle.svg'; import IconDelete from '../assets/svg/ic-delete.svg'; import IconDownArrow from '../assets/svg/ic-down-arrow.svg'; @@ -132,6 +133,7 @@ export const Icons = { DASHBOARD_GREY: 'dashboard-grey', CONFIG: 'icon-config', SLACK: 'slack', + EXTERNAL_LINK: 'external-link', }; const SVGIcons: FunctionComponent = ({ @@ -393,6 +395,10 @@ const SVGIcons: FunctionComponent = ({ case Icons.SLACK: IconComponent = IconSlack; + break; + case Icons.EXTERNAL_LINK: + IconComponent = IconExternalLink; + break; default: