Skip to content

Commit

Permalink
[RHOAIENG-7942]: panel rendering updates, WIP panel content
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenny-s51
jenny-s51 committed Jul 3, 2024
1 parent d5581e4 commit b8d68b2
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 167 deletions.
23 changes: 10 additions & 13 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,17 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
);
}

const panelContent = selectedNode ? (
<div>Hello world</div>
) : null;
// <SelectedTaskDrawerContent
// task={selectedNode?.data.pipelineTask}
// onClose={() => setSelectedId(null)}
// />) : null;


return (
<>
<Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
}
>
<DrawerContentBody style={{ display: 'flex', flexDirection: 'column' }}>
<ApplicationsPage
breadcrumb={
<Breadcrumb>
Expand Down Expand Up @@ -215,6 +214,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
) : (
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
Expand Down Expand Up @@ -246,9 +246,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
</TabContent>
</div>
</ApplicationsPage>
</DrawerContentBody>
</DrawerContent>
</Drawer>
{pipeline && (
<DeletePipelinesModal
isOpen={isDeletionOpen}
Expand Down
165 changes: 77 additions & 88 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,99 +96,88 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
const runType =
run?.storage_state === StorageStateKF.ARCHIVED ? PipelineRunType.ARCHIVED : undefined;

const panelContent = selectedId ? (
<PipelineRunDrawerRightContent
task={selectedNode?.data.pipelineTask}
upstreamTaskName={selectedNode?.runAfterTasks?.[0]}
onClose={() => setSelectedId(null)}
executions={executions}
/>
) : null;

return (
<>
<Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<PipelineRunDrawerRightContent
task={selectedNode?.data.pipelineTask}
upstreamTaskName={selectedNode?.runAfterTasks?.[0]}
onClose={() => setSelectedId(null)}
executions={executions}
<ApplicationsPage
title={
run ? <PipelineDetailsTitle run={run} statusIcon pipelineRunLabel /> : 'Error loading run'
}
subtext={
run && (
<PipelineJobReferenceName
runName={run.display_name}
recurringRunId={run.recurring_run_id}
/>
}
>
<ApplicationsPage
title={
run ? (
<PipelineDetailsTitle run={run} statusIcon pipelineRunLabel />
) : (
'Error loading run'
)
}
subtext={
run && (
<PipelineJobReferenceName
runName={run.display_name}
recurringRunId={run.recurring_run_id}
/>
)
}
description={
run?.description ? <MarkdownView conciseDisplay markdown={run.description} /> : ''
}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath(runType)}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
runType,
)}
>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate content={version.display_name} className="truncate-no-min-width" />
</Link>
) : (
'Loading...'
)
}
description={
run?.description ? <MarkdownView conciseDisplay markdown={run.description} /> : ''
}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath(runType)}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
runType,
)}
</BreadcrumbItem>
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate
content={run?.display_name ?? 'Loading...'}
className="truncate-no-min-width"
/>
</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
<PipelineRunDetailsActions
run={run}
onDelete={() => setDeleting(true)}
onArchive={() => setArchiving(true)}
/>
}
empty={false}
>
<PipelineRunDetailsTabs
run={run}
pipelineSpec={version?.pipeline_spec}
graphContent={
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (nodes.find((node) => node.id === firstId)) {
setSelectedId(firstId);
}
}}
/>
}
>
<Truncate content={version.display_name} />
</Link>
) : (
'Loading...'
)}
</BreadcrumbItem>
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
<Truncate content={run?.display_name ?? 'Loading...'} />
</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
<PipelineRunDetailsActions
run={run}
onDelete={() => setDeleting(true)}
onArchive={() => setArchiving(true)}
/>
}
empty={false}
>
<PipelineRunDetailsTabs
run={run}
pipelineSpec={version?.pipeline_spec}
graphContent={
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (nodes.find((node) => node.id === firstId)) {
setSelectedId(firstId);
}
}}
/>
</ApplicationsPage>
</DrawerContent>
</Drawer>
}
/>
</ApplicationsPage>

<DeletePipelineRunsModal
type={PipelineRunType.ARCHIVED}
toDeleteResources={deleting && run ? [run] : []}
Expand Down
127 changes: 62 additions & 65 deletions .../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,75 +76,72 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
);
}

const panelContent = selectedId ? (
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
) : null;

return (
<>
<Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
}
>
<ApplicationsPage
title={job?.display_name}
description={job ? <MarkdownView conciseDisplay markdown={job.description} /> : ''}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath(PipelineRunType.SCHEDULED)}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
PipelineRunType.SCHEDULED,
)}
>
{version.display_name}
</Link>
) : (
'Loading...'
<ApplicationsPage
title={job?.display_name}
description={job ? <MarkdownView conciseDisplay markdown={job.description} /> : ''}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath(PipelineRunType.SCHEDULED)}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
PipelineRunType.SCHEDULED,
)}
</BreadcrumbItem>
<BreadcrumbItem isActive>{job?.display_name ?? 'Loading...'}</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
loaded && (
<PipelineRunJobDetailsActions
job={job ?? undefined}
onDelete={() => setDeleting(true)}
/>
)
}
empty={false}
>
<PipelineRunDetailsTabs
run={job}
pipelineSpec={version?.pipeline_spec}
graphContent={
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setSelectedId(firstId);
}
}}
/>
}
>
{version.display_name}
</Link>
) : (
'Loading...'
)}
</BreadcrumbItem>
<BreadcrumbItem isActive>{job?.display_name ?? 'Loading...'}</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
loaded && (
<PipelineRunJobDetailsActions
job={job ?? undefined}
onDelete={() => setDeleting(true)}
/>
</ApplicationsPage>
</DrawerContent>
</Drawer>
)
}
empty={false}
>
<PipelineRunDetailsTabs
run={job}
pipelineSpec={version?.pipeline_spec}
graphContent={
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setSelectedId(firstId);
}
}}
/>
}
/>
</ApplicationsPage>

<DeletePipelineRunsModal
type={PipelineRunType.SCHEDULED}
Expand Down
1 change: 1 addition & 0 deletions frontend/src/concepts/pipelines/topology/usePipelineTaskTopology.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,3 +289,4 @@ export const usePipelineTaskTopology = (
(node) => node.id,
);
}, [artifacts, events, executions, runDetails, spec]);

4 changes: 3 additions & 1 deletion frontend/src/concepts/topology/PipelineTopology.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ type PipelineTopologyProps = {
selectedIds?: string[];
onSelectionChange?: (selectionIds: string[]) => void;
nodes: PipelineNodeModel[];
sidePanel?: React.ReactElement | null;
};

const PipelineTopology: React.FC<PipelineTopologyProps> = ({
nodes,
selectedIds,
onSelectionChange,
sidePanel,
}) => {
const controller = useTopologyController('g1');

Expand Down Expand Up @@ -51,7 +53,7 @@ const PipelineTopology: React.FC<PipelineTopologyProps> = ({

return (
<VisualizationProvider controller={controller}>
<PipelineVisualizationSurface nodes={nodes} selectedIds={selectedIds} />
<PipelineVisualizationSurface sidePanel={sidePanel} nodes={nodes} selectedIds={selectedIds} />
</VisualizationProvider>
);
};
Expand Down
Loading

0 comments on commit b8d68b2

Please sign in to comment.