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 2024/04/22 13:16:54 UTC
(camel-karavan) 02/02: Sync with designer
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 9add61f4bf021f91a2efddc5e6a9157b4d7216f0
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Apr 22 09:16:38 2024 -0400
Sync with designer
---
karavan-space/src/designer/KaravanDesigner.tsx | 11 ++-
karavan-space/src/designer/editor/CodeEditor.tsx | 4 +-
.../src/designer/property/DslProperties.tsx | 2 +-
.../src/designer/route/DslConnections.tsx | 92 +++++++++++-----------
karavan-space/src/topology/TopologyTab.tsx | 2 +
karavan-space/src/topology/TopologyToolbar.tsx | 16 +++-
6 files changed, 74 insertions(+), 53 deletions(-)
diff --git a/karavan-space/src/designer/KaravanDesigner.tsx b/karavan-space/src/designer/KaravanDesigner.tsx
index ff76fa19..ea97a7e1 100644
--- a/karavan-space/src/designer/KaravanDesigner.tsx
+++ b/karavan-space/src/designer/KaravanDesigner.tsx
@@ -54,7 +54,7 @@ interface Props {
yaml: string
dark: boolean
showCodeTab: boolean
- tab?: "routes" | "rest" | "beans"
+ tab?: "routes" | "rest" | "beans" | "kamelet"
propertyPlaceholders: string[]
beans: RegistryBeanDefinition[]
files: IntegrationFile[]
@@ -128,8 +128,13 @@ export function KaravanDesigner(props: Props) {
}
function getCode(integration: Integration): string {
- const clone = CamelUtil.cloneIntegration(integration);
- return CamelDefinitionYaml.integrationToYaml(clone);
+ try {
+ const clone = CamelUtil.cloneIntegration(integration);
+ return CamelDefinitionYaml.integrationToYaml(clone);
+ } catch (e) {
+ EventBus.sendAlert('Error parsing Yaml', (e as Error).message, 'danger');
+ return '';
+ }
}
function getTab(title: string, tooltip: string, icon: string, showBadge: boolean = false) {
diff --git a/karavan-space/src/designer/editor/CodeEditor.tsx b/karavan-space/src/designer/editor/CodeEditor.tsx
index d833148e..4bb4e3c5 100644
--- a/karavan-space/src/designer/editor/CodeEditor.tsx
+++ b/karavan-space/src/designer/editor/CodeEditor.tsx
@@ -20,6 +20,7 @@ import Editor from "@monaco-editor/react";
import {shallow} from "zustand/shallow";
import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
+import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
export function CodeEditor () {
@@ -29,7 +30,8 @@ export function CodeEditor () {
useEffect(() => {
try {
- const c = CamelDefinitionYaml.integrationToYaml(integration);
+ const clone = CamelUtil.cloneIntegration(integration);
+ const c = CamelDefinitionYaml.integrationToYaml(clone);
setCode(c);
} catch (e: any) {
const message: string = e?.message ? e.message : e.reason;
diff --git a/karavan-space/src/designer/property/DslProperties.tsx b/karavan-space/src/designer/property/DslProperties.tsx
index 7448351c..a8ce0076 100644
--- a/karavan-space/src/designer/property/DslProperties.tsx
+++ b/karavan-space/src/designer/property/DslProperties.tsx
@@ -62,7 +62,7 @@ export function DslProperties(props: Props) {
const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
- function getClonableElementHeader(): JSX.Element {
+ function getClonableElementHeader(): React.JSX.Element {
const title = selectedStep && CamelDisplayUtil.getTitle(selectedStep);
const description = selectedStep?.dslName ? CamelMetadataApi.getCamelModelMetadataByClassName(selectedStep?.dslName)?.description : title;
const descriptionLines: string [] = description ? description?.split("\n") : [""];
diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index a711780b..0b5dead4 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -47,7 +47,7 @@ export function DslConnections() {
setTons(prevState => {
const data = new Map<string, string[]>();
TopologyUtils.findTopologyOutgoingNodes(integrations).forEach(t => {
- const key = (t.step as any)?.uri + ':' + (t.step as any)?.parameters.name;
+ const key = (t.step as any)?.uri + ':' + (t.step as any)?.parameters?.name;
if (data.has(key)) {
const list = data.get(key) || [];
list.push(t.routeId);
@@ -253,7 +253,7 @@ export function DslConnections() {
{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'}
+ variant={'link'}
aria-label="Goto"
onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
{name}
@@ -306,7 +306,7 @@ export function DslConnections() {
function getArrow(pos: DslPosition): JSX.Element[] {
const list: JSX.Element[] = [];
- if (pos.parent && pos.parent.dslName === 'TryDefinition' && pos.position === 0) {
+ if (pos.parent && pos.parent.dslName === 'TryDefinition' && pos.position === 0) {
const parent = steps.get(pos.parent.uuid);
list.push(...addArrowToList(list, parent, pos, true, false))
} else if (pos.parent && ['RouteConfigurationDefinition', 'MulticastDefinition'].includes(pos.parent.dslName)) {
@@ -320,7 +320,7 @@ export function DslConnections() {
const parent = steps.get(pos.parent.uuid);
list.push(...addArrowToList(list, parent, pos, true, false))
} else if (pos.parent && ['WhenDefinition', 'OtherwiseDefinition', 'CatchDefinition', 'FinallyDefinition', 'TryDefinition'].includes(pos.parent.dslName)) {
- if (pos.position === 0) {
+ if (pos.position === 0) {
const parent = steps.get(pos.parent.uuid);
list.push(...addArrowToList(list, parent, pos, true, false))
}
@@ -395,45 +395,45 @@ export function DslConnections() {
}
function getComplexArrow(key: string, rect1: DOMRect, rect2: DOMRect, toHeader: boolean) {
- const startX = rect1.x + rect1.width / 2 - left;
- const startY = rect1.y + rect1.height - top - 2;
- const endX = rect2.x + rect2.width / 2 - left;
- const endTempY = rect2.y - top - 9;
-
- const gapX = Math.abs(endX - startX);
- const gapY = Math.abs(endTempY - startY);
-
- const radX = gapX > 30 ? 20 : gapX/2;
- const radY = gapY > 30 ? 20 : gapY/2;
- const endY = rect2.y - top - radY - (toHeader ? 9 : 6);
-
- const iRadX = startX > endX ? -1 * radX : radX;
- const iRadY = startY > endY ? -1 * radY : radY;
-
- const LX1 = startX;
- const LY1 = endY - radY;
-
- const Q1_X1 = startX;
- const Q1_Y1 = LY1 + radY;
- const Q1_X2 = startX + iRadX;
- const Q1_Y2 = LY1 + radY;
-
- const LX2 = startX + (endX - startX) - iRadX;
- const LY2 = LY1 + radY;
-
- const Q2_X1 = LX2 + iRadX;
- const Q2_Y1 = endY;
- const Q2_X2 = LX2 + iRadX;
- const Q2_Y2 = endY + radY;
-
- const path = `M ${startX} ${startY}`
- + ` L ${LX1} ${LY1} `
- + ` Q ${Q1_X1} ${Q1_Y1} ${Q1_X2} ${Q1_Y2}`
- + ` L ${LX2} ${LY2}`
- + ` Q ${Q2_X1} ${Q2_Y1} ${Q2_X2} ${Q2_Y2}`
- return (
- <path key={uuidv4()} name={key} d={path} className="path" markerEnd="url(#arrowhead)"/>
- )
+ const startX = rect1.x + rect1.width / 2 - left;
+ const startY = rect1.y + rect1.height - top - 2;
+ const endX = rect2.x + rect2.width / 2 - left;
+ const endTempY = rect2.y - top - 9;
+
+ const gapX = Math.abs(endX - startX);
+ const gapY = Math.abs(endTempY - startY);
+
+ const radX = gapX > 30 ? 20 : gapX/2;
+ const radY = gapY > 30 ? 20 : gapY/2;
+ const endY = rect2.y - top - radY - (toHeader ? 9 : 6);
+
+ const iRadX = startX > endX ? -1 * radX : radX;
+ const iRadY = startY > endY ? -1 * radY : radY;
+
+ const LX1 = startX;
+ const LY1 = endY - radY;
+
+ const Q1_X1 = startX;
+ const Q1_Y1 = LY1 + radY;
+ const Q1_X2 = startX + iRadX;
+ const Q1_Y2 = LY1 + radY;
+
+ const LX2 = startX + (endX - startX) - iRadX;
+ const LY2 = LY1 + radY;
+
+ const Q2_X1 = LX2 + iRadX;
+ const Q2_Y1 = endY;
+ const Q2_X2 = LX2 + iRadX;
+ const Q2_Y2 = endY + radY;
+
+ const path = `M ${startX} ${startY}`
+ + ` L ${LX1} ${LY1} `
+ + ` Q ${Q1_X1} ${Q1_Y1} ${Q1_X2} ${Q1_Y2}`
+ + ` L ${LX2} ${LY2}`
+ + ` Q ${Q2_X1} ${Q2_Y1} ${Q2_X2} ${Q2_Y2}`
+ return (
+ <path key={uuidv4()} name={key} d={path} className="path" markerEnd="url(#arrowhead)"/>
+ )
}
function getSvg() {
@@ -442,8 +442,8 @@ export function DslConnections() {
const uniqueArrows = [...new Map(arrows.map(item => [(item as any).key, item])).values()]
return (
<svg key={svgKey}
- style={{width: width, height: height, position: "absolute", left: 0, top: 0}}
- viewBox={"0 0 " + (width) + " " + (height)}>
+ style={{width: width, height: height, position: "absolute", left: 0, top: 0}}
+ viewBox={"0 0 " + (width) + " " + (height)}>
<defs>
<marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow">
<polygon points="0 0, 9 3, 0 6"/>
@@ -464,4 +464,4 @@ export function DslConnections() {
{getOutgoings().map(p => getOutgoingIcons(p))}
</div>
)
-}
+}
\ No newline at end of file
diff --git a/karavan-space/src/topology/TopologyTab.tsx b/karavan-space/src/topology/TopologyTab.tsx
index 694eeb64..e9587444 100644
--- a/karavan-space/src/topology/TopologyTab.tsx
+++ b/karavan-space/src/topology/TopologyTab.tsx
@@ -43,6 +43,7 @@ interface Props {
hideToolbar: boolean
onClickAddRoute: () => void
onClickAddREST: () => void
+ onClickAddKamelet: () => void
onClickAddBean: () => void
}
@@ -144,6 +145,7 @@ export function TopologyTab(props: Props) {
contextToolbar={!props.hideToolbar
? <TopologyToolbar onClickAddRoute={props.onClickAddRoute}
onClickAddBean={props.onClickAddBean}
+ onClickAddKamelet={props.onClickAddKamelet}
onClickAddREST={props.onClickAddREST}/>
: undefined}
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
diff --git a/karavan-space/src/topology/TopologyToolbar.tsx b/karavan-space/src/topology/TopologyToolbar.tsx
index 667cf8f5..5dbe4949 100644
--- a/karavan-space/src/topology/TopologyToolbar.tsx
+++ b/karavan-space/src/topology/TopologyToolbar.tsx
@@ -25,6 +25,7 @@ import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
interface Props {
onClickAddRoute: () => void
onClickAddREST: () => void
+ onClickAddKamelet: () => void
onClickAddBean: () => void
}
@@ -46,7 +47,7 @@ export function TopologyToolbar (props: Props) {
<ToolbarItem align={{default:"alignRight"}}>
<Tooltip content={"Add REST API"} position={"bottom"}>
<Button className="dev-action-button" size="sm"
- variant={"primary"}
+ variant={"secondary"}
icon={<PlusIcon/>}
onClick={e => props.onClickAddREST()}
>
@@ -54,10 +55,21 @@ export function TopologyToolbar (props: Props) {
</Button>
</Tooltip>
</ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Kamelet"} position={"bottom"}>
+ <Button className="dev-action-button" size="sm"
+ variant={"secondary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddKamelet()}
+ >
+ Kamelet
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
<ToolbarItem align={{default:"alignRight"}}>
<Tooltip content={"Add Bean"} position={"bottom"}>
<Button className="dev-action-button" size="sm"
- variant={"primary"}
+ variant={"secondary"}
icon={<PlusIcon/>}
onClick={e => props.onClickAddBean()}
>