diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx index 01d8583126d..14bbffaf891 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -16,7 +16,7 @@ */ import classNames from 'classnames'; -import { cloneDeep, isUndefined } from 'lodash'; +import { cloneDeep } from 'lodash'; import { AggregationType, FilterObject, @@ -456,7 +456,7 @@ const Explore: React.FC = ({ useEffect(() => { if (!isMounting.current && previsouIndex === getCurrentIndex(tab)) { - forceSetAgg.current = isUndefined(tab); + forceSetAgg.current = false; fetchTableData(); } }, [currentPage, filters, sortField, sortOrder]); diff --git a/catalog-rest-service/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx b/catalog-rest-service/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx index 62ad5c0a193..e0ccca0d482 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx @@ -15,8 +15,11 @@ * limitations under the License. */ -import { lowerCase } from 'lodash'; -import React, { FunctionComponent, useState } from 'react'; +import { isUndefined, lowerCase } from 'lodash'; +import { DatasetSchemaTableTab } from 'Models'; +import React, { FunctionComponent, useEffect, useState } from 'react'; +import { useHistory, useParams } from 'react-router'; +import { getDatasetTabPath } from '../../constants/constants'; import { ColumnJoins, Table, @@ -49,17 +52,32 @@ const SchemaTab: FunctionComponent = ({ owner, isReadOnly = false, }: Props) => { + const history = useHistory(); + const { datasetFQN: tableFQN, tab } = useParams() as Record; const [searchText, setSearchText] = useState(''); - const [checkedValue, setCheckedValue] = useState('schema'); + const [checkedValue, setCheckedValue] = + useState('schema'); const handleSearchAction = (searchValue: string) => { setSearchText(searchValue); }; - const handleToggleChange = (value: string) => { + const handleToggleChange = (value: DatasetSchemaTableTab) => { setCheckedValue(value); + history.push({ + pathname: getDatasetTabPath(tableFQN, value), + }); }; + useEffect(() => { + if (tab && ['schema', 'sample_data'].includes(tab)) { + const activeTab = isUndefined(tab) + ? 'schema' + : (tab as DatasetSchemaTableTab); + setCheckedValue(activeTab); + } + }, [tab]); + const getToggleButtonClasses = (type: string): string => { return ( 'tw-flex-1 tw-text-primary tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' + @@ -115,10 +133,10 @@ const SchemaTab: FunctionComponent = ({ Schema diff --git a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts b/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts index f6c11edb9df..1323daf0100 100644 --- a/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts +++ b/catalog-rest-service/src/main/resources/ui/src/constants/constants.ts @@ -123,11 +123,15 @@ export const ROUTES = { SIGNUP: '/signup', SIGNIN: '/signin', DATASET_DETAILS: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}`, + DATASET_DETAILS_WITH_TAB: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}/${PLACEHOLDER_ROUTE_TAB}`, DATASET_VERSION: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}/versions/${PLAEHOLDER_ROUTE_VERSION}`, TOPIC_DETAILS: `/topic/${PLACEHOLDER_ROUTE_TOPIC_FQN}`, + TOPIC_DETAILS_WITH_TAB: `/topic/${PLACEHOLDER_ROUTE_TOPIC_FQN}/${PLACEHOLDER_ROUTE_TAB}`, DASHBOARD_DETAILS: `/dashboard/${PLACEHOLDER_ROUTE_DASHBOARD_FQN}`, + DASHBOARD_DETAILS_WITH_TAB: `/dashboard/${PLACEHOLDER_ROUTE_DASHBOARD_FQN}/${PLACEHOLDER_ROUTE_TAB}`, DATABASE_DETAILS: `/database/${PLACEHOLDER_ROUTE_DATABASE_FQN}`, PIPELINE_DETAILS: `/pipeline/${PLACEHOLDER_ROUTE_PIPELINE_FQN}`, + PIPELINE_DETAILS_WITH_TAB: `/pipeline/${PLACEHOLDER_ROUTE_PIPELINE_FQN}/${PLACEHOLDER_ROUTE_TAB}`, ONBOARDING: '/onboarding', }; @@ -144,6 +148,7 @@ export const getDatasetDetailsPath = ( return `${path}${columnName ? `.${columnName}` : ''}`; }; + export const getDatasetVersionPath = (datasetFQN: string, version: string) => { let path = ROUTES.DATASET_VERSION; path = path @@ -153,6 +158,15 @@ export const getDatasetVersionPath = (datasetFQN: string, version: string) => { return path; }; +export const getDatasetTabPath = (datasetFQN: string, tab = 'schema') => { + let path = ROUTES.DATASET_DETAILS_WITH_TAB; + path = path + .replace(PLACEHOLDER_ROUTE_DATASET_FQN, datasetFQN) + .replace(PLACEHOLDER_ROUTE_TAB, tab); + + return path; +}; + export const getServiceDetailsPath = ( serviceFQN: string, serviceType: string @@ -181,24 +195,39 @@ export const getDatabaseDetailsPath = (databaseFQN: string) => { return path; }; -export const getTopicDetailsPath = (topicFQN: string) => { - let path = ROUTES.TOPIC_DETAILS; +export const getTopicDetailsPath = (topicFQN: string, tab?: string) => { + let path = tab ? ROUTES.TOPIC_DETAILS_WITH_TAB : ROUTES.TOPIC_DETAILS; path = path.replace(PLACEHOLDER_ROUTE_TOPIC_FQN, topicFQN); + if (tab) { + path = path.replace(PLACEHOLDER_ROUTE_TAB, tab); + } + return path; }; -export const getDashboardDetailsPath = (dashboardFQN: string) => { - let path = ROUTES.DASHBOARD_DETAILS; + +export const getDashboardDetailsPath = (dashboardFQN: string, tab?: string) => { + let path = tab ? ROUTES.DASHBOARD_DETAILS_WITH_TAB : ROUTES.DASHBOARD_DETAILS; path = path.replace(PLACEHOLDER_ROUTE_DASHBOARD_FQN, dashboardFQN); - return path; -}; -export const getPipelineDetailsPath = (pipelineFQN: string) => { - let path = ROUTES.PIPELINE_DETAILS; - path = path.replace(PLACEHOLDER_ROUTE_PIPELINE_FQN, pipelineFQN); + if (tab) { + path = path.replace(PLACEHOLDER_ROUTE_TAB, tab); + } return path; }; + +export const getPipelineDetailsPath = (pipelineFQN: string, tab?: string) => { + let path = tab ? ROUTES.PIPELINE_DETAILS_WITH_TAB : ROUTES.PIPELINE_DETAILS; + path = path.replace(PLACEHOLDER_ROUTE_PIPELINE_FQN, pipelineFQN); + + if (tab) { + path = path.replace(PLACEHOLDER_ROUTE_TAB, tab); + } + + return path; +}; + export const getTeamDetailsPath = (teamName: string) => { let path = ROUTES.TEAM_DETAILS; path = path.replace(PLACEHOLDER_ROUTE_TEAM, teamName); diff --git a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts index 28557fdeda0..906d6ee6975 100644 --- a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts +++ b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts @@ -393,4 +393,6 @@ declare module 'Models' { export interface RecentlyViewed { data: Array; } + + export type DatasetSchemaTableTab = 'schema' | 'sample_data'; } diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx index 549552ce1b3..072a5510ea0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx @@ -2,7 +2,7 @@ import { AxiosPromise, AxiosResponse } from 'axios'; import { compare, Operation } from 'fast-json-patch'; import { EntityTags, TableDetail } from 'Models'; import React, { useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useHistory, useParams } from 'react-router-dom'; import AppState from '../../AppState'; import { getChartById, updateChart } from '../../axiosAPIs/chartAPI'; import { @@ -15,12 +15,19 @@ import { getServiceById } from '../../axiosAPIs/serviceAPI'; import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; import DashboardDetails from '../../components/DashboardDetails/DashboardDetails.component'; import Loader from '../../components/Loader/Loader'; -import { getServiceDetailsPath } from '../../constants/constants'; +import { + getDashboardDetailsPath, + getServiceDetailsPath, +} from '../../constants/constants'; import { EntityType } from '../../enums/entity.enum'; import { Chart } from '../../generated/entity/data/chart'; import { Dashboard } from '../../generated/entity/data/dashboard'; import { User } from '../../generated/entity/teams/user'; import { addToRecentViewed, getCurrentUserId } from '../../utils/CommonUtils'; +import { + dashboardDetailsTabs, + getCurrentDashboardTab, +} from '../../utils/DashboardDetailsUtils'; import { serviceTypeLogo } from '../../utils/ServiceUtils'; import { getOwnerFromId, @@ -31,10 +38,13 @@ import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; type ChartType = { displayName: string; } & Chart; + const DashboardDetailsPage = () => { const USERId = getCurrentUserId(); + const history = useHistory(); + const [tagList, setTagList] = useState>([]); - const { dashboardFQN } = useParams() as Record; + const { dashboardFQN, tab } = useParams() as Record; const [dashboardDetails, setDashboardDetails] = useState( {} as Dashboard ); @@ -45,7 +55,9 @@ const DashboardDetailsPage = () => { const [owner, setOwner] = useState(); const [tier, setTier] = useState(); const [tags, setTags] = useState>([]); - const [activeTab, setActiveTab] = useState(1); + const [activeTab, setActiveTab] = useState( + getCurrentDashboardTab(tab) + ); const [charts, setCharts] = useState([]); const [dashboardUrl, setDashboardUrl] = useState(''); const [displayName, setDisplayName] = useState(''); @@ -55,9 +67,26 @@ const DashboardDetailsPage = () => { >([]); const activeTabHandler = (tabValue: number) => { - setActiveTab(tabValue); + const currentTabIndex = tabValue - 1; + if (dashboardDetailsTabs[currentTabIndex].path !== tab) { + setActiveTab( + getCurrentDashboardTab(dashboardDetailsTabs[currentTabIndex].path) + ); + history.push({ + pathname: getDashboardDetailsPath( + dashboardFQN, + dashboardDetailsTabs[currentTabIndex].path + ), + }); + } }; + useEffect(() => { + if (dashboardDetailsTabs[activeTab - 1].path !== tab) { + setActiveTab(getCurrentDashboardTab(tab)); + } + }, [tab]); + const saveUpdatedDashboardData = ( updatedData: Dashboard ): Promise => { diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx index 48c28cc9ee9..f36786198e9 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx @@ -36,6 +36,7 @@ import DatasetDetails from '../../components/DatasetDetails/DatasetDetails.compo import Loader from '../../components/Loader/Loader'; import { getDatabaseDetailsPath, + getDatasetTabPath, getDatasetVersionPath, getServiceDetailsPath, } from '../../constants/constants'; @@ -53,13 +54,18 @@ import { getCurrentUserId, getPartialNameFromFQN, } from '../../utils/CommonUtils'; +import { + datasetTableTabs, + getCurrentDatasetTab, +} from '../../utils/DatasetDetailsUtils'; import { serviceTypeLogo } from '../../utils/ServiceUtils'; import { getOwnerFromId, getTierFromTableTags } from '../../utils/TableUtils'; import { getTableTags } from '../../utils/TagsUtils'; const DatasetDetailsPage: FunctionComponent = () => { const history = useHistory(); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [isLineageLoading, setIsLineageLoading] = useState(true); const USERId = getCurrentUserId(); const [tableId, setTableId] = useState(''); const [tier, setTier] = useState(); @@ -85,8 +91,8 @@ const DatasetDetailsPage: FunctionComponent = () => { }); const [tableProfile, setTableProfile] = useState([]); const [tableDetails, setTableDetails] = useState({} as Table); - const [activeTab, setActiveTab] = useState(1); - const { datasetFQN: tableFQN } = useParams() as Record; + const { datasetFQN: tableFQN, tab } = useParams() as Record; + const [activeTab, setActiveTab] = useState(getCurrentDatasetTab(tab)); const [entityLineage, setEntityLineage] = useState( {} as EntityLineage ); @@ -98,9 +104,26 @@ const DatasetDetailsPage: FunctionComponent = () => { const [, setPreviousVersion] = useState(); const activeTabHandler = (tabValue: number) => { - setActiveTab(tabValue); + const currentTabIndex = tabValue - 1; + if (datasetTableTabs[currentTabIndex].path !== tab) { + setActiveTab( + getCurrentDatasetTab(datasetTableTabs[currentTabIndex].path) + ); + history.push({ + pathname: getDatasetTabPath( + tableFQN, + datasetTableTabs[currentTabIndex].path + ), + }); + } }; + useEffect(() => { + if (datasetTableTabs[activeTab - 1].path !== tab) { + setActiveTab(getCurrentDatasetTab(tab)); + } + }, [tab]); + const saveUpdatedTableData = (updatedData: Table): Promise => { const jsonPatch = compare(tableDetails, updatedData); @@ -241,21 +264,24 @@ const DatasetDetailsPage: FunctionComponent = () => { setTableTags(getTableTags(columns || [])); setUsageSummary(usageSummary); setJoins(joins); - setIsLoading(false); }) - .catch(() => { + .finally(() => { setIsLoading(false); }); - setActiveTab(1); - getLineageByFQN(tableFQN, EntityType.TABLE).then((res: AxiosResponse) => - setEntityLineage(res.data) - ); + getLineageByFQN(tableFQN, EntityType.TABLE) + .then((res: AxiosResponse) => { + setEntityLineage(res.data); + }) + .finally(() => { + setIsLineageLoading(false); + }); + setActiveTab(getCurrentDatasetTab(tab)); }, [tableFQN]); return ( <> - {isLoading ? ( + {isLoading || isLineageLoading ? ( ) : ( { const USERId = getCurrentUserId(); + const history = useHistory(); const [tagList, setTagList] = useState>([]); - const { pipelineFQN } = useParams() as Record; + const { pipelineFQN, tab } = useParams() as Record; const [pipelineDetails, setPipelineDetails] = useState( {} as Pipeline ); const [pipelineId, setPipelineId] = useState(''); - const [isLoading, setLoading] = useState(false); + const [isLoading, setLoading] = useState(true); + const [isLineageLoading, setIsLineageLoading] = useState(true); const [description, setDescription] = useState(''); const [followers, setFollowers] = useState>([]); const [owner, setOwner] = useState(); const [tier, setTier] = useState(); const [tags, setTags] = useState>([]); - const [activeTab, setActiveTab] = useState(1); + const [activeTab, setActiveTab] = useState( + getCurrentPipelineTab(tab) + ); const [tasks, setTasks] = useState([]); const [pipelineUrl, setPipelineUrl] = useState(''); const [displayName, setDisplayName] = useState(''); @@ -58,9 +69,26 @@ const PipelineDetailsPage = () => { {} as EntityLineage ); const activeTabHandler = (tabValue: number) => { - setActiveTab(tabValue); + const currentTabIndex = tabValue - 1; + if (pipelineDetailsTabs[currentTabIndex].path !== tab) { + setActiveTab( + getCurrentPipelineTab(pipelineDetailsTabs[currentTabIndex].path) + ); + history.push({ + pathname: getPipelineDetailsPath( + pipelineFQN, + pipelineDetailsTabs[currentTabIndex].path + ), + }); + } }; + useEffect(() => { + if (pipelineDetailsTabs[activeTab - 1].path !== tab) { + setActiveTab(getCurrentPipelineTab(tab)); + } + }, [tab]); + const saveUpdatedPipelineData = ( updatedData: Pipeline ): Promise => { @@ -88,62 +116,63 @@ const PipelineDetailsPage = () => { 'followers', 'tags', 'tasks', - ]).then((res: AxiosResponse) => { - const { - id, - description, - followers, - fullyQualifiedName, - service, - tags, - owner, - displayName, - tasks, - pipelineUrl, - } = res.data; - setDisplayName(displayName); - setPipelineDetails(res.data); - setPipelineId(id); - setDescription(description ?? ''); - setFollowers(followers); - setOwner(getOwnerFromId(owner?.id)); - setTier(getTierFromTableTags(tags)); - setTags(getTagsWithoutTier(tags)); - getServiceById('pipelineServices', service?.id).then( - (serviceRes: AxiosResponse) => { - setServiceType(serviceRes.data.serviceType); - setSlashedPipelineName([ - { - name: serviceRes.data.name, - url: serviceRes.data.name - ? getServiceDetailsPath( - serviceRes.data.name, - serviceRes.data.serviceType - ) - : '', - imgSrc: serviceRes.data.serviceType - ? serviceTypeLogo(serviceRes.data.serviceType) - : undefined, - }, - { - name: displayName, - url: '', - activeTitle: true, - }, - ]); + ]) + .then((res: AxiosResponse) => { + const { + id, + description, + followers, + fullyQualifiedName, + service, + tags, + owner, + displayName, + tasks, + pipelineUrl, + } = res.data; + setDisplayName(displayName); + setPipelineDetails(res.data); + setPipelineId(id); + setDescription(description ?? ''); + setFollowers(followers); + setOwner(getOwnerFromId(owner?.id)); + setTier(getTierFromTableTags(tags)); + setTags(getTagsWithoutTier(tags)); + getServiceById('pipelineServices', service?.id).then( + (serviceRes: AxiosResponse) => { + setServiceType(serviceRes.data.serviceType); + setSlashedPipelineName([ + { + name: serviceRes.data.name, + url: serviceRes.data.name + ? getServiceDetailsPath( + serviceRes.data.name, + serviceRes.data.serviceType + ) + : '', + imgSrc: serviceRes.data.serviceType + ? serviceTypeLogo(serviceRes.data.serviceType) + : undefined, + }, + { + name: displayName, + url: '', + activeTitle: true, + }, + ]); - addToRecentViewed({ - entityType: EntityType.PIPELINE, - fqn: fullyQualifiedName, - serviceType: serviceRes.data.serviceType, - timestamp: 0, - }); - } - ); - setPipelineUrl(pipelineUrl); - setTasks(tasks); - setLoading(false); - }); + addToRecentViewed({ + entityType: EntityType.PIPELINE, + fqn: fullyQualifiedName, + serviceType: serviceRes.data.serviceType, + timestamp: 0, + }); + } + ); + setPipelineUrl(pipelineUrl); + setTasks(tasks); + }) + .finally(() => setLoading(false)); }; const followPipeline = () => { @@ -196,10 +225,14 @@ const PipelineDetailsPage = () => { useEffect(() => { fetchPipelineDetail(pipelineFQN); - setActiveTab(1); - getLineageByFQN(pipelineFQN, EntityType.PIPELINE).then( - (res: AxiosResponse) => setEntityLineage(res.data) - ); + setActiveTab(getCurrentPipelineTab(tab)); + getLineageByFQN(pipelineFQN, EntityType.PIPELINE) + .then((res: AxiosResponse) => { + setEntityLineage(res.data); + }) + .finally(() => { + setIsLineageLoading(false); + }); }, [pipelineFQN]); useEffect(() => { @@ -208,7 +241,7 @@ const PipelineDetailsPage = () => { return ( <> - {isLoading ? ( + {isLoading || isLineageLoading ? ( ) : ( { const USERId = getCurrentUserId(); const showToast = useToastContext(); + const history = useHistory(); const [tagList, setTagList] = useState>([]); - const { topicFQN } = useParams() as Record; + const { topicFQN, tab } = useParams() as Record; const [topicDetails, setTopicDetails] = useState({} as Topic); const [topicId, setTopicId] = useState(''); - const [isLoading, setLoading] = useState(false); + const [isLoading, setLoading] = useState(true); const [description, setDescription] = useState(''); const [followers, setFollowers] = useState>([]); const [owner, setOwner] = useState(); const [tier, setTier] = useState(); const [schemaType, setSchemaType] = useState(''); const [tags, setTags] = useState>([]); - const [activeTab, setActiveTab] = useState(1); + const [activeTab, setActiveTab] = useState(getCurrentTopicTab(tab)); const [partitions, setPartitions] = useState(0); const [cleanupPolicies, setCleanupPolicies] = useState>([]); const [maximumMessageSize, setMaximumMessageSize] = useState(0); @@ -58,9 +66,24 @@ const TopicDetailsPage: FunctionComponent = () => { >([]); const activeTabHandler = (tabValue: number) => { - setActiveTab(tabValue); + const currentTabIndex = tabValue - 1; + if (topicDetailsTabs[currentTabIndex].path !== tab) { + setActiveTab(getCurrentTopicTab(topicDetailsTabs[currentTabIndex].path)); + history.push({ + pathname: getTopicDetailsPath( + topicFQN, + topicDetailsTabs[currentTabIndex].path + ), + }); + } }; + useEffect(() => { + if (topicDetailsTabs[activeTab - 1].path !== tab) { + setActiveTab(getCurrentTopicTab(tab)); + } + }, [tab]); + const saveUpdatedTopicData = (updatedData: Topic): Promise => { const jsonPatch = compare(topicDetails, updatedData); @@ -140,7 +163,6 @@ const TopicDetailsPage: FunctionComponent = () => { serviceType: serviceRes.data.serviceType, timestamp: 0, }); - setLoading(false); }) .catch((err: AxiosError) => { const errMsg = @@ -149,7 +171,8 @@ const TopicDetailsPage: FunctionComponent = () => { variant: 'error', body: errMsg, }); - }); + }) + .finally(() => setLoading(false)); }) .catch((err: AxiosError) => { const errMsg = err.message || 'Error while fetching topic details'; @@ -157,6 +180,7 @@ const TopicDetailsPage: FunctionComponent = () => { variant: 'error', body: errMsg, }); + setLoading(false); }); }; 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 c9194f0562d..d5daf19eb01 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 @@ -74,9 +74,36 @@ const AuthenticatedAppRouter: FunctionComponent = () => { component={DatasetDetailsPage} path={ROUTES.DATASET_DETAILS} /> - - - + + + + + + + { + let currentTab = 1; + switch (tab) { + case 'manage': + currentTab = 2; + + break; + + case 'details': + default: + currentTab = 1; + + break; + } + + return currentTab; +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/DatasetDetailsUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/DatasetDetailsUtils.ts new file mode 100644 index 00000000000..9b0735c1f47 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/utils/DatasetDetailsUtils.ts @@ -0,0 +1,45 @@ +export const datasetTableTabs = [ + { + name: 'Schema', + path: 'schema', + }, + { + name: 'Profiler', + path: 'profiler', + }, + { + name: 'Lineage', + path: 'lineage', + }, + { + name: 'Manage', + path: 'manage', + }, +]; + +export const getCurrentDatasetTab = (tab: string) => { + let currentTab = 1; + switch (tab) { + case 'profiler': + currentTab = 2; + + break; + case 'lineage': + currentTab = 3; + + break; + case 'manage': + currentTab = 4; + + break; + + case 'schema': + case 'sample_data': + default: + currentTab = 1; + + break; + } + + return currentTab; +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/PipelineDetailsUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/PipelineDetailsUtils.ts new file mode 100644 index 00000000000..6b2b1209358 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/utils/PipelineDetailsUtils.ts @@ -0,0 +1,36 @@ +export const pipelineDetailsTabs = [ + { + name: 'Details', + path: 'details', + }, + { + name: 'Lineage', + path: 'lineage', + }, + { + name: 'Manage', + path: 'manage', + }, +]; + +export const getCurrentPipelineTab = (tab: string) => { + let currentTab = 1; + switch (tab) { + case 'lineage': + currentTab = 2; + + break; + case 'manage': + currentTab = 3; + + break; + + case 'details': + default: + currentTab = 1; + + break; + } + + return currentTab; +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/TopicDetailsUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/TopicDetailsUtils.ts new file mode 100644 index 00000000000..43943964318 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/utils/TopicDetailsUtils.ts @@ -0,0 +1,36 @@ +export const topicDetailsTabs = [ + { + name: 'Schema', + path: 'schema', + }, + { + name: 'Config', + path: 'config', + }, + { + name: 'Manage', + path: 'manage', + }, +]; + +export const getCurrentTopicTab = (tab: string) => { + let currentTab = 1; + switch (tab) { + case 'config': + currentTab = 2; + + break; + case 'manage': + currentTab = 3; + + break; + + case 'schema': + default: + currentTab = 1; + + break; + } + + return currentTab; +};