Skip to content

Commit 78189a2

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #13376 from Lucifergene/Topology-Decorator-Pod-Ring
OCPBUGS-23780,OCPBUGS-23794,OCPBUGS-23977,OCPBUGS-23783: Bring back the Decorators and Pod Rings around resources in Topology
2 parents 894d798 + a523f50 commit 78189a2

17 files changed

Lines changed: 327 additions & 252 deletions

File tree

‎frontend/packages/console-shared/src/components/pod/PodStatus.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const PodStatus: React.FC<PodStatusProps> = ({
5757
subTitleComponent,
5858
data,
5959
}) => {
60+
const ref = React.useRef();
6061
const [updateOnEnd, setUpdateOnEnd] = React.useState<boolean>(false);
6162
const forceUpdate = useForceUpdate();
6263
const prevVData = React.useRef<PodData[]>(null);
@@ -165,7 +166,11 @@ const PodStatus: React.FC<PodStatusProps> = ({
165166
})}
166167
</div>
167168
);
168-
return <Tooltip content={tipContent}>{chartDonut}</Tooltip>;
169+
return (
170+
<Tooltip triggerRef={ref} content={tipContent}>
171+
<g ref={ref}>{chartDonut}</g>
172+
</Tooltip>
173+
);
169174
}
170175
return chartDonut;
171176
};

