Show connector between kafka sinks and event-sources/brokers/channels

frontend/packages/knative-plugin/locales/en/knative-plugin.json

@@ -256,11 +256,14 @@
  "Resources": "Resources",
  "Open URL": "Open URL",
  "No Revisions": "No Revisions",
- "Move sink to service": "Move sink to service",
+ "Move Trigger": "Move Trigger",
+ "Move Subscription": "Move Subscription",
+ "Move sink to Service": "Move sink to Service",
  "Error moving event source sink": "Error moving event source sink",
  "Error moving event source kafka connector": "Error moving event source kafka connector",
  "Error while sink": "Error while sink",
  "Move sink to {{resourceObjKind}}": "Move sink to {{resourceObjKind}}",
+ "Move sink to KafkaSink": "Move sink to KafkaSink",
  "Open URI": "Open URI",
  "Move sink to URI": "Move sink to URI",
  "Event source connector": "Event source connector",

frontend/packages/knative-plugin/src/components/overview/EventPubSubResources.tsx

@@ -24,7 +24,7 @@ type EventPubSubResourcesProps = {
  deployments?: K8sResourceKind[];
  brokers?: K8sResourceKind[];
  channels?: K8sResourceKind[];
- ksservices?: K8sResourceKind[];
+ subscriberRes?: K8sResourceKind[];
  filters?: FilterTableRowProps;
  subscribers?: Subscriber[];
  };
@@ -63,7 +63,7 @@ const EventPubSubResources: React.FC<EventPubSubResourcesProps> = ({ item }) =>
  const { t } = useTranslation();
  const {
  obj,
- ksservices = [],
+ subscriberRes = [],
  eventSources = [],
  pods = [],
  deployments = [],
@@ -82,7 +82,10 @@ const EventPubSubResources: React.FC<EventPubSubResourcesProps> = ({ item }) =>
  title={t('knative-plugin~Event Sources')}
  />
  <PubSubResourceOverviewList items={brokers} title={t('knative-plugin~Broker')} />
- <PubSubResourceOverviewList items={ksservices} title={t('knative-plugin~Subscriber')} />
+ <PubSubResourceOverviewList
+ items={subscriberRes}
+ title={t('knative-plugin~Subscriber')}
+ />
  <EventTriggerFilterList filters={filters} />
  </>
  );
@@ -94,7 +97,10 @@ const EventPubSubResources: React.FC<EventPubSubResourcesProps> = ({ item }) =>
  title={t('knative-plugin~Event Sources')}
  />
  <PubSubResourceOverviewList items={channels} title={t('knative-plugin~Channel')} />
- <PubSubResourceOverviewList items={ksservices} title={t('knative-plugin~Subscriber')} />
+ <PubSubResourceOverviewList
+ items={subscriberRes}
+ title={t('knative-plugin~Subscriber')}
+ />
  </>
  );
  case EventingBrokerModel.kind:

frontend/packages/knative-plugin/src/topology/components/knativeComponentFactory.ts

@@ -172,7 +172,11 @@ export const getKafkaSinkComponentFactory: ViewComponentFactory = (kind, type) =
  if (type === TYPE_KAFKA_SINK) {
  return withEditReviewAccess('patch')(
  withDragNode(nodeDragSourceSpec(type))(
- withSelection({ controlled: true })(withContextMenu(contextMenuActions)(EventSink)),
+ withSelection({ controlled: true })(
+ withContextMenu(contextMenuActions)(
+ withDndDrop<any, any, {}, NodeComponentProps>(eventSourceSinkDropTargetSpec)(EventSink),
+ ),
+ ),
  ),
  );
  }

frontend/packages/knative-plugin/src/topology/components/knativeComponentUtils.ts

