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 2022/03/30 16:38:08 UTC
[camel-karavan] branch main updated: Fix #257, Fix #247 (#259)
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
The following commit(s) were added to refs/heads/main by this push:
new e0c9a58 Fix #257, Fix #247 (#259)
e0c9a58 is described below
commit e0c9a58a39aae06f5e01c4c86a29bbbd8b1d7de6
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Wed Mar 30 12:38:04 2022 -0400
Fix #257, Fix #247 (#259)
---
karavan-core/src/core/api/ComponentApi.ts | 25 +++----
karavan-designer/src/App.tsx | 3 +-
.../src/designer/route/DslProperties.tsx | 36 +++++-----
.../designer/route/property/DslPropertyField.tsx | 78 +++++++++++++++-------
karavan-designer/src/designer/utils/CamelUi.ts | 6 +-
5 files changed, 93 insertions(+), 55 deletions(-)
diff --git a/karavan-core/src/core/api/ComponentApi.ts b/karavan-core/src/core/api/ComponentApi.ts
index 7afedd1..b8f8e13 100644
--- a/karavan-core/src/core/api/ComponentApi.ts
+++ b/karavan-core/src/core/api/ComponentApi.ts
@@ -161,7 +161,7 @@ export const ComponentApi = {
return uri;
},
- getComponentProperties: (componentName: string, type: 'consumer' | 'producer', advanced: boolean): ComponentProperty[] => {
+ getComponentProperties: (componentName: string, type: 'consumer' | 'producer'): ComponentProperty[] => {
const component: Component | undefined = ComponentApi.findByName(componentName);
const properties: ComponentProperty[] = [];
try {
@@ -186,17 +186,18 @@ export const ComponentApi = {
}
} finally {
const result: ComponentProperty[] = [];
- if (!advanced) {
- result.push(...properties.filter(p => p.kind === 'path'));
- result.push(...properties.filter(p => p.kind !== 'path' && p.required));
- result.push(...properties.filter(p => p.label.length === 0 && p.kind !== 'path' && !p.required));
- result.push(...properties.filter(p => p.label.startsWith(type) && !p.label.includes("advanced") && !p.required));
- result.push(...properties.filter(p => p.label === "formatting" && !p.required));
- } else {
- result.push(...properties.filter(p => p.label.startsWith(type) && p.label.includes("advanced")));
- result.push(...properties.filter(p => p.label === "advanced"));
- }
+ result.push(...properties.filter(p => p.kind === 'path'));
+ result.push(...properties.filter(p => p.kind !== 'path' && p.required));
+ result.push(...properties.filter(p => p.label.length === 0 && p.kind !== 'path' && !p.required));
+ result.push(...properties.filter(p => p.label.startsWith(type) && !p.label.includes("advanced") && !p.required));
+ result.push(...properties.filter(p => p.label === "formatting" && !p.required));
+ result.push(...properties.filter(p => p.label.startsWith(type) &&
+ (p.label.includes("scheduler") || p.label.includes("security") || p.label.includes("advanced"))
+ ));
+ result.push(...properties.filter(p => !p.label.includes(type) &&
+ (p.label.includes("scheduler") || p.label.includes("security") || p.label.includes("advanced"))
+ ));
return result;
}
- },
+ }
}
\ No newline at end of file
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 959c727..403b964 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -83,6 +83,7 @@ class App extends React.Component<Props, State> {
"cxf.json",
"file.json",
"log.json",
+ "kafka.json",
"coap+tcp.json",
"pg-replication-slot.json",
"rest-api.json",
@@ -97,7 +98,7 @@ class App extends React.Component<Props, State> {
save(filename: string, yaml: string, propertyOnly: boolean) {
// console.log(filename);
- console.log(yaml);
+ // console.log(yaml);
// console.log(propertyOnly);
}
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx b/karavan-designer/src/designer/route/DslProperties.tsx
index 2fb5018..23ad9e9 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -135,10 +135,10 @@ export class DslProperties extends React.Component<Props, State> {
<div className="top">
<Title headingLevel="h1" size="md">{title}</Title>
<Tooltip content="Copy step" position="bottom">
- <Button variant="link" onClick={() => this.props.onSaveClipboardStep?.call(this, this.state.step)} icon={<CopyIcon />}/>
+ <Button variant="link" onClick={() => this.props.onSaveClipboardStep?.call(this, this.state.step)} icon={<CopyIcon/>}/>
</Tooltip>
<Tooltip content="Paste step" position="bottom">
- <Button variant="link" onClick={() => this.pasteClipboardStep()} icon={<PasteIcon />}/>
+ <Button variant="link" onClick={() => this.pasteClipboardStep()} icon={<PasteIcon/>}/>
</Tooltip>
</div>
<Text component={TextVariants.p}>{description}</Text>
@@ -147,18 +147,18 @@ export class DslProperties extends React.Component<Props, State> {
)
}
- getProps = (showAdvanced?: boolean): PropertyMeta[] => {
+ getProperties = (): PropertyMeta[] => {
const dslName = this.state.step?.dslName;
return CamelDefinitionApiExt.getElementProperties(dslName)
- .filter((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
+ // .filter((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
.filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen'))
.filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)));
- // .filter((p: PropertyMeta) => dslName && !(['RestDefinition', 'GetDefinition', 'PostDefinition', 'PutDefinition', 'PatchDefinition', 'DeleteDefinition', 'HeadDefinition'].includes(dslName) && ['param', 'responseMessage'].includes(p.name))) // TODO: configure this properties
+ // .filter((p: PropertyMeta) => dslName && !(['RestDefinition', 'GetDefinition', 'PostDefinition', 'PutDefinition', 'PatchDefinition', 'DeleteDefinition', 'HeadDefinition'].includes(dslName) && ['param', 'responseMessage'].includes(p.name))) // TODO: configure this properties
}
- getPropertyFields = (showAdvanced: boolean) => {
+ getPropertyFields = (properties: PropertyMeta[]) => {
return (<>
- {this.state.step && !['MarshalDefinition', 'UnmarshalDefinition'].includes(this.state.step.dslName) && this.getProps(showAdvanced).map((property: PropertyMeta) =>
+ {this.state.step && !['MarshalDefinition', 'UnmarshalDefinition'].includes(this.state.step.dslName) && properties.map((property: PropertyMeta) =>
<DslPropertyField key={property.name}
integration={this.props.integration}
property={property}
@@ -173,20 +173,24 @@ export class DslProperties extends React.Component<Props, State> {
}
render() {
+ const properties = this.getProperties();
+ const propertiesMain = properties.filter(p => !p.label.includes("advanced"));
+ const propertiesAdvanced = properties.filter(p => p.label.includes("advanced"));
return (
<div key={this.state.step ? this.state.step.uuid : 'integration'} className='properties'>
<Form autoComplete="off" onSubmit={event => event.preventDefault()}>
{this.state.step === undefined && <IntegrationHeader integration={this.props.integration}/>}
{this.state.step && this.getComponentHeader()}
- {this.getPropertyFields(false)}
- {this.getProps(true).length > 0 && <ExpandableSection
- toggleText={'Advanced properties'}
- onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
- isExpanded={this.state.isShowAdvanced}>
- <div className="parameters">
- {this.getPropertyFields(true)}
- </div>
- </ExpandableSection>}
+ {this.getPropertyFields(propertiesMain)}
+ {propertiesAdvanced.length > 0 &&
+ <ExpandableSection
+ toggleText={'Advanced properties'}
+ onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
+ isExpanded={this.state.isShowAdvanced}>
+ <div className="parameters">
+ {this.getPropertyFields(propertiesAdvanced)}
+ </div>
+ </ExpandableSection>}
{this.state.step && ['MarshalDefinition', 'UnmarshalDefinition'].includes(this.state.step.dslName) &&
<DataFormatField
integration={this.props.integration}
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 3e1f0d7..9dec9b1 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -44,6 +44,7 @@ import {ObjectField} from "./ObjectField";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {MediaTypes} from "../../utils/MediaTypes";
+import {ComponentProperty} from "../../../../../karavan-core/lib/model/ComponentModels";
interface Props {
property: PropertyMeta,
@@ -59,7 +60,7 @@ interface Props {
interface State {
selectStatus: Map<string, boolean>,
- isShowAdvanced: boolean
+ isShowAdvanced: Map<string, boolean>
arrayValues: Map<string, string>
}
@@ -68,7 +69,7 @@ export class DslPropertyField extends React.Component<Props, State> {
public state: State = {
selectStatus: new Map<string, boolean>(),
arrayValues: new Map<string, string>(),
- isShowAdvanced: false
+ isShowAdvanced: new Map<string, boolean>(),
}
openSelect = (propertyName: string, isExpanded: boolean) => {
@@ -397,11 +398,24 @@ export class DslPropertyField extends React.Component<Props, State> {
)
}
- getParameters = () => {
- const isKamelet = CamelUi.isKameletComponent(this.props.element);
+ getKameletParameters = () => {
return (
<div className="parameters">
- {!isKamelet && CamelUi.getComponentProperties(this.props.element, false).map(kp =>
+ {CamelUi.getKameletProperties(this.props.element).map(property =>
+ <KameletPropertyField
+ key={property.id}
+ property={property}
+ value={CamelDefinitionApiExt.getParametersValue(this.props.element, property.id)}
+ onParameterChange={this.props.onParameterChange}
+ />)}
+ </div>
+ )
+ }
+
+ getMainComponentParameters = (properties: ComponentProperty[]) => {
+ return (
+ <div className="parameters">
+ {properties.map(kp =>
<ComponentParameterField
key={kp.name}
property={kp}
@@ -410,29 +424,27 @@ export class DslPropertyField extends React.Component<Props, State> {
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name, kp.kind === 'path')}
onParameterChange={this.props.onParameterChange}
/>)}
- {isKamelet && CamelUi.getKameletProperties(this.props.element).map(property =>
- <KameletPropertyField
- key={property.id}
- property={property}
- value={CamelDefinitionApiExt.getParametersValue(this.props.element, property.id)}
- onParameterChange={this.props.onParameterChange}
- />)}
</div>
)
}
- getAdvancedParameters = () => {
+ getExpandableComponentParameters = (properties: ComponentProperty[], label: string) => {
return (
<ExpandableSection
- toggleText={'Advanced parameters'}
- onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
- isExpanded={this.state.isShowAdvanced}>
+ toggleText={label}
+ onToggle={isExpanded => {
+ this.setState(state => {
+ state.isShowAdvanced.set(label, !state.isShowAdvanced.get(label));
+ return {isShowAdvanced: state.isShowAdvanced};
+ })
+ }}
+ isExpanded={this.state.isShowAdvanced.has(label) && this.state.isShowAdvanced.get(label)}>
<div className="parameters">
- {CamelUi.getComponentProperties(this.props.element, true).map(kp =>
+ {properties.map(kp =>
<ComponentParameterField
- integration={this.props.integration}
key={kp.name}
property={kp}
+ integration={this.props.integration}
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name, kp.kind === 'path')}
onParameterChange={this.props.onParameterChange}
/>
@@ -471,11 +483,32 @@ export class DslPropertyField extends React.Component<Props, State> {
return ['string'].includes(property.type) && property.name !== 'expression' && property.isArray && !property.enumVals;
}
+ getComponentParameters (property: PropertyMeta) {
+ console.log(this.props.element)
+ console.log(property)
+ const properties = CamelUi.getComponentProperties(this.props.element);
+ console.log(properties)
+ const propertiesMain = properties.filter(p => !p.label.includes("advanced") && !p.label.includes("security") && !p.label.includes("scheduler"));
+ const propertiesAdvanced = properties.filter(p => p.label.includes("advanced"));
+ const propertiesScheduler = properties.filter(p => p.label.includes("scheduler"));
+ const propertiesSecurity = properties.filter(p => p.label.includes("security"));
+ return (
+ <>
+ {property.name === 'parameters' && this.getMainComponentParameters(propertiesMain)}
+ {property.name === 'parameters' && this.props.element && propertiesScheduler.length >0
+ && this.getExpandableComponentParameters(propertiesScheduler, "Scheduler parameters")}
+ {property.name === 'parameters' && this.props.element && propertiesSecurity.length >0
+ && this.getExpandableComponentParameters(propertiesSecurity, "Security parameters")}
+ {property.name === 'parameters' && this.props.element && propertiesAdvanced.length >0
+ && this.getExpandableComponentParameters(propertiesAdvanced, "Advanced parameters")}
+ </>
+ )
+ }
+
render() {
const isKamelet = CamelUi.isKameletComponent(this.props.element);
const property: PropertyMeta = this.props.property;
const value = this.props.value;
-
return (
<FormGroup
label={this.props.hideLabel ? undefined : this.getLabel(property, value)}
@@ -507,10 +540,9 @@ export class DslPropertyField extends React.Component<Props, State> {
&& this.getSwitch(property, value)}
{property.enumVals
&& this.getSelect(property, value)}
- {property.name === 'parameters'
- && this.getParameters()}
- {property.name === 'parameters' && this.props.element && !isKamelet && CamelUi.getComponentProperties(this.props.element, true).length > 0
- && this.getAdvancedParameters()}
+ {isKamelet && property.name === 'parameters' && this.getKameletParameters()}
+ {!isKamelet && property.name === 'parameters' && this.getComponentParameters(property)}
+
</FormGroup>
)
}
diff --git a/karavan-designer/src/designer/utils/CamelUi.ts b/karavan-designer/src/designer/utils/CamelUi.ts
index 6e1bdd1..5dad20c 100644
--- a/karavan-designer/src/designer/utils/CamelUi.ts
+++ b/karavan-designer/src/designer/utils/CamelUi.ts
@@ -258,17 +258,17 @@ export class CamelUi {
: [];
}
- static getComponentProperties = (element: any, advanced: boolean): ComponentProperty[] => {
+ static getComponentProperties = (element: any): ComponentProperty[] => {
const dslName: string = (element as any).dslName;
if (dslName === 'ToDynamicDefinition'){
const component = ComponentApi.findByName(dslName);
- return component ? ComponentApi.getComponentProperties(component?.component.name,'producer', advanced) : [];
+ return component ? ComponentApi.getComponentProperties(component?.component.name,'producer') : [];
} else {
const uri: string = (element as any).uri;
const name = ComponentApi.getComponentNameFromUri(uri);
if (name){
const component = ComponentApi.findByName(name);
- return component ? ComponentApi.getComponentProperties(component?.component.name, element.dslName === 'FromDefinition' ? 'consumer' : 'producer', advanced) : [];
+ return component ? ComponentApi.getComponentProperties(component?.component.name, element.dslName === 'FromDefinition' ? 'consumer' : 'producer') : [];
} else {
return [];
}