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 <[email protected]> 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()} >
