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 <36588343+vidhyasag...@users.noreply.github.com> 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 <induja.b...@gmail.com> Co-authored-by: Vidhya Sagar <vidhyasa...@ascertain.com.my> --- .../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