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 a7091eb Kubernetes selector improvements (#445) a7091eb is described below commit a7091ebfc8a3757e33d72fd6e6d25209f33c29f0 Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Wed Aug 3 12:11:55 2022 -0400 Kubernetes selector improvements (#445) --- .../route/property/ComponentParameterField.tsx | 58 ++++++++++++++++++++-- .../designer/route/property/DslPropertyField.tsx | 13 +++++ .../route/property/KameletPropertyField.tsx | 12 +++++ .../designer/route/property/KubernetesSelector.tsx | 14 +++--- 4 files changed, 87 insertions(+), 10 deletions(-) diff --git a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx index 4116b1b..af2e013 100644 --- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx +++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx @@ -34,6 +34,9 @@ import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefin import {ToDefinition} from "karavan-core/lib/model/CamelDefinition"; import CompressIcon from "@patternfly/react-icons/dist/js/icons/compress-icon"; import ExpandIcon from "@patternfly/react-icons/dist/js/icons/expand-icon"; +import {KubernetesSelector} from "./KubernetesSelector"; +import {KubernetesAPI} from "../../utils/KubernetesAPI"; +import KubernetesIcon from "@patternfly/react-icons/dist/js/icons/openshift-icon"; const prefix = "parameters"; const beanPrefix = "#bean:"; @@ -49,13 +52,18 @@ interface Props { interface State { selectStatus: Map<string, boolean> showEditor: boolean + showKubernetesSelector: boolean + kubernetesSelectorProperty?: string + ref: any } export class ComponentParameterField extends React.Component<Props, State> { public state: State = { selectStatus: new Map<string, boolean>(), - showEditor: false + showEditor: false, + showKubernetesSelector: false, + ref: React.createRef(), } parametersChanged = (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => { @@ -148,18 +156,61 @@ export class ComponentParameterField extends React.Component<Props, State> { ) } + selectKubernetes = (value: string) => { + // check if there is a selection + const textVal = this.state.ref.current; + const cursorStart = textVal.selectionStart; + const cursorEnd = textVal.selectionEnd; + if (cursorStart !== cursorEnd){ + const prevValue = this.props.value; + const selectedText = prevValue.substring(cursorStart, cursorEnd) + value = prevValue.replace(selectedText, value); + } + const propertyName = this.state.kubernetesSelectorProperty; + if (propertyName) { + if (value.startsWith("config") || value.startsWith("secret")) value = "{{" + value + "}}"; + this.parametersChanged(propertyName, value); + this.setState({showKubernetesSelector: false, kubernetesSelectorProperty: undefined}) + } + } + + openKubernetesSelector = (propertyName: string) => { + this.setState({kubernetesSelectorProperty: propertyName, showKubernetesSelector: true}); + } + + closeKubernetesSelector = () => { + this.setState({showKubernetesSelector: false}) + } + + getKubernetesSelectorModal() { + return ( + <KubernetesSelector + dark={false} + isOpen={this.state.showKubernetesSelector} + onClose={() => this.closeKubernetesSelector()} + onSelect={this.selectKubernetes}/>) + } + getStringInput(property: ComponentProperty, value: any) { const showEditor = this.state.showEditor; + const inKubernetes = KubernetesAPI.inKubernetes; const id = prefix + "-" + property.name; + const noKubeSelectorButton = ["uri", "id", "description", "group"].includes(property.name); return <InputGroup> + {inKubernetes && !showEditor && !noKubeSelectorButton && + <Tooltip position="bottom-end" content="Select from Kubernetes"> + <Button variant="control" onClick={e => this.openKubernetesSelector(property.name)}> + <KubernetesIcon/> + </Button> + </Tooltip>} {(!showEditor || property.secret) && - <TextInput className="text-field" isRequired + <TextInput className="text-field" isRequired ref={this.state.ref} type={property.secret ? "password" : "text"} id={id} name={id} value={value !== undefined ? value : property.defaultValue} onChange={e => this.parametersChanged(property.name, e, property.kind === 'path')}/>} {showEditor && !property.secret && - <TextArea autoResize={true} + <TextArea autoResize={true} ref={this.state.ref} className="text-field" isRequired type="text" id={id} name={id} @@ -261,6 +312,7 @@ export class ComponentParameterField extends React.Component<Props, State> { && this.getSelect(property, value)} {property.type === 'boolean' && this.getSwitch(property, value)} + {this.getKubernetesSelectorModal()} </FormGroup> ) } diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx index ede27fc..cad850e 100644 --- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx @@ -70,6 +70,7 @@ interface State { showEditor: boolean showKubernetesSelector: boolean kubernetesSelectorProperty?: string + ref: any } export class DslPropertyField extends React.Component<Props, State> { @@ -80,6 +81,7 @@ export class DslPropertyField extends React.Component<Props, State> { isShowAdvanced: new Map<string, boolean>(), showEditor: false, showKubernetesSelector: false, + ref: React.createRef(), }; openSelect = (propertyName: string, isExpanded: boolean) => { @@ -151,6 +153,15 @@ export class DslPropertyField extends React.Component<Props, State> { } selectKubernetes = (value: string) => { + // check if there is a selection + const textVal = this.state.ref.current; + const cursorStart = textVal.selectionStart; + const cursorEnd = textVal.selectionEnd; + if (cursorStart !== cursorEnd){ + const prevValue = this.props.value; + const selectedText = prevValue.substring(cursorStart, cursorEnd) + value = prevValue.replace(selectedText, value); + } const propertyName = this.state.kubernetesSelectorProperty; if (propertyName) { if (value.startsWith("config") || value.startsWith("secret")) value = "{{" + value + "}}"; @@ -188,6 +199,7 @@ export class DslPropertyField extends React.Component<Props, State> { </Button> </Tooltip>} {(!showEditor || property.secret) && <TextInput + ref={this.state.ref} className="text-field" isRequired isReadOnly={this.isUriReadOnly(property)} type={['integer', 'number'].includes(property.type) ? 'number' : (property.secret ? "password" : "text")} id={property.name} name={property.name} @@ -195,6 +207,7 @@ export class DslPropertyField extends React.Component<Props, State> { onChange={e => this.propertyChanged(property.name, ['integer', 'number'].includes(property.type) ? Number(e) : e)}/> } {showEditor && !property.secret && <TextArea + ref={this.state.ref} autoResize={true} className="text-field" isRequired isReadOnly={this.isUriReadOnly(property)} type="text" diff --git a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx index 4bee8ce..675ba25 100644 --- a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx +++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx @@ -45,6 +45,7 @@ interface State { showPassword: boolean showKubernetesSelector: boolean kubernetesSelectorProperty?: string + ref: any } export class KameletPropertyField extends React.Component<Props, State> { @@ -54,6 +55,7 @@ export class KameletPropertyField extends React.Component<Props, State> { showEditor: false, showPassword: false, showKubernetesSelector: false, + ref: React.createRef(), } openSelect = () => { @@ -66,6 +68,15 @@ export class KameletPropertyField extends React.Component<Props, State> { } selectKubernetes = (value: string) => { + // check if there is a selection + const textVal = this.state.ref.current; + const cursorStart = textVal.selectionStart; + const cursorEnd = textVal.selectionEnd; + if (cursorStart !== cursorEnd){ + const prevValue = this.props.value; + const selectedText = prevValue.substring(cursorStart, cursorEnd) + value = prevValue.replace(selectedText, value); + } const propertyId = this.state.kubernetesSelectorProperty; if (propertyId){ if (value.startsWith("config") || value.startsWith("secret")) value = "{{" + value + "}}"; @@ -109,6 +120,7 @@ export class KameletPropertyField extends React.Component<Props, State> { </Tooltip>} {(!showEditor || property.format === "password") && <TextInput + ref={this.state.ref} className="text-field" isRequired type={property.format && !showPassword ? "password" : "text"} id={id} name={id} diff --git a/karavan-designer/src/designer/route/property/KubernetesSelector.tsx b/karavan-designer/src/designer/route/property/KubernetesSelector.tsx index 9791af2..a18b6bd 100644 --- a/karavan-designer/src/designer/route/property/KubernetesSelector.tsx +++ b/karavan-designer/src/designer/route/property/KubernetesSelector.tsx @@ -177,15 +177,15 @@ export class KubernetesSelector extends React.Component<Props, State> { <Td noPadding isActionCell> <Badge>S</Badge> </Td> - <Td noPadding> - {serviceName} - </Td> {/*<Td noPadding>*/} - {/* <Button style={{padding: '6px'}} variant={"link"} onClick={*/} - {/* e => this.props.onSelect?.call(this, hostPort)}>*/} - {/* {hostPort}*/} - {/* </Button>*/} + {/* {serviceName}*/} {/*</Td>*/} + <Td noPadding> + <Button style={{padding: '6px'}} variant={"link"} onClick={ + e => this.props.onSelect?.call(this, hostPort)}> + {serviceName} + </Button> + </Td> <Td noPadding> <Button style={{padding: '6px'}} variant={"link"} onClick={ e => this.props.onSelect?.call(this, host)}>