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
The following commit(s) were added to refs/heads/main by this push:
new 279db1ee Fix #1337
279db1ee is described below
commit 279db1eefe5414442329aa3c99f7ae360ee462f0
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Jul 11 11:34:08 2024 -0400
Fix #1337
---
.../src/main/webui/src/topology/CustomNode.tsx | 22 ++++-
.../src/main/webui/src/topology/topology.css | 10 +++
karavan-designer/public/example/demo.camel.yaml | 95 ++++++----------------
karavan-designer/src/topology/CustomNode.tsx | 22 ++++-
karavan-designer/src/topology/TopologyApi.tsx | 2 +-
karavan-designer/src/topology/topology.css | 10 +++
karavan-space/src/topology/CustomNode.tsx | 22 ++++-
karavan-space/src/topology/topology.css | 10 +++
8 files changed, 115 insertions(+), 78 deletions(-)
diff --git a/karavan-app/src/main/webui/src/topology/CustomNode.tsx
b/karavan-app/src/main/webui/src/topology/CustomNode.tsx
index 44f6e068..e0a022d0 100644
--- a/karavan-app/src/main/webui/src/topology/CustomNode.tsx
+++ b/karavan-app/src/main/webui/src/topology/CustomNode.tsx
@@ -40,12 +40,27 @@ function getIcon(data: any) {
return <RegionsIcon/>;
}
-const CustomNode: React.FC<any> = observer(({ element, ...rest }) => {
+function getAttachments(data: any) {
+ if (data?.step?.dslName === 'RouteDefinition' && data?.step?.autoStartup
!== false) {
+ const x = 0;
+ const y = 0;
+ const rx = x + 9;
+ const ry = y + 9;
+ return (
+ <g className="pf-topology__node__label__badge auto-start"
transform="translate(-4, -4)">
+ <rect className="badge" x={x} width="22" y={y} height="17"
rx={rx} ry={ry}></rect>
+ <text className='text' x={rx + 2} y={ry} textAnchor="middle"
dy="0.35em">A</text>
+ </g>
+ )
+ } else <></>
+}
+
+const CustomNode: React.FC<any> = observer(({element, ...rest}) => {
const data = element.getData();
- const badge:string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0,1).toUpperCase();
+ const badge: string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0, 1).toUpperCase();
if (element.getLabel()?.length > 30) {
- element.setLabel(element.getLabel()?.substring(0,30) + '...');
+ element.setLabel(element.getLabel()?.substring(0, 30) + '...');
}
return (
@@ -55,6 +70,7 @@ const CustomNode: React.FC<any> = observer(({ element,
...rest }) => {
className="common-node"
scaleLabel={false}
element={element}
+ attachments={getAttachments(data)}
{...rest}
>
{getIcon(data)}
diff --git a/karavan-app/src/main/webui/src/topology/topology.css
b/karavan-app/src/main/webui/src/topology/topology.css
index 0521a9a9..1828bd1e 100644
--- a/karavan-app/src/main/webui/src/topology/topology.css
+++ b/karavan-app/src/main/webui/src/topology/topology.css
@@ -105,4 +105,14 @@
.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
opacity: 0.5;
+}
+
+.karavan .topology-panel .auto-start .badge {
+ fill: var(--pf-topology__node__label__background--Fill);
+ stroke-width: var(--pf-topology__node__label__background--StrokeWidth);
+ stroke: var(--pf-topology__node__label__background--Stroke);
+}
+
+.karavan .topology-panel .auto-start .text {
+ fill: var(--pf-topology__node__label__text--Fill);
}
\ No newline at end of file
diff --git a/karavan-designer/public/example/demo.camel.yaml
b/karavan-designer/public/example/demo.camel.yaml
index c41432b0..f4456979 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -1,76 +1,35 @@
- route:
- id: route-654e
- description: Error Handler
- nodePrefixId: route-a06
+ id: route-b0b7
+ nodePrefixId: route-dfc
from:
- id: from-6dd1
- description: DLQ
- uri: direct
- parameters:
- name: dlq
- steps:
- - log:
- id: log-bf00
- message: "ERROR: ${exception}"
-- route:
- id: route-c11a
- description: From
- nodePrefixId: route-ae1
- autoStartup: true
- from:
- id: from-b6f1
- description: Command received
- uri: kamelet:kafka-not-secured-source
+ id: from-70b1
+ uri: kamelet:timer-source
parameters:
- topic: wh_commands
- bootstrapServers: kafka:9092
- autoCommitEnable: true
- consumerGroup: lightstep
+ message: Hello
+ period: 1
steps:
- - setVariable:
- id: setVariable-61a9
- description: Set command
- name: command
- expression:
- simple:
- id: simple-965d
- expression: ${body}
- - setBody:
- id: setBody-0515
- description: Prepare message
- expression:
- groovy:
- id: groovy-bb4f
- expression: >-
-
- - log:
- id: log-7190
- description: Log message
- message: "Message: ${body}"
+ - aggregate:
+ id: aggregate-46cb
+ completionSize: 1
+ - to:
+ id: to-df39
+ uri: amqp
+ - aggregate:
+ id: aggregate-1193
+ completionSize: 121212
+ completionTimeout: "{{bean:beanName.method}}"
- to:
- id: to-bb55
- description: Call
- uri: netty
- parameters:
- protocol: tcp
+ id: to-1600
+ uri: kamelet:kafka-sink
+- rest:
+ id: rest-d262
+ get:
+ - id: get-7de4
+ to: direct:test
- route:
- id: route-42e3
- description: Events from box
- nodePrefixId: route-de0
- autoStartup: false
+ id: test
from:
- id: from-5b8a
- description: Event received
- uri: netty
+ id: from-aeed
+ uri: direct
parameters:
- protocol: tcp
-
- steps:
- - log:
- id: log-63db
- message: ${body}
-- routeConfiguration:
- errorHandler:
- deadLetterChannel:
- id: deadLetterChannel-3bf9
- deadLetterUri: direct:dlq
+ name: test
diff --git a/karavan-designer/src/topology/CustomNode.tsx
b/karavan-designer/src/topology/CustomNode.tsx
index 44f6e068..e0a022d0 100644
--- a/karavan-designer/src/topology/CustomNode.tsx
+++ b/karavan-designer/src/topology/CustomNode.tsx
@@ -40,12 +40,27 @@ function getIcon(data: any) {
return <RegionsIcon/>;
}
-const CustomNode: React.FC<any> = observer(({ element, ...rest }) => {
+function getAttachments(data: any) {
+ if (data?.step?.dslName === 'RouteDefinition' && data?.step?.autoStartup
!== false) {
+ const x = 0;
+ const y = 0;
+ const rx = x + 9;
+ const ry = y + 9;
+ return (
+ <g className="pf-topology__node__label__badge auto-start"
transform="translate(-4, -4)">
+ <rect className="badge" x={x} width="22" y={y} height="17"
rx={rx} ry={ry}></rect>
+ <text className='text' x={rx + 2} y={ry} textAnchor="middle"
dy="0.35em">A</text>
+ </g>
+ )
+ } else <></>
+}
+
+const CustomNode: React.FC<any> = observer(({element, ...rest}) => {
const data = element.getData();
- const badge:string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0,1).toUpperCase();
+ const badge: string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0, 1).toUpperCase();
if (element.getLabel()?.length > 30) {
- element.setLabel(element.getLabel()?.substring(0,30) + '...');
+ element.setLabel(element.getLabel()?.substring(0, 30) + '...');
}
return (
@@ -55,6 +70,7 @@ const CustomNode: React.FC<any> = observer(({ element,
...rest }) => {
className="common-node"
scaleLabel={false}
element={element}
+ attachments={getAttachments(data)}
{...rest}
>
{getIcon(data)}
diff --git a/karavan-designer/src/topology/TopologyApi.tsx
b/karavan-designer/src/topology/TopologyApi.tsx
index b297b186..174ad6a6 100644
--- a/karavan-designer/src/topology/TopologyApi.tsx
+++ b/karavan-designer/src/topology/TopologyApi.tsx
@@ -82,13 +82,13 @@ export function getRoutes(tins: TopologyRouteNode[]):
NodeModel[] {
width: NODE_DIAMETER,
height: NODE_DIAMETER,
shape: NodeShape.rect,
+ status: NodeStatus.default,
data: {
isAlternate: false,
type: 'route',
icon: 'route',
step: tin.route,
routeId: tin.routeId,
- autoStartup: tin.route.autoStartup !== false,
fileName: tin.fileName,
}
}
diff --git a/karavan-designer/src/topology/topology.css
b/karavan-designer/src/topology/topology.css
index 0521a9a9..1828bd1e 100644
--- a/karavan-designer/src/topology/topology.css
+++ b/karavan-designer/src/topology/topology.css
@@ -105,4 +105,14 @@
.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
opacity: 0.5;
+}
+
+.karavan .topology-panel .auto-start .badge {
+ fill: var(--pf-topology__node__label__background--Fill);
+ stroke-width: var(--pf-topology__node__label__background--StrokeWidth);
+ stroke: var(--pf-topology__node__label__background--Stroke);
+}
+
+.karavan .topology-panel .auto-start .text {
+ fill: var(--pf-topology__node__label__text--Fill);
}
\ No newline at end of file
diff --git a/karavan-space/src/topology/CustomNode.tsx
b/karavan-space/src/topology/CustomNode.tsx
index 44f6e068..e0a022d0 100644
--- a/karavan-space/src/topology/CustomNode.tsx
+++ b/karavan-space/src/topology/CustomNode.tsx
@@ -40,12 +40,27 @@ function getIcon(data: any) {
return <RegionsIcon/>;
}
-const CustomNode: React.FC<any> = observer(({ element, ...rest }) => {
+function getAttachments(data: any) {
+ if (data?.step?.dslName === 'RouteDefinition' && data?.step?.autoStartup
!== false) {
+ const x = 0;
+ const y = 0;
+ const rx = x + 9;
+ const ry = y + 9;
+ return (
+ <g className="pf-topology__node__label__badge auto-start"
transform="translate(-4, -4)">
+ <rect className="badge" x={x} width="22" y={y} height="17"
rx={rx} ry={ry}></rect>
+ <text className='text' x={rx + 2} y={ry} textAnchor="middle"
dy="0.35em">A</text>
+ </g>
+ )
+ } else <></>
+}
+
+const CustomNode: React.FC<any> = observer(({element, ...rest}) => {
const data = element.getData();
- const badge:string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0,1).toUpperCase();
+ const badge: string = data.badge === 'REST' ? data.badge :
data.badge?.substring(0, 1).toUpperCase();
if (element.getLabel()?.length > 30) {
- element.setLabel(element.getLabel()?.substring(0,30) + '...');
+ element.setLabel(element.getLabel()?.substring(0, 30) + '...');
}
return (
@@ -55,6 +70,7 @@ const CustomNode: React.FC<any> = observer(({ element,
...rest }) => {
className="common-node"
scaleLabel={false}
element={element}
+ attachments={getAttachments(data)}
{...rest}
>
{getIcon(data)}
diff --git a/karavan-space/src/topology/topology.css
b/karavan-space/src/topology/topology.css
index 0521a9a9..1828bd1e 100644
--- a/karavan-space/src/topology/topology.css
+++ b/karavan-space/src/topology/topology.css
@@ -105,4 +105,14 @@
.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
opacity: 0.5;
+}
+
+.karavan .topology-panel .auto-start .badge {
+ fill: var(--pf-topology__node__label__background--Fill);
+ stroke-width: var(--pf-topology__node__label__background--StrokeWidth);
+ stroke: var(--pf-topology__node__label__background--Stroke);
+}
+
+.karavan .topology-panel .auto-start .text {
+ fill: var(--pf-topology__node__label__text--Fill);
}
\ No newline at end of file
