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 52d9872e Custom Kamelet Performance Issue Fix #731 (#1153)
52d9872e is described below
commit 52d9872e91180920d26ef6f05769379e0a9bb68d
Author: Vidhya Sagar <[email protected]>
AuthorDate: Sat Mar 2 01:56:13 2024 +0800
Custom Kamelet Performance Issue Fix #731 (#1153)
* reload kamelets on file editor route
* reload kamelets in file editor
* Saving custom kamelet in KameletApi.ts file
* merge issue fix
* change to limit container resoures for docker
* custom kamelet save on blur implemented
---------
Co-authored-by: induja <[email protected]>
Co-authored-by: Vidhya Sagar <[email protected]>
---
.../designer/kamelet/KameletAnnotationsPanel.tsx | 54 ++--------------
.../kamelet/KameletDefinitionPropertyCard.tsx | 11 +---
.../designer/kamelet/KameletDefinitionsPanel.tsx | 25 ++------
.../webui/src/designer/kamelet/KameletInput.tsx | 73 ++++++++++++++++++++++
4 files changed, 87 insertions(+), 76 deletions(-)
diff --git
a/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
b/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
index b1a6b324..47f08a29 100644
---
a/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
+++
b/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
@@ -32,6 +32,7 @@ import '../karavan.css';
import './kamelet.css';
import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
+import { KameletInput } from './KameletInput';
const PREFIX = 'camel.apache.org/';
@@ -56,60 +57,17 @@ export function KameletAnnotationsPanel() {
}
function getElement(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key} isRequired>
- <InputGroup>
- <InputGroupItem isFill>
- <TextInput className="text-field" type="text"
id={key} name={key}
- onChange={(_, value) => setValue(key,
value)}
- value={getValue(key)}/>
- </InputGroupItem>
- </InputGroup>
- </FormGroup>
- </GridItem>
- )
+ return (<KameletInput elementKey={key} label={label} span={span}
value={getValue(key)} setValue={(value: string) => setValue(key, value)}
type='text' isRequired={true}/>);
}
function getElementToggleGroup(key: string, label: string, values:
string[], span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key} isRequired>
- <ToggleGroup aria-label={key} id={key} name={key}>
- {values.map(value =>
- <ToggleGroupItem
- key={value}
- text={capitalize(value)}
- buttonId="toggle-group-single-1"
- isSelected={getValue(key) === value}
- onChange={(_, selected) => setValue(key,
value) }
- />
- )}
- </ToggleGroup>
- </FormGroup>
- </GridItem>
- )
+ return (<KameletInput elementKey={key} label={label} span={span}
value={getValue(key)} setValue={(value: string) => setValue(key, value)}
type='toggle' options={values} isRequired={true}/>);
+
}
function getElementIcon(key: string, label: string, span: 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key} isRequired>
- <InputGroup>
- <InputGroupText id="username">
- <svg className="icon">
- <image href={getValue(key)} className="icon"/>
- </svg>
- </InputGroupText>
- <InputGroupItem isFill>
- <TextInput className="text-field" type="text"
id={key} name={key}
- onChange={(_, value) => setValue(key,
value)}
- value={getValue(key)}/>
- </InputGroupItem>
- </InputGroup>
- </FormGroup>
- </GridItem>
- )
+
+ return (<KameletInput elementKey={key} label={label} span={span}
value={getValue(key)} setValue={(value: string) => setValue(key, value)}
type='icon' isRequired={true}/>);
}
return (
diff --git
a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
index cf42ef6c..0c0115e4 100644
---
a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
+++
b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
@@ -40,6 +40,7 @@ import {shallow} from "zustand/shallow";
import {DefinitionProperty} from
"karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
+import { KameletInput } from './KameletInput';
interface Props {
index: number
@@ -72,15 +73,7 @@ export function KameletDefinitionPropertyCard(props: Props) {
function getPropertyField(field: string, label: string, isRequired:
boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key + field}
isRequired={isRequired}>
- <TextInput className="text-field" type="text" id={key +
field} name={key + field}
- onChange={(_, value) => setPropertyValue(field,
value)}
- value={getPropertyValue(field)}/>
- </FormGroup>
- </GridItem>
- )
+ return (<KameletInput elementKey={key + field} label={label}
span={span} value={getPropertyValue(field)} setValue={(value: string) =>
setPropertyValue(field, value)} type='text' isRequired={isRequired}/>);
}
function getPropertyTypeField(field: string, label: string, isRequired:
boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
diff --git
a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
index 0d3f04a4..4dd057bb 100644
---
a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
+++
b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
@@ -36,7 +36,8 @@ import AddIcon from
"@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {DefinitionProperty} from
"karavan-core/lib/model/IntegrationDefinition";
-import {KameletDependenciesCard} from "./KameletDependenciesCard";
+import { KameletDependenciesCard } from "./KameletDependenciesCard";
+import { KameletInput } from './KameletInput';
export function KameletDefinitionsPanel() {
@@ -59,27 +60,13 @@ export function KameletDefinitionsPanel() {
}
function getElementTextInput(key: string, label: string, span: 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key} isRequired>
- <TextInput className="text-field" type="text" id={key}
name={key}
- onChange={(_, value) => setValue(key, value)}
- value={getValue(key)}/>
- </FormGroup>
- </GridItem>
- )
+ return (<KameletInput elementKey={key} label={label} span={span}
value={getValue(key)} setValue={(value: string) => setValue(key, value)}
type='text' isRequired={true}/>);
+
}
function getElementTextArea(key: string, label: string, span: 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
- return (
- <GridItem span={span}>
- <FormGroup label={label} fieldId={key} isRequired>
- <TextArea type="text" id={key} name={key} autoResize
- onChange={(_, value) => setValue(key, value)}
- value={getValue(key)}/>
- </FormGroup>
- </GridItem>
- )
+ return (<KameletInput elementKey={key} label={label} span={span}
value={getValue(key)} setValue={(value: string) => setValue(key, value)}
type='textArea' isRequired={true}/>);
+
}
const properties = integration.spec.definition?.properties ?
Object.keys(integration.spec.definition?.properties) : [];
diff --git a/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx
b/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx
new file mode 100644
index 00000000..a9dc794f
--- /dev/null
+++ b/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx
@@ -0,0 +1,73 @@
+import { GridItem, FormGroup, InputGroup, InputGroupItem, TextInput,
InputGroupText, ToggleGroup, ToggleGroupItem, capitalize, TextArea } from
"@patternfly/react-core";
+import { useState } from "react";
+import '../karavan.css';
+import './kamelet.css';
+
+export function KameletInput(props: any) {
+ const [inputValue, setInputValue] = useState(props.value)
+ function saveValue(value?: string) {
+ props.setValue(value ? value : inputValue);
+ }
+
+ function getTextField() {
+ return (
+ <InputGroup>
+ <InputGroupItem isFill>
+ <TextInput className="text-field" type="text"
id={props.elementKey} name={props.elementKey}
+ onChange={(_, value) => setInputValue(value)}
+ onBlur={() => saveValue()}
+ value={inputValue} />
+ </InputGroupItem>
+ </InputGroup>
+ )
+ }
+
+ function getTextArea() {
+ return (<InputGroup>
+ <InputGroupItem isFill> <TextArea type="text"
id={props.elementKey} name={props.elementKey} autoResize
+ onChange={(_, value) => setInputValue(value)}
+ onBlur={() => saveValue()}
+ value={inputValue} /></InputGroupItem></InputGroup>)
+ }
+
+ function getIcon() {
+ return (<InputGroup>
+ <InputGroupText id="username">
+ <svg className="icon">
+ <image href={props.value} className="icon" />
+ </svg>
+ </InputGroupText>
+ <InputGroupItem isFill>
+ <TextInput className="text-field" type="text"
id={props.elementKey} name={props.elementKey}
+ onChange={(_, value) => setInputValue(value)}
+ onBlur={() => saveValue()}
+ value={inputValue} />
+ </InputGroupItem>
+ </InputGroup>);
+ }
+
+ function getToggleGroup() {
+ return (<ToggleGroup aria-label={props.elementKey}
id={props.elementKey} name={props.elementKey}>
+ {props.options.map((option: string) =>
+ <ToggleGroupItem
+ key={option}
+ text={capitalize(option)}
+ buttonId="toggle-group-single-1"
+ isSelected={inputValue === option}
+ onChange={(_, selected) => { setInputValue(option);
saveValue(option) }}
+ />
+ )}
+ </ToggleGroup>)
+ }
+
+ return (
+ <GridItem span={props.span}>
+ <FormGroup label={props.label} fieldId={props.elementKey}
isRequired={props.isRequired}>
+ {props.type === 'text' && getTextField()}
+ {props.type === 'icon' && getIcon()}
+ {props.type === 'toggle' && getToggleGroup()}
+ {props.type === 'textArea' && getTextArea()}
+ </FormGroup>
+ </GridItem>
+ )
+}
\ No newline at end of file
