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 c9198224a6e1c1ff8fdcb883cfbc339631c78de7
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Sep 21 15:25:59 2023 -0400
Fix #900
---
karavan-designer/public/example/demo.camel.yaml | 31 ++++++
karavan-designer/src/designer/beans/BeanCard.tsx | 21 ++--
.../src/designer/beans/BeansDesigner.tsx | 89 ++++++++++-------
karavan-designer/src/designer/beans/bean.css | 109 +++++++++++++++++++++
karavan-designer/src/designer/karavan.css | 7 +-
.../src/designer/route/RouteDesigner.tsx | 9 +-
6 files changed, 217 insertions(+), 49 deletions(-)
diff --git a/karavan-designer/public/example/demo.camel.yaml
b/karavan-designer/public/example/demo.camel.yaml
index 57a7a2b4..c12e8d34 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -7,6 +7,13 @@
- log:
message: ${body}
id: log-8ec1
+ - choice:
+ when:
+ - expression: {}
+ id: when-ba60
+ otherwise:
+ id: otherwise-630f
+ id: choice-a534
- log:
message: ${body}
id: log-beae
@@ -56,3 +63,27 @@
- log:
message: ${body}
id: log-1919
+- rest:
+ id: rest-54e3
+- rest:
+ id: rest-b9dd
+- rest:
+ id: rest-b391
+- rest:
+ id: rest-e066
+- rest:
+ id: rest-5daa
+- rest:
+ id: rest-b193
+- rest:
+ id: rest-06e5
+- rest:
+ id: rest-268d
+- beans:
+ - {}
+ - {}
+ - {}
+ - {}
+ - {}
+ - {}
+ - {}
diff --git a/karavan-designer/src/designer/beans/BeanCard.tsx
b/karavan-designer/src/designer/beans/BeanCard.tsx
index 74dd884b..e9f1187d 100644
--- a/karavan-designer/src/designer/beans/BeanCard.tsx
+++ b/karavan-designer/src/designer/beans/BeanCard.tsx
@@ -16,9 +16,9 @@
*/
import React from 'react';
import {
- Button
+ Button, Flex, FlexItem
} from '@patternfly/react-core';
-import '../karavan.css';
+import './bean.css';
import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import DeleteIcon from
"@patternfly/react-icons/dist/js/icons/times-circle-icon";
import {useDesignerStore} from "../KaravanStore";
@@ -46,15 +46,18 @@ export function BeanCard (props: Props) {
const bean = props.bean;
return (
- <div className={selectedStep?.uuid === bean.uuid ? "rest-card
rest-card-selected" : "rest-card rest-card-unselected"} onClick={e =>
selectElement(e)}>
- <div className="header">
- <div className="title">Bean</div>
- <div className="title">{bean.name}</div>
- <div className="description">{bean.type}</div>
+ <Flex direction={{default: "row"}}
+ className={selectedStep?.uuid === bean.uuid ? "bean-card
bean-card-selected" : "bean-card bean-card-unselected"}
+ onClick={e => selectElement(e)}
+ >
+ <FlexItem flex={{default:"flex_1"}}
className="title">Bean</FlexItem>
+ <FlexItem flex={{default:"flex_2"}}
className="title">{bean.name}</FlexItem>
+ <FlexItem flex={{default:"flex_3"}} align={{default:
"alignRight"}} className="description">{bean.type}</FlexItem>
+ <FlexItem>
<Button variant="link" className="delete-button" onClick={e =>
onDelete(e)}>
<DeleteIcon/>
</Button>
- </div>
- </div>
+ </FlexItem>
+ </Flex>
)
}
diff --git a/karavan-designer/src/designer/beans/BeansDesigner.tsx
b/karavan-designer/src/designer/beans/BeansDesigner.tsx
index 687c4ec2..cfbf3bc5 100644
--- a/karavan-designer/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-designer/src/designer/beans/BeansDesigner.tsx
@@ -16,9 +16,16 @@
*/
import React from 'react';
import {
- Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent,
Modal, PageSection
+ Button, Divider,
+ Drawer,
+ DrawerContent,
+ DrawerContentBody,
+ DrawerPanelContent, Flex, FlexItem, Gallery, GalleryItem,
+ Modal,
+ PageSection,
} from '@patternfly/react-core';
import '../karavan.css';
+import './bean.css';
import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import {CamelUi} from "../utils/CamelUi";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
@@ -29,26 +36,26 @@ import {BeanCard} from "./BeanCard";
import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
import {shallow} from "zustand/shallow";
-export function BeansDesigner () {
+export function BeansDesigner() {
const [integration, setIntegration] = useIntegrationStore((s) =>
[s.integration, s.setIntegration], shallow)
const [dark, selectedStep, showDeleteConfirmation,
setShowDeleteConfirmation, setSelectedStep] = useDesignerStore((s) =>
[s.dark, s.selectedStep, s.showDeleteConfirmation,
s.setShowDeleteConfirmation, s.setSelectedStep], shallow)
- function onShowDeleteConfirmation (bean: RegistryBeanDefinition) {
+ function onShowDeleteConfirmation(bean: RegistryBeanDefinition) {
setSelectedStep(bean);
setShowDeleteConfirmation(true);
}
- function deleteBean () {
+ function deleteBean() {
const i = CamelDefinitionApiExt.deleteBeanFromIntegration(integration,
selectedStep);
setIntegration(i, false);
setShowDeleteConfirmation(false);
setSelectedStep(undefined);
}
- function changeBean (bean: RegistryBeanDefinition) {
+ function changeBean(bean: RegistryBeanDefinition) {
const clone = CamelUtil.cloneIntegration(integration);
const i = CamelDefinitionApiExt.addBeanToIntegration(clone, bean);
setIntegration(i, false);
@@ -73,24 +80,28 @@ export function BeansDesigner () {
</Modal>)
}
- function selectBean (bean?: RegistryBeanDefinition) {
+ function selectBean(bean?: RegistryBeanDefinition) {
setSelectedStep(bean);
}
- function unselectBean (evt: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+ function unselectBean(evt: React.MouseEvent<HTMLDivElement, MouseEvent>) {
if ((evt.target as any).dataset.click === 'BEANS') {
evt.stopPropagation()
setSelectedStep(undefined);
}
};
- function createBean () {
+ function createBean() {
changeBean(new RegistryBeanDefinition());
}
function getPropertiesPanel() {
return (
- <DrawerPanelContent isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
+ <DrawerPanelContent isResizable
+ hasNoBorder
+ defaultSize={'400px'}
+ maxSize={'800px'}
+ minSize={'400px'}>
<BeanProperties integration={integration}
dark={dark}
onChange={changeBean}
@@ -101,31 +112,41 @@ export function BeansDesigner () {
const beans = CamelUi.getBeans(integration);
return (
- <PageSection className="rest-page" isFilled padding={{default:
'noPadding'}}>
- <div className="rest-page-columns">
- <Drawer isExpanded isInline>
- <DrawerContent panelContent={getPropertiesPanel()}>
- <DrawerContentBody>
- <div className="graph" data-click="REST"
onClick={event => unselectBean(event)}>
- <div className="flows">
- {beans?.map((bean, index) => <BeanCard
key={bean.uuid + index}
- bean={bean}
-
selectElement={selectBean}
-
deleteElement={onShowDeleteConfirmation}/>)}
- <div className="add-rest">
- <Button
- variant={beans?.length === 0 ?
"primary" : "secondary"}
- data-click="ADD_REST"
- icon={<PlusIcon/>}
- onClick={e => createBean()}>Create
bean
- </Button>
- </div>
- </div>
- </div>
- </DrawerContentBody>
- </DrawerContent>
- </Drawer>
- </div>
+ <PageSection className="bean-designer" isFilled padding={{default:
'noPadding'}}>
+ <Drawer isExpanded isInline>
+ <DrawerContent panelContent={getPropertiesPanel()}>
+ <DrawerContentBody>
+ <Gallery className="gallery"
+ hasGutter
+ maxWidths={{
+ default: '100%',
+ }}
+ >
+ {beans?.map((bean, index) => (
+ <GalleryItem>
+ <BeanCard key={bean.uuid + index}
+ bean={bean}
+ selectElement={selectBean}
+
deleteElement={onShowDeleteConfirmation}
+ />
+ </GalleryItem>
+ ))}
+ <GalleryItem>
+ <Flex direction={{default:"row"}}
justifyContent={{default:"justifyContentCenter"}}>
+ <FlexItem>
+ <Button
+ variant={beans?.length === 0 ?
"primary" : "secondary"}
+ data-click="ADD_REST"
+ icon={<PlusIcon/>}
+ onClick={e =>
createBean()}>Create bean
+ </Button>
+ </FlexItem>
+ </Flex>
+ </GalleryItem>
+ </Gallery>
+ </DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
{getDeleteConfirmation()}
</PageSection>
)
diff --git a/karavan-designer/src/designer/beans/bean.css
b/karavan-designer/src/designer/beans/bean.css
new file mode 100644
index 00000000..38b8fb51
--- /dev/null
+++ b/karavan-designer/src/designer/beans/bean.css
@@ -0,0 +1,109 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.karavan .bean-card {
+ /*max-width: 800px;*/
+ border-style: dotted;
+ border-radius: 4px;
+ border-width: 1px;
+ padding: 16px 6px 16px 16px;
+ margin-right: 80px;
+ margin-left: 80px;
+ position: relative;
+}
+
+.karavan .bean-card-unselected {
+ border-color: var(--pf-v5-global--Color--200);
+ background-color: transparent;
+}
+
+.karavan .bean-card-selected {
+ border-color: var(--pf-v5-global--primary-color--100);
+}
+
+.karavan .bean-card .title {
+ margin: auto 0 auto 0;
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+.karavan .bean-card .description {
+ margin: auto 0 auto 0;
+ min-width: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.karavan .bean-card .delete-button {
+ position: absolute;
+ top: 3px;
+ right: 3px;
+ line-height: 1;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+ color: #909090;
+ visibility: hidden;
+ z-index: 100;
+}
+
+.karavan .bean-card:hover .delete-button {
+ visibility: visible;
+}
+
+.karavan .bean-designer {
+ display: block;
+ height: 100vh;
+ width: 100%;
+ overflow-y: auto;
+ padding-bottom: 106px;
+}
+
+.karavan .bean-designer .gallery {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.karavan .bean-designer .properties {
+ padding: 10px 10px 10px 10px;
+ background: transparent;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+/*Beans*/
+.karavan .bean-designer .properties .bean-properties
.pf-v5-c-form__group-control {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.karavan .bean-designer .properties .bean-property {
+ display: flex;
+ flex-direction: row;
+ gap: 3px;
+}
+
+.karavan .bean-designer .properties .bean-property .delete-button {
+ padding: 3px;
+ color: #b1b1b7;
+}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 88b5dd81..8f6304af 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -265,7 +265,7 @@
display: block;
height: 100%;
background: #fafafa;
- padding-bottom: 80px;
+ padding-bottom: 66px;
}
.karavan .top-icon {
@@ -333,10 +333,9 @@
}
/*Properties*/
-.karavan .properties {
- border: 1px solid #eee;
+.karavan .dsl-page .properties {
padding: 10px 10px 10px 10px;
- background: #fcfcfc;
+ background: transparent;
width: 100%;
height: 100%;
overflow: auto;
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx
b/karavan-designer/src/designer/route/RouteDesigner.tsx
index c81f6c30..a78a4eed 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -90,8 +90,13 @@ export function RouteDesigner() {
function getPropertiesPanel() {
return (
- <DrawerPanelContent style={{transform: "initial"}} isResizable
hasNoBorder defaultSize={'400px'}
- maxSize={'800px'} minSize={'300px'}>
+ <DrawerPanelContent style={{transform: "initial"}}
+ isResizable
+ hasNoBorder
+ defaultSize={'400px'}
+ maxSize={'800px'}
+ minSize={'400px'}
+ >
<DslProperties isRouteDesigner={true}/>
</DrawerPanelContent>
)