‎frontend/packages/helm-plugin/src/topology/components/HelmReleaseStatusDecorator.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const HelmReleaseStatusDecorator: React.FC<HelmReleaseStatusDecoratorProps> = ({
1919
x,
2020
y,
2121
}) => {
22+
const ref = React.useRef();
2223
const { t } = useTranslation();
2324
const { data } = element.getData();
2425

@@ -29,10 +30,12 @@ const HelmReleaseStatusDecorator: React.FC<HelmReleaseStatusDecoratorProps> = ({
2930
const label = t('helm-plugin~Helm release is {{status}}', { status });
3031

3132
return (
32-
<Tooltip content={label} position={TooltipPosition.left}>
33-
<BuildDecoratorBubble x={x} y={y} radius={radius} ariaLabel={label}>
34-
<Status status={status} iconOnly noTooltip />
35-
</BuildDecoratorBubble>
33+
<Tooltip triggerRef={ref} content={label} position={TooltipPosition.left}>
34+
<g ref={ref}>
35+
<BuildDecoratorBubble x={x} y={y} radius={radius} ariaLabel={label}>
36+
<Status status={status} iconOnly noTooltip />
37+
</BuildDecoratorBubble>
38+
</g>
3639
</Tooltip>
3740
);
3841
};

‎frontend/packages/knative-plugin/src/topology/components/decorators/RevisionRouteDecorator.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const RevisionRouteDecorator: React.FC<RevisionRouteDecoratorProps> = ({
2020
x,
2121
y,
2222
}) => {
23+
const ref = React.useRef();
2324
const { t } = useTranslation();
2425
const resourceObj = getResource(element);
2526
const url = useRoutesURL(resourceObj);
@@ -28,12 +29,22 @@ const RevisionRouteDecorator: React.FC<RevisionRouteDecoratorProps> = ({
2829
return null;
2930
}
3031
return (
31-
<Tooltip key="route" content={t('knative-plugin~Open URL')} position={TooltipPosition.right}>
32-
<Decorator x={x} y={y} radius={radius} href={url} external>
33-
<g transform={`translate(-${radius / 2}, -${radius / 2})`}>
34-
<ExternalLinkAltIcon style={{ fontSize: radius }} title={t('knative-plugin~Open URL')} />
35-
</g>
36-
</Decorator>
32+
<Tooltip
33+
triggerRef={ref}
34+
key="route"
35+
content={t('knative-plugin~Open URL')}
36+
position={TooltipPosition.right}
37+
>
38+
<g ref={ref}>
39+
<Decorator x={x} y={y} radius={radius} href={url} external>
40+
<g transform={`translate(-${radius / 2}, -${radius / 2})`}>
41+
<ExternalLinkAltIcon
42+
style={{ fontSize: radius }}
43+
title={t('knative-plugin~Open URL')}
44+
/>
45+
</g>
46+
</Decorator>
47+
</g>
3748
</Tooltip>
3849
);
3950
};

‎frontend/packages/knative-plugin/src/topology/components/decorators/ServiceRouteDecorator.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,25 @@ type ServiceRouteDecoratorProps = {
1212
};
1313

1414
const ServiceRouteDecorator: React.FC<ServiceRouteDecoratorProps> = ({ url, radius, x, y }) => {
15+
const ref = React.useRef();
1516
const { t } = useTranslation();
1617
return (
17-
<Tooltip key="route" content={t('knative-plugin~Open URL')} position={TooltipPosition.right}>
18-
<Decorator x={x} y={y} radius={radius} href={url} external>
19-
<g transform="translate(-6.5, -6.5)">
20-
<ExternalLinkAltIcon style={{ fontSize: radius }} title={t('knative-plugin~Open URL')} />
21-
</g>
22-
</Decorator>
18+
<Tooltip
19+
triggerRef={ref}
20+
key="route"
21+
content={t('knative-plugin~Open URL')}
22+
position={TooltipPosition.right}
23+
>
24+
<g ref={ref}>
25+
<Decorator x={x} y={y} radius={radius} href={url} external>
26+
<g transform="translate(-6.5, -6.5)">
27+
<ExternalLinkAltIcon
28+
style={{ fontSize: radius }}
29+
title={t('knative-plugin~Open URL')}
30+
/>
31+
</g>
32+
</Decorator>
33+
</g>
2334
</Tooltip>
2435
);
2536
};

‎frontend/packages/knative-plugin/src/topology/components/groups/KnativeServiceGroup.tsx‎

Lines changed: 75 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const KnativeServiceGroup: React.FC<KnativeServiceGroupProps> = ({
7878
onShowCreateConnector,
7979
createConnectorDrag,
8080
}) => {
81+
const ref = React.useRef();
8182
const { t } = useTranslation();
8283
const [hoverChange, setHoverChange] = React.useState<boolean>(false);
8384
const [hover, hoverRef] = useHover(200, 200, [hoverChange]);
@@ -138,85 +139,88 @@ const KnativeServiceGroup: React.FC<KnativeServiceGroupProps> = ({
138139

139140
return (
140141
<Tooltip
142+
triggerRef={ref}
141143
content={tooltipLabel}
142144
trigger="manual"
143145
isVisible={dropTarget && canDrop}
144146
animationDuration={0}
145147
>
146-
<g
147-
ref={hoverRef}
148-
onClick={onSelect}
149-
onContextMenu={onContextMenu}
150-
className={classNames('odc-knative-service', {
151-
'pf-m-dragging': dragging || labelDragging,
152-
'pf-m-highlight': canDrop || edgeDragging,
153-
'is-filtered': filtered,
154-
})}
155-
>
156-
<NodeShadows />
157-
<Layer
158-
id={
159-
(dragging || labelDragging) && (regrouping || labelRegrouping) ? undefined : 'groups2'
160-
}
148+
<g ref={ref}>
149+
<g
150+
ref={hoverRef}
151+
onClick={onSelect}
152+
onContextMenu={onContextMenu}
153+
className={classNames('odc-knative-service', {
154+
'pf-m-dragging': dragging || labelDragging,
155+
'pf-m-highlight': canDrop || edgeDragging,
156+
'is-filtered': filtered,
157+
})}
161158
>
162-
<g
163-
ref={nodeRefs}
164-
className={classNames('odc-knative-service', {
165-
'pf-m-selected': selected,
166-
'pf-m-dragging': dragging || labelDragging,
167-
'pf-m-highlight': canDrop || edgeDragging,
168-
'pf-m-drop-target': canDrop && dropTarget,
169-
'is-filtered': filtered,
170-
'is-function': isServerlessFunction(getResource(element)),
171-
})}
159+
<NodeShadows />
160+
<Layer
161+
id={
162+
(dragging || labelDragging) && (regrouping || labelRegrouping) ? undefined : 'groups2'
163+
}
172164
>
173-
<rect
174-
key={
175-
hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
176-
? 'rect-hover'
177-
: 'rect'
178-
}
179-
ref={dndDropRef}
180-
className="odc-knative-service__bg"
181-
x={x}
182-
y={y}
183-
width={width}
184-
height={height}
185-
rx="5"
186-
ry="5"
187-
filter={createSvgIdUrl(
188-
hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
189-
? NODE_SHADOW_FILTER_ID_HOVER
190-
: NODE_SHADOW_FILTER_ID,
165+
<g
166+
ref={nodeRefs}
167+
className={classNames('odc-knative-service', {
168+
'pf-m-selected': selected,
169+
'pf-m-dragging': dragging || labelDragging,
170+
'pf-m-highlight': canDrop || edgeDragging,
171+
'pf-m-drop-target': canDrop && dropTarget,
172+
'is-filtered': filtered,
173+
'is-function': isServerlessFunction(getResource(element)),
174+
})}
175+
>
176+
<rect
177+
key={
178+
hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
179+
? 'rect-hover'
180+
: 'rect'
181+
}
182+
ref={dndDropRef}
183+
className="odc-knative-service__bg"
184+
x={x}
185+
y={y}
186+
width={width}
187+
height={height}
188+
rx="5"
189+
ry="5"
190+
filter={createSvgIdUrl(
191+
hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
192+
? NODE_SHADOW_FILTER_ID_HOVER
193+
: NODE_SHADOW_FILTER_ID,
194+
)}
195+
/>
196+
{!hasChildren && (
197+
<text x={x + width / 2} y={y + height / 2} dy="0.35em" textAnchor="middle">
198+
{t('knative-plugin~No Revisions')}
199+
</text>
191200
)}
192-
/>
193-
{!hasChildren && (
194-
<text x={x + width / 2} y={y + height / 2} dy="0.35em" textAnchor="middle">
195-
{t('knative-plugin~No Revisions')}
196-
</text>
197-
)}
198-
</g>
199-
</Layer>
200-
{decorators}
201-
{showLabel && (data.kind || element.getLabel()) && (
202-
<NodeLabel
203-
className="pf-topology__group__label odc-knative-service__label odc-base-node__label"
204-
onContextMenu={onContextMenu}
205-
contextMenuOpen={contextMenuOpen}
206-
x={x + width / 2}
207-
y={y + height + 20}
208-
paddingX={8}
209-
paddingY={4}
210-
labelIconClass={getImageForIconClass(typeIconClass) || typeIconClass}
211-
badge={badge}
212-
badgeColor={badgeColor}
213-
badgeClassName={badgeClassName}
214-
dragRef={dragLabelRef}
215-
>
216-
{element.getLabel()}
217-
</NodeLabel>
218-
)}
219-
{children}
201+
</g>
202+
</Layer>
203+
{decorators}
204+
{showLabel && (data.kind || element.getLabel()) && (
205+
<NodeLabel
206+
className="pf-topology__group__label odc-knative-service__label odc-base-node__label"
207+
onContextMenu={onContextMenu}
208+
contextMenuOpen={contextMenuOpen}
209+
x={x + width / 2}
210+
y={y + height + 20}
211+
paddingX={8}
212+
paddingY={4}
213+
labelIconClass={getImageForIconClass(typeIconClass) || typeIconClass}
214+
badge={badge}
215+
badgeColor={badgeColor}
216+
badgeClassName={badgeClassName}
217+
dragRef={dragLabelRef}
218+
>
219+
{element.getLabel()}
220+
</NodeLabel>
221+
)}
222+
{children}
223+
</g>
220224
</g>
221225
</Tooltip>
222226
);

‎frontend/packages/knative-plugin/src/topology/components/nodes/EventSink.tsx‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const EventSink: React.FC<EventSinkProps> = ({
6060
...rest
6161
}) => {
6262
useAnchor(EventSinkTargetAnchor, AnchorEnd.target, TYPE_EVENT_SINK_LINK);
63+
const ref = React.useRef();
6364
const { t } = useTranslation();
6465
const [hover, hoverRef] = useHover();
6566
const groupRefs = useCombineRefs(dragNodeRef, dndDropRef);
@@ -129,48 +130,50 @@ const EventSink: React.FC<EventSinkProps> = ({
129130
isVisible={dropTarget && canDrop}
130131
animationDuration={0}
131132
>
132-
<BaseNode
133-
className="odc-event-source"
134-
onShowCreateConnector={isKafkaConnectionLinkPresent && onShowCreateConnector}
135-
kind={data.kind}
136-
element={element}
137-
hoverRef={hoverRef}
138-
dragNodeRef={groupRefs}
139-
dropTarget={dropTarget}
140-
canDrop={canDrop}
141-
labelIcon={<EventSinkIcon />}
142-
{...rest}
143-
>
144-
{donutStatus && showDetails && !isKafkaSink && (
145-
<PodSet size={size * 0.75} x={width / 2} y={height / 2} data={donutStatus} />
146-
)}
147-
<circle
148-
cx={width * 0.5}
149-
cy={height * 0.5}
150-
r={width * 0.25}
151-
fill="var(--pf-v5-global--palette--white)"
152-
/>
153-
{typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
154-
<image
155-
x={width * 0.33}
156-
y={height * 0.33}
157-
width={size * 0.35}
158-
height={size * 0.35}
159-
xlinkHref={getEventSourceIcon(data.kind, resources.obj, element.getType()) as string}
133+
<g ref={ref}>
134+
<BaseNode
135+
className="odc-event-source"
136+
onShowCreateConnector={isKafkaConnectionLinkPresent && onShowCreateConnector}
137+
kind={data.kind}
138+
element={element}
139+
hoverRef={hoverRef}
140+
dragNodeRef={groupRefs}
141+
dropTarget={dropTarget}
142+
canDrop={canDrop}
143+
labelIcon={<EventSinkIcon />}
144+
{...rest}
145+
>
146+
{donutStatus && showDetails && !isKafkaSink && (
147+
<PodSet size={size * 0.75} x={width / 2} y={height / 2} data={donutStatus} />
148+
)}
149+
<circle
150+
cx={width * 0.5}
151+
cy={height * 0.5}
152+
r={width * 0.25}
153+
fill="var(--pf-v5-global--palette--white)"
160154
/>
161-
) : (
162-
<foreignObject
163-
x={width * 0.33}
164-
y={height * 0.33}
165-
width={size * 0.35}
166-
height={size * 0.35}
167-
className="odc-event-source__svg-icon"
168-
>
169-
{getEventSourceIcon(data.kind, resources.obj, element.getType())}
170-
</foreignObject>
171-
)}
172-
{children}
173-
</BaseNode>
155+
{typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
156+
<image
157+
x={width * 0.33}
158+
y={height * 0.33}
159+
width={size * 0.35}
160+
height={size * 0.35}
161+
xlinkHref={getEventSourceIcon(data.kind, resources.obj, element.getType()) as string}
162+
/>
163+
) : (
164+
<foreignObject
165+
x={width * 0.33}
166+
y={height * 0.33}
167+
width={size * 0.35}
168+
height={size * 0.35}
169+
className="odc-event-source__svg-icon"
170+
>
171+
{getEventSourceIcon(data.kind, resources.obj, element.getType())}
172+
</foreignObject>
173+
)}
174+
{children}
175+
</BaseNode>
176+
</g>
174177
</Tooltip>
175178
);
176179
};

0 commit comments

Comments
 (0)