@@ -27,6 +27,7 @@ import {
  TYPE_KNATIVE_SERVICE,
  TYPE_EVENT_PUB_SUB,
  TYPE_SINK_URI,
+ TYPE_KAFKA_SINK,
 } from '../const';
 import {
  createEventSourceKafkaConnection,
@@ -54,13 +55,15 @@ export const nodesEdgeIsDragging = (monitor, props) =>
 
 export const canDropEventSourceSinkOnNode = (operation: string, edge: Edge, node: Node): boolean =>
  edge.getSource() !== node &&
- [TYPE_KNATIVE_SERVICE, TYPE_EVENT_PUB_SUB, TYPE_SINK_URI].includes(node.getType()) &&
+ [TYPE_KNATIVE_SERVICE, TYPE_EVENT_PUB_SUB, TYPE_SINK_URI, TYPE_KAFKA_SINK].includes(
+ node.getType(),
+ ) &&
  operation === MOVE_EV_SRC_CONNECTOR_OPERATION &&
  !node.getTargetEdges().find((e) => e.getSource() === edge.getSource());
 
 export const canDropPubSubSinkOnNode = (operation: string, edge: Edge, node: Node): boolean =>
  edge.getSource() !== node &&
- node.getType() === TYPE_KNATIVE_SERVICE &&
+ (node.getType() === TYPE_KNATIVE_SERVICE || node.getType() === TYPE_KAFKA_SINK) &&
  operation === MOVE_PUB_SUB_CONNECTOR_OPERATION &&
  !node.getTargetEdges().find((e) => e.getSource() === edge.getSource());
 
@@ -74,11 +77,23 @@ export const isEventPubSubDroppable = (source: Node, target: Node) => {
  );
 };
 const getKnativeTooltip = (monitor): string => {
- return monitor.getOperation()?.type === CREATE_PUB_SUB_CONNECTOR_OPERATION
- ? monitor.getItem()?.getData()?.resources.obj.kind === EventingBrokerModel.kind
- ? i18next.t('knative-plugin~Add Trigger')
- : i18next.t('knative-plugin~Add Subscription')
- : i18next.t('knative-plugin~Move sink to service');
+ switch (monitor.getOperation()?.type) {
+ case CREATE_PUB_SUB_CONNECTOR_OPERATION: {
+ return monitor.getItem()?.getData()?.resources.obj.kind === EventingBrokerModel.kind
+ ? i18next.t('knative-plugin~Add Trigger')
+ : i18next.t('knative-plugin~Add Subscription');
+ }
+ case MOVE_PUB_SUB_CONNECTOR_OPERATION: {
+ return monitor.getItem()?.getData()?.resources.obj.kind === EventingBrokerModel.kind
+ ? i18next.t('knative-plugin~Move Trigger')
+ : i18next.t('knative-plugin~Move Subscription');
+ }
+ case MOVE_EV_SRC_CONNECTOR_OPERATION: {
+ return i18next.t('knative-plugin~Move sink to Service');
+ }
+ default:
+ return '';
+ }
 };
 export const eventSourceSinkDropTargetSpec: DropTargetSpec<
  Edge,
@@ -102,6 +117,7 @@ export const eventSourceSinkDropTargetSpec: DropTargetSpec<
  dropTarget: monitor.isOver({ shallow: true }),
  edgeDragging: nodesEdgeIsDragging(monitor, props),
  tooltipLabel: getKnativeTooltip(monitor),
