diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx index 07876f2338b..63baa38f3f8 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx @@ -20,6 +20,7 @@ type ExtraInfo = { key?: string; value: string | number; isLink?: boolean; + placeholderText?: string; }; type Props = { @@ -185,7 +186,9 @@ const EntityPageInfo = ({ rel="noopener noreferrer" target="_blank"> <> - {info.value} + + {info.placeholderText || info.value} + = ({ onSelect, groupType = 'label', }: DropDownListProp) => { + const isMounted = useRef(false); const [searchedList, setSearchedList] = useState(dropDownList); const [searchText, setSearchText] = useState(searchString); const [activeTab, setActiveTab] = useState(1); @@ -69,17 +70,6 @@ const DropDownList: FunctionComponent = ({ ); }; - const getActiveTab = () => { - let tab = 0; - listGroups.forEach((grp, i) => { - if (getSearchedListByGroup(grp).length === 0) { - tab = i + 1; - } - }); - - return tab; - }; - useEffect(() => { setSearchText(searchString); }, [searchString]); @@ -93,9 +83,25 @@ const DropDownList: FunctionComponent = ({ }, [searchText, dropDownList]); useEffect(() => { - setActiveTab(getActiveTab() + 1); + if (isMounted.current) { + const modifiedGrp = listGroups + .map((grp, index) => ({ + grp: grp, + length: searchedList.filter((item) => grp === item.group).length, + tab: index + 1, + })) + .sort((a, b) => (a.length > b.length ? -1 : 1)); + + setActiveTab( + searchText ? (modifiedGrp.length > 0 ? modifiedGrp[0].tab : 1) : 1 + ); + } }, [searchText]); + useEffect(() => { + isMounted.current = true; + }, []); + return ( <> {searchedList.length > 0 && ( diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx index 4e54c8c900f..003fab4ec8e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx @@ -72,6 +72,7 @@ const MyPipelinePage = () => { const [tasks, setTasks] = useState([]); const [pipelineUrl, setPipelineUrl] = useState(''); const [displayName, setDisplayName] = useState(''); + const [serviceType, setServiceType] = useState(''); // const [usage, setUsage] = useState(''); // const [weeklyUsageCount, setWeeklyUsageCount] = useState(''); const [slashedPipelineName, setSlashedPipelineName] = useState< @@ -121,7 +122,12 @@ const MyPipelinePage = () => { const extraInfo = [ { key: 'Owner', value: owner?.name || '' }, { key: 'Tier', value: tier ? tier.split('.')[1] : '' }, - { key: 'Pipeline Url', value: pipelineUrl, isLink: true }, + { + key: `${serviceType} Url`, + value: pipelineUrl, + placeholderText: displayName, + isLink: true, + }, // { key: 'Usage', value: usage }, // { key: 'Queries', value: `${weeklyUsageCount} past week` }, ]; @@ -197,6 +203,7 @@ const MyPipelinePage = () => { setTags(getTagsWithoutTier(tags)); getServiceById('pipelineServices', service?.id).then( (serviceRes: AxiosResponse) => { + setServiceType(serviceRes.data.serviceType); setSlashedPipelineName([ { name: serviceRes.data.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 3631561c398..b9004f18b7d 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 @@ -73,6 +73,7 @@ const MyDashBoardPage = () => { const [charts, setCharts] = useState([]); const [dashboardUrl, setDashboardUrl] = useState(''); const [displayName, setDisplayName] = useState(''); + const [serviceType, setServiceType] = useState(''); // const [usage, setUsage] = useState(''); // const [weeklyUsageCount, setWeeklyUsageCount] = useState(''); const [slashedDashboardName, setSlashedDashboardName] = useState< @@ -122,7 +123,12 @@ const MyDashBoardPage = () => { const extraInfo = [ { key: 'Owner', value: owner?.name || '' }, { key: 'Tier', value: tier ? tier.split('.')[1] : '' }, - { key: 'Dashboard Url', value: dashboardUrl, isLink: true }, + { + key: `${serviceType} Url`, + value: dashboardUrl, + placeholderText: displayName, + isLink: true, + }, // { key: 'Usage', value: usage }, // { key: 'Queries', value: `${weeklyUsageCount} past week` }, ]; @@ -198,6 +204,7 @@ const MyDashBoardPage = () => { setTags(getTagsWithoutTier(tags)); getServiceById('dashboardServices', service?.id).then( (serviceRes: AxiosResponse) => { + setServiceType(serviceRes.data.serviceType); setSlashedDashboardName([ { name: serviceRes.data.name,