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 aedd983aee643989087c4fe085fc1e99533eb469 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Wed Apr 10 19:43:40 2024 -0400 Expression window --- karavan-designer/public/example/demo.camel.yaml | 301 ++++++++++++++++++--- .../src/expression/ExpressionModalEditor.css | 9 +- .../src/expression/ExpressionModalEditor.tsx | 25 +- 3 files changed, 288 insertions(+), 47 deletions(-) diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml index 828fe089..c02b8092 100644 --- a/karavan-designer/public/example/demo.camel.yaml +++ b/karavan-designer/public/example/demo.camel.yaml @@ -1,39 +1,262 @@ -- rest: - get: - - id: "metadata" - path: "/metadata" - produces: "application/fhir+json,application/fhir+xml" - param: - - collectionFormat: "multi" - dataType: "string" - description: "Specify alternative response formats by their MIME-types (when\ - \ a client is unable acccess accept: header)" - name: "_format" - required: false - type: "query" - - collectionFormat: "multi" - dataType: "boolean" - description: "Ask for a pretty printed response for human convenience" - name: "_pretty" - required: false - type: "query" - - collectionFormat: "multi" - dataType: "string" - description: "Requests the server to return a designated subset of the resource" - name: "_summary" - required: false - type: "query" - allowableValues: - - "true" - - "text" - - "data" - - "count" - - "false" - - collectionFormat: "csv" - dataType: "array" - description: "Requests the server to return a collection of elements from\ - \ the resource" - name: "_elements" - required: false - type: "query" - to: "direct:metadata" +#- route: +# id: route-a947 +# nodePrefixId: route-a32 +# from: +# id: from-c489 +# description: Receive Data +# uri: kamelet:aws-ddb-streams-source +# steps: +# - setHeader: +# id: setBody-4434 +# expression: +# simple: +# id: simple-abd8 +# expression: dddddd +# - filter: +# id: filter-929b +# expression: +# simple: +# id: simple-d932 +# expression: Hello +# steps: +# - bean: +# id: bean-120b +# ref: xxx +# - log: +# id: log-d86e +# message: ${body}!!! +# - to: +# id: to-9f7d +# description: Send notification +# uri: kafka +# - to: +# id: to-53a3 +# description: Send payments +# uri: amqp +#- route: +# id: route-8609 +# nodePrefixId: route-ae2 +# from: +# id: from-6aee +# uri: timer +# steps: +# - to: +# id: to-2df4 +# uri: direct +# parameters: +# name: second_direct +# - to: +# id: to-e017 +# uri: direct +# parameters: +# name: second_direct +#- route: +# id: first-firect +# from: +# id: from-f155 +# uri: direct +# parameters: +# name: first-firect +# steps: +# - to: +# id: to-5c86 +# uri: direct +# parameters: +# name: second_direct +- route: + id: second_direct + from: + id: from-7ce0 + uri: direct + parameters: + name: second_direct + steps: + - setVariable: + id: setVariable-75ca + name: global:data1 + expression: + simple: + id: simple-009e + - convertVariableTo: + id: convertVariableTo-c0b8 + - removeVariable: + id: removeVariable-2cae + - to: + id: to-4711 + uri: metrics +- route: + id: route-18e5 + nodePrefixId: route-656 + from: + id: from-9468 + uri: amqp + variableReceive: global:variable1 + steps: + - doTry: + id: doTry-8bb0 + doCatch: + - id: doCatch-19a9 + steps: + - convertVariableTo: + id: convertVariableTo-b0e5 + name: xxx + toName: yyy + steps: + - multicast: + id: multicast-ad44 + steps: + - to: + id: to-0c20 + variableSend: send1 + variableReceive: receive1 + uri: activemq + - to: + id: to-e79a + variableSend: route:aran1 + variableReceive: route:aran1 + uri: arangodb + - setVariable: + id: setVariable-957d + name: varrr + expression: + simple: + id: simple-cd4b + - to: + id: to-60f8 + variableSend: hello + variableReceive: world + uri: amqp + + +# 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 \ No newline at end of file diff --git a/karavan-designer/src/expression/ExpressionModalEditor.css b/karavan-designer/src/expression/ExpressionModalEditor.css index 732d3abd..c06a3a60 100644 --- a/karavan-designer/src/expression/ExpressionModalEditor.css +++ b/karavan-designer/src/expression/ExpressionModalEditor.css @@ -22,7 +22,6 @@ height: 100%; display: flex; flex-direction: column; - gap: 16px; justify-content: space-between; align-items: stretch; } @@ -36,11 +35,19 @@ .panel-middle { /*height: 64px;*/ } +@keyframes smooth-appear { + to { + bottom: 20px; + opacity:1; + } +} .panel-bottom { flex: 1; height: 100%; overflow-y: auto; + opacity:0; + animation: smooth-appear 1s ease forwards; } .context { diff --git a/karavan-designer/src/expression/ExpressionModalEditor.tsx b/karavan-designer/src/expression/ExpressionModalEditor.tsx index 038c4010..127cbda9 100644 --- a/karavan-designer/src/expression/ExpressionModalEditor.tsx +++ b/karavan-designer/src/expression/ExpressionModalEditor.tsx @@ -16,12 +16,14 @@ */ import React, {useEffect, useState} from 'react'; import { - Button, Modal, Title, TitleSizes + Button, Modal, Switch, Title, TitleSizes } from '@patternfly/react-core'; import Editor from "@monaco-editor/react"; import {ExpressionBottomPanel} from "./ExpressionBottomPanel"; import './ExpressionModalEditor.css' -import {Context, ExpressionFunctions, ExpressionVariables} from "./ExpressionContextModel"; +import {ExpressionFunctions, ExpressionVariables} from "./ExpressionContextModel"; +import ArrowDown from "@patternfly/react-icons/dist/esm/icons/angle-down-icon"; +import ArrowUp from "@patternfly/react-icons/dist/esm/icons/angle-up-icon"; interface Props { name: string, @@ -37,9 +39,10 @@ interface Props { export function ExpressionModalEditor(props: Props) { const [customCode, setCustomCode] = useState<string | undefined>(); + const [showVariables, setShowVariables] = useState<boolean>(true); + const [key, setKey] = useState<string>(''); useEffect(() => { - console.log(title, dslLanguage) setCustomCode(props.customCode) },[]); @@ -80,7 +83,8 @@ export function ExpressionModalEditor(props: Props) { <div className='container'> <div className='panel-top'> <Editor - height="100%" + key={key} + height={"100%"} width="100%" defaultLanguage={'java'} language={'java'} @@ -98,9 +102,16 @@ export function ExpressionModalEditor(props: Props) { onChange={(value, _) => setCustomCode(value)} /> </div> - {show && <div className='panel-bottom'> - {dslLanguage && <ExpressionBottomPanel dslLanguage={dslLanguage}/>} - </div>} + <Button style={{padding:"0"}} variant="link" icon={showVariables ? <ArrowDown/> : <ArrowUp/>} onClick={e => { + setShowVariables(!showVariables); + setKey(Math.random().toString()); + }} + /> + {show && showVariables && + <div className='panel-bottom'> + {dslLanguage && <ExpressionBottomPanel dslLanguage={dslLanguage}/>} + </div> + } </div> </Modal> )