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/09/16 15:50:47 UTC

[camel-karavan] branch main updated (5c9464f5 -> 13b396cf)

This is an automated email from the ASF dual-hosted git repository.

marat pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


    from 5c9464f5 Open file from topology #893
     new d54ac7e4 Sync with space #893
     new 13b396cf Prepare to work in Openshift for #885

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../src/designer/route/DslConnections.tsx          |  16 ++--
 karavan-space/src/designer/route/DslElement.tsx    |   6 +-
 karavan-space/src/designer/route/DslProperties.tsx |   5 +-
 karavan-space/src/designer/utils/CamelUi.tsx       | 101 ++++++---------------
 karavan-space/src/designer/utils/KaravanIcons.tsx  |  15 ++-
 karavan-web/docker/Dockerfile.devmode              |   2 +-
 6 files changed, 58 insertions(+), 87 deletions(-)


[camel-karavan] 02/02: Prepare to work in Openshift for #885

Posted by ma...@apache.org.
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 13b396cfe118c71caa74bd20cf56c85e1f48a525
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Sat Sep 16 11:50:38 2023 -0400

    Prepare to work in Openshift for #885
---
 karavan-web/docker/Dockerfile.devmode | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/karavan-web/docker/Dockerfile.devmode b/karavan-web/docker/Dockerfile.devmode
index 71d78c91..0baa9a52 100644
--- a/karavan-web/docker/Dockerfile.devmode
+++ b/karavan-web/docker/Dockerfile.devmode
@@ -1,4 +1,4 @@
-FROM maven:3.9.3-eclipse-temurin-17-alpine
+FROM maven:3.9.3-eclipse-temurin-17
 
 LABEL "org.opencontainers.image.title"="karavan"
 LABEL "org.opencontainers.image.description"="Apache Camel Karavan DevMode"


[camel-karavan] 01/02: Sync with space #893

Posted by ma...@apache.org.
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 d54ac7e4b6e43bb89ae8abd9073ebfef73c46c8a
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Sat Sep 16 11:17:49 2023 -0400

    Sync with space #893
---
 .../src/designer/route/DslConnections.tsx          |  16 ++--
 karavan-space/src/designer/route/DslElement.tsx    |   6 +-
 karavan-space/src/designer/route/DslProperties.tsx |   5 +-
 karavan-space/src/designer/utils/CamelUi.tsx       | 101 ++++++---------------
 karavan-space/src/designer/utils/KaravanIcons.tsx  |  15 ++-
 5 files changed, 57 insertions(+), 86 deletions(-)

diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index c9d85ccb..44f23042 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -23,9 +23,9 @@ import {SagaDefinition} from "karavan-core/lib/model/CamelDefinition";
 import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../KaravanStore";
 import {shallow} from "zustand/shallow";
 import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
+import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils";
 
 const overlapGap: number = 40;
