-
Notifications
You must be signed in to change notification settings - Fork 165
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RHOAIENG-2987] Artifacts - Details Page
- Loading branch information
Showing
15 changed files
with
717 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import { CodeEditor } from '@patternfly/react-code-editor'; | ||
|
||
export const MaxHeightCodeEditor: React.FC< | ||
Partial<Omit<React.ComponentProps<typeof CodeEditor>, 'ref'>> & { maxHeight: number } | ||
> = ({ maxHeight, ...props }) => { | ||
const [contentHeight, setContentHeight] = React.useState<number>(maxHeight); | ||
|
||
return ( | ||
<CodeEditor | ||
onEditorDidMount={(editor) => setContentHeight(editor.getContentHeight())} | ||
editorProps={{ | ||
height: `${contentHeight <= maxHeight ? contentHeight : maxHeight}px`, | ||
}} | ||
{...props} | ||
/> | ||
); | ||
}; |
23 changes: 23 additions & 0 deletions
23
frontend/src/concepts/pipelines/context/usePipelinesUiRoute.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { PIPELINE_ROUTE_NAME_PREFIX } from '~/concepts/pipelines/const'; | ||
import { usePipelinesAPI } from './PipelinesContext'; | ||
import usePipelineNamespaceCR, { dspaLoaded } from './usePipelineNamespaceCR'; | ||
import usePipelinesAPIRoute from './usePipelinesAPIRoute'; | ||
|
||
export const usePipelinesUiRoute = (): [string, boolean] => { | ||
const { namespace } = usePipelinesAPI(); | ||
const crState = usePipelineNamespaceCR(namespace); | ||
const isCrReady = dspaLoaded(crState); | ||
const [pipelinesApiRoute, isPipelinesApiRouteLoaded] = usePipelinesAPIRoute( | ||
isCrReady, | ||
crState[0]?.metadata.name ?? '', | ||
namespace, | ||
); | ||
let uiRoute = ''; | ||
|
||
if (pipelinesApiRoute) { | ||
const [protocol, appHost] = pipelinesApiRoute.split(PIPELINE_ROUTE_NAME_PREFIX); | ||
uiRoute = `${protocol}${PIPELINE_ROUTE_NAME_PREFIX}ui-${appHost}`; | ||
} | ||
|
||
return [uiRoute, isPipelinesApiRouteLoaded]; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import React from 'react'; | ||
import { useParams } from 'react-router'; | ||
|
||
import { | ||
Breadcrumb, | ||
BreadcrumbItem, | ||
Bullseye, | ||
EmptyState, | ||
EmptyStateBody, | ||
EmptyStateHeader, | ||
EmptyStateIcon, | ||
EmptyStateVariant, | ||
Spinner, | ||
Tab, | ||
TabTitleText, | ||
Tabs, | ||
Truncate, | ||
} from '@patternfly/react-core'; | ||
import { ExclamationCircleIcon } from '@patternfly/react-icons'; | ||
|
||
import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types'; | ||
import ApplicationsPage from '~/pages/ApplicationsPage'; | ||
import { useGetArtifactById } from './useGetArtifactById'; | ||
import { getArtifactName } from './utils'; | ||
import { ArtifactDetailsTabKey } from './constants'; | ||
import { ArtifactOverviewDetails } from './ArtifactOverviewDetails'; | ||
|
||
export const ArtifactDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) => { | ||
const { artifactId } = useParams(); | ||
const [artifactResponse, isArtifactLoaded, artifactError] = useGetArtifactById( | ||
Number(artifactId), | ||
); | ||
const artifact = artifactResponse?.toObject(); | ||
const artifactName = getArtifactName(artifact); | ||
|
||
if (artifactError) { | ||
return ( | ||
<EmptyState variant={EmptyStateVariant.lg}> | ||
<EmptyStateHeader | ||
titleText="Error loading artifact details" | ||
icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} | ||
headingLevel="h4" | ||
/> | ||
<EmptyStateBody>{artifactError.message}</EmptyStateBody> | ||
</EmptyState> | ||
); | ||
} | ||
|
||
if (!isArtifactLoaded) { | ||
return ( | ||
<Bullseye> | ||
<Spinner /> | ||
</Bullseye> | ||
); | ||
} | ||
|
||
return ( | ||
<ApplicationsPage | ||
title={artifactName ?? 'Error loading artifact'} | ||
loaded={isArtifactLoaded} | ||
loadError={artifactError} | ||
breadcrumb={ | ||
<Breadcrumb> | ||
{breadcrumbPath} | ||
<BreadcrumbItem isActive style={{ maxWidth: 300 }}> | ||
<Truncate content={artifactName ?? 'Loading...'} /> | ||
</BreadcrumbItem> | ||
</Breadcrumb> | ||
} | ||
empty={false} | ||
provideChildrenPadding | ||
> | ||
<Tabs aria-label="Artifact details tabs" activeKey={ArtifactDetailsTabKey.Overview}> | ||
<Tab | ||
eventKey={ArtifactDetailsTabKey.Overview} | ||
title={<TabTitleText>Overview</TabTitleText>} | ||
aria-label="Overview" | ||
> | ||
<ArtifactOverviewDetails artifact={artifact} /> | ||
</Tab> | ||
<Tab | ||
eventKey={ArtifactDetailsTabKey.LineageExplorer} | ||
title={<TabTitleText>Lineage explorer</TabTitleText>} | ||
isAriaDisabled | ||
/> | ||
</Tabs> | ||
</ApplicationsPage> | ||
); | ||
}; |
112 changes: 112 additions & 0 deletions
112
frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactOverviewDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import React from 'react'; | ||
|
||
import { | ||
Flex, | ||
FlexItem, | ||
Stack, | ||
Title, | ||
DescriptionList, | ||
DescriptionListGroup, | ||
DescriptionListTerm, | ||
DescriptionListDescription, | ||
} from '@patternfly/react-core'; | ||
|
||
import { Artifact, Value } from '~/third_party/mlmd'; | ||
import { usePipelinesUiRoute } from '~/concepts/pipelines/context/usePipelinesUIRoute'; | ||
import { MaxHeightCodeEditor } from '~/components/MaxHeightCodeEditor'; | ||
import { ArtifactUriLink } from './ArtifactUriLink'; | ||
|
||
interface ArtifactOverviewDetailsProps { | ||
artifact: Artifact.AsObject | undefined; | ||
} | ||
|
||
export const ArtifactOverviewDetails: React.FC<ArtifactOverviewDetailsProps> = ({ artifact }) => { | ||
const [pipelinesUiRoute, isPipelinesUiRouteLoaded] = usePipelinesUiRoute(); | ||
|
||
const getPropertyValue = React.useCallback((property: Value.AsObject): React.ReactNode => { | ||
let propValue: React.ReactNode = | ||
property.stringValue || property.intValue || property.doubleValue || property.boolValue || ''; | ||
|
||
if (property.structValue || property.protoValue) { | ||
propValue = ( | ||
<MaxHeightCodeEditor | ||
isReadOnly | ||
maxHeight={300} | ||
code={JSON.stringify(property.structValue || property.protoValue, null, 2)} | ||
/> | ||
); | ||
} | ||
|
||
return propValue; | ||
}, []); | ||
|
||
return ( | ||
<Flex | ||
spaceItems={{ default: 'spaceItems2xl' }} | ||
direction={{ default: 'column' }} | ||
className="pf-v5-u-pt-lg pf-v5-u-pb-lg" | ||
> | ||
<FlexItem> | ||
<Stack hasGutter> | ||
<Title headingLevel="h3">Live system dataset</Title> | ||
<DescriptionList isHorizontal data-testid="dataset-description-list"> | ||
<DescriptionListGroup> | ||
{artifact?.uri && ( | ||
<> | ||
<DescriptionListTerm>URI</DescriptionListTerm> | ||
<DescriptionListDescription> | ||
<ArtifactUriLink | ||
uri={artifact.uri} | ||
downloadHost={pipelinesUiRoute} | ||
isLoaded={isPipelinesUiRouteLoaded} | ||
/> | ||
</DescriptionListDescription> | ||
</> | ||
)} | ||
</DescriptionListGroup> | ||
</DescriptionList> | ||
</Stack> | ||
</FlexItem> | ||
|
||
{!!artifact?.propertiesMap.length && ( | ||
<FlexItem> | ||
<Stack hasGutter> | ||
<Title headingLevel="h3">Properties</Title> | ||
<DescriptionList isHorizontal data-testid="props-description-list"> | ||
<DescriptionListGroup> | ||
{artifact.propertiesMap.map(([propKey, propValue]) => ( | ||
<React.Fragment key={propKey}> | ||
<DescriptionListTerm>{propKey}</DescriptionListTerm> | ||
<DescriptionListDescription> | ||
{getPropertyValue(propValue)} | ||
</DescriptionListDescription> | ||
</React.Fragment> | ||
))} | ||
</DescriptionListGroup> | ||
</DescriptionList> | ||
</Stack> | ||
</FlexItem> | ||
)} | ||
|
||
{!!artifact?.customPropertiesMap.length && ( | ||
<FlexItem> | ||
<Stack hasGutter> | ||
<Title headingLevel="h3">Custom properties</Title> | ||
<DescriptionList isHorizontal data-testid="custom-props-description-list"> | ||
<DescriptionListGroup> | ||
{artifact.customPropertiesMap.map(([customPropKey, customPropValue]) => ( | ||
<React.Fragment key={customPropKey}> | ||
<DescriptionListTerm>{customPropKey}</DescriptionListTerm> | ||
<DescriptionListDescription> | ||
{getPropertyValue(customPropValue)} | ||
</DescriptionListDescription> | ||
</React.Fragment> | ||
))} | ||
</DescriptionListGroup> | ||
</DescriptionList> | ||
</Stack> | ||
</FlexItem> | ||
)} | ||
</Flex> | ||
); | ||
}; |
61 changes: 61 additions & 0 deletions
61
frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactUriLink.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React from 'react'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
import { Flex, FlexItem, Skeleton, Truncate } from '@patternfly/react-core'; | ||
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; | ||
|
||
import { generateGcsConsoleUri, generateMinioArtifactUrl, generateS3ArtifactUrl } from './utils'; | ||
|
||
interface ArtifactUriLinkProps { | ||
uri: string; | ||
downloadHost: string; | ||
isLoaded?: boolean; | ||
} | ||
|
||
export const ArtifactUriLink: React.FC<ArtifactUriLinkProps> = ({ | ||
uri, | ||
downloadHost, | ||
isLoaded = true, | ||
}) => { | ||
let uriLinkTo = ''; | ||
|
||
if (!isLoaded) { | ||
return <Skeleton />; | ||
} | ||
|
||
if (uri.startsWith('gs:')) { | ||
uriLinkTo = generateGcsConsoleUri(uri); | ||
} | ||
|
||
if (uri.startsWith('s3:')) { | ||
uriLinkTo = `${downloadHost}/${generateS3ArtifactUrl(uri)}`; | ||
} | ||
|
||
if (uri.startsWith('http:') || uri.startsWith('https:')) { | ||
uriLinkTo = uri; | ||
} | ||
|
||
if (uri.startsWith('minio:')) { | ||
uriLinkTo = `${downloadHost}/${generateMinioArtifactUrl(uri)}`; | ||
} | ||
|
||
return uriLinkTo ? ( | ||
<Link to={uriLinkTo} target="_blank"> | ||
<Flex | ||
alignItems={{ default: 'alignItemsCenter' }} | ||
spaceItems={{ default: 'spaceItemsSm' }} | ||
flexWrap={{ default: 'nowrap' }} | ||
> | ||
<FlexItem> | ||
<Truncate content={uri} /> | ||
</FlexItem> | ||
|
||
<FlexItem> | ||
<ExternalLinkAltIcon /> | ||
</FlexItem> | ||
</Flex> | ||
</Link> | ||
) : ( | ||
uri | ||
); | ||
}; |
Oops, something went wrong.