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/04/11 15:17:15 UTC
(camel-karavan) 04/08: Expression window
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>
)