{
@@ -60,6 +66,9 @@ const AddIngestionPage = () => {
);
const [ingestionId, setIngestionId] = useState('');
const [showIngestionButton, setShowIngestionButton] = useState(false);
+ const [slashedBreadcrumb, setSlashedBreadcrumb] = useState<
+ TitleBreadcrumbProps['titleLinks']
+ >([]);
const fetchServiceDetails = () => {
getServiceByFQN(serviceCategory, serviceFQN)
@@ -172,6 +181,26 @@ const AddIngestionPage = () => {
return ingestion && !showIngestionButton;
};
+ useEffect(() => {
+ setSlashedBreadcrumb([
+ {
+ name: startCase(serviceCategory),
+ url: getServicesWithTabPath(serviceCategory),
+ },
+ {
+ name: serviceData?.name || '',
+ url: getServiceDetailsPath(serviceFQN, serviceCategory, 'ingestions'),
+ imgSrc: serviceTypeLogo(serviceData?.serviceType || ''),
+ activeTitle: true,
+ },
+ {
+ name: `Add ${capitalize(ingestionType)} Ingestion`,
+ url: '',
+ activeTitle: true,
+ },
+ ]);
+ }, [serviceCategory, ingestionType, serviceData]);
+
const renderAddIngestionPage = () => {
if (isLoading) {
return
;
@@ -185,6 +214,7 @@ const AddIngestionPage = () => {
return (
}
layout={PageLayoutType['2ColRTL']}
rightPanel={getServiceIngestionStepGuide(
activeIngestionStep,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
index 40b0034a658..df0c427b422 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
@@ -12,7 +12,8 @@
*/
import { AxiosError, AxiosResponse } from 'axios';
-import React, { useState } from 'react';
+import { startCase } from 'lodash';
+import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import {
addIngestionPipeline,
@@ -21,6 +22,7 @@ import {
} from '../../axiosAPIs/ingestionPipelineAPI';
import { postService } from '../../axiosAPIs/serviceAPI';
import AddService from '../../components/AddService/AddService.component';
+import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
import PageContainerV1 from '../../components/containers/PageContainerV1';
import {
DEPLOYED_PROGRESS_VAL,
@@ -32,6 +34,7 @@ import { ServiceCategory } from '../../enums/service.enum';
import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
import { DataObj } from '../../interface/service.interface';
import jsonData from '../../jsons/en';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { showErrorToast } from '../../utils/ToastUtils';
const AddServicePage = () => {
@@ -45,6 +48,14 @@ const AddServicePage = () => {
);
const [ingestionId, setIngestionId] = useState('');
const [showIngestionButton, setShowIngestionButton] = useState(false);
+ const [slashedBreadcrumb, setSlashedBreadcrumb] = useState<
+ TitleBreadcrumbProps['titleLinks']
+ >([]);
+ const [addIngestion, setAddIngestion] = useState(false);
+
+ const handleAddIngestion = (value: boolean) => {
+ setAddIngestion(value);
+ };
const onAddServiceSave = (data: DataObj) => {
return new Promise
((resolve, reject) => {
@@ -136,9 +147,25 @@ const AddServicePage = () => {
});
};
+ useEffect(() => {
+ setSlashedBreadcrumb([
+ {
+ name: startCase(serviceCategory),
+ url: getServicesWithTabPath(serviceCategory),
+ },
+ {
+ name: addIngestion ? 'Add New Ingestion' : 'Add New Service',
+ url: '',
+ activeTitle: true,
+ },
+ ]);
+ }, [serviceCategory, addIngestion]);
+
return (
{
newServiceData={newServiceData}
serviceCategory={serviceCategory as ServiceCategory}
showDeployButton={showIngestionButton}
+ slashedBreadcrumb={slashedBreadcrumb}
onAddIngestionSave={onAddIngestionSave}
onAddServiceSave={onAddServiceSave}
onIngestionDeploy={onIngestionDeploy}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
index c59f0d2aba5..c8229b87177 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
@@ -13,7 +13,7 @@
import { AxiosError, AxiosPromise, AxiosResponse } from 'axios';
import { compare, Operation } from 'fast-json-patch';
-import { isEmpty } from 'lodash';
+import { isEmpty, startCase } from 'lodash';
import {
EntityFieldThreadCount,
EntityTags,
@@ -76,6 +76,7 @@ import {
} from '../../utils/DashboardDetailsUtils';
import { getEntityFeedLink, getEntityLineage } from '../../utils/EntityUtils';
import { deletePost, getUpdatedThread } from '../../utils/FeedUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getErrorText } from '../../utils/StringsUtils';
import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
@@ -323,6 +324,10 @@ const DashboardDetailsPage = () => {
setServiceType(serviceType);
setDeleted(deleted);
setSlashedDashboardName([
+ {
+ name: startCase(ServiceCategory.DASHBOARD_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.DASHBOARD_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
index 5f13402f56b..ee25f80d03a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@@ -14,6 +14,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
+import { startCase } from 'lodash';
import { observer } from 'mobx-react';
import {
EntityFieldThreadCount,
@@ -88,6 +89,7 @@ import {
getEntityFieldThreadCounts,
getUpdatedThread,
} from '../../utils/FeedUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getErrorText } from '../../utils/StringsUtils';
import { getEntityLink } from '../../utils/TableUtils';
@@ -249,6 +251,10 @@ const DatabaseSchemaPage: FunctionComponent = () => {
setTableData(tables);
setTableInstanceCount(tables?.length || 0);
setSlashedTableName([
+ {
+ name: startCase(ServiceCategory.DATABASE_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.DATABASE_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
index dfb113cf685..1b16a0fd30a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
@@ -13,7 +13,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import { compare } from 'fast-json-patch';
-import { isEmpty, isUndefined } from 'lodash';
+import { isEmpty, isUndefined, startCase } from 'lodash';
import { observer } from 'mobx-react';
import {
EntityFieldThreadCount,
@@ -99,6 +99,7 @@ import {
} from '../../utils/DatasetDetailsUtils';
import { getEntityFeedLink, getEntityLineage } from '../../utils/EntityUtils';
import { deletePost, getUpdatedThread } from '../../utils/FeedUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
@@ -300,6 +301,10 @@ const DatasetDetailsPage: FunctionComponent = () => {
setFollowers(followers);
setDeleted(deleted);
setSlashedTableName([
+ {
+ name: startCase(ServiceCategory.DATABASE_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.DATABASE_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
index 12355135aaf..2b0484b56f5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
@@ -12,7 +12,7 @@
*/
import { AxiosError, AxiosResponse } from 'axios';
-import { capitalize } from 'lodash';
+import { capitalize, startCase } from 'lodash';
import React, { useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import {
@@ -23,6 +23,8 @@ import {
import { getServiceByFQN } from '../../axiosAPIs/serviceAPI';
import AddIngestion from '../../components/AddIngestion/AddIngestion.component';
import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
+import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
+import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
import PageContainerV1 from '../../components/containers/PageContainerV1';
import PageLayout from '../../components/containers/PageLayout';
import Loader from '../../components/Loader/Loader';
@@ -44,7 +46,11 @@ import {
import { DataObj } from '../../interface/service.interface';
import jsonData from '../../jsons/en';
import { getEntityMissingError } from '../../utils/CommonUtils';
-import { getServiceIngestionStepGuide } from '../../utils/ServiceUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
+import {
+ getServiceIngestionStepGuide,
+ serviceTypeLogo,
+} from '../../utils/ServiceUtils';
import { showErrorToast } from '../../utils/ToastUtils';
const EditIngestionPage = () => {
@@ -65,6 +71,9 @@ const EditIngestionPage = () => {
IngestionActionMessage.UPDATING
);
const [showIngestionButton, setShowIngestionButton] = useState(false);
+ const [slashedBreadcrumb, setSlashedBreadcrumb] = useState<
+ TitleBreadcrumbProps['titleLinks']
+ >([]);
const fetchServiceDetails = () => {
return new Promise((resolve, reject) => {
@@ -209,6 +218,26 @@ const EditIngestionPage = () => {
return ingestion && !showIngestionButton && !ingestionData.deployed;
};
+ useEffect(() => {
+ setSlashedBreadcrumb([
+ {
+ name: startCase(serviceCategory),
+ url: getServicesWithTabPath(serviceCategory),
+ },
+ {
+ name: serviceData?.name || '',
+ url: getServiceDetailsPath(serviceFQN, serviceCategory, 'ingestions'),
+ imgSrc: serviceTypeLogo(serviceData?.serviceType || ''),
+ activeTitle: true,
+ },
+ {
+ name: `Edit ${capitalize(ingestionType)} Ingestion`,
+ url: '',
+ activeTitle: true,
+ },
+ ]);
+ }, [serviceCategory, ingestionType, serviceData]);
+
const renderEditIngestionPage = () => {
if (isLoading) {
return ;
@@ -218,6 +247,7 @@ const EditIngestionPage = () => {
return (
}
layout={PageLayoutType['2ColRTL']}
rightPanel={getServiceIngestionStepGuide(
activeIngestionStep,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
index 9cfbd014938..14d54a46f5e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
@@ -13,7 +13,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import { compare, Operation } from 'fast-json-patch';
-import { isEmpty } from 'lodash';
+import { isEmpty, startCase } from 'lodash';
import { observer } from 'mobx-react';
import {
EntityFieldThreadCount,
@@ -75,6 +75,7 @@ import {
getCurrentPipelineTab,
pipelineDetailsTabs,
} from '../../utils/PipelineDetailsUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
import { showErrorToast } from '../../utils/ToastUtils';
@@ -276,6 +277,10 @@ const PipelineDetailsPage = () => {
setServiceType(serviceType);
setDeleted(deleted);
setSlashedPipelineName([
+ {
+ name: startCase(ServiceCategory.PIPELINE_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.PIPELINE_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
index 489d30681d1..c46ed925d1b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
@@ -13,6 +13,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import { compare } from 'fast-json-patch';
+import { startCase } from 'lodash';
import { observer } from 'mobx-react';
import { EntityFieldThreadCount, EntityTags, EntityThread } from 'Models';
import React, { FunctionComponent, useEffect, useState } from 'react';
@@ -55,6 +56,7 @@ import {
} from '../../utils/CommonUtils';
import { getEntityFeedLink } from '../../utils/EntityUtils';
import { deletePost, getUpdatedThread } from '../../utils/FeedUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getTagsWithoutTier, getTierTags } from '../../utils/TableUtils';
import { showErrorToast } from '../../utils/ToastUtils';
@@ -209,6 +211,10 @@ const TopicDetailsPage: FunctionComponent = () => {
setRetentionSize(retentionSize);
setDeleted(deleted);
setSlashedTopicName([
+ {
+ name: startCase(ServiceCategory.MESSAGING_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.MESSAGING_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
index 297cf50a3a0..f77b42a0683 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -14,7 +14,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
-import { isNil } from 'lodash';
+import { isNil, startCase } from 'lodash';
import { observer } from 'mobx-react';
import { EntityFieldThreadCount, EntityThread, ExtraInfo } from 'Models';
import React, {
@@ -89,7 +89,10 @@ import {
getEntityFieldThreadCounts,
getUpdatedThread,
} from '../../utils/FeedUtils';
-import { getExplorePathWithInitFilters } from '../../utils/RouterUtils';
+import {
+ getExplorePathWithInitFilters,
+ getServicesWithTabPath,
+} from '../../utils/RouterUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getErrorText } from '../../utils/StringsUtils';
import { getOwnerFromId, getUsagePercentile } from '../../utils/TableUtils';
@@ -274,6 +277,10 @@ const DatabaseDetails: FunctionComponent = () => {
setServiceType(serviceType);
setSlashedDatabaseName([
+ {
+ name: startCase(ServiceCategory.DATABASE_SERVICES),
+ url: getServicesWithTabPath(ServiceCategory.DATABASE_SERVICES),
+ },
{
name: service.name,
url: service.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index 727a0ffb5d3..948964b0835 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -13,7 +13,7 @@
import { AxiosError, AxiosResponse } from 'axios';
import classNames from 'classnames';
-import { isNil, isUndefined } from 'lodash';
+import { isNil, isUndefined, startCase } from 'lodash';
import { ExtraInfo, ServicesData } from 'Models';
import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
import { Link, useHistory, useParams } from 'react-router-dom';
@@ -71,6 +71,7 @@ import {
pluralize,
} from '../../utils/CommonUtils';
import { getInfoElements } from '../../utils/EntityUtils';
+import { getServicesWithTabPath } from '../../utils/RouterUtils';
import {
getCurrentServiceTab,
getIsIngestionEnable,
@@ -684,6 +685,10 @@ const ServicePage: FunctionComponent = () => {
setServiceDetails(resService.data);
setDescription(description);
setSlashedTableName([
+ {
+ name: startCase(serviceName || ''),
+ url: getServicesWithTabPath(serviceName || ''),
+ },
{
name: getEntityName(resService.data),
url: '',
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
index c1a9b08f182..0e908fd3ada 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
@@ -62,6 +62,7 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
jest.mock('../../utils/RouterUtils', () => ({
getAddServicePath: jest.fn(),
+ getServicesWithTabPath: jest.fn(),
}));
jest.mock('../../axiosAPIs/serviceAPI', () => ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index c08612f47ca..9a7fd1da013 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@@ -16,7 +16,7 @@ import classNames from 'classnames';
import { isNil } from 'lodash';
import { ServiceCollection, ServiceData, ServiceTypes } from 'Models';
import React, { Fragment, useEffect, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
import { addAirflowPipeline } from '../../axiosAPIs/airflowPipelineAPI';
import {
@@ -69,7 +69,10 @@ import {
} from '../../utils/CommonUtils';
import { getDashboardURL } from '../../utils/DashboardServiceUtils';
import { getBrokers } from '../../utils/MessagingServiceUtils';
-import { getAddServicePath } from '../../utils/RouterUtils';
+import {
+ getAddServicePath,
+ getServicesWithTabPath,
+} from '../../utils/RouterUtils';
import { getErrorText } from '../../utils/StringsUtils';
import { showErrorToast } from '../../utils/ToastUtils';
@@ -98,13 +101,15 @@ export type ApiData = {
};
const ServicesPage = () => {
+ const { serviceCategory } = useParams<{ [key: string]: string }>();
const history = useHistory();
const { isAdminUser } = useAuth();
const { isAuthDisabled } = useAuthContext();
const [isModalOpen, setIsModalOpen] = useState(false);
- const [serviceName, setServiceName] =
- useState('databaseServices');
+ const [serviceName, setServiceName] = useState(
+ (serviceCategory as ServiceTypes) ?? 'databaseServices'
+ );
const [paging, setPaging] = useState({
databaseServices: pagingObject,
messagingServices: pagingObject,
@@ -374,6 +379,7 @@ const ServicesPage = () => {
const handleTabChange = (tabName: ServiceTypes) => {
setSearchText('');
setServiceName(tabName);
+ history.push(getServicesWithTabPath(tabName));
setServiceList(services[tabName] as unknown as Array);
};
@@ -424,7 +430,7 @@ const ServicesPage = () => {
- {getBrokers(messagingService.connection.config)}
+ {getBrokers(messagingService.connection?.config)}