-const outgoingDefinitions: string[] = ['ToDefinition', 'KameletDefinition', 'ToDynamicDefinition', "PollEnrichDefinition", "EnrichDefinition", "WireTapDefinition", "SagaDefinition"];
 
 export function DslConnections() {
 
@@ -61,8 +61,8 @@ export function DslConnections() {
     function getIncomings() {
         let outs: [string, number][] = Array.from(steps.values())
             .filter(pos => ["FromDefinition"].includes(pos.step.dslName))
-            .filter(pos => !CamelUi.isElementInternalComponent(pos.step))
-            .filter(pos => !(pos.step.dslName === 'FromDefinition' && CamelUi.hasInternalUri(pos.step)))
+            .filter(pos => !TopologyUtils.isElementInternalComponent(pos.step))
+            .filter(pos => !(pos.step.dslName === 'FromDefinition' && TopologyUtils.hasInternalUri(pos.step)))
             .sort((pos1: DslPosition, pos2: DslPosition) => {
                 const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
                 const y2 = pos2.headerRect.y + pos2.headerRect.height / 2;
@@ -135,11 +135,12 @@ export function DslConnections() {
 
 
     function getOutgoings(): [string, number][] {
+        const outgoingDefinitions = TopologyUtils.getOutgoingDefinitions();
         let outs: [string, number][] = Array.from(steps.values())
             .filter(pos => outgoingDefinitions.includes(pos.step.dslName))
             .filter(pos => pos.step.dslName !== 'KameletDefinition' || (pos.step.dslName === 'KameletDefinition' && !CamelUi.isActionKamelet(pos.step)))
-            .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step) && !CamelUi.isElementInternalComponent(pos.step))
-            .filter(pos => !(outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step)))
+            .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step) && !TopologyUtils.isElementInternalComponent(pos.step))
+            .filter(pos => !(outgoingDefinitions.includes(pos.step.dslName) && TopologyUtils.hasInternalUri(pos.step)))
             .filter(pos => pos.step.dslName !== 'SagaDefinition')
             .sort((pos1: DslPosition, pos2: DslPosition) => {
                 const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
@@ -203,8 +204,9 @@ export function DslConnections() {
     }
 
     function getInternals(): [string, number, boolean][] {
+        const outgoingDefinitions = TopologyUtils.getOutgoingDefinitions();
         let outs: [string, number, boolean][] = Array.from(steps.values())
-            .filter(pos => outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step))
+            .filter(pos => outgoingDefinitions.includes(pos.step.dslName) && TopologyUtils.hasInternalUri(pos.step))
             .sort((pos1: DslPosition, pos2: DslPosition) => {
                 const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
                 const y2 = pos2.headerRect.y + pos2.headerRect.height / 2;
@@ -222,7 +224,7 @@ export function DslConnections() {
             const fromX = pos.headerRect.x + pos.headerRect.width / 2 - left;
             const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
             const r = pos.headerRect.height / 2;
-            const className = (CamelUi.hasDirectUri(pos.step) ? "path-direct" : "path-seda") + (data[2] ? "-selected" : "");
+            const className = (TopologyUtils.hasDirectUri(pos.step) ? "path-direct" : "path-seda") + (data[2] ? "-selected" : "");
             return getInternalLine(uri, key, className, fromX, fromY, r, data[1]);
         } else if (pos?.step.dslName === 'SagaDefinition'){
             const saga = (pos?.step as SagaDefinition);
diff --git a/karavan-space/src/designer/route/DslElement.tsx b/karavan-space/src/designer/route/DslElement.tsx
index 9aaf6735..489c675d 100644
--- a/karavan-space/src/designer/route/DslElement.tsx
+++ b/karavan-space/src/designer/route/DslElement.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, {CSSProperties, useEffect, useMemo, useRef, useState} from 'react';
+import React, {CSSProperties, useMemo, useState} from 'react';
 import {
     Button,
     Flex,
@@ -377,7 +377,7 @@ export function DslElement(props: Props) {
         if (hideAddButton) return (<></>)
         else return (
             <Tooltip position={"bottom"}
-                     content={<div>{"Add step to " + CamelUi.getTitle(step)}</div>}>
+                     content={<div>{"Add step to " + CamelDisplayUtil.getTitle(step)}</div>}>
                 <button type="button" aria-label="Add" onClick={e => onOpenSelector(e)}
                         className={isAddStepButtonLeft() ? "add-button add-button-left" : "add-button add-button-bottom"}>
                     <AddIcon/>
@@ -388,7 +388,7 @@ export function DslElement(props: Props) {
 
     function getAddElementButton() {
         return (
-            <Tooltip position={"bottom"} content={<div>{"Add DSL element to " + CamelUi.getTitle(props.step)}</div>}>
+            <Tooltip position={"bottom"} content={<div>{"Add DSL element to " + CamelDisplayUtil.getTitle(props.step)}</div>}>
                 <button
                     type="button"
                     aria-label="Add"
diff --git a/karavan-space/src/designer/route/DslProperties.tsx b/karavan-space/src/designer/route/DslProperties.tsx
index 337e12c0..69729121 100644
--- a/karavan-space/src/designer/route/DslProperties.tsx
+++ b/karavan-space/src/designer/route/DslProperties.tsx
@@ -33,6 +33,7 @@ import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
 import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
 import {shallow} from "zustand/shallow";
 import {usePropertiesHook} from "./usePropertiesHook";
+import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
 
 interface Props {
     isRouteDesigner: boolean
@@ -52,7 +53,7 @@ export function DslProperties(props: Props) {
     const [isDescriptionExpanded, setIsDescriptionExpanded] = useState<boolean>(false);
 
     function getRouteHeader(): JSX.Element {
-        const title = selectedStep && CamelUi.getTitle(selectedStep)
+        const title = selectedStep && CamelDisplayUtil.getTitle(selectedStep)
         const description = selectedStep && CamelUi.getDescription(selectedStep);
         const descriptionLines: string [] = description ? description?.split("\n") : [""];
         return (
@@ -73,7 +74,7 @@ export function DslProperties(props: Props) {
     }
 
     function getClonableElementHeader(): JSX.Element {
-        const title = selectedStep && CamelUi.getTitle(selectedStep);
+        const title = selectedStep && CamelDisplayUtil.getTitle(selectedStep);
         const description = selectedStep?.dslName ? CamelMetadataApi.getCamelModelMetadataByClassName(selectedStep?.dslName)?.description : title;
         const descriptionLines: string [] = description ? description?.split("\n") : [""];
         return (
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx
index c5d63801..6b3f7093 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -88,6 +88,9 @@ import {
     WorkflowIcon
 } from "./KaravanIcons";
 import React from "react";
+import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils";
+import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
+import {renderToStaticMarkup} from "react-dom/server";
 
 const StepElements: string[] = [
     "AggregateDefinition",
@@ -300,30 +303,6 @@ export class CamelUi {
         else return false;
     }
 
-    static hasInternalUri = (element: CamelElement): boolean => {
-        return this.hasDirectUri(element) || this.hasSedaUri(element);
-    }
-
-    static hasDirectUri = (element: CamelElement): boolean => {
-        return this.hasUriStartWith(element, 'direct');
-    }
-
-    static hasSedaUri = (element: CamelElement): boolean => {
-        return this.hasUriStartWith(element, 'seda');
-    }
-
-    static hasUriStartWith = (element: CamelElement, text: string): boolean => {
-        if ((element as any).uri && typeof (element as any).uri === 'string') {
-            return (element as any).uri.startsWith(text);
-        } else if (element.dslName === 'SagaDefinition') {
-            const completion = (element as SagaDefinition).completion || '';
-            const compensation = (element as SagaDefinition).compensation || '';
-            return completion.startsWith(text) || compensation.startsWith(text);
-        } else {
-            return false;
-        }
-    }
-
     static getInternalRouteUris = (integration: Integration, componentName: string, showComponentName: boolean = true): string[] => {
         const result: string[] = [];
         integration.spec.flows?.filter(f => f.dslName === 'RouteDefinition')
@@ -351,22 +330,6 @@ export class CamelUi {
         }
     }
 
-    static getTitle = (element: CamelElement): string => {
-        const k: KameletModel | undefined = CamelUtil.getKamelet(element);
-        if (k) {
-            return k.title();
-        } else if (element.dslName === 'RouteDefinition') {
-            const routeId = (element as RouteDefinition).id
-            return routeId ? routeId : CamelUtil.capitalizeName((element as any).stepName);
-        } else if ((element as any).uri && (['ToDefinition', 'FromDefinition'].includes(element.dslName))) {
-            const uri = (element as any).uri
-            return ComponentApi.getComponentTitleFromUri(uri) || '';
-        } else {
-            const title = CamelMetadataApi.getCamelModelMetadataByClassName(element.dslName);
-            return title ? title.title : CamelUtil.capitalizeName((element as any).stepName);
-        }
-    }
-
     static getDescription = (element: CamelElement): string => {
         const kamelet: KameletModel | undefined = CamelUtil.getKamelet(element);
         if (kamelet) {
@@ -376,7 +339,7 @@ export class CamelUi {
             return ComponentApi.getComponentDescriptionFromUri(uri) || '';
         } else {
             const description = CamelMetadataApi.getCamelModelMetadataByClassName(element.dslName)?.description;
-            return description ? description : CamelUi.getTitle(element);
+            return description ? description : CamelDisplayUtil.getTitle(element);
         }
     }
 
@@ -669,43 +632,17 @@ export class CamelUi {
         }
     }
 
-    static isElementInternalComponent = (element: CamelElement): boolean => {
-        const uri = (element as any).uri;
-        const component = ComponentApi.findByName(uri);
-        return component !== undefined && CamelUi.isComponentInternal(component.component.label);
-    }
-
-    static isComponentInternal = (label: string): boolean => {
-        const labels = label.split(",");
-        if (labels.includes('core') && (
-            labels.includes('transformation')
-            || labels.includes('testing')
-            || labels.includes('scheduling')
-            || labels.includes('monitoring')
-            || labels.includes('transformation')
-            || labels.includes('java')
-            || labels.includes('endpoint')
-            || labels.includes('script')
-            || labels.includes('validation')
-        )) {
-            return true;
-        } else if (label === 'transformation') {
-            return true;
-        }
-        return false;
-    }
-
     static getIconForElement = (element: CamelElement): JSX.Element => {
         const uri = (element as any).uri;
         const component = ComponentApi.findByName(uri);
         const k: KameletModel | undefined = CamelUtil.getKamelet(element);
         if (["FromDefinition", "KameletDefinition"].includes(element.dslName) && k !== undefined) {
             return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
-        } else if ("FromDefinition" === element.dslName && component !== undefined && CamelUi.isComponentInternal(component.component.label)) {
+        } else if ("FromDefinition" === element.dslName && component !== undefined && TopologyUtils.isComponentInternal(component.component.label)) {
             return this.getIconForComponent(component?.component.title, component?.component.label);
         } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
             return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
-        } else if (element.dslName === "ToDefinition" && component && CamelUi.isComponentInternal(component.component.label)) {
+        } else if (element.dslName === "ToDefinition" && component && TopologyUtils.isComponentInternal(component.component.label)) {
             return this.getIconForComponent(component?.component.title, component?.component.label);
         } else {
             return this.getIconForDslName(element.dslName);
@@ -761,15 +698,33 @@ export class CamelUi {
         const uri = (element as any).uri;
         const component = ComponentApi.findByName(uri);
         if (component) {
-            return CamelUi.getIconForComponent(component.component.title, component.component.label);
+            const reactElement = CamelUi.getIconForComponent(component.component.title, component.component.label);
+            const icon = 'data:image/svg+xml,' + encodeURI(renderToStaticMarkup((reactElement)))
+            return (
+                <svg className="icon">
+                    <image href={icon} className="icon"/>
+                </svg>
+            )
         } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
             const icon = k ? k.icon() : externalIcon;
-            return <img src={icon} className="icon"/>
+            return  (
+                <svg className="icon">
+                    <image href={icon} className="icon"/>
+                </svg>
+            )
         } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
             const icon = k ? k.icon() : CamelUi.getIconSrcForName(element.dslName);
-            return <img src={icon} className="icon"/>
+            return  (
+                <svg className="icon">
+                    <image href={icon} className="icon"/>
+                </svg>
+            )
         } else {
-            return <img src={externalIcon} className="icon"/>;
+            return  (
+                <svg className="icon">
+                    <image href={externalIcon} className="icon"/>
+                </svg>
+            )
         }
     }
 
diff --git a/karavan-space/src/designer/utils/KaravanIcons.tsx b/karavan-space/src/designer/utils/KaravanIcons.tsx
index 9e514046..677945f5 100644
--- a/karavan-space/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-space/src/designer/utils/KaravanIcons.tsx
@@ -292,8 +292,21 @@ export function getDesignerIcon(icon: string) {
             <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" className="cls-1" width="32"
                   height="32"/>
         </svg>)
+    if (icon === 'route') return (
+        <svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon">
+            <title>{"category"}</title>
+            <path d="M27 22.141V18a2 2 0 0 0-2-2h-8v-4h2a2.002 2.002 0 0 0 2-2V4a2.002 2.002 0 0 0-2-2h-6a2.002 2.002 0 0 0-2 2v6a2.002 2.002 0 0 0 2 2h2v4H7a2 2 0 0 0-2 2v4.142a4 4 0 1 0 2 0V18h8v4.142a4 4 0 1 0 2 0V18h8v4.141a4 4 0 1 0 2 0ZM13 4h6l.001 6H13ZM8 26a2 2 0 1 1-2-2 2.002 2.002 0 0 1 2 2Zm10 0a2 2 0 1 1-2-2 2.003 2.003 0 0 1 2 2Zm8 2a2 2 0 1 1 2-2 2.002 2.002 0 0 1-2 2Z" />
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+        </svg>
+    )
     if (icon === 'rest') return (
-        <svg className="top-icon" viewBox="0 0 32 32">
+        <svg className="top-icon" viewBox="0 0 32 32" width="32px" height="32px">
             <g className="layer">
                 <title>Layer 1</title>
                 <path