move TrapezoidBaseNode to topology base and contribute factory , data…

…model, connector via dynamic extension

frontend/packages/console-shared/src/utils/resource-utils.ts

@@ -61,7 +61,7 @@ type ResourceItem = {
 export type ResourceUtil = (obj: K8sResourceKind, props: any) => ResourceItem | undefined;
 
 export const getResourcePausedAlert = (resource: K8sResourceKind): OverviewItemAlerts => {
- if (!resource.spec.paused) {
+ if (!resource?.spec?.paused) {
  return {};
  }
  return {

frontend/packages/dev-console/console-extensions.json

@@ -457,5 +457,41 @@
  },
  "provider": { "$codeRef": "actions.useEditImportActionProvider" }
  }
+ },
+ {
+ "type": "console.topology/component/factory",
+ "properties": {
+ "getFactory": {
+ "$codeRef": "topology.componentFactory"
+ }
+ }
+ },
+ {
+ "type": "console.topology/data/factory",
+ "properties": {
+ "id": "devconsole-bindable-topology-model-factory",
+ "priority": 200,
+ "resources": {
+ "bindables": {
+ "model": { "kind": "IntegrationPlatform", "group": "camel.apache.org", "version": "v1" },
+ "opts": {
+ "isList": true,
+ "optional": true
+ }
+ }
+ },
+ "workloadKeys": ["bindables"],
+ "getDataModel": {
+ "$codeRef": "topology.getDataModel"
+ }
+ }
+ },
+ {
+ "type": "console.topology/create/connector",
+ "properties": {
+ "getCreateConnector": {
+ "$codeRef": "topology.createConnector"
+ }
+ }
  }
 ]

frontend/packages/dev-console/package.json

@@ -26,7 +26,8 @@
  "actions": "src/actions",
  "icons": "src/utils/icons.tsx",
  "catalog": "src/components/catalog",
- "fileUpload": "src/components/jar-file-upload/index.ts"
+ "fileUpload": "src/components/jar-file-upload/index.ts",
+ "topology": "src/components/topology/topology-plugin.ts"
  }
  }
 }

frontend/packages/dev-console/src/components/topology/components/BindableNode.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {
+ observer,
+ Node,
+ useDndDrop,
+ WithContextMenuProps,
+ WithCreateConnectorProps,
+ WithDragNodeProps,
+ WithSelectionProps,
+} from '@patternfly/react-topology';
+import { connect } from 'react-redux';
+import * as openshiftImg from '@console/internal/imgs/logos/openshift.svg';
+import { modelFor, referenceFor, referenceForModel } from '@console/internal/module/k8s';
+import { RootState } from '@console/internal/redux';
+import { obsOrKafkaConnectionDropTargetSpec } from '@console/rhoas-plugin/src/topology/components/rhoasComponentUtils';
+import { calculateRadius } from '@console/shared';
+import { TrapezoidBaseNode } from '@console/topology/src/components/graph-view/components/nodes';
+import { getServiceBindingStatus, getTopologyResourceObject } from '@console/topology/src/utils';
+
+interface StateProps {
+ serviceBinding: boolean;
+}
+
+type BindableNodeProps = {
+ element: Node;
+ tooltipLabel?: string;
+} & WithSelectionProps &
+ WithDragNodeProps &
+ WithContextMenuProps &
+ WithCreateConnectorProps &
+ StateProps;
+
+const BindableNode: React.FC<BindableNodeProps> = ({
+ element,
+ selected,
+ onSelect,
+ serviceBinding,
+ tooltipLabel,
+ ...props
+}) => {
+ const { width, height } = element.getBounds();
+ const size = Math.min(width, height);
+ const iconRadius = Math.min(width, height) * 0.25;
+ const { radius } = calculateRadius(size);
+ const spec = React.useMemo(() => obsOrKafkaConnectionDropTargetSpec(serviceBinding), [
+ serviceBinding,
+ ]);
+ const [dndDropProps, dndDropRef] = useDndDrop(spec, { element, ...props });
+ const resourceObj = getTopologyResourceObject(element.getData());
+ const resourceModel = modelFor(referenceFor(resourceObj));
+ // const kindResource = referenceForModel(resourceModel);
+
+ // const defaultIcon = getImageForIconClass(`icon-openshift`);
+ return (
+ <TrapezoidBaseNode
+ className="KafkaNode"
+ tooltipLabel={tooltipLabel}
+ onSelect={onSelect}
+ icon={openshiftImg}
+ innerRadius={iconRadius}
+ selected={selected}
+ kind={resourceModel && referenceForModel(resourceModel)}
+ element={element}
+ outerRadius={radius}
+ {...props}
+ dndDropRef={dndDropRef}
+ {...dndDropProps}
+ />
+ );
+};
+
+const mapStateToProps = (state: RootState): StateProps => {
+ return {
+ serviceBinding: getServiceBindingStatus(state),
+ };
+};
+
+export default connect(mapStateToProps)(observer(BindableNode));

