You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/10/21 01:42:39 UTC
[camel-karavan] 02/02: Topology creates edge between consumer-producer
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 6078a23c7a16ec2e01e2c1cf88dfd31e9495bd53
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Oct 20 21:42:29 2023 -0400
Topology creates edge between consumer-producer
---
.../src/main/webui/src/topology/CustomNode.tsx | 7 ++++-
.../src/main/webui/src/topology/TopologyApi.tsx | 31 ++++++++++++++++++----
.../src/main/webui/src/topology/TopologyTab.tsx | 1 -
3 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/topology/CustomNode.tsx b/karavan-web/karavan-app/src/main/webui/src/topology/CustomNode.tsx
index fb517ae9..d683d04f 100644
--- a/karavan-web/karavan-app/src/main/webui/src/topology/CustomNode.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/topology/CustomNode.tsx
@@ -43,11 +43,16 @@ function getIcon(data: any) {
const CustomNode: React.FC<any> = observer(({ element, ...rest }) => {
const data = element.getData();
+ const badge:string = data.badge?.substring(0,1).toUpperCase();
return (
<DefaultNode
+ badge={badge}
+ showStatusDecorator
className="common-node"
- element={element} {...rest}
+ scaleLabel={false}
+ element={element}
+ {...rest}
>
{getIcon(data)}
</DefaultNode>
diff --git a/karavan-web/karavan-app/src/main/webui/src/topology/TopologyApi.tsx b/karavan-web/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
index 44ff57a2..c60c197b 100644
--- a/karavan-web/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
@@ -38,9 +38,9 @@ import {
TopologyRestNode,
TopologyRouteNode
} from "karavan-core/lib/model/TopologyDefinition";
-import CustomGroup from "./CustomGroup";
import CustomEdge from "./CustomEdge";
import {IntegrationFile} from "./TopologyStore";
+import CustomGroup from "./CustomGroup";
const NODE_DIAMETER = 60;
@@ -62,7 +62,7 @@ export function getIncomingNodes(tins: TopologyIncomingNode[]): NodeModel[] {
status: NodeStatus.default,
data: {
isAlternate: false,
- badge: tin.type,
+ badge: tin.connectorType,
icon: 'element',
type: 'step',
step: tin.from,
@@ -110,7 +110,7 @@ export function getOutgoingNodes(tons: TopologyOutgoingNode[]): NodeModel[] {
icon: 'element',
type: 'step',
step: tin.step,
- badge: tin.type,
+ badge: tin.connectorType,
fileName: tin.fileName
}
}
@@ -146,6 +146,26 @@ export function getOutgoingEdges(tons: TopologyOutgoingNode[]): EdgeModel[] {
});
}
+export function getExternalEdges(tons: TopologyOutgoingNode[], tins: TopologyIncomingNode[]): EdgeModel[] {
+ const result: EdgeModel[]= [];
+ tons.filter(ton => ton.type === 'external').forEach((ton, index) => {
+ const uniqueUri = ton.uniqueUri;
+ if (uniqueUri) {
+ const target = TopologyUtils.getNodeIdByUniqueUri(tins, uniqueUri);
+ const node: EdgeModel = {
+ id: 'external-' + ton.id + '-' + index,
+ type: 'edge',
+ source: ton.id,
+ target: target,
+ edgeStyle: EdgeStyle.dotted,
+ animationSpeed: EdgeAnimationSpeed.slow
+ }
+ if (target) result.push(node);
+ }
+ });
+ return result;
+}
+
export function getRestNodes(tins: TopologyRestNode[]): NodeModel[] {
return tins.map(tin => {
return {
@@ -217,8 +237,8 @@ export function getModel(files: IntegrationFile[]): Model {
const nodes: NodeModel[] = [];
const groups: NodeModel[] = troutes.map(r => {
const children = [r.id]
- children.push(... tins.filter(i => i.routeId === r.routeId && i.type === 'external').map(i => i.id));
- children.push(... tons.filter(i => i.routeId === r.routeId && i.type === 'external').map(i => i.id));
+ children.push(...tins.filter(i => i.routeId === r.routeId && i.type === 'external').map(i => i.id));
+ children.push(...tons.filter(i => i.routeId === r.routeId && i.type === 'external').map(i => i.id));
return {
id: 'group-' + r.routeId,
children: children,
@@ -242,6 +262,7 @@ export function getModel(files: IntegrationFile[]): Model {
edges.push(...getOutgoingEdges(tons));
edges.push(...getRestEdges(trestns, tins));
edges.push(...getInternalEdges(tons, tins));
+ edges.push(...getExternalEdges(tons,tins));
return {nodes: nodes, edges: edges, graph: {id: 'g1', type: 'graph', layout: 'Dagre'}};
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/topology/TopologyTab.tsx b/karavan-web/karavan-app/src/main/webui/src/topology/TopologyTab.tsx
index 306ca8fb..520bf8d2 100644
--- a/karavan-web/karavan-app/src/main/webui/src/topology/TopologyTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/topology/TopologyTab.tsx
@@ -68,7 +68,6 @@ export function TopologyTab (props: Props) {
}
const controller = React.useMemo(() => {
- console.log(props.files)
const model = getModel(props.files);
const newController = new Visualization();
newController.registerLayoutFactory((_, graph) => new DagreLayout(graph));