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/03/05 00:16:43 UTC
(camel-karavan) 02/03: Limit for element tootlip
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 f46c7e9dddc04b0645b1b7333619ddbdae8a22db
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Mar 4 19:04:44 2024 -0500
Limit for element tootlip
---
.../designer/route/element/DslElementHeader.tsx | 20 +-
.../src/main/webui/src/designer/utils/CamelUi.tsx | 4 +-
karavan-designer/public/example/demo.camel.yaml | 202 +++++++--------------
.../designer/route/element/DslElementHeader.tsx | 20 +-
karavan-designer/src/designer/utils/CamelUi.tsx | 4 +-
.../designer/route/element/DslElementHeader.tsx | 20 +-
karavan-space/src/designer/utils/CamelUi.tsx | 4 +-
7 files changed, 114 insertions(+), 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
index 438369ea..1b5dbe5b 100644
--- 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
index 8caf309f..09674c70 100644
--- 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
index b4e1dec5..747447bc 100644
--- 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}%)
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/element/DslElementHeader.tsx b/karavan-designer/src/designer/route/element/DslElementHeader.tsx
index 438369ea..1b5dbe5b 100644
--- 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
index 8caf309f..09674c70 100644
--- 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
index 438369ea..1b5dbe5b 100644
--- 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
index 8caf309f..09674c70 100644
--- 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 => {