frontend/packages/dev-console/src/components/topology/components/const.ts

@@ -0,0 +1 @@
+export const TYPE_BINDABLE_NODE = 'bindable-node';

frontend/packages/dev-console/src/components/topology/components/devConsoleComponetFactory.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {
+ GraphElement,
+ withDragNode,
+ withSelection,
+ withCreateConnector,
+} from '@patternfly/react-topology';
+import {
+ createConnectorCallback,
+ nodeDragSourceSpec,
+ withContextMenu,
+ CreateConnector,
+ noRegroupWorkloadContextMenu,
+} from '@console/topology/src/components/graph-view';
+import { withEditReviewAccess } from '@console/topology/src/utils';
+import BindableNode from './BindableNode';
+import { TYPE_BINDABLE_NODE } from './const';
+
+export const getDevConsoleComponentFactory = (
+ kind,
+ type,
+): React.ComponentType<{ element: GraphElement }> | undefined => {
+ switch (type) {
+ case TYPE_BINDABLE_NODE:
+ return withCreateConnector(
+ createConnectorCallback(),
+ CreateConnector,
+ )(
+ withEditReviewAccess('patch')(
+ withDragNode(nodeDragSourceSpec(type))(
+ withSelection({ controlled: true })(
+ withContextMenu(noRegroupWorkloadContextMenu)(BindableNode),
+ ),
+ ),
+ ),
+ );
+ default:
+ return undefined;
+ }
+};

frontend/packages/dev-console/src/components/topology/createConnector.ts

@@ -0,0 +1,21 @@
+import { Node } from '@patternfly/react-topology';
+import { createServiceBinding } from '@console/topology/src/operators/actions/serviceBindings';
+import { TYPE_BINDABLE_NODE } from './components/const';
+
+const createServiceBindingConnection = (source: Node, target: Node) => {
+ const sourceResource = source.getData().resource || source.getData().resources?.obj;
+ const targetResource = target.getData().resource || target.getData().resources?.obj;
+
+ return createServiceBinding(sourceResource, targetResource).then(() => null);
+};
+
+export const getCreateConnector = (createHints: string[], source: Node, target: Node) => {
+ if (
+ createHints &&
+ createHints.includes('createServiceBinding') &&
+ target.getType() === TYPE_BINDABLE_NODE
+ ) {
+ return createServiceBindingConnection;
+ }
+ return null;
+};

frontend/packages/dev-console/src/components/topology/dev-console-data-transformer.ts

@@ -0,0 +1,64 @@
+import { Model, NodeModel } from '@patternfly/react-topology';
+import { K8sResourceKind } from '@console/internal/module/k8s';
+import { OverviewItem } from '@console/shared/src';
+import { NODE_WIDTH, NODE_HEIGHT, NODE_PADDING } from '@console/topology/src/const';
+import { getTopologyNodeItem } from '@console/topology/src/data-transforms/transform-utils';
+import { TopologyDataObject, TopologyDataResources } from '@console/topology/src/topology-types';
+import { TYPE_BINDABLE_NODE } from './components/const';
+
+const BINDABLE_PROPS = {
+ width: NODE_WIDTH,
+ height: NODE_HEIGHT,
+ group: false,
+ visible: true,
+ style: {
+ padding: NODE_PADDING,
+ },
+};
+
+export const createOverviewItem = (obj: K8sResourceKind): OverviewItem<K8sResourceKind> => {
+ return {
+ isOperatorBackedService: true,
+ obj,
+ };
+};
+
+export const getTopologyBindableNode = (bindables: K8sResourceKind[]): NodeModel[] => {
+ const nodes = [];
+ for (const obj of bindables) {
+ const data: TopologyDataObject = {
+ id: obj.metadata.uid,
+ name: obj.metadata.name,
+ type: TYPE_BINDABLE_NODE,
+ resource: obj,
+ // resources is poorly named, should be overviewItem, eventually going away.
+ resources: createOverviewItem(obj),
+ data: {
+ resource: obj,
+ },
+ };
+ nodes.push(getTopologyNodeItem(obj, TYPE_BINDABLE_NODE, data, BINDABLE_PROPS));
+ }
+
+ return nodes;
+};
+
+export const getBindableDevConsoleTopologyDataModel = (
+ namespace: string,
+ resources: TopologyDataResources,
+ workloads: K8sResourceKind[],
+): Promise<Model> => {
+ if (!resources.bindables?.data) return Promise.resolve({ nodes: [], edges: [] });
+ const bindableDataModel = {
+ nodes: getTopologyBindableNode(resources.bindables.data),
+ edges: [],
+ };
+
+ if (bindableDataModel.nodes?.length) {
+ workloads.forEach(() => {
+ bindableDataModel.edges.push(...[]);
+ });
+ }
+
+ return Promise.resolve(bindableDataModel);
+};

frontend/packages/dev-console/src/components/topology/topology-plugin.ts