+ edgeOperation: monitor.getOperation()?.type,
  }),
  dropHint: (item) => {
  const itemData = item.getData();

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
 import {
  Node,
  observer,
@@ -14,6 +15,7 @@ import {
  useVisualizationController,
  ScaleDetailsLevel,
 } from '@patternfly/react-topology';
+import { useTranslation } from 'react-i18next';
 import { DeploymentModel } from '@console/internal/models';
 import { referenceForModel, referenceFor } from '@console/internal/module/k8s';
 import { usePodsWatcher } from '@console/shared';
@@ -26,13 +28,18 @@ import { EventSinkIcon } from '../../../utils/icons';
 import { usePodsForRevisions } from '../../../utils/usePodsForRevisions';
 import { TYPE_EVENT_SINK_LINK, TYPE_KAFKA_CONNECTION_LINK } from '../../const';
 import EventSinkTargetAnchor from '../anchors/EventSinkTargetAnchor';
+import { MOVE_EV_SRC_CONNECTOR_OPERATION } from '../knativeComponentUtils';
 
 import './EventSource.scss';
 
 export type EventSinkProps = {
  element: Node;
  dragging?: boolean;
  edgeDragging?: boolean;
+ tooltipLabel?: string;
+ canDrop?: boolean;
+ dropTarget?: boolean;
+ edgeOperation?: string;
 } & WithSelectionProps &
  WithDragNodeProps &
  WithDndDropProps &
@@ -46,9 +53,14 @@ const EventSink: React.FC<EventSinkProps> = ({
  onShowCreateConnector,
  contextMenuOpen,
  children,
+ tooltipLabel,
+ dropTarget,
+ canDrop,
+ edgeOperation,
  ...rest
 }) => {
  useAnchor(EventSinkTargetAnchor, AnchorEnd.target, TYPE_EVENT_SINK_LINK);
+ const { t } = useTranslation();
  const [hover, hoverRef] = useHover();
  const groupRefs = useCombineRefs(dragNodeRef, dndDropRef);
  const { data, resources, resource } = element.getData();
@@ -107,46 +119,59 @@ const EventSink: React.FC<EventSinkProps> = ({
  ]);
 
  return (
- <BaseNode
- className="odc-event-source"
- onShowCreateConnector={isKafkaConnectionLinkPresent && onShowCreateConnector}
- kind={data.kind}
- element={element}
- hoverRef={hoverRef}
- dragNodeRef={groupRefs}
- labelIcon={<EventSinkIcon />}
- {...rest}
+ <Tooltip
+ content={
+  edgeOperation === MOVE_EV_SRC_CONNECTOR_OPERATION
+  ? t('knative-plugin~Move sink to KafkaSink')
+  : tooltipLabel ?? ''
+ }
+ trigger="manual"
+ isVisible={dropTarget && canDrop}
+ animationDuration={0}
  >
- {donutStatus && showDetails && !isKafkaSink && (
- <PodSet size={size * 0.75} x={width / 2} y={height / 2} data={donutStatus} />
- )}
- <circle
- cx={width * 0.5}
- cy={height * 0.5}
- r={width * 0.25}
- fill="var(--pf-global--palette--white)"
- />
- {typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
- <image
- x={width * 0.33}
- y={height * 0.33}
- width={size * 0.35}
- height={size * 0.35}
- xlinkHref={getEventSourceIcon(data.kind, resources.obj, element.getType()) as string}
+ <BaseNode
+ className="odc-event-source"
+ onShowCreateConnector={isKafkaConnectionLinkPresent && onShowCreateConnector}
+ kind={data.kind}
+ element={element}
+ hoverRef={hoverRef}
+ dragNodeRef={groupRefs}
+ dropTarget={dropTarget}
+ canDrop={canDrop}
+ labelIcon={<EventSinkIcon />}
+ {...rest}
+ >
+ {donutStatus && showDetails && !isKafkaSink && (
+ <PodSet size={size * 0.75} x={width / 2} y={height / 2} data={donutStatus} />
+ )}
+ <circle
+ cx={width * 0.5}
+ cy={height * 0.5}
+ r={width * 0.25}
+ fill="var(--pf-global--palette--white)"
  />
- ) : (
- <foreignObject
- x={width * 0.33}
- y={height * 0.33}
- width={size * 0.35}
- height={size * 0.35}
- className="odc-event-source__svg-icon"
- >
- {getEventSourceIcon(data.kind, resources.obj, element.getType())}
- </foreignObject>
- )}
- {children}
- </BaseNode>
+ {typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
+ <image
+ x={width * 0.33}
+ y={height * 0.33}
+ width={size * 0.35}
+ height={size * 0.35}
+ xlinkHref={getEventSourceIcon(data.kind, resources.obj, element.getType()) as string}
+ />
+ ) : (
+ <foreignObject
+ x={width * 0.33}
+ y={height * 0.33}
+ width={size * 0.35}
+ height={size * 0.35}
+ className="odc-event-source__svg-icon"
+ >
+ {getEventSourceIcon(data.kind, resources.obj, element.getType())}
+ </foreignObject>
+ )}
+ {children}
+ </BaseNode>
+ </Tooltip>
  );
 };