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 => {