@@ -0,0 +1,7 @@
+import { getDevConsoleComponentFactory } from './components/devConsoleComponetFactory';
+import { getCreateConnector } from './createConnector';
+import { getBindableDevConsoleTopologyDataModel } from './dev-console-data-transformer';
+
+export const componentFactory = getDevConsoleComponentFactory;
+export const getDataModel = getBindableDevConsoleTopologyDataModel;
+export const createConnector = getCreateConnector;

frontend/packages/rhoas-plugin/src/topology/components/KafkaNode.tsx

@@ -12,11 +12,11 @@ import { connect } from 'react-redux';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { RootState } from '@console/internal/redux';
 import { calculateRadius } from '@console/shared';
+import { TrapezoidBaseNode } from '@console/topology/src/components/graph-view/components/nodes';
 import { getServiceBindingStatus } from '@console/topology/src/utils';
 import { kafkaIcon } from '../../const';
 import { KafkaConnectionModel } from '../../models';
 import { obsOrKafkaConnectionDropTargetSpec } from './rhoasComponentUtils';
-import TrapezoidBaseNode from './TrapezoidBaseNode';
 
 import './KafkaNode.scss';
 

frontend/packages/topology/src/components/graph-view/components/nodes/index.ts

@@ -2,3 +2,4 @@ export { default as BaseNode } from './BaseNode';
 export * from './WorkloadNode';
 export { default as PodSet } from './PodSet';
 export * from './decorators';
+export { default as TrapezoidBaseNode } from './trapezoidNode/TrapezoidBaseNode';

frontend/packages/rhoas-plugin/src/topology/components/TrapezoidBaseNode.scss → frontend/packages/topology/src/components/graph-view/components/nodes/trapezoidNode/TrapezoidBaseNode.scss

@@ -1,6 +1,6 @@
-@import '../../../../topology/src/components/topology-utils.scss';
+@import '../../../../topology-utils';
 
-.rhoas-trapezoid-base-node {
+.trapezoid-base-node {
  outline: none;
  cursor: pointer;
 
@@ -44,7 +44,7 @@
 
 .odc-m-drag-active,
 .odc-m-filter-active {
- .rhoas-trapezoid-base-node {
+ .trapezoid-base-node {
  opacity: $de-emphasize-opacity;
  &.is-dragging,
  &.is-highlight {
@@ -54,10 +54,9 @@
 }
 
 .odc-m-filter-active:not(.odc-m-drag-active) {
- .rhoas-trapezoid-base-node {
+ .trapezoid-base-node {
  &.is-filtered {
  opacity: 1;
  }
  }
 }
-

frontend/packages/rhoas-plugin/src/topology/components/TrapezoidBaseNode.tsx → frontend/packages/topology/src/components/graph-view/components/nodes/trapezoidNode/TrapezoidBaseNode.tsx

@@ -16,20 +16,16 @@ import {
 import * as classNames from 'classnames';
 import { useAccessReview } from '@console/internal/components/utils';
 import { modelFor, referenceFor } from '@console/internal/module/k8s';
-import {
- NodeShadows,
- NODE_SHADOW_FILTER_ID_HOVER,
- NODE_SHADOW_FILTER_ID,
-} from '@console/topology/src/components/graph-view';
-import SvgBoxedText from '@console/topology/src/components/svg/SvgBoxedText';
 import {
  getFilterById,
  useDisplayFilters,
  useSearchFilter,
  useAllowEdgeCreation,
  SHOW_LABELS_FILTER_ID,
-} from '@console/topology/src/filters';
-import { getTopologyResourceObject } from '@console/topology/src/utils/topology-utils';
+} from '../../../../../filters';
+import { getTopologyResourceObject } from '../../../../../utils/topology-utils';
+import SvgBoxedText from '../../../../svg/SvgBoxedText';
+import { NodeShadows, NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../../NodeShadows';
 
 import './TrapezoidBaseNode.scss';
 
@@ -118,7 +114,7 @@ const TrapezoidBaseNode: React.FC<TrapezoidBaseNodeProps> = ({
  position="top"
  >
  <g
- className={classNames('rhoas-trapezoid-base-node', className, {
+ className={classNames('trapezoid-base-node', className, {
  'is-hover': hover || contextMenuOpen,
  'is-highlight': canDrop,
  'is-dragging': dragging || edgeDragging,
@@ -142,7 +138,7 @@ const TrapezoidBaseNode: React.FC<TrapezoidBaseNodeProps> = ({
  ? 'circle-hover'
  : 'circle'
  }
- className="rhoas-trapezoid-base-node__bg"
+ className="trapezoid-base-node__bg"
  ref={pathRefs}
  cx={cx}
  cy={cy}
@@ -163,7 +159,7 @@ const TrapezoidBaseNode: React.FC<TrapezoidBaseNodeProps> = ({
  )}
  {showLabels && (kind || element.getLabel()) && (
  <SvgBoxedText
- className="rhoas-trapezoid-base-node__label"
+ className="trapezoid-base-node__label"
  x={cx}
  y={cy + outerRadius + 24}
  paddingX={8}