diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
index 915fcdec68..c0c6bc6cae 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -82,18 +82,17 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
);
}
+ const panelContent = selectedNode ? (
+ Hello world
+ ) : null;
+ // setSelectedId(null)}
+ // />) : null;
+
+
return (
<>
-
- setSelectedId(null)}
- />
- }
- >
-
@@ -215,6 +214,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
) : (
{
const firstId = ids[0];
@@ -246,9 +246,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
-
-
-
{pipeline && (
setSelectedId(null)}
+ executions={executions}
+ />
+ ) : null;
+
return (
<>
-
- setSelectedId(null)}
- executions={executions}
+ : 'Error loading run'
+ }
+ subtext={
+ run && (
+
- }
- >
-
- ) : (
- 'Error loading run'
- )
- }
- subtext={
- run && (
-
- )
- }
- description={
- run?.description ? : ''
- }
- loaded={loaded}
- loadError={error}
- breadcrumb={
-
- {breadcrumbPath(runType)}
-
- {version ? (
-
- {/* TODO: Remove the custom className after upgrading to PFv6 */}
-
-
- ) : (
- 'Loading...'
+ )
+ }
+ description={
+ run?.description ? : ''
+ }
+ loaded={loaded}
+ loadError={error}
+ breadcrumb={
+
+ {breadcrumbPath(runType)}
+
+ {version ? (
+
-
- {/* TODO: Remove the custom className after upgrading to PFv6 */}
-
-
-
- }
- headerAction={
- setDeleting(true)}
- onArchive={() => setArchiving(true)}
- />
- }
- empty={false}
- >
- {
- const firstId = ids[0];
- if (ids.length === 0) {
- setSelectedId(null);
- } else if (nodes.find((node) => node.id === firstId)) {
- setSelectedId(firstId);
- }
- }}
- />
- }
+ >
+
+
+ ) : (
+ 'Loading...'
+ )}
+
+
+
+
+
+ }
+ headerAction={
+ setDeleting(true)}
+ onArchive={() => setArchiving(true)}
+ />
+ }
+ empty={false}
+ >
+ {
+ const firstId = ids[0];
+ if (ids.length === 0) {
+ setSelectedId(null);
+ } else if (nodes.find((node) => node.id === firstId)) {
+ setSelectedId(firstId);
+ }
+ }}
/>
-
-
-
+ }
+ />
+
+
setSelectedId(null)}
+ />
+ ) : null;
+
return (
<>
-
- setSelectedId(null)}
- />
- }
- >
- : ''}
- loaded={loaded}
- loadError={error}
- breadcrumb={
-
- {breadcrumbPath(PipelineRunType.SCHEDULED)}
-
- {version ? (
-
- {version.display_name}
-
- ) : (
- 'Loading...'
+ : ''}
+ loaded={loaded}
+ loadError={error}
+ breadcrumb={
+
+ {breadcrumbPath(PipelineRunType.SCHEDULED)}
+
+ {version ? (
+
- {job?.display_name ?? 'Loading...'}
-
- }
- headerAction={
- loaded && (
- setDeleting(true)}
- />
- )
- }
- empty={false}
- >
- {
- const firstId = ids[0];
- if (ids.length === 0) {
- setSelectedId(null);
- } else if (getFirstNode(firstId)) {
- setSelectedId(firstId);
- }
- }}
- />
- }
+ >
+ {version.display_name}
+
+ ) : (
+ 'Loading...'
+ )}
+
+ {job?.display_name ?? 'Loading...'}
+
+ }
+ headerAction={
+ loaded && (
+ setDeleting(true)}
/>
-
-
-
+ )
+ }
+ empty={false}
+ >
+ {
+ const firstId = ids[0];
+ if (ids.length === 0) {
+ setSelectedId(null);
+ } else if (getFirstNode(firstId)) {
+ setSelectedId(firstId);
+ }
+ }}
+ />
+ }
+ />
+
node.id,
);
}, [artifacts, events, executions, runDetails, spec]);
+
diff --git a/frontend/src/concepts/topology/PipelineTopology.tsx b/frontend/src/concepts/topology/PipelineTopology.tsx
index aba5f9e56f..def7635ffb 100644
--- a/frontend/src/concepts/topology/PipelineTopology.tsx
+++ b/frontend/src/concepts/topology/PipelineTopology.tsx
@@ -13,12 +13,14 @@ type PipelineTopologyProps = {
selectedIds?: string[];
onSelectionChange?: (selectionIds: string[]) => void;
nodes: PipelineNodeModel[];
+ sidePanel?: React.ReactElement | null;
};
const PipelineTopology: React.FC = ({
nodes,
selectedIds,
onSelectionChange,
+ sidePanel,
}) => {
const controller = useTopologyController('g1');
@@ -51,7 +53,7 @@ const PipelineTopology: React.FC = ({
return (
-
+
);
};
diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
index f05528ecbc..16602db058 100644
--- a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
+++ b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
@@ -12,6 +12,7 @@ import {
addSpacerNodes,
DEFAULT_SPACER_NODE_TYPE,
DEFAULT_EDGE_TYPE,
+ TopologySideBar,
} from '@patternfly/react-topology';
import {
EmptyState,
@@ -21,18 +22,43 @@ import {
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import { NODE_HEIGHT, NODE_WIDTH } from './const';
+import SelectedTaskDrawerContent from '../pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent';
type PipelineVisualizationSurfaceProps = {
nodes: PipelineNodeModel[];
selectedIds?: string[];
+ sidePanel?: React.ReactElement | null;
};
const PipelineVisualizationSurface: React.FC = ({
nodes,
selectedIds,
+ sidePanel,
}) => {
const controller = useVisualizationController();
const [error, setError] = React.useState();
+
+ React.useEffect(() => {
+ let resizeTimeout: NodeJS.Timeout | null;
+
+ if (selectedIds?.[0]) {
+ const selectedNode = controller?.getNodeById(selectedIds[0]);
+ if (selectedNode) {
+ // Use a timeout in order to allow the side panel to be shown and window size recomputed
+ resizeTimeout = setTimeout(() => {
+ console.log(`======= Pan Node into view for: `, selectedNode.getLabel());
+ controller?.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
+ resizeTimeout = null;
+ }, 500);
+ }
+ }
+ return () => {
+ if (resizeTimeout) {
+ clearTimeout(resizeTimeout);
+ }
+ };
+ }, [selectedIds, controller]);
+
React.useEffect(() => {
const currentModel = controller.toModel();
const updateNodes = nodes.map((node) => {
@@ -127,6 +153,14 @@ const PipelineVisualizationSurface: React.FC
);
}
+ const topologySideBar = (
+ 0}>
+ {sidePanel}
+
+ );
+
+ console.log(sidePanel);
+
return (
})}
/>
}
+ sideBarOpen={!!selectedIds?.[0]}
+ sideBar={topologySideBar}
>