Limit for element tootlip

apache · Mar 5, 2024 · f46c7e9 · f46c7e9
1 parent 3fce1c3
commit f46c7e9
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 160 deletions.
diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx
@@ -28,6 +28,7 @@ import {shallow} from "zustand/shallow";
 import {useRouteDesignerHook} from "../useRouteDesignerHook";
 import {AddElementIcon, DeleteElementIcon, InsertElementIcon} from "../../utils/ElementIcons";
 import { RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {ReactComponent} from "*.svg";
 
 interface Props {
     headerRef: React.RefObject<HTMLDivElement>
@@ -214,19 +215,28 @@ export function DslElementHeader(props: Props) {
         )
     }
 
-    function getHeaderWithTooltip(tooltip: string | undefined) {
+    function getHeaderWithTooltip(tooltip: string | React.JSX.Element | undefined) {
         return (
             <>
                 {getHeader()}
-                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div>{tooltip}</div>}/>
+                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div style={{textAlign: 'left'}}>{tooltip}</div>}/>
             </>
 
         )
     }
 
-    function getHeaderTooltip(): string | undefined {
-        if (CamelUi.isShowExpressionTooltip(props.step)) return CamelUi.getExpressionTooltip(props.step);
-        if (CamelUi.isShowUriTooltip(props.step)) return CamelUi.getUriTooltip(props.step);
+    function getHeaderTooltip(): string | React.JSX.Element | undefined {
+        if (CamelUi.isShowExpressionTooltip(props.step)) {
+            const et =  CamelUi.getExpressionTooltip(props.step);
+            const exp = et[1];
+            return (
+                <div>
+                    <div>{et[0]}:</div>
+                    <div>{exp.length > 50 ? (exp.substring(0, 50) + ' ...') : exp}</div>
+                </div>
+            )
+        }
+        if (CamelUi.isShowUriTooltip(props.step)) return  CamelUi.getUriTooltip(props.step);
         return undefined;
     }
 

diff --git a/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx b/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
@@ -402,11 +402,11 @@ export class CamelUi {
         return false;
     }
 
-    static getExpressionTooltip = (element: CamelElement): string => {
+    static getExpressionTooltip = (element: CamelElement): [string, string] => {
         const e = (element as any).expression;
         const language = CamelDefinitionApiExt.getExpressionLanguageName(e) || '';
         const value = CamelDefinitionApiExt.getExpressionValue(e) || '';
-        return language.concat(": ", (value as any)?.expression);
+        return [language, (value as any)?.expression];
     }
 
     static getUriTooltip = (element: CamelElement): string => {

diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml
@@ -1,139 +1,63 @@
-- rest:
-    id: rest-aca4
-    get:
-      - id: get-910c
-    post:
-      - id: post-3ab3
-
-#      steps:
-#        - marshal:
-#            id: marshal-b68c
-#        - filter:
-#            expression:
-#              simple:
-#                id: simple-1465
-#            id: filter-b351
-#        - choice:
-#            when:
-#              - expression:
-#                  simple:
-#                    id: simple-99bf
-#                id: when-ab5e
-#                steps:
-#                  - to:
-#                      uri: arangodb
-#                      id: to-f70a
-#                  - removeProperties:
-#                      id: removeProperties-344a
-#              - expression:
-#                  simple:
-#                    id: simple-d199
-#                id: when-37cd
-#                steps:
-#                  - to:
-#                      uri: amqp
-#                      id: to-fbfe
-#                  - choice:
-#                      when:
-#                        - expression:
-#                            simple:
-#                              id: simple-e78b
-#                          id: when-b7d0
-#                      otherwise:
-#                        id: otherwise-40d0
-#                      id: choice-8f6b
-#            otherwise:
-#              id: otherwise-382c
-#              steps:
-#                - log:
-#                    message: ${body}
-#                    id: log-6831
-#            id: choice-c1db
-#        - saga:
-#            id: saga-8f2c
-#            steps:
-#              - to:
-#                  uri: kamelet:azure-cosmosdb-sink
-#                  id: to-1394
-#- route:
-#    nodePrefixId: route-171
-#    id: route-99f9
-#    from:
-#      uri: kamelet:azure-storage-blob-source
-#      id: from-f8e9
-#      steps:
-#        - multicast:
-#            id: multicast-6a53
-#            steps:
-#              - log:
-#                  message: ${body}
-#                  id: log-799d
-#              - log:
-#                  message: ${body}
-#                  id: log-fc8e
-#              - log:
-#                  message: ${body}
-#                  id: log-1e42
-#        - filter:
-#            expression:
-#              simple:
-#                id: simple-7ff9
-#            id: filter-8c99
-#            steps:
-#              - process:
-#                  id: process-e1c1
-#                  description: Call cutom java bean
-#              - delay:
-#                  expression:
-#                    simple:
-#                      id: simple-64a6
-#                  id: delay-b1ec
-#        - doTry:
-#            id: doTry-46cd
-#            doCatch:
-#              - id: doCatch-c6e7
-#                steps:
-#                  - log:
-#                      message: ${body}
-#                      id: log-77df
-#                  - choice:
-#                      when:
-#                        - expression:
-#                            simple:
-#                              id: simple-c7db
-#                          id: when-f058
-#                      otherwise:
-#                        id: otherwise-1e11
-#                      id: choice-8374
-#                  - wireTap:
-#                      id: wireTap-a25e
-#            doFinally:
-#              id: doFinally-0a65
-#              steps:
-#                - log:
-#                    message: ${body}
-#                    id: log-f4fa
-#                - log:
-#                    message: ${body}
-#                    id: log-cd30
-#            steps:
-#              - pollEnrich:
-#                  expression:
-#                    simple:
-#                      id: simple-6181
-#                  id: pollEnrich-a41b
-#              - filter:
-#                  expression:
-#                    simple:
-#                      id: simple-a69b
-#                  id: filter-07cf
-#                  steps:
-#                    - setBody:
-#                        expression:
-#                          simple:
-#                            id: simple-f0dc
-#                        id: setBody-3c0c
-#              - process:
-#                  id: process-6d06
-#        - circuitBreaker:
-#            id: circuitBreaker-4af8
+- route:
+    id: route-fc08
+    from:
+      id: from-4fb2
+      uri: timer
+      parameters:
+        period: '5000'
+        timerName: beers
+      steps:
+        - to:
+            id: to-2b12
+            variableReceive: beer1
+            uri: https
+            parameters:
+              httpUri: random-data-api.com/api/v2/beers
+        - to:
+            id: to-cd9b
+            variableReceive: beer2
+            uri: https
+            parameters:
+              httpUri: random-data-api.com/api/v2/beers
+        - setVariable:
+            id: setVariable-439c
+            name: alc1
+            expression:
+              jq:
+                id: jq-c893
+                expression: .alcohol | rtrimstr("%")
+                source: beer1
+                resultType: float
+        - setVariable:
+            id: setVariable-14bc
+            name: alc2
+            expression:
+              jq:
+                id: jq-73b5
+                expression: .alcohol | rtrimstr("%")
+                source: beer2
+                resultType: float
+        - choice:
+            id: choice-3fc5
+            when:
+              - id: choice
+                expression:
+                  simple:
+                    id: simple-699c
+                    expression: ${variable.alc1} > ${variable.alc2}
+                steps:
+                  - log:
+                      id: log-6ecf
+                      message: >-
+                        Beer battle: ${jq(variable:beer1,.name)}
+                        (${variable.alc1}%) is stronger than
+                        ${jq(variable:beer2,.name)} (${variable.alc2}%)
+            otherwise:
+              id: otherwise-03ac
+              steps:
+                - log:
+                    id: log-2477
+                    message: >-
+                      Beer battle: ${jq(variable:beer1,.name)}
+                      (${variable.alc1}%) is weaker than
+                      ${jq(variable:beer2,.name)} (${variable.alc2}%)
diff --git a/karavan-designer/src/designer/route/element/DslElementHeader.tsx b/karavan-designer/src/designer/route/element/DslElementHeader.tsx
@@ -28,6 +28,7 @@ import {shallow} from "zustand/shallow";
 import {useRouteDesignerHook} from "../useRouteDesignerHook";
 import {AddElementIcon, DeleteElementIcon, InsertElementIcon} from "../../utils/ElementIcons";
 import { RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {ReactComponent} from "*.svg";
 
 interface Props {
     headerRef: React.RefObject<HTMLDivElement>
@@ -214,19 +215,28 @@ export function DslElementHeader(props: Props) {
         )
     }
 
-    function getHeaderWithTooltip(tooltip: string | undefined) {
+    function getHeaderWithTooltip(tooltip: string | React.JSX.Element | undefined) {
         return (
             <>
                 {getHeader()}
-                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div>{tooltip}</div>}/>
+                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div style={{textAlign: 'left'}}>{tooltip}</div>}/>
             </>
 
         )
     }
 
-    function getHeaderTooltip(): string | undefined {
-        if (CamelUi.isShowExpressionTooltip(props.step)) return CamelUi.getExpressionTooltip(props.step);
-        if (CamelUi.isShowUriTooltip(props.step)) return CamelUi.getUriTooltip(props.step);
+    function getHeaderTooltip(): string | React.JSX.Element | undefined {
+        if (CamelUi.isShowExpressionTooltip(props.step)) {
+            const et =  CamelUi.getExpressionTooltip(props.step);
+            const exp = et[1];
+            return (
+                <div>
+                    <div>{et[0]}:</div>
+                    <div>{exp.length > 50 ? (exp.substring(0, 50) + ' ...') : exp}</div>
+                </div>
+            )
+        }
+        if (CamelUi.isShowUriTooltip(props.step)) return  CamelUi.getUriTooltip(props.step);
         return undefined;
     }
 

diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -402,11 +402,11 @@ export class CamelUi {
         return false;
     }
 
-    static getExpressionTooltip = (element: CamelElement): string => {
+    static getExpressionTooltip = (element: CamelElement): [string, string] => {
         const e = (element as any).expression;
         const language = CamelDefinitionApiExt.getExpressionLanguageName(e) || '';
         const value = CamelDefinitionApiExt.getExpressionValue(e) || '';
-        return language.concat(": ", (value as any)?.expression);
+        return [language, (value as any)?.expression];
     }
 
     static getUriTooltip = (element: CamelElement): string => {

diff --git a/karavan-space/src/designer/route/element/DslElementHeader.tsx b/karavan-space/src/designer/route/element/DslElementHeader.tsx
@@ -28,6 +28,7 @@ import {shallow} from "zustand/shallow";
 import {useRouteDesignerHook} from "../useRouteDesignerHook";
 import {AddElementIcon, DeleteElementIcon, InsertElementIcon} from "../../utils/ElementIcons";
 import { RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {ReactComponent} from "*.svg";
 
 interface Props {
     headerRef: React.RefObject<HTMLDivElement>
@@ -214,19 +215,28 @@ export function DslElementHeader(props: Props) {
         )
     }
 
-    function getHeaderWithTooltip(tooltip: string | undefined) {
+    function getHeaderWithTooltip(tooltip: string | React.JSX.Element | undefined) {
         return (
             <>
                 {getHeader()}
-                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div>{tooltip}</div>}/>
+                <Tooltip triggerRef={props.headerRef} position={"left"} content={<div style={{textAlign: 'left'}}>{tooltip}</div>}/>
             </>
 
         )
     }
 
-    function getHeaderTooltip(): string | undefined {
-        if (CamelUi.isShowExpressionTooltip(props.step)) return CamelUi.getExpressionTooltip(props.step);
-        if (CamelUi.isShowUriTooltip(props.step)) return CamelUi.getUriTooltip(props.step);
+    function getHeaderTooltip(): string | React.JSX.Element | undefined {
+        if (CamelUi.isShowExpressionTooltip(props.step)) {
+            const et =  CamelUi.getExpressionTooltip(props.step);
+            const exp = et[1];
+            return (
+                <div>
+                    <div>{et[0]}:</div>
+                    <div>{exp.length > 50 ? (exp.substring(0, 50) + ' ...') : exp}</div>
+                </div>
+            )
+        }
+        if (CamelUi.isShowUriTooltip(props.step)) return  CamelUi.getUriTooltip(props.step);
         return undefined;
     }
 

diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -402,11 +402,11 @@ export class CamelUi {
         return false;
     }
 
-    static getExpressionTooltip = (element: CamelElement): string => {
+    static getExpressionTooltip = (element: CamelElement): [string, string] => {
         const e = (element as any).expression;
         const language = CamelDefinitionApiExt.getExpressionLanguageName(e) || '';
         const value = CamelDefinitionApiExt.getExpressionValue(e) || '';
-        return language.concat(": ", (value as any)?.expression);
+        return [language, (value as any)?.expression];
     }
 
     static getUriTooltip = (element: CamelElement): string => {