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 fff9cc6c Fix for #1315
fff9cc6c is described below
commit fff9cc6c84d65bac40f111fa88506863ac4e9246
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Jul 22 10:38:04 2024 -0400
Fix for #1315
---
docs/install/karavan-docker/docker-compose.yaml | 3 +-
.../webui/src/designer/route/DslConnections.tsx | 51 +++++++++++-----------
.../src/knowledgebase/components/ComponentCard.tsx | 25 ++++-------
karavan-designer/public/example/demo.camel.yaml | 16 +++++++
.../src/designer/route/DslConnections.tsx | 7 +--
.../src/designer/route/DslConnections.tsx | 7 +--
6 files changed, 60 insertions(+), 49 deletions(-)
diff --git a/docs/install/karavan-docker/docker-compose.yaml
b/docs/install/karavan-docker/docker-compose.yaml
index 3d754e36..4e5377bd 100644
--- a/docs/install/karavan-docker/docker-compose.yaml
+++ b/docs/install/karavan-docker/docker-compose.yaml
@@ -37,5 +37,4 @@ services:
networks:
karavan:
- name: karavan
- external: true
\ No newline at end of file
+ name: karavan
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index 596a7d0c..03a29129 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
@@ -149,14 +149,14 @@ export function DslConnections() {
const internalCall: boolean = step && uri && step?.dslName ===
'FromDefinition' && NAV_COMPONENTS.includes(uri);
const name: string = internalCall ? (step?.parameters?.name) :
undefined;
const routes = internalCall ? tons.get(uri + ':' + name) || [] :
[];
- // const localDirects = getToDirectSteps(name);
+ const isInternal = data[2] === 'internal';
const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
- return (
- <div key={pos.step.uuid + "-icon"}
+ return (!isInternal
+ ? <div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top:
imageY, left: imageX}}
>
{CamelUi.getConnectionIcon(pos.step)}
@@ -178,6 +178,7 @@ export function DslConnections() {
</Tooltip>
)}
</div>
+ : <></>
)
}
}
@@ -239,13 +240,13 @@ export function DslConnections() {
const isInternal = data[2] === 'internal';
const isNav = data[2] === 'nav';
return (!isInternal
- ? <g key={pos.step.uuid + "-outgoing"}>
- <circle cx={outgoingX} cy={outgoingY} r={r}
className="circle-outgoing"/>
- <path
- d={`M ${lineX1},${lineY1} C ${lineXi - 20},
${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L
${lineX2},${lineY2}`}
- className={isNav ? 'path-incoming-nav' :
'path-incoming'} markerEnd="url(#arrowhead)"/>
- </g>
- : <></>
+ ? <g key={pos.step.uuid + "-outgoing"}>
+ <circle cx={outgoingX} cy={outgoingY} r={r}
className="circle-outgoing"/>
+ <path
+ d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1}
${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+ className={isNav ? 'path-incoming-nav' :
'path-incoming'} markerEnd="url(#arrowhead)"/>
+ </g>
+ : <></>
)
}
}
@@ -265,21 +266,21 @@ export function DslConnections() {
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute",
top: imageY, left: imageX}}>
- {CamelUi.getConnectionIcon(pos.step)}
- {name !== undefined &&
- <Tooltip content={`Go to ${uri}:${name}`}
position={"left"}>
- <Button style={{position: 'absolute', right:
27, top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
- variant={'link'}
- aria-label="Goto"
- onClick={_ =>
InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
- {name}
- </Button>
- </Tooltip>
- }
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top:
imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ {name !== undefined &&
+ <Tooltip content={`Go to ${uri}:${name}`}
position={"left"}>
+ <Button style={{position: 'absolute', right: 27,
top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ =>
InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
+ {name}
+ </Button>
+ </Tooltip>
+ }
+ </div>
+ : <></>
)
}
}
diff --git
a/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
b/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
index c9f39d04..8794ef1e 100644
--- a/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex
} from '@patternfly/react-core';
@@ -23,7 +23,7 @@ import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
-import {ComponentApi} from 'karavan-core/lib/api/ComponentApi';
+import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
interface Props {
component: Component,
@@ -39,39 +39,32 @@ export function ComponentCard(props: Props) {
useEffect(() => {
setBlockedComponents(ComponentApi.getBlockedComponentNames());
}, []);
-
+
function click(event: React.MouseEvent) {
- const {target} = event;
+ const { target } = event;
if (!(target as
HTMLElement).parentElement?.className.includes("block-checkbox")) {
setComponent(component)
setModalOpen(true);
}
}
-
function selectComponent(event: React.FormEvent, checked: boolean) {
props.onChange(component.component.name, checked);
- setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
+ setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
}
-
const isBlockedComponent = blockedComponents ?
blockedComponents.findIndex(r => r === component.component.name) > -1 : false;
- const isRemote = component.component.remote;
+ const isRemote = component.component.remote;
return (
<Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => click(event)}
>
<CardHeader className="header-labels">
- <Flex style={{width: '100%'}} gap={{default: 'gapSm'}}
justifyContent={{default: 'justifyContentSpaceBetween'}}>
+ <Flex style={{width:'100%'}} gap={{default:'gapSm'}}
justifyContent={{default: 'justifyContentSpaceBetween'}}>
<Badge isRead className="support-level
labels">{component.component.supportLevel}</Badge>
<Badge isRead className="version
labels">{component.component.version}</Badge>
</Flex>
- {showBlockCheckbox &&
- <Checkbox id={component.component.name}
- className="block-checkbox labels"
- isChecked={!isBlockedComponent}
- onChange={(_, checked) => selectComponent(_,
checked)}
- />
- }
+ {showBlockCheckbox && <Checkbox id={component.component.name}
className="block-checkbox labels"
+ isChecked={!isBlockedComponent} onChange={(_,
checked) => selectComponent(_, checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconForComponent(component.component.title,
component.component.label)}
diff --git a/karavan-designer/public/example/demo.camel.yaml
b/karavan-designer/public/example/demo.camel.yaml
index 3ae9fd88..faebb06a 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -46,3 +46,19 @@
uri: direct
parameters:
name: hello-world-direct
+- route:
+ id: route-04a4
+ nodePrefixId: route-b6c
+ from:
+ id: from-6217
+ uri: timer
+- route:
+ id: route-3cf0
+ nodePrefixId: route-301
+ from:
+ id: from-770b
+ uri: guava-eventbus
+ steps:
+ - to:
+ id: to-d33f
+ uri: guava-eventbus
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx
b/karavan-designer/src/designer/route/DslConnections.tsx
index 2d08cb58..03a29129 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -149,14 +149,14 @@ export function DslConnections() {
const internalCall: boolean = step && uri && step?.dslName ===
'FromDefinition' && NAV_COMPONENTS.includes(uri);
const name: string = internalCall ? (step?.parameters?.name) :
undefined;
const routes = internalCall ? tons.get(uri + ':' + name) || [] :
[];
- // const localDirects = getToDirectSteps(name);
+ const isInternal = data[2] === 'internal';
const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
- return (
- <div key={pos.step.uuid + "-icon"}
+ return (!isInternal
+ ? <div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top:
imageY, left: imageX}}
>
{CamelUi.getConnectionIcon(pos.step)}
@@ -178,6 +178,7 @@ export function DslConnections() {
</Tooltip>
)}
</div>
+ : <></>
)
}
}
diff --git a/karavan-space/src/designer/route/DslConnections.tsx
b/karavan-space/src/designer/route/DslConnections.tsx
index 2d08cb58..03a29129 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -149,14 +149,14 @@ export function DslConnections() {
const internalCall: boolean = step && uri && step?.dslName ===
'FromDefinition' && NAV_COMPONENTS.includes(uri);
const name: string = internalCall ? (step?.parameters?.name) :
undefined;
const routes = internalCall ? tons.get(uri + ':' + name) || [] :
[];
- // const localDirects = getToDirectSteps(name);
+ const isInternal = data[2] === 'internal';
const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
- return (
- <div key={pos.step.uuid + "-icon"}
+ return (!isInternal
+ ? <div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top:
imageY, left: imageX}}
>
{CamelUi.getConnectionIcon(pos.step)}
@@ -178,6 +178,7 @@ export function DslConnections() {
</Tooltip>
)}
</div>
+ : <></>
)
}
}
