diff --git a/catalog-rest-service/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/catalog-rest-service/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index b9c2dcd3bf7..efcacbc0cb0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -131,11 +131,11 @@ const DashboardDetails = ({ const onDescriptionUpdate = (updatedHTML: string) => { if (description !== updatedHTML) { - const updatedTopicDetails = { + const updatedDashboardDetails = { ...dashboardDetails, description: updatedHTML, }; - descriptionUpdateHandler(updatedTopicDetails); + descriptionUpdateHandler(updatedDashboardDetails); setIsEdit(false); } else { setIsEdit(false); @@ -157,7 +157,7 @@ const DashboardDetails = ({ }, ] : dashboardDetails.tags; - const updatedTopicDetails = { + const updatedDashboardDetails = { ...dashboardDetails, owner: newOwner ? { @@ -168,7 +168,7 @@ const DashboardDetails = ({ tags: tierTag, }; - return settingsUpdateHandler(updatedTopicDetails); + return settingsUpdateHandler(updatedDashboardDetails); } else { return Promise.reject(); } @@ -190,8 +190,8 @@ const DashboardDetails = ({ tagFQN: tag, })); const updatedTags = [...prevTags, ...newTags]; - const updatedTopic = { ...dashboardDetails, tags: updatedTags }; - tagUpdateHandler(updatedTopic); + const updatedDashboard = { ...dashboardDetails, tags: updatedTags }; + tagUpdateHandler(updatedDashboard); } }; const followDashboard = () => { 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/components/PipelineDetails/PipelineDetails.component.tsx similarity index 51% rename from catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx rename to catalog-rest-service/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx index 0acacbdd496..4018aab2809 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx @@ -1,90 +1,63 @@ -import { AxiosResponse } from 'axios'; import classNames from 'classnames'; import { compare } from 'fast-json-patch'; -import { EntityTags, TableDetail } from 'Models'; +import { EntityTags } from 'Models'; import React, { useEffect, useState } from 'react'; -import { Link, useParams } from 'react-router-dom'; -import AppState from '../../AppState'; -import { getLineageByFQN } from '../../axiosAPIs/lineageAPI'; -import { - addFollower, - getPipelineByFqn, - patchPipelineDetails, - removeFollower, -} from '../../axiosAPIs/pipelineAPI'; -import { getServiceById } from '../../axiosAPIs/serviceAPI'; -import Description from '../../components/common/description/Description'; -import EntityPageInfo from '../../components/common/entityPageInfo/EntityPageInfo'; -import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer'; -import TabsPane from '../../components/common/TabsPane/TabsPane'; -import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; -import PageContainer from '../../components/containers/PageContainer'; -import Entitylineage from '../../components/EntityLineage/EntityLineage.component'; -import Loader from '../../components/Loader/Loader'; -import ManageTab from '../../components/ManageTab/ManageTab.component'; -import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor'; -import { - getServiceDetailsPath, - getTeamDetailsPath, -} from '../../constants/constants'; -import { EntityType } from '../../enums/entity.enum'; +import { Link } from 'react-router-dom'; +import { getTeamDetailsPath } from '../../constants/constants'; import { Pipeline, Task } from '../../generated/entity/data/pipeline'; import { User } from '../../generated/entity/teams/user'; -import { EntityLineage } from '../../generated/type/entityLineage'; -import { TagLabel } from '../../generated/type/tagLabel'; +import { LabelType, State } from '../../generated/type/tagLabel'; import { useAuth } from '../../hooks/authHooks'; import { - addToRecentViewed, getCurrentUserId, getUserTeams, isEven, } from '../../utils/CommonUtils'; -import { serviceTypeLogo } from '../../utils/ServiceUtils'; import SVGIcons from '../../utils/SvgUtils'; -import { - getOwnerFromId, - getTagsWithoutTier, - getTierFromTableTags, -} from '../../utils/TableUtils'; -import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; - -const MyPipelinePage = () => { - const USERId = getCurrentUserId(); +import { getTagsWithoutTier } from '../../utils/TableUtils'; +import Description from '../common/description/Description'; +import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo'; +import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer'; +import TabsPane from '../common/TabsPane/TabsPane'; +import PageContainer from '../containers/PageContainer'; +import Entitylineage from '../EntityLineage/EntityLineage.component'; +import ManageTabComponent from '../ManageTab/ManageTab.component'; +import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor'; +import { PipeLineDetailsProp } from './PipelineDetails.interface'; +const PipelineDetails = ({ + entityName, + owner, + tagList, + tier, + slashedPipelineName, + pipelineTags, + activeTab, + pipelineUrl, + pipelineDetails, + serviceType, + setActiveTabHandler, + description, + descriptionUpdateHandler, + entityLineage, + followers, + users, + followPipelineHandler, + unfollowPipelineHandler, + tagUpdateHandler, + settingsUpdateHandler, + tasks, + taskUpdateHandler, +}: PipeLineDetailsProp) => { const { isAuthDisabled } = useAuth(); - - const [tagList, setTagList] = useState>([]); - const { pipelineFQN } = useParams() as Record; - const [pipelineDetails, setPipelineDetails] = useState( - {} as Pipeline - ); - const [pipelineId, setPipelineId] = useState(''); - const [isLoading, setLoading] = useState(false); - const [description, setDescription] = useState(''); - const [followers, setFollowers] = useState>([]); - const [followersCount, setFollowersCount] = useState(0); + const [isEdit, setIsEdit] = useState(false); + const [followersCount, setFollowersCount] = useState(0); const [isFollowing, setIsFollowing] = useState(false); - const [owner, setOwner] = useState(); - const [tier, setTier] = useState(); - const [tags, setTags] = useState>([]); - const [activeTab, setActiveTab] = useState(1); - const [isEdit, setIsEdit] = useState(false); - const [tasks, setTasks] = useState([]); - const [pipelineUrl, setPipelineUrl] = useState(''); - const [displayName, setDisplayName] = useState(''); - const [serviceType, setServiceType] = useState(''); - const [slashedPipelineName, setSlashedPipelineName] = useState< - TitleBreadcrumbProps['titleLinks'] - >([]); - const [editTask, setEditTask] = useState<{ task: Task; index: number; }>(); - const [entityLineage, setEntityLineage] = useState( - {} as EntityLineage - ); const hasEditAccess = () => { if (owner?.type === 'user') { return owner.id === getCurrentUserId(); @@ -92,6 +65,12 @@ const MyPipelinePage = () => { return getUserTeams().some((team) => team.id === owner?.id); } }; + const setFollowersData = (followers: Array) => { + setIsFollowing( + followers.some(({ id }: { id: string }) => id === getCurrentUserId()) + ); + setFollowersCount(followers?.length); + }; const tabs = [ { name: 'Details', @@ -141,191 +120,11 @@ const MyPipelinePage = () => { { key: `${serviceType} Url`, value: pipelineUrl, - placeholderText: displayName, + placeholderText: entityName, isLink: true, openInNewTab: true, }, ]; - const fetchTags = () => { - getTagCategories().then((res) => { - if (res.data) { - setTagList(getTaglist(res.data)); - } - }); - }; - - const setFollowersData = (followers: Array) => { - // need to check if already following or not with logedIn user id - setIsFollowing(followers.some(({ id }: { id: string }) => id === USERId)); - setFollowersCount(followers?.length); - }; - - const fetchPipelineDetail = (pipelineFQN: string) => { - setLoading(true); - getPipelineByFqn(pipelineFQN, [ - 'owner', - 'service', - '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); - setFollowersData(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); - }); - }; - - const followPipeline = (): void => { - if (isFollowing) { - removeFollower(pipelineId, USERId).then((res: AxiosResponse) => { - const { followers } = res.data; - setFollowers(followers); - setFollowersCount((preValu) => preValu - 1); - setIsFollowing(false); - }); - } else { - addFollower(pipelineId, USERId).then((res: AxiosResponse) => { - const { followers } = res.data; - setFollowers(followers); - setFollowersCount((preValu) => preValu + 1); - setIsFollowing(true); - }); - } - }; - - const onDescriptionUpdate = (updatedHTML: string) => { - const updatedPipeline = { ...pipelineDetails, description: updatedHTML }; - - const jsonPatch = compare(pipelineDetails, updatedPipeline); - patchPipelineDetails(pipelineId, jsonPatch).then((res: AxiosResponse) => { - setDescription(res.data.description); - }); - setIsEdit(false); - }; - const onDescriptionEdit = (): void => { - setIsEdit(true); - }; - const onCancel = () => { - setIsEdit(false); - }; - - const onSettingsUpdate = ( - newOwner?: TableDetail['owner'], - newTier?: TableDetail['tier'] - ): Promise => { - return new Promise((resolve, reject) => { - if (newOwner || newTier) { - const tierTag: TableDetail['tags'] = newTier - ? [ - ...getTagsWithoutTier(pipelineDetails.tags as EntityTags[]), - { tagFQN: newTier, labelType: 'Manual', state: 'Confirmed' }, - ] - : (pipelineDetails.tags as EntityTags[]); - const updatedPipeline = { - ...pipelineDetails, - owner: newOwner - ? { ...pipelineDetails.owner, ...newOwner } - : pipelineDetails.owner, - tags: tierTag, - }; - const jsonPatch = compare(pipelineDetails, updatedPipeline); - patchPipelineDetails(pipelineId, jsonPatch) - .then((res: AxiosResponse) => { - setPipelineDetails(res.data); - setOwner(getOwnerFromId(res.data.owner?.id)); - setTier(getTierFromTableTags(res.data.tags)); - resolve(); - }) - .catch(() => reject()); - } else { - reject(); - } - }); - }; - - const onTagUpdate = (selectedTags?: Array) => { - if (selectedTags) { - const prevTags = pipelineDetails?.tags?.filter((tag) => - selectedTags.includes(tag?.tagFQN as string) - ); - const newTags: Array = selectedTags - .filter((tag) => { - return !prevTags?.map((prevTag) => prevTag.tagFQN).includes(tag); - }) - .map((tag) => ({ - labelType: 'Manual', - state: 'Confirmed', - tagFQN: tag, - })); - const updatedTags = [...(prevTags as TagLabel[]), ...newTags]; - const updatedPipeline = { ...pipelineDetails, tags: updatedTags }; - const jsonPatch = compare(pipelineDetails, updatedPipeline); - patchPipelineDetails(pipelineId, jsonPatch).then((res: AxiosResponse) => { - setTier(getTierFromTableTags(res.data.tags)); - setTags(getTagsWithoutTier(res.data.tags)); - }); - } - }; - - const handleUpdateTask = (task: Task, index: number) => { - setEditTask({ task, index }); - }; - - const closeEditTaskModal = (): void => { - setEditTask(undefined); - }; const onTaskUpdate = (taskDescription: string) => { if (editTask) { @@ -339,42 +138,120 @@ const MyPipelinePage = () => { const updatedPipeline = { ...pipelineDetails, tasks: updatedTasks }; const jsonPatch = compare(pipelineDetails, updatedPipeline); - patchPipelineDetails(pipelineId, jsonPatch).then((res: AxiosResponse) => { - setTasks(res.data.tasks || []); - }); + taskUpdateHandler(jsonPatch); setEditTask(undefined); } else { setEditTask(undefined); } }; - useEffect(() => { - fetchPipelineDetail(pipelineFQN); - setActiveTab(1); - getLineageByFQN(pipelineFQN, EntityType.PIPELINE).then( - (res: AxiosResponse) => setEntityLineage(res.data) - ); - }, [pipelineFQN]); + const handleUpdateTask = (task: Task, index: number) => { + setEditTask({ task, index }); + }; + + const closeEditTaskModal = (): void => { + setEditTask(undefined); + }; + + const onSettingsUpdate = (newOwner?: Pipeline['owner'], newTier?: string) => { + if (newOwner || newTier) { + const tierTag: Pipeline['tags'] = newTier + ? [ + ...getTagsWithoutTier(pipelineDetails.tags as Array), + { + tagFQN: newTier, + labelType: LabelType.Manual, + state: State.Confirmed, + }, + ] + : pipelineDetails.tags; + const updatedPipelineDetails = { + ...pipelineDetails, + owner: newOwner + ? { + ...pipelineDetails.owner, + ...newOwner, + } + : pipelineDetails.owner, + tags: tierTag, + }; + + return settingsUpdateHandler(updatedPipelineDetails); + } else { + return Promise.reject(); + } + }; + + const onTagUpdate = (selectedTags?: Array) => { + if (selectedTags) { + const prevTags = + pipelineDetails?.tags?.filter((tag) => + selectedTags.includes(tag?.tagFQN as string) + ) || []; + const newTags = selectedTags + .filter((tag) => { + return !prevTags?.map((prevTag) => prevTag.tagFQN).includes(tag); + }) + .map((tag) => ({ + labelType: LabelType.Manual, + state: State.Confirmed, + tagFQN: tag, + })); + const updatedTags = [...prevTags, ...newTags]; + const updatedPipeline = { ...pipelineDetails, tags: updatedTags }; + tagUpdateHandler(updatedPipeline); + } + }; + + const onDescriptionEdit = (): void => { + setIsEdit(true); + }; + const onCancel = () => { + setIsEdit(false); + }; + + const onDescriptionUpdate = (updatedHTML: string) => { + if (description !== updatedHTML) { + const updatedPipelineDetails = { + ...pipelineDetails, + description: updatedHTML, + }; + descriptionUpdateHandler(updatedPipelineDetails); + setIsEdit(false); + } else { + setIsEdit(false); + } + }; + + const followPipeline = () => { + if (isFollowing) { + setFollowersCount((preValu) => preValu - 1); + setIsFollowing(false); + unfollowPipelineHandler(); + } else { + setFollowersCount((preValu) => preValu + 1); + setIsFollowing(true); + followPipelineHandler(); + } + }; useEffect(() => { - if (isAuthDisabled && AppState.users.length && followers.length) { + if (isAuthDisabled && users.length && followers.length) { setFollowersData(followers); } - }, [AppState.users, followers]); + }, [users, followers]); useEffect(() => { - fetchTags(); - }, []); + setFollowersData(followers); + }, [followers]); return ( - - {isLoading ? ( - - ) : ( + <> +
{ isFollowing={isFollowing} owner={owner} tagList={tagList} - tags={tags} + tags={pipelineTags} tagsHandler={onTagUpdate} tier={tier || ''} titleLinks={slashedPipelineName} @@ -391,7 +268,7 @@ const MyPipelinePage = () => {
@@ -402,7 +279,7 @@ const MyPipelinePage = () => {
{ )} {activeTab === 3 && (
- {
- )} + {editTask && ( { onSave={onTaskUpdate} /> )} - + ); }; -export default MyPipelinePage; +export default PipelineDetails; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.tsx b/catalog-rest-service/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.tsx new file mode 100644 index 00000000000..2ce777e0c96 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.tsx @@ -0,0 +1,31 @@ +import { Operation } from 'fast-json-patch'; +import { EntityTags, TableDetail } from 'Models'; +import { Pipeline, Task } from '../../generated/entity/data/pipeline'; +import { User } from '../../generated/entity/teams/user'; +import { EntityLineage } from '../../generated/type/entityLineage'; +import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface'; + +export interface PipeLineDetailsProp { + serviceType: string; + pipelineUrl: string; + entityName: string; + tagList: Array; + users: Array; + pipelineDetails: Pipeline; + activeTab: number; + owner: TableDetail['owner']; + description: string; + tier: string; + followers: Array; + pipelineTags: Array; + slashedPipelineName: TitleBreadcrumbProps['titleLinks']; + entityLineage: EntityLineage; + tasks: Task[]; + setActiveTabHandler: (value: number) => void; + followPipelineHandler: () => void; + unfollowPipelineHandler: () => void; + settingsUpdateHandler: (updatedPipeline: Pipeline) => Promise; + descriptionUpdateHandler: (updatedPipeline: Pipeline) => void; + tagUpdateHandler: (updatedPipeline: Pipeline) => void; + taskUpdateHandler: (patch: Array) => void; +} diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx new file mode 100644 index 00000000000..8390af15d6e --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx @@ -0,0 +1,243 @@ +import { AxiosResponse } from 'axios'; +import { compare, Operation } from 'fast-json-patch'; +import { observer } from 'mobx-react'; +import { EntityTags, TableDetail } from 'Models'; +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import AppState from '../../AppState'; +import { getLineageByFQN } from '../../axiosAPIs/lineageAPI'; +import { + addFollower, + getPipelineByFqn, + patchPipelineDetails, + removeFollower, +} from '../../axiosAPIs/pipelineAPI'; +import { getServiceById } from '../../axiosAPIs/serviceAPI'; +import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; +import Loader from '../../components/Loader/Loader'; +import PipelineDetails from '../../components/PipelineDetails/PipelineDetails.component'; +import { getServiceDetailsPath } from '../../constants/constants'; +import { EntityType } from '../../enums/entity.enum'; +import { Pipeline, Task } from '../../generated/entity/data/pipeline'; +import { User } from '../../generated/entity/teams/user'; +import { EntityLineage } from '../../generated/type/entityLineage'; +import { addToRecentViewed, getCurrentUserId } from '../../utils/CommonUtils'; +import { serviceTypeLogo } from '../../utils/ServiceUtils'; +import { + getOwnerFromId, + getTagsWithoutTier, + getTierFromTableTags, +} from '../../utils/TableUtils'; +import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; + +const PipelineDetailsPage = () => { + const USERId = getCurrentUserId(); + + const [tagList, setTagList] = useState>([]); + const { pipelineFQN } = useParams() as Record; + const [pipelineDetails, setPipelineDetails] = useState( + {} as Pipeline + ); + const [pipelineId, setPipelineId] = useState(''); + const [isLoading, setLoading] = useState(false); + 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 [tasks, setTasks] = useState([]); + const [pipelineUrl, setPipelineUrl] = useState(''); + const [displayName, setDisplayName] = useState(''); + const [serviceType, setServiceType] = useState(''); + const [slashedPipelineName, setSlashedPipelineName] = useState< + TitleBreadcrumbProps['titleLinks'] + >([]); + + const [entityLineage, setEntityLineage] = useState( + {} as EntityLineage + ); + const activeTabHandler = (tabValue: number) => { + setActiveTab(tabValue); + }; + + const saveUpdatedPipelineData = ( + updatedData: Pipeline + ): Promise => { + const jsonPatch = compare(pipelineDetails, updatedData); + + return patchPipelineDetails( + pipelineId, + jsonPatch + ) as unknown as Promise; + }; + + const fetchTags = () => { + getTagCategories().then((res) => { + if (res.data) { + setTagList(getTaglist(res.data)); + } + }); + }; + + const fetchPipelineDetail = (pipelineFQN: string) => { + setLoading(true); + getPipelineByFqn(pipelineFQN, [ + 'owner', + 'service', + '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, + }, + ]); + + addToRecentViewed({ + entityType: EntityType.PIPELINE, + fqn: fullyQualifiedName, + serviceType: serviceRes.data.serviceType, + timestamp: 0, + }); + } + ); + setPipelineUrl(pipelineUrl); + setTasks(tasks); + setLoading(false); + }); + }; + + const followPipeline = () => { + addFollower(pipelineId, USERId).then((res: AxiosResponse) => { + const { followers } = res.data; + setFollowers(followers); + }); + }; + const unfollowPipeline = () => { + removeFollower(pipelineId, USERId).then((res: AxiosResponse) => { + const { followers } = res.data; + + setFollowers(followers); + }); + }; + + const descriptionUpdateHandler = (updatedPipeline: Pipeline) => { + saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => { + const { description } = res.data; + setPipelineDetails(res.data); + setDescription(description); + }); + }; + + const settingsUpdateHandler = (updatedPipeline: Pipeline): Promise => { + return new Promise((resolve, reject) => { + saveUpdatedPipelineData(updatedPipeline) + .then((res) => { + setPipelineDetails(res.data); + setOwner(getOwnerFromId(res.data.owner?.id)); + setTier(getTierFromTableTags(res.data.tags)); + resolve(); + }) + .catch(() => reject()); + }); + }; + + const onTagUpdate = (updatedPipeline: Pipeline) => { + saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => { + setTier(getTierFromTableTags(res.data.tags)); + setTags(getTagsWithoutTier(res.data.tags)); + }); + }; + + const onTaskUpdate = (jsonPatch: Array) => { + patchPipelineDetails(pipelineId, jsonPatch).then((res: AxiosResponse) => { + setTasks(res.data.tasks || []); + }); + }; + + useEffect(() => { + fetchPipelineDetail(pipelineFQN); + setActiveTab(1); + getLineageByFQN(pipelineFQN, EntityType.PIPELINE).then( + (res: AxiosResponse) => setEntityLineage(res.data) + ); + }, [pipelineFQN]); + + useEffect(() => { + fetchTags(); + }, []); + + return ( + <> + {isLoading ? ( + + ) : ( + + )} + + ); +}; + +export default observer(PipelineDetailsPage); 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 585637c3df7..c9194f0562d 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 @@ -27,7 +27,7 @@ import DatasetDetailsPage from '../pages/DatasetDetailsPage/DatasetDetailsPage.c import EntityVersionPage from '../pages/EntityVersionPage/EntityVersionPage.component'; import ExplorePage from '../pages/explore/ExplorePage.component'; import MyDataPage from '../pages/MyDataPage/MyDataPage.component'; -import MyPipelinePage from '../pages/Pipeline-details'; +import PipelineDetailsPage from '../pages/PipelineDetails/PipelineDetailsPage.component'; import ReportsPage from '../pages/reports'; import Scorecard from '../pages/scorecard'; import ServicePage from '../pages/service'; @@ -76,7 +76,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => { /> - +