yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-31 12:39:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issue: 4555 UI: Add breadcrumbs to Add Service page and Services page (#4806)

Browse Source
This commit is contained in:
Shailesh Parmar 2022-05-09 22:07:35 +05:30 committed by GitHub
parent 1b003f9e79
commit 4f57e20a15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 185 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
View File

@ -34,6 +34,7 @@ import {
} from '../../utils/ServiceUtils';
import AddIngestion from '../AddIngestion/AddIngestion.component';
import SuccessScreen from '../common/success-screen/SuccessScreen';
import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
import PageLayout from '../containers/PageLayout';
import IngestionStepper from '../IngestionStepper/IngestionStepper.component';
import ConnectionConfigForm from '../ServiceConfig/ConnectionConfigForm';
@ -52,9 +53,11 @@ const AddService = ({
ingestionAction,
showDeployButton,
onIngestionDeploy,
slashedBreadcrumb,
addIngestion,
handleAddIngestion,
}: AddServiceProps) => {
const history = useHistory();
const [addIngestion, setAddIngestion] = useState(false);
const [showErrorMessage, setShowErrorMessage] = useState({
serviceType: false,
name: false,
@ -110,10 +113,6 @@ const AddService = ({
}
};
const handleAddIngestion = (value: boolean) => {
setAddIngestion(value);
};
const handleConfigUpdate = (
oData: ConfigData,
serviceCat: ServiceCategory
@ -263,6 +262,7 @@ const AddService = ({
return (
<PageLayout
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
layout={PageLayoutType['2ColRTL']}
rightPanel={fetchRightPanel()}>
<div className="tw-form-container">

4
openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.interface.ts
View File

@ -14,10 +14,13 @@
import { ServiceCategory } from '../../enums/service.enum';
import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
import { DataObj } from '../../interface/service.interface';
import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
export interface AddServiceProps {
serviceCategory: ServiceCategory;
addIngestion: boolean;
onAddServiceSave: (service: DataObj) => Promise<void>;
handleAddIngestion: (value: boolean) => void;
onAddIngestionSave: (ingestion: CreateIngestionPipeline) => Promise<void>;
newServiceData: DataObj | undefined;
isIngestionDeployed: boolean;
@ -25,5 +28,6 @@ export interface AddServiceProps {
ingestionProgress: number;
ingestionAction: string;
showDeployButton?: boolean;
slashedBreadcrumb: TitleBreadcrumbProps['titleLinks'];
onIngestionDeploy?: () => Promise<void>;
}

12
openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.test.tsx
View File

@ -42,6 +42,10 @@ jest.mock('../AddIngestion/AddIngestion.component', () => () => (
<>AddIngestion</>
));
jest.mock('../common/title-breadcrumb/title-breadcrumb.component', () => () => (
<>TitleBreadcrumb.component</>
));
jest.mock('../ServiceConfig/ConnectionConfigForm', () => () => (
<>ConnectionConfigForm</>
));
@ -50,12 +54,20 @@ describe('Test AddService component', () => {
it('AddService component should render', async () => {
const { container } = render(
<AddService
addIngestion={false}
handleAddIngestion={jest.fn()}
ingestionAction="Creating"
ingestionProgress={0}
isIngestionCreated={false}
isIngestionDeployed={false}
newServiceData={undefined}
serviceCategory={ServiceCategory.DASHBOARD_SERVICES}
slashedBreadcrumb={[
{
name: 'breadcrumb',
url: '',
},
]}
onAddIngestionSave={jest.fn()}
onAddServiceSave={jest.fn()}
/>

6
openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
View File

@ -116,7 +116,11 @@ const PageLayout: FC<PageLayoutProp> = ({
const get2ColRTLLayout = () => {
return (
<>
{header && <div className="tw-px-6">{header}</div>}
{header && (
<div className="page-layout-container tw-gap-x-3 tw-px-6 centered-layout tw-max-w-full-hd tw-pt-4">
{header}
</div>
)}
<div
className={classNames(
'page-layout-container l2-rtl-col tw-gap-x-3 tw-px-6 tw-overflow-y-auto centered-layout',

1
openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
View File

@ -169,6 +169,7 @@ export const ROUTES = {
SERVICE_WITH_TAB: `/service/${PLACEHOLDER_ROUTE_SERVICE_CAT}/${PLACEHOLDER_ROUTE_SERVICE_FQN}/${PLACEHOLDER_ROUTE_TAB}`,
ADD_SERVICE: `/${PLACEHOLDER_ROUTE_SERVICE_CAT}/add-service`,
SERVICES: '/services',
SERVICES_WITH_TAB: `/services/${PLACEHOLDER_ROUTE_SERVICE_CAT}`,
ADD_INGESTION: `/service/${PLACEHOLDER_ROUTE_SERVICE_CAT}/${PLACEHOLDER_ROUTE_SERVICE_FQN}/add-ingestion/${PLACEHOLDER_ROUTE_INGESTION_TYPE}`,
EDIT_INGESTION: `/service/${PLACEHOLDER_ROUTE_SERVICE_CAT}/${PLACEHOLDER_ROUTE_SERVICE_FQN}/edit-ingestion/${PLACEHOLDER_ROUTE_INGESTION_FQN}/${PLACEHOLDER_ROUTE_INGESTION_TYPE}`,
USERS: '/users',

34
openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
View File

@ -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';
@ -41,7 +43,11 @@ import { PipelineType } from '../../generated/entity/services/ingestionPipelines
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 AddIngestionPage = () => {
@ -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 <Loader />;
@ -185,6 +214,7 @@ const AddIngestionPage = () => {
return (
<PageLayout
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
layout={PageLayoutType['2ColRTL']}
rightPanel={getServiceIngestionStepGuide(
activeIngestionStep,

30
openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx
View File

@ -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<void>((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 (
<PageContainerV1>
<AddService
addIngestion={addIngestion}
handleAddIngestion={handleAddIngestion}
ingestionAction={ingestionAction}
ingestionProgress={ingestionProgress}
isIngestionCreated={isIngestionCreated}
@ -146,6 +173,7 @@ const AddServicePage = () => {
newServiceData={newServiceData}
serviceCategory={serviceCategory as ServiceCategory}
showDeployButton={showIngestionButton}
slashedBreadcrumb={slashedBreadcrumb}
onAddIngestionSave={onAddIngestionSave}
onAddServiceSave={onAddServiceSave}
onIngestionDeploy={onIngestionDeploy}

7
openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
View File

@ -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

6
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
View File

@ -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

7
openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
View File

@ -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

34
openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
View File

@ -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<void>((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 <Loader />;
@ -218,6 +247,7 @@ const EditIngestionPage = () => {
return (
<PageLayout
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
layout={PageLayoutType['2ColRTL']}
rightPanel={getServiceIngestionStepGuide(
activeIngestionStep,

7
openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
View File

@ -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

6
openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
View File

@ -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

11
openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
View File

@ -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

7
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -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: '',

1
openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx
View File

@ -62,6 +62,7 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
jest.mock('../../utils/RouterUtils', () => ({
getAddServicePath: jest.fn(),
getServicesWithTabPath: jest.fn(),
}));
jest.mock('../../axiosAPIs/serviceAPI', () => ({

16
openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
View File

@ -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<ServiceTypes>('databaseServices');
const [serviceName, setServiceName] = useState<ServiceTypes>(
(serviceCategory as ServiceTypes) ?? 'databaseServices'
);
const [paging, setPaging] = useState<ServicePagingRecord>({
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<ServiceDataObj>);
};
@ -424,7 +430,7 @@ const ServicesPage = () => {
<span
className=" tw-ml-1 tw-font-normal tw-text-grey-body"
data-testid="brokers">
{getBrokers(messagingService.connection.config)}
{getBrokers(messagingService.connection?.config)}
</span>
</div>
</>

1
openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
View File

@ -64,6 +64,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
path={ROUTES.TEAMS_AND_USERS_DETAILS}
/>
<Route exact component={ServicesPage} path={ROUTES.SERVICES} />
<Route exact component={ServicesPage} path={ROUTES.SERVICES_WITH_TAB} />
<Route exact component={ServicePage} path={ROUTES.SERVICE} />
<Route exact component={ServicePage} path={ROUTES.SERVICE_WITH_TAB} />
<Route exact component={AddServicePage} path={ROUTES.ADD_SERVICE} />

7
openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
View File

@ -104,3 +104,10 @@ export const getExplorePathWithInitFilters = (
? `${path}?${initialFilterQS}=${encodeURIComponent(filter)}`
: path;
};
export const getServicesWithTabPath = (serviceCat: string) => {
let path = ROUTES.SERVICES_WITH_TAB;
path = path.replace(PLACEHOLDER_ROUTE_SERVICE_CAT, serviceCat);
return path;
};