Skip to content

Commit

Permalink
wip drawer
Browse files Browse the repository at this point in the history 
[RHOAIENG-7942]: panel rendering updates, WIP panel content
  • Loading branch information
@jenny-s51
jenny-s51 committed Jun 20, 2024
1 parent 9484646 commit 25a50c2
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 151 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 @@ -79,18 +79,17 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
);
}

const panelContent = selectedNode ? (

Check failure on line 82 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Replace `(⏎····<div>Hello·world</div>⏎··)` with `<div>Hello·world</div>`
<div>Hello world</div>
) : null;
// <SelectedTaskDrawerContent

Check failure on line 85 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Delete `··`
// task={selectedNode?.data.pipelineTask}

Check failure on line 86 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Delete `··`
// onClose={() => setSelectedId(null)}

Check failure on line 87 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Delete `··`
// />) : null;

Check failure on line 88 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Replace `··//·/>)·:·null;⏎` with `//·/>)·:·null;`


return (
<>
<Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
}
>
<DrawerContentBody style={{ display: 'flex', flexDirection: 'column' }}>
<ApplicationsPage

Check failure on line 93 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

Replace `············` with `······`
breadcrumb={
<Breadcrumb>
Expand Down Expand Up @@ -185,6 +184,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
) : (
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
Expand Down Expand Up @@ -214,9 +214,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
</TabContent>
</div>
</ApplicationsPage>
</DrawerContentBody>
</DrawerContent>
</Drawer>
{pipeline && (
<DeletePipelinesModal
isOpen={isDeletionOpen}
Expand Down
158 changes: 80 additions & 78 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,18 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
);
}

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

return (
<>
<Drawer isExpanded={!!selectedNode}>
{/* <Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<PipelineRunDrawerRightContent
Expand All @@ -129,87 +138,80 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
pipelineRunDetails={run && pipelineSpec ? run : undefined}
/>
}
>
<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}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
)}
>
{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}
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setDetailsTab(null);
setSelectedId(firstId);
}
}}
/>
> */}
<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}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
)}
</ApplicationsPage>
</DrawerContent>
>
{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}
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setDetailsTab(null);
setSelectedId(firstId);
}
}}
/>
)}
</ApplicationsPage>
{/* </DrawerContent>
</Drawer>
</DrawerContentBody>
</DrawerContent>
</Drawer>
</Drawer> */}
<DeletePipelineRunsModal
type={PipelineRunType.ARCHIVED}
toDeleteResources={deleting && run ? [run] : []}
Expand Down
124 changes: 65 additions & 59 deletions .../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,16 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
);
}

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

return (
<>
<Drawer isExpanded={!!selectedNode}>
{/* <Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<SelectedTaskDrawerContent
Expand All @@ -109,68 +116,67 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
pipelineRunDetails={job && version?.pipeline_spec ? job : undefined}
/>
}
>
<ApplicationsPage
title={job?.display_name}
description={
job ? <MarkdownView conciseDisplay markdown={job.description} /> : ''
}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
)}
>
{version.display_name}
</Link>
) : (
'Loading...'
)}
</BreadcrumbItem>
<BreadcrumbItem isActive>{job?.display_name ?? 'Loading...'}</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
loaded && (
<PipelineRunJobDetailsActions
job={job ?? undefined}
onDelete={() => setDeleting(true)}
/>
)
}
empty={false}
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setDetailsTab(null);
setSelectedId(firstId);
}
}}
/>
> */}
<ApplicationsPage
title={job?.display_name}
description={job ? <MarkdownView conciseDisplay markdown={job.description} /> : ''}
loaded={loaded}
loadError={error}
breadcrumb={
<Breadcrumb>
{breadcrumbPath}
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{version ? (
<Link
to={routePipelineVersionRunsNamespace(
namespace,
version.pipeline_id,
version.pipeline_version_id,
)}
</ApplicationsPage>
</DrawerContent>
>
{version.display_name}
</Link>
) : (
'Loading...'
)}
</BreadcrumbItem>
<BreadcrumbItem isActive>{job?.display_name ?? 'Loading...'}</BreadcrumbItem>
</Breadcrumb>
}
headerAction={
loaded && (
<PipelineRunJobDetailsActions
job={job ?? undefined}
onDelete={() => setDeleting(true)}
/>
)
}
empty={false}
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
sidePanel={panelContent}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else if (getFirstNode(firstId)) {
setDetailsTab(null);
setSelectedId(firstId);
}
}}
/>
)}
</ApplicationsPage>
{/* </DrawerContent>
</Drawer>
</DrawerContentBody>
</DrawerContent>
</Drawer>
</Drawer> */}

<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 @@ -12,12 +12,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 @@ -46,7 +48,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 25a50c2

Please sign in to comment.