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 f6f77ea88b364b6ba7e479327964e1092b4804fc Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Tue Aug 8 11:58:34 2023 -0400 Sync last designer changes with app and space --- .../src/designer/route/DslConnections.tsx | 7 +- karavan-space/src/designer/route/DslProperties.tsx | 2 +- karavan-space/src/designer/route/DslSelector.tsx | 2 +- karavan-space/src/designer/route/RouteDesigner.tsx | 2 +- .../src/designer/route/RouteDesignerLogic.tsx | 7 +- .../route/property/ComponentParameterField.tsx | 10 +- .../designer/route/property/DslPropertyField.tsx | 2 +- karavan-space/src/designer/utils/CamelUi.tsx | 181 +++++----- karavan-space/src/designer/utils/KaravanIcons.tsx | 376 +++++++++++++++++++++ .../src/knowledgebase/components/ComponentsTab.tsx | 6 +- .../webui/src/designer/route/DslConnections.tsx | 7 +- .../webui/src/designer/route/DslProperties.tsx | 2 +- .../main/webui/src/designer/route/DslSelector.tsx | 2 +- .../webui/src/designer/route/RouteDesigner.tsx | 2 +- .../src/designer/route/RouteDesignerLogic.tsx | 7 +- .../route/property/ComponentParameterField.tsx | 10 +- .../designer/route/property/DslPropertyField.tsx | 2 +- .../src/main/webui/src/designer/utils/CamelUi.tsx | 181 +++++----- .../main/webui/src/designer/utils/KaravanIcons.tsx | 376 +++++++++++++++++++++ .../src/knowledgebase/components/ComponentsTab.tsx | 6 +- 20 files changed, 1006 insertions(+), 184 deletions(-) diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx index 4e4f9f53..5280bc12 100644 --- a/karavan-space/src/designer/route/DslConnections.tsx +++ b/karavan-space/src/designer/route/DslConnections.tsx @@ -60,7 +60,10 @@ export class DslConnections extends React.Component<Props, State> { this.setState(prevState => ({steps: prevState.steps.set(evt.step.uuid, evt)})); } else if (evt.command === "delete") this.setState(prevState => { - // prevState.steps.clear(); + prevState.steps.clear(); + Array.from(prevState.steps.entries()) + .filter(value => value[1]?.parent?.uuid !== evt.step.uuid) + .forEach(value => prevState.steps.set(value[0], value[1])); prevState.steps.delete(evt.step.uuid); return {steps: prevState.steps}; }); @@ -456,7 +459,7 @@ export class DslConnections extends React.Component<Props, State> { {steps.map(pos => this.getArrow(pos))} {this.getIncomings().map(p => this.getIncoming(p))} {this.getOutgoings().map(p => this.getOutgoing(p))} - {this.getInternals().map((p) => this.getInternalLines(p)).flat()} + {/*{this.getInternals().map((p) => this.getInternalLines(p)).flat()}*/} </svg> ) } diff --git a/karavan-space/src/designer/route/DslProperties.tsx b/karavan-space/src/designer/route/DslProperties.tsx index 53ae4bde..435480de 100644 --- a/karavan-space/src/designer/route/DslProperties.tsx +++ b/karavan-space/src/designer/route/DslProperties.tsx @@ -93,7 +93,7 @@ export class DslProperties extends React.Component<Props, State> { parameters[parameter] = value; (clone as any).parameters = parameters; this.setStep(clone); - this.props.onPropertyUpdate?.call(this, clone); + this.props.onPropertyUpdate?.call(this, clone, newRoute); } } diff --git a/karavan-space/src/designer/route/DslSelector.tsx b/karavan-space/src/designer/route/DslSelector.tsx index 64dc73a7..8c6d741a 100644 --- a/karavan-space/src/designer/route/DslSelector.tsx +++ b/karavan-space/src/designer/route/DslSelector.tsx @@ -121,7 +121,7 @@ export class DslSelector extends React.Component<Props, State> { render() { const {parentDsl, isOpen} = this.props; - const title = parentDsl === undefined ? "Select source/from" : "Select step"; + const title = parentDsl === undefined ? "Select source" : "Select step"; const labelText: string = this.state.tabIndex ? this.state.tabIndex.toString() : ""; return ( <Modal diff --git a/karavan-space/src/designer/route/RouteDesigner.tsx b/karavan-space/src/designer/route/RouteDesigner.tsx index e174831d..db2662e0 100644 --- a/karavan-space/src/designer/route/RouteDesigner.tsx +++ b/karavan-space/src/designer/route/RouteDesigner.tsx @@ -146,7 +146,7 @@ export class RouteDesigner extends React.Component<Props, RouteDesignerState> { getPropertiesPanel() { return ( - <DrawerPanelContent onResize={width => this.setState({key: Math.random().toString(1)})} + <DrawerPanelContent onResize={width => this.setState({key: Math.random().toString()})} style={{transform: "initial"}} isResizable hasNoBorder defaultSize={'400px'} maxSize={'800px'} minSize={'300px'}> <DslProperties ref={this.state.ref} diff --git a/karavan-space/src/designer/route/RouteDesignerLogic.tsx b/karavan-space/src/designer/route/RouteDesignerLogic.tsx index 782b4b29..b352a056 100644 --- a/karavan-space/src/designer/route/RouteDesignerLogic.tsx +++ b/karavan-space/src/designer/route/RouteDesignerLogic.tsx @@ -147,7 +147,7 @@ export class RouteDesignerLogic { onPropertyUpdate = debounce((element: CamelElement, newRoute?: RouteToCreate) => { if (newRoute) { let i = CamelDefinitionApiExt.updateIntegrationRouteElement(this.routeDesigner.state.integration, element); - const f = CamelDefinitionApi.createFromDefinition({uri: newRoute.componentName + ":" + newRoute.name}) + const f = CamelDefinitionApi.createFromDefinition({uri: newRoute.componentName, parameters: {name: newRoute.name}}); const r = CamelDefinitionApi.createRouteDefinition({from: f, id: newRoute.name}) i = CamelDefinitionApiExt.addStepToIntegration(i, r, ''); const clone = CamelUtil.cloneIntegration(i); @@ -329,13 +329,14 @@ export class RouteDesignerLogic { const i = CamelDefinitionApiExt.addStepToIntegration(this.routeDesigner.state.integration, step, parentId, position); const clone = CamelUtil.cloneIntegration(i); EventBus.sendPosition("clean", step, undefined, new DOMRect(), new DOMRect(), 0); + const selectedStep = step.dslName === 'RouteDefinition' ? (step as RouteDefinition).from : step; this.routeDesigner.setState(prevState => ({ integration: clone, key: Math.random().toString(), showSelector: false, - selectedStep: step, + selectedStep: selectedStep, propertyOnly: false, - selectedUuids: [step.uuid], + selectedUuids: [selectedStep.uuid], })); } diff --git a/karavan-space/src/designer/route/property/ComponentParameterField.tsx b/karavan-space/src/designer/route/property/ComponentParameterField.tsx index e0a6f99f..2a7996df 100644 --- a/karavan-space/src/designer/route/property/ComponentParameterField.tsx +++ b/karavan-space/src/designer/route/property/ComponentParameterField.tsx @@ -144,7 +144,7 @@ export class ComponentParameterField extends React.Component<Props, State> { } if (uris && uris.length > 0) { selectOptions.push(...uris.map((value: string) => - <SelectOption key={value} value={value.trim()}/>)); + <SelectOption key={value} value={value ? value.trim() : value}/>)); } return <InputGroup id={this.state.id} name={this.state.id}> <Select @@ -169,9 +169,11 @@ export class ComponentParameterField extends React.Component<Props, State> { {selectOptions} </Select> <Tooltip position="bottom-end" content={"Create route"}> - <Button variant="control" onClick={e => { - const newRoute = !internalUris.includes(value.toString()) ? new RouteToCreate(componentName, value.toString()) : undefined; - this.parametersChanged(property.name, value, property.kind === 'path', newRoute); + <Button isDisabled={value === undefined} variant="control" onClick={e => { + if (value) { + const newRoute = !internalUris.includes(value.toString()) ? new RouteToCreate(componentName, value.toString()) : undefined; + this.parametersChanged(property.name, value, property.kind === 'path', newRoute); + } }}> {<PlusIcon/>} </Button> diff --git a/karavan-space/src/designer/route/property/DslPropertyField.tsx b/karavan-space/src/designer/route/property/DslPropertyField.tsx index d17a26c3..63ff380f 100644 --- a/karavan-space/src/designer/route/property/DslPropertyField.tsx +++ b/karavan-space/src/designer/route/property/DslPropertyField.tsx @@ -274,7 +274,7 @@ export class DslPropertyField extends React.Component<Props, State> { value={value?.toString()} onChange={e => this.propertyChanged(property.name, CamelUtil.capitalizeName(e?.replace(/\s/g, '')))}/> <Tooltip position="bottom-end" content={"Create Java Class"}> - <Button variant="control" onClick={e => this.showCode(value, property.javaType)}> + <Button isDisabled={value?.length === 0} variant="control" onClick={e => this.showCode(value, property.javaType)}> <PlusIcon/> </Button> </Tooltip> diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx index 8974019e..9749fe68 100644 --- a/karavan-space/src/designer/utils/CamelUi.tsx +++ b/karavan-space/src/designer/utils/CamelUi.tsx @@ -30,11 +30,12 @@ import { } from "karavan-core/lib/model/CamelDefinition"; import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; import { + ActivemqIcon, AggregateIcon, ApiIcon, AwsIcon, AzureIcon, - BlockchainIcon, + BlockchainIcon, CassandraIcon, ChatIcon, ChoiceIcon, CloudIcon, @@ -158,18 +159,18 @@ export class RouteToCreate { export class CamelUi { - static getSelectorModelTypes = (parentDsl: string | undefined, showSteps: boolean = true, filter:string|undefined = undefined): [string, number][] => { - const navs = CamelUi.getSelectorModelsForParent(parentDsl, showSteps).map(dsl => dsl.navigation.split(",")) + static getSelectorModelTypes = (parentDsl: string | undefined, showSteps: boolean = true, filter: string | undefined = undefined): [string, number][] => { + const navs = CamelUi.getSelectorModelsForParent(parentDsl, showSteps).map(dsl => dsl.navigation.split(",")) .reduce((accumulator, value) => accumulator.concat(value), []) .filter((nav, i, arr) => arr.findIndex(l => l === nav) === i) - .filter((nav, i, arr) => ![ 'dataformat'].includes(nav)); + .filter((nav, i, arr) => !['dataformat'].includes(nav)); const connectorNavs = ['routing', "transformation", "error", "configuration", "endpoint", "kamelet", "component"]; const eipLabels = connectorNavs.filter(n => navs.includes(n)); return eipLabels.map(label => [label, this.getSelectorModelsForParentFiltered(parentDsl, label, true) .filter((dsl: DslMetaModel) => filter === undefined ? true : CamelUi.checkFilter(dsl, filter)).length]); } - static checkFilter = (dsl: DslMetaModel, filter:string|undefined = undefined): boolean => { + static checkFilter = (dsl: DslMetaModel, filter: string | undefined = undefined): boolean => { if (filter !== undefined && filter !== "") { return dsl.title.toLowerCase().includes(filter.toLowerCase()) || dsl.description.toLowerCase().includes(filter.toLowerCase()); @@ -187,14 +188,15 @@ export class CamelUi { return ['GetDefinition', 'PostDefinition', 'PutDefinition', 'PatchDefinition', 'DeleteDefinition', 'HeadDefinition'].map(method => this.getDslMetaModel(method)); } - static getSelectorModelsForParentFiltered = (parentDsl: string | undefined, navigation: string, showSteps: boolean = true): DslMetaModel[] => { - const models = CamelUi.getSelectorModelsForParent(parentDsl, showSteps) + static getSelectorModelsForParentFiltered = (parentDsl: string | undefined, navigation: string, showSteps: boolean = true): DslMetaModel[] => { + const models = CamelUi.getSelectorModelsForParent(parentDsl, showSteps) .filter(dsl => dsl.navigation.includes(navigation)); return models; - } + } + static getSelectorModelsForParent = (parentDsl: string | undefined, showSteps: boolean = true): DslMetaModel[] => { const result: DslMetaModel[] = []; - if (!parentDsl){ + if (!parentDsl) { result.push(...CamelUi.getComponentsDslMetaModel("consumer")); result.push(...CamelUi.getKameletDslMetaModel("source")); } else { @@ -221,7 +223,15 @@ export class CamelUi { static getDslMetaModel = (className: string): DslMetaModel => { const el = CamelMetadataApi.getCamelModelMetadataByClassName(className); - return new DslMetaModel({dsl: className, name: el?.name, title: el?.title, description: el?.description, labels: el?.labels, navigation: el?.labels, type: "DSL"}) + return new DslMetaModel({ + dsl: className, + name: el?.name, + title: el?.title, + description: el?.description, + labels: el?.labels, + navigation: el?.labels, + type: "DSL" + }) } static getComponentsDslMetaModel = (type: 'consumer' | "producer"): DslMetaModel[] => { @@ -281,17 +291,17 @@ export class CamelUi { } static hasDirectUri = (element: CamelElement): boolean => { - return this.hasUriStartWith(element,'direct'); + return this.hasUriStartWith(element, 'direct'); } static hasSedaUri = (element: CamelElement): boolean => { - return this.hasUriStartWith(element,'seda'); + return this.hasUriStartWith(element, 'seda'); } static hasUriStartWith = (element: CamelElement, text: string): boolean => { if ((element as any).uri && typeof (element as any).uri === 'string') { return (element as any).uri.startsWith(text); - } else if (element.dslName === 'SagaDefinition'){ + } else if (element.dslName === 'SagaDefinition') { const completion = (element as SagaDefinition).completion || ''; const compensation = (element as SagaDefinition).compensation || ''; return completion.startsWith(text) || compensation.startsWith(text); @@ -301,7 +311,7 @@ export class CamelUi { } static getInternalRouteUris = (integration: Integration, componentName: string, showComponentName: boolean = true): string[] => { - const result:string[] = []; + const result: string[] = []; integration.spec.flows?.filter(f => f.dslName === 'RouteDefinition') .filter((r: RouteDefinition) => r.from.uri.startsWith(componentName)) .forEach((r: RouteDefinition) => { @@ -334,7 +344,7 @@ export class CamelUi { } else if (element.dslName === 'RouteDefinition') { const routeId = (element as RouteDefinition).id return routeId ? routeId : CamelUtil.capitalizeName((element as any).stepName); - } else if ((element as any).uri && element.dslName === 'ToDefinition') { + } else if ((element as any).uri && (['ToDefinition', 'FromDefinition'].includes(element.dslName))) { const uri = (element as any).uri return ComponentApi.getComponentTitleFromUri(uri) || ''; } else { @@ -347,7 +357,7 @@ export class CamelUi { const kamelet: KameletModel | undefined = CamelUtil.getKamelet(element); if (kamelet) { return kamelet.spec.definition.description; - } else if ((element as any).uri && element.dslName === 'ToDefinition') { + } else if ((element as any).uri && (['ToDefinition', 'FromDefinition'].includes(element.dslName))) { const uri = (element as any).uri return ComponentApi.getComponentDescriptionFromUri(uri) || ''; } else { @@ -372,7 +382,7 @@ export class CamelUi { } static isShowExpressionTooltip = (element: CamelElement): boolean => { - if (element.hasOwnProperty("expression")){ + if (element.hasOwnProperty("expression")) { const exp = CamelDefinitionApiExt.getExpressionValue((element as any).expression); return (exp !== undefined && (exp as any)?.expression?.trim().length > 0); } @@ -381,7 +391,7 @@ export class CamelUi { static isShowUriTooltip = (element: CamelElement): boolean => { const uri: string = (element as any).uri; - if (uri !== undefined && !uri.startsWith("kamelet")){ + if (uri !== undefined && !uri.startsWith("kamelet")) { return ComponentApi.getComponentNameFromUri(uri) !== uri; } return false; @@ -508,7 +518,7 @@ export class CamelUi { return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+d2FybmluZzwvdGl0bGU+PHBhdGggZD0iTTE2LDJBMTQsMTQsMCwxLDAsMzAsMTYsMTQsMTQsMCwwLDAsMTYsMlptMCwyNkExMiwxMiwwLDEsMSwyOCwxNiwxMiwxMiwwLDAsMSwxNiwyOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cmVjdCB4PSIxNSIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMTEiLz48cG [...] case "ScriptDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2cHgiIGhlaWdodD0iMjU2cHgiIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBpZD0iRmxhdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNDMuMTc1MjksMTI4YTI5Ljc4NTIsMjkuNzg1MiwwLDAsMSw4LjAyMywxMC4yNTk3N0M1NiwxNDguMTYzMDksNTYsMTYwLjI4MTI1LDU2LDE3MmMwLDI0LjMxMzQ4LDEuMDE5NTMsMzYsMjQsMzZhOCw4LDAsMCwxLDAsMTZjLTE3LjQ4MTQ1LDAtMjkuMzI0MjItNi4xNDM1NS0zNS4xOTgyNC0xOC4yNTk3N0M0MCwxOTUuODM2OTEsNDAsMTgzLjcxODc1LDQwLDE3MmMwLTI0LjMxMzQ4LT [...] - case "PausableDefinition": + case "PausableDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGF1c2UtLWZpbGxlZDwvdGl0bGU+PHBhdGggZD0iTTEyLDZIMTBBMiwyLDAsMCwwLDgsOFYyNGEyLDIsMCwwLDAsMiwyaDJhMiwyLDAsMCwwLDItMlY4YTIsMiwwLDAsMC0yLTJaIi8+PHBhdGggZD0iTTIyLDZIMjBhMiwyLDAsMCwwLTIsMlYyNGEyLDIsMCwwLDAsMiwyaDJhMiwyLDAsMCwwLDItMlY4YTIsMiwwLDAsMC [...] case "StopDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c3RvcC0tZmlsbGVkPC90aXRsZT48cGF0aCBkPSJNMjQsNkg4QTIsMiwwLDAsMCw2LDhWMjRhMiwyLDAsMCwwLDIsMkgyNGEyLDIsMCwwLDAsMi0yVjhhMiwyLDAsMCwwLTItMloiLz48cmVjdCBpZD0iX1RyYW5zcGFyZW50X1JlY3RhbmdsZV8iIGRhdGEtbmFtZT0iJmx0O1RyYW5zcGFyZW50IFJlY3RhbmdsZSZndDsiIG [...] @@ -529,20 +539,20 @@ export class CamelUi { } } - static getIconForDsl = (dsl: DslMetaModel):JSX.Element => { + static getIconForDsl = (dsl: DslMetaModel): JSX.Element => { if (dsl.dsl && (dsl.dsl === "KameletDefinition" || dsl.navigation === 'kamelet')) { return this.getIconFromSource(CamelUi.getKameletIconByName(dsl.name)); } else if ((dsl.dsl && dsl.dsl === "FromDefinition") && dsl.uri?.startsWith("kamelet")) { return this.getIconFromSource(CamelUi.getKameletIconByUri(dsl.uri)); - } else if (dsl.navigation === 'component' ){ + } else if (dsl.navigation === 'component') { return CamelUi.getIconForComponent(dsl.title, dsl.labels); } else { return CamelUi.getIconForDslName(dsl.dsl); } } - static getIconForComponent = (title: string, label: string):JSX.Element => { + static getIconForComponent = (title: string, label: string): JSX.Element => { const labels = label.split(","); if (title === "Ref") { return RefIcon(); @@ -554,7 +564,7 @@ export class CamelUi { return GoogleCloudIcon(); } else if (title.startsWith("Spring")) { return SpringIcon(); - } else if (title.startsWith("Kubernetes")) { + } else if (title.startsWith("Kubernetes") || title.startsWith("Knative")) { return KubernetesIcon(); } else if (title.startsWith("SAP")) { return SapIcon(); @@ -576,90 +586,94 @@ export class CamelUi { return IgniteIcon(); } else if (title.startsWith("Kafka")) { return KafkaIcon(); + } else if (title.startsWith("ActiveMQ")) { + return ActivemqIcon(); } else if (title.startsWith("GitHub")) { return GithubIcon(); } else if (title.startsWith("Git")) { return GitIcon(); + } else if (title.startsWith("Cassandra")) { + return CassandraIcon(); } else if (title.startsWith("Hazelcast")) { return HazelcastIcon(); } else if (title.startsWith("FHIR") || title.startsWith("MLLP")) { return HealthIcon(); } else if (labels.includes('transformation')) { return TransformationIcon(); - } else if (labels.includes("validation")){ + } else if (labels.includes("validation")) { return ValidationIcon(); - } else if (labels.includes("scheduling")){ + } else if (labels.includes("scheduling")) { return SchedulingIcon(); - } else if (labels.includes("database")){ + } else if (labels.includes("database")) { return DatabaseIcon(); - } else if (labels.includes("cloud")){ + } else if (labels.includes("cloud")) { return CloudIcon(); - } else if (labels.includes("chat")){ + } else if (labels.includes("chat")) { return ChatIcon(); - } else if (labels.includes("messaging")){ + } else if (labels.includes("messaging")) { return MessagingIcon(); - } else if (labels.includes("script")){ + } else if (labels.includes("script")) { return ScriptIcon(); - } else if (labels.includes("file")){ + } else if (labels.includes("file")) { return FileIcon(); - } else if (labels.includes("monitoring")){ + } else if (labels.includes("monitoring")) { return MonitoringIcon(); - } else if (labels.includes("iot")){ + } else if (labels.includes("iot")) { return IotIcon(); - } else if (labels.includes("mail")){ + } else if (labels.includes("mail")) { return MailIcon(); - } else if (labels.includes("http")){ + } else if (labels.includes("http")) { return HttpIcon(); - } else if (labels.includes("document")){ + } else if (labels.includes("document")) { return DocumentIcon(); - } else if (labels.includes("social")){ + } else if (labels.includes("social")) { return SocialIcon(); - } else if (labels.includes("networking")){ + } else if (labels.includes("networking")) { return NetworkingIcon(); - } else if (labels.includes("api")){ + } else if (labels.includes("api")) { return ApiIcon(); - } else if (labels.includes("testing")){ + } else if (labels.includes("testing")) { return TestingIcon(); - } else if (labels.includes("clustering")){ + } else if (labels.includes("clustering")) { return ClusterIcon(); - } else if (labels.includes("mobile")){ + } else if (labels.includes("mobile")) { return MobileIcon(); - } else if (labels.includes("workflow")){ + } else if (labels.includes("workflow")) { return WorkflowIcon(); - } else if (labels.includes("webservice") || labels.includes("rest")){ + } else if (labels.includes("webservice") || labels.includes("rest")) { return WebserviceIcon(); - } else if (labels.includes("search")){ + } else if (labels.includes("search")) { return SearchIcon(); - } else if (labels.includes("blockchain")){ + } else if (labels.includes("blockchain")) { return BlockchainIcon(); - } else if (labels.includes("ai")){ + } else if (labels.includes("ai")) { return MachineLearningIcon(); - } else if (labels.includes("rpc")){ + } else if (labels.includes("rpc")) { return RpcIcon(); } else { return this.getIconFromSource(camelIcon); } } - static isElementInternalComponent = (element: CamelElement):boolean => { + static isElementInternalComponent = (element: CamelElement): boolean => { const uri = (element as any).uri; const component = ComponentApi.findByName(uri); return component !== undefined && CamelUi.isComponentInternal(component.component.label); } - static isComponentInternal = (label: string):boolean => { + static isComponentInternal = (label: string): boolean => { const labels = label.split(","); if (labels.includes('core') && ( - labels.includes('transformation') - || labels.includes('testing') - || labels.includes('scheduling') - || labels.includes('monitoring') - || labels.includes('transformation') - || labels.includes('java') - || labels.includes('endpoint') - || labels.includes('script') - || labels.includes('validation') - )) { + labels.includes('transformation') + || labels.includes('testing') + || labels.includes('scheduling') + || labels.includes('monitoring') + || labels.includes('transformation') + || labels.includes('java') + || labels.includes('endpoint') + || labels.includes('script') + || labels.includes('validation') + )) { return true; } else if (label === 'transformation') { return true; @@ -667,7 +681,7 @@ export class CamelUi { return false; } - static getIconForElement = (element: CamelElement):JSX.Element => { + static getIconForElement = (element: CamelElement): JSX.Element => { const uri = (element as any).uri; const component = ComponentApi.findByName(uri); const k: KameletModel | undefined = CamelUtil.getKamelet(element); @@ -683,34 +697,45 @@ export class CamelUi { return this.getIconForDslName(element.dslName); } } - static getIconForDslName = (dslName: string):JSX.Element => { + static getIconForDslName = (dslName: string): JSX.Element => { switch (dslName) { - case 'AggregateDefinition': return <AggregateIcon/>; - case 'ChoiceDefinition' :return <ChoiceIcon/>; - case 'SplitDefinition' :return <SplitIcon/>; - case 'SagaDefinition' :return <SagaIcon/>; - case 'FilterDefinition' :return <FilterIcon/>; - case 'SortDefinition' :return <SortIcon/>; - case 'OnCompletionDefinition' :return <OnCompletion/>; - case 'InterceptDefinition' :return <Intercept/>; - case 'InterceptFromDefinition' :return <InterceptFrom/>; - case 'InterceptSendToEndpointDefinition' :return <InterceptSendToEndpoint/>; - default: return this.getIconFromSource(CamelUi.getIconSrcForName(dslName)) + case 'AggregateDefinition': + return <AggregateIcon/>; + case 'ChoiceDefinition' : + return <ChoiceIcon/>; + case 'SplitDefinition' : + return <SplitIcon/>; + case 'SagaDefinition' : + return <SagaIcon/>; + case 'FilterDefinition' : + return <FilterIcon/>; + case 'SortDefinition' : + return <SortIcon/>; + case 'OnCompletionDefinition' : + return <OnCompletion/>; + case 'InterceptDefinition' : + return <Intercept/>; + case 'InterceptFromDefinition' : + return <InterceptFrom/>; + case 'InterceptSendToEndpointDefinition' : + return <InterceptSendToEndpoint/>; + default: + return this.getIconFromSource(CamelUi.getIconSrcForName(dslName)) } } - static getIconFromSource = (src: string):JSX.Element => { + static getIconFromSource = (src: string): JSX.Element => { return <img draggable={false} src={src} className="icon" alt="icon"/> } - static getConnectionIcon = (element: CamelElement): JSX.Element => { + static getConnectionIcon = (element: CamelElement): JSX.Element => { const k: KameletModel | undefined = CamelUtil.getKamelet(element); const uri = (element as any).uri; const component = ComponentApi.findByName(uri); if (component) { return CamelUi.getIconForComponent(component.component.title, component.component.label); - } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) { - const icon = k ? k.icon() : externalIcon; + } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) { + const icon = k ? k.icon() : externalIcon; return <img src={icon} className="icon"/> } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) { const icon = k ? k.icon() : CamelUi.getIconSrcForName(element.dslName); @@ -737,7 +762,7 @@ export class CamelUi { result.set('rest', i.spec.flows?.filter((e: any) => e.dslName === 'RestDefinition').length || 0); result.set('routeConfiguration', i.spec.flows?.filter((e: any) => e.dslName === 'RouteConfigurationDefinition').length || 0); const beans = i.spec.flows?.filter((e: any) => e.dslName === 'Beans'); - if (beans && beans.length > 0 && beans[0].beans && beans[0].beans.length > 0){ + if (beans && beans.length > 0 && beans[0].beans && beans[0].beans.length > 0) { result.set('beans', Array.from(beans[0].beans).length); } return result; diff --git a/karavan-space/src/designer/utils/KaravanIcons.tsx b/karavan-space/src/designer/utils/KaravanIcons.tsx index 0e9b6d82..b7228640 100644 --- a/karavan-space/src/designer/utils/KaravanIcons.tsx +++ b/karavan-space/src/designer/utils/KaravanIcons.tsx @@ -936,6 +936,382 @@ export function GithubIcon() { <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...] </svg> ); +}export function CassandraIcon() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + width={113.636} + height={58.899} + viewBox="0 0 113.63554 58.899029" + className="icon"> + <defs> + <path id="a" d="M24.216.082v24.141H.053V.082z" /> + </defs> + <g + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "none", + strokeWidth: 1, + }} + > + <path + fill="#bbe6fb" + d="M90.565 20.787C91.4 30.202 76.112 39.163 56.422 40.8c-19.69 1.638-36.329-4.669-37.162-14.083C18.426 17.3 33.713 8.34 53.404 6.702c19.69-1.636 36.329 4.669 37.161 14.085" + /> + <path + fill="#fff" + d="M53.334 6.75c-4.16-.255-11.326 1.915-17.302 4.08a17.762 17.762 0 0 0-1.413 6.948c0 10.096 9.154 18.28 18.837 18.28 9.62 0 18.13-8.197 18.836-18.28.23-3.283-.9-6.377-2.47-9.044-6.196-1.091-12.771-1.758-16.488-1.984" + /> + <image + xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUwAAADqCAYAAADJXHwYAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABTKADAAQAAAABAAAA6gAAAAAGjBs3AAAWs0lEQVR4Ae2d+dPctAGG+SABQkI5AyFQ7hZaekA7nbbT0v7J/bkz7bRQGGDKGaCcIRAg5CBAIBchJH3fjfxh79q78q4P2X40o3hty7b02N8T2ZLlrasIEGiIwOXLl7e0qxtCvF7Ta0K8Ovc7W1Y2XZbO6y4pXlT8Pkzzv7Nl2bTuuotbW1uXtV8CBCoJ+AInQCCKgIR4rRJaiLvDNP/by3YpDvmamhdyJt9sWiZhL3P8NsTzYXoBAYvEyMKQL+6RnYp+i5O [...] + width={43.164} + height={31.532} + x={31.672} + y={6.587} + opacity={0.596} + /> + <path + fill="#373535" + d="M42.663 16.453c.51-1.13 1.282-1.683 2.031-2.63-.083-.224-.265-.958-.265-1.212 0-1.128.928-2.056 2.056-2.056.26 0 .517.05.758.146a14.985 14.985 0 0 1 13.597-2.39c-4.45-.617-9.466.96-12.878 3.713.104.246.393.949.393 1.232 0 1.135-.735 1.411-1.87 1.411-.258 0-.504-.05-.732-.136-.771 1.035-1.715 3.006-2.178 4.239 1.887 1.687 3.592 2.299 5.813 3.13-.006-.106.076-.205.076-.312 0-3.424 3.014-6.206 6.438-6.206a6.195 6.195 0 0 1 6.105 5.158c1.53-.974 3.01-1.72 4.139-3.164-. [...] + /> + <path + fill="#373535" + d="M68.25 14.909c.303.265.555.58.748.932.502.9-.503 1.724-1.533 1.724a1.846 1.846 0 0 1-.306-.031c-1.161 1.814-3.194 4.14-5 5.311 2.769.454 5.38 1.563 7.46 3.277 1.513-2.711 2.673-6.627 2.673-9.953 0-2.532-1.117-4.387-2.804-5.748-.089 1.356-.813 3.252-1.236 4.488M45.77 32.084c.922-2.549 3.192-4.524 5.34-6.26-.315-.43-.786-1.496-.982-2a15.027 15.027 0 0 1-6.733-4.261l-.044.17a13.62 13.62 0 0 0-.232 4.52 2.709 2.709 0 0 1 2.203 2.654c0 .783-.687 1.92-1.22 2.414.58 1.25. [...] + /> + <path + fill="#373535" + d="M45.607 34.222c-1.1-1.094-1.862-3.277-2.576-4.648a2.707 2.707 0 0 1-.41.035c-1.494 0-3.058-1.253-2.704-2.702.196-.803.75-1.327 1.652-1.765-.206-1.662-.261-4.051.124-5.78.111-.494.345-.726.5-1.196-1.647-2.41-2.711-5.574-2.711-8.713 0-.115.005-.228.008-.342-2.783 1.396-4.87 3.595-4.87 7.058 0 7.659 4.41 15.171 10.973 18.116l.014-.062m16.138-10.588a6.196 6.196 0 0 1-5.843 4.145 6.167 6.167 0 0 1-3.826-1.327c-2.173 1.692-4.143 4.664-5.145 7.242.45.484.763.882 1.267 1.3 [...] + /> + <path + fill="#1287b1" + d="M42.493 17.348a14.975 14.975 0 0 1 1.898-3.122 2.057 2.057 0 0 1-.132-.72c0-1.127.929-2.056 2.056-2.056.26 0 .517.05.758.147A14.985 14.985 0 0 1 59.46 8.879c.407.093.811.202 1.21.328-4.45-.617-9.048.747-12.46 3.5.107.253.162.525.162.799a2.066 2.066 0 0 1-2.056 2.056 2.05 2.05 0 0 1-.733-.136 13.841 13.841 0 0 0-1.863 3.412c1.62 1.746 3.61 3.127 5.83 3.957-.005-.106-.016-.21-.016-.319a6.195 6.195 0 0 1 12.303-1.04 16.065 16.065 0 0 0 4.019-3.669 1.843 1.843 0 0 1-.4 [...] + /> + <path + fill="#1287b1" + d="M68.54 15.214c.394.35.62.852.622 1.38a1.876 1.876 0 0 1-1.866 1.866 1.85 1.85 0 0 1-.307-.032 15.102 15.102 0 0 1-4.506 4.533 15.09 15.09 0 0 1 7.261 3.263 18.739 18.739 0 0 0 2.379-9.16c0-2.532-1.118-4.387-2.805-5.748a15.01 15.01 0 0 1-.778 3.898M46.054 32.696a15.04 15.04 0 0 1 4.674-6.572 6.186 6.186 0 0 1-.77-1.406 15.025 15.025 0 0 1-6.733-4.26c-.013.057-.03.113-.043.17a13.593 13.593 0 0 0-.232 4.52 2.71 2.71 0 0 1 2.203 2.653c0 .754-.316 1.473-.87 1.984a16.22 [...] + /> + <path + fill="#1287b1" + d="M45.6 34.192a15.07 15.07 0 0 1-2.739-3.722 2.704 2.704 0 0 1-.41.034h-.004c-1.482 0-2.7-1.219-2.7-2.7 0-1.035.594-1.983 1.526-2.432-.273-2.209-.05-4.45.651-6.561a14.95 14.95 0 0 1-2.612-8.463c0-.115.006-.228.008-.341-2.783 1.395-4.87 3.595-4.87 7.057 0 7.659 4.573 14.245 11.136 17.19l.014-.062m15.976-9.661a6.198 6.198 0 0 1-5.843 4.144 6.17 6.17 0 0 1-3.826-1.327c-2.173 1.692-3.813 3.998-4.814 6.577.45.484.929.941 1.433 1.369 1.555.404 3.154.608 4.76.607 6.617 0 12 [...] + /> + <g transform="translate(43.304 10.642)"> + <mask id="b" fill="#fff"> + <use xlinkHref="#a" /> + </mask> + <path + fill="#fff" + d="M14.783 6.242 14.704.147l-2.251 5.43L10.576.081l.101 6.472L7.433.753l1.755 6.16-5.262-3.827 4.122 5.18-6.533-2.403 5.156 3.815-6.612.203 6.76 1.745L.053 13.09l6.68.484L1.1 17.18l5.8-2.103-4.024 5.097 5.085-4.101-1.832 6.838 3.926-5.565-.55 6.573 2.228-5.958 1.897 6.262.461-6.281 2.815 5.36-1.663-6.131 5.155 3.993-3.328-5.091 5.656 2.203-4.325-4.25 5.8.456-5.712-2.192 5.727-1.366-5.748-.293 4.678-3.575-5.309 1.903 3.608-5-4.983 3.312 1.743-5.852z" + mask="url(#b)" + /> + </g> + <image + xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAx4AAADpCAYAAACqReECAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAADHqADAAQAAAABAAAA6QAAAADa02YqAABAAElEQVR4Ae292XcT19ruq6qS5B4bm76zMQYSDAZ34AYSyPedMc4a5+Jc5a/M7R5f9l5NFknArYwNiUnnhU2T0BuDbdlqStrPKyQjy2qqpKpSSXpqDLBUzWx+s1Q13/l2Hg83EiABEiABEiABEqhRAn19fU1ff/21VqPdZ7dJgARIgARIgARIgARIgATsJjA4ONg4MjLSZXc9LJ8ESIAESIAESIAESIAESMABAjdv3vSiGsWBqgxX0dvb67969eoNXKAavog [...] + width={111.814} + height={32.542} + x={1.822} + y={1.682} + opacity={0.487} + /> + <path + fill="#373535" + d="M46.372 6.794c1.704-.331 2.026-4.053 2.026-4.053s.238 2.743 1.43 3.1c1.193.357 2.742-4.291 2.742-4.291s-1.43 4.172 0 4.41c1.43.238 4.053-4.053 4.053-4.053s-1.072 3.695-.358 3.933c.715.239 4.291-5.364 4.291-5.364s-2.145 3.695-.119 4.053c2.027.358 4.984-2.521 4.984-2.521s-2.325 2.634-1.289 2.998c4.412 1.55 7.98-4.183 7.98-4.183s-.827 2.514-2.972 5.256C73.788 7.27 77.24.267 77.24.267L73.788 7.27C75.576 8.224 82.728 0 82.728 0s-3.694 6.436-5.84 7.747c1.192.954 5.483-2. [...] + /> + <path + fill="#373535" + d="M0 34.76c9.388 4.71 17.97-.714 28.788 2.334 8.224 2.318 18.239 5.176 31.828 3.209 13.589-1.967 25.21-7.867 30.755-18.416 1.728-4.709 8.76 1.072 8.76 1.072s-5.125-2.145-5.006-1.132c.12 1.013 7.689 4.53 7.689 4.53s-6.855-2.146-6.437-.536c.417 1.608 8.583 8.045 8.583 8.045s-9.239-7.033-10.013-6.079c-.775.953 3.933 4.828 3.933 4.828s-7.808-4.828-10.55-3.405c-1.972 1.024 8.106 7.637 8.106 7.637S89.88 31.84 88.33 33.15c-1.55 1.312 7.391 12.04 7.391 12.04S85.588 34.223 84 [...] + /> + </g> + </svg> + ); +} +export function ActivemqIcon() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={116.42} + height={167.526} + viewBox="0 0 30.803 44.324" + className="icon"> + <defs> + <filter + id="a" + width={1.068} + height={1.046} + x={-0.017} + y={-0.011} + > + <feFlood floodColor="#000" floodOpacity={0.498} result="flood" /> + <feComposite + in="flood" + in2="SourceGraphic" + operator="in" + result="composite1" + /> + <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2} /> + <feOffset dx={1} dy={1} result="offset" /> + <feComposite in="SourceGraphic" in2="offset" result="composite2" /> + </filter> + </defs> + <g + style={{ + display: "inline", + }} + > + <g + style={{ + filter: "url(#a)", + }} + transform="translate(-39.667 -110.707)" + > + <path + d="m64.697 153.552-8.352-.05-4.133-7.257 4.218-7.208 8.352.049 4.134 7.257z" + style={{ + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m52.632 146.553-8.352-.049-4.133-7.257 4.218-7.209 8.352.05 4.134 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m64.771 139.589-8.352-.05-4.133-7.257 4.218-7.208 8.352.05 4.134 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m64.765 125.702-8.351-.049-4.134-7.257 4.219-7.209 8.352.05 4.133 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m52.696 132.676-8.352-.049-4.133-7.257 4.218-7.209 8.352.05 4.133 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + </g> + </g> + <g + style={{ + display: "inline", + }} + transform="translate(-39.667 -110.707)" + > + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#c12766", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.031 63.796)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#3e489f", + fillOpacity: 1, + stroke: "none", + strokeWidth: 15, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -71.17 70.76)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#714099", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.106 77.758)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#78932c", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -71.106 56.883)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#cf242a", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.037 49.91)" + /> + <circle + cx={60.564} + cy={146.294} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m61.748 117.71-14.267 8.174M48.514 124.197l.048 16.442M47.525 138.715l14.136 8.397M60.59 117.133l.048 16.442" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.523753, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m60.657 131.093.048 16.442" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.5238, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m61.766 131.708-14.267 8.174M47.564 124.84l14.136 8.398" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.523753, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={48.334} + cy={139.242} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={60.901} + cy={132.486} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={48.563} + cy={125.419} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={60.632} + cy={118.445} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + </g> + </svg> + ); } export function KafkaIcon() { return ( diff --git a/karavan-space/src/knowledgebase/components/ComponentsTab.tsx b/karavan-space/src/knowledgebase/components/ComponentsTab.tsx index 171efc5c..c2a75b7a 100644 --- a/karavan-space/src/knowledgebase/components/ComponentsTab.tsx +++ b/karavan-space/src/knowledgebase/components/ComponentsTab.tsx @@ -59,7 +59,11 @@ export class ComponentsTab extends React.Component<Props, State> { render() { const component = this.state.component; const {filter} = this.props; - const components = ComponentApi.getComponents().filter(c => c.component.name.toLowerCase().includes(filter.toLowerCase())); + const components = ComponentApi.getComponents().filter(c => { + return c.component.name.toLowerCase().includes(filter.toLowerCase()) + || c.component.title.toLowerCase().includes(filter.toLowerCase()) + || c.component.description.toLowerCase().includes(filter.toLowerCase()) + }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ; return ( <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section"> <ComponentModal key={component?.component.name + this.state.isModalOpen.toString()} diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx index 4e4f9f53..5280bc12 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx @@ -60,7 +60,10 @@ export class DslConnections extends React.Component<Props, State> { this.setState(prevState => ({steps: prevState.steps.set(evt.step.uuid, evt)})); } else if (evt.command === "delete") this.setState(prevState => { - // prevState.steps.clear(); + prevState.steps.clear(); + Array.from(prevState.steps.entries()) + .filter(value => value[1]?.parent?.uuid !== evt.step.uuid) + .forEach(value => prevState.steps.set(value[0], value[1])); prevState.steps.delete(evt.step.uuid); return {steps: prevState.steps}; }); @@ -456,7 +459,7 @@ export class DslConnections extends React.Component<Props, State> { {steps.map(pos => this.getArrow(pos))} {this.getIncomings().map(p => this.getIncoming(p))} {this.getOutgoings().map(p => this.getOutgoing(p))} - {this.getInternals().map((p) => this.getInternalLines(p)).flat()} + {/*{this.getInternals().map((p) => this.getInternalLines(p)).flat()}*/} </svg> ) } diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx index 53ae4bde..435480de 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx @@ -93,7 +93,7 @@ export class DslProperties extends React.Component<Props, State> { parameters[parameter] = value; (clone as any).parameters = parameters; this.setStep(clone); - this.props.onPropertyUpdate?.call(this, clone); + this.props.onPropertyUpdate?.call(this, clone, newRoute); } } diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx index 64dc73a7..8c6d741a 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx @@ -121,7 +121,7 @@ export class DslSelector extends React.Component<Props, State> { render() { const {parentDsl, isOpen} = this.props; - const title = parentDsl === undefined ? "Select source/from" : "Select step"; + const title = parentDsl === undefined ? "Select source" : "Select step"; const labelText: string = this.state.tabIndex ? this.state.tabIndex.toString() : ""; return ( <Modal diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx index e174831d..db2662e0 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx @@ -146,7 +146,7 @@ export class RouteDesigner extends React.Component<Props, RouteDesignerState> { getPropertiesPanel() { return ( - <DrawerPanelContent onResize={width => this.setState({key: Math.random().toString(1)})} + <DrawerPanelContent onResize={width => this.setState({key: Math.random().toString()})} style={{transform: "initial"}} isResizable hasNoBorder defaultSize={'400px'} maxSize={'800px'} minSize={'300px'}> <DslProperties ref={this.state.ref} diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesignerLogic.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesignerLogic.tsx index 782b4b29..b352a056 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesignerLogic.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesignerLogic.tsx @@ -147,7 +147,7 @@ export class RouteDesignerLogic { onPropertyUpdate = debounce((element: CamelElement, newRoute?: RouteToCreate) => { if (newRoute) { let i = CamelDefinitionApiExt.updateIntegrationRouteElement(this.routeDesigner.state.integration, element); - const f = CamelDefinitionApi.createFromDefinition({uri: newRoute.componentName + ":" + newRoute.name}) + const f = CamelDefinitionApi.createFromDefinition({uri: newRoute.componentName, parameters: {name: newRoute.name}}); const r = CamelDefinitionApi.createRouteDefinition({from: f, id: newRoute.name}) i = CamelDefinitionApiExt.addStepToIntegration(i, r, ''); const clone = CamelUtil.cloneIntegration(i); @@ -329,13 +329,14 @@ export class RouteDesignerLogic { const i = CamelDefinitionApiExt.addStepToIntegration(this.routeDesigner.state.integration, step, parentId, position); const clone = CamelUtil.cloneIntegration(i); EventBus.sendPosition("clean", step, undefined, new DOMRect(), new DOMRect(), 0); + const selectedStep = step.dslName === 'RouteDefinition' ? (step as RouteDefinition).from : step; this.routeDesigner.setState(prevState => ({ integration: clone, key: Math.random().toString(), showSelector: false, - selectedStep: step, + selectedStep: selectedStep, propertyOnly: false, - selectedUuids: [step.uuid], + selectedUuids: [selectedStep.uuid], })); } diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx index e0a6f99f..2a7996df 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx @@ -144,7 +144,7 @@ export class ComponentParameterField extends React.Component<Props, State> { } if (uris && uris.length > 0) { selectOptions.push(...uris.map((value: string) => - <SelectOption key={value} value={value.trim()}/>)); + <SelectOption key={value} value={value ? value.trim() : value}/>)); } return <InputGroup id={this.state.id} name={this.state.id}> <Select @@ -169,9 +169,11 @@ export class ComponentParameterField extends React.Component<Props, State> { {selectOptions} </Select> <Tooltip position="bottom-end" content={"Create route"}> - <Button variant="control" onClick={e => { - const newRoute = !internalUris.includes(value.toString()) ? new RouteToCreate(componentName, value.toString()) : undefined; - this.parametersChanged(property.name, value, property.kind === 'path', newRoute); + <Button isDisabled={value === undefined} variant="control" onClick={e => { + if (value) { + const newRoute = !internalUris.includes(value.toString()) ? new RouteToCreate(componentName, value.toString()) : undefined; + this.parametersChanged(property.name, value, property.kind === 'path', newRoute); + } }}> {<PlusIcon/>} </Button> diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx index d17a26c3..63ff380f 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx @@ -274,7 +274,7 @@ export class DslPropertyField extends React.Component<Props, State> { value={value?.toString()} onChange={e => this.propertyChanged(property.name, CamelUtil.capitalizeName(e?.replace(/\s/g, '')))}/> <Tooltip position="bottom-end" content={"Create Java Class"}> - <Button variant="control" onClick={e => this.showCode(value, property.javaType)}> + <Button isDisabled={value?.length === 0} variant="control" onClick={e => this.showCode(value, property.javaType)}> <PlusIcon/> </Button> </Tooltip> diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx index 8974019e..9749fe68 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx @@ -30,11 +30,12 @@ import { } from "karavan-core/lib/model/CamelDefinition"; import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; import { + ActivemqIcon, AggregateIcon, ApiIcon, AwsIcon, AzureIcon, - BlockchainIcon, + BlockchainIcon, CassandraIcon, ChatIcon, ChoiceIcon, CloudIcon, @@ -158,18 +159,18 @@ export class RouteToCreate { export class CamelUi { - static getSelectorModelTypes = (parentDsl: string | undefined, showSteps: boolean = true, filter:string|undefined = undefined): [string, number][] => { - const navs = CamelUi.getSelectorModelsForParent(parentDsl, showSteps).map(dsl => dsl.navigation.split(",")) + static getSelectorModelTypes = (parentDsl: string | undefined, showSteps: boolean = true, filter: string | undefined = undefined): [string, number][] => { + const navs = CamelUi.getSelectorModelsForParent(parentDsl, showSteps).map(dsl => dsl.navigation.split(",")) .reduce((accumulator, value) => accumulator.concat(value), []) .filter((nav, i, arr) => arr.findIndex(l => l === nav) === i) - .filter((nav, i, arr) => ![ 'dataformat'].includes(nav)); + .filter((nav, i, arr) => !['dataformat'].includes(nav)); const connectorNavs = ['routing', "transformation", "error", "configuration", "endpoint", "kamelet", "component"]; const eipLabels = connectorNavs.filter(n => navs.includes(n)); return eipLabels.map(label => [label, this.getSelectorModelsForParentFiltered(parentDsl, label, true) .filter((dsl: DslMetaModel) => filter === undefined ? true : CamelUi.checkFilter(dsl, filter)).length]); } - static checkFilter = (dsl: DslMetaModel, filter:string|undefined = undefined): boolean => { + static checkFilter = (dsl: DslMetaModel, filter: string | undefined = undefined): boolean => { if (filter !== undefined && filter !== "") { return dsl.title.toLowerCase().includes(filter.toLowerCase()) || dsl.description.toLowerCase().includes(filter.toLowerCase()); @@ -187,14 +188,15 @@ export class CamelUi { return ['GetDefinition', 'PostDefinition', 'PutDefinition', 'PatchDefinition', 'DeleteDefinition', 'HeadDefinition'].map(method => this.getDslMetaModel(method)); } - static getSelectorModelsForParentFiltered = (parentDsl: string | undefined, navigation: string, showSteps: boolean = true): DslMetaModel[] => { - const models = CamelUi.getSelectorModelsForParent(parentDsl, showSteps) + static getSelectorModelsForParentFiltered = (parentDsl: string | undefined, navigation: string, showSteps: boolean = true): DslMetaModel[] => { + const models = CamelUi.getSelectorModelsForParent(parentDsl, showSteps) .filter(dsl => dsl.navigation.includes(navigation)); return models; - } + } + static getSelectorModelsForParent = (parentDsl: string | undefined, showSteps: boolean = true): DslMetaModel[] => { const result: DslMetaModel[] = []; - if (!parentDsl){ + if (!parentDsl) { result.push(...CamelUi.getComponentsDslMetaModel("consumer")); result.push(...CamelUi.getKameletDslMetaModel("source")); } else { @@ -221,7 +223,15 @@ export class CamelUi { static getDslMetaModel = (className: string): DslMetaModel => { const el = CamelMetadataApi.getCamelModelMetadataByClassName(className); - return new DslMetaModel({dsl: className, name: el?.name, title: el?.title, description: el?.description, labels: el?.labels, navigation: el?.labels, type: "DSL"}) + return new DslMetaModel({ + dsl: className, + name: el?.name, + title: el?.title, + description: el?.description, + labels: el?.labels, + navigation: el?.labels, + type: "DSL" + }) } static getComponentsDslMetaModel = (type: 'consumer' | "producer"): DslMetaModel[] => { @@ -281,17 +291,17 @@ export class CamelUi { } static hasDirectUri = (element: CamelElement): boolean => { - return this.hasUriStartWith(element,'direct'); + return this.hasUriStartWith(element, 'direct'); } static hasSedaUri = (element: CamelElement): boolean => { - return this.hasUriStartWith(element,'seda'); + return this.hasUriStartWith(element, 'seda'); } static hasUriStartWith = (element: CamelElement, text: string): boolean => { if ((element as any).uri && typeof (element as any).uri === 'string') { return (element as any).uri.startsWith(text); - } else if (element.dslName === 'SagaDefinition'){ + } else if (element.dslName === 'SagaDefinition') { const completion = (element as SagaDefinition).completion || ''; const compensation = (element as SagaDefinition).compensation || ''; return completion.startsWith(text) || compensation.startsWith(text); @@ -301,7 +311,7 @@ export class CamelUi { } static getInternalRouteUris = (integration: Integration, componentName: string, showComponentName: boolean = true): string[] => { - const result:string[] = []; + const result: string[] = []; integration.spec.flows?.filter(f => f.dslName === 'RouteDefinition') .filter((r: RouteDefinition) => r.from.uri.startsWith(componentName)) .forEach((r: RouteDefinition) => { @@ -334,7 +344,7 @@ export class CamelUi { } else if (element.dslName === 'RouteDefinition') { const routeId = (element as RouteDefinition).id return routeId ? routeId : CamelUtil.capitalizeName((element as any).stepName); - } else if ((element as any).uri && element.dslName === 'ToDefinition') { + } else if ((element as any).uri && (['ToDefinition', 'FromDefinition'].includes(element.dslName))) { const uri = (element as any).uri return ComponentApi.getComponentTitleFromUri(uri) || ''; } else { @@ -347,7 +357,7 @@ export class CamelUi { const kamelet: KameletModel | undefined = CamelUtil.getKamelet(element); if (kamelet) { return kamelet.spec.definition.description; - } else if ((element as any).uri && element.dslName === 'ToDefinition') { + } else if ((element as any).uri && (['ToDefinition', 'FromDefinition'].includes(element.dslName))) { const uri = (element as any).uri return ComponentApi.getComponentDescriptionFromUri(uri) || ''; } else { @@ -372,7 +382,7 @@ export class CamelUi { } static isShowExpressionTooltip = (element: CamelElement): boolean => { - if (element.hasOwnProperty("expression")){ + if (element.hasOwnProperty("expression")) { const exp = CamelDefinitionApiExt.getExpressionValue((element as any).expression); return (exp !== undefined && (exp as any)?.expression?.trim().length > 0); } @@ -381,7 +391,7 @@ export class CamelUi { static isShowUriTooltip = (element: CamelElement): boolean => { const uri: string = (element as any).uri; - if (uri !== undefined && !uri.startsWith("kamelet")){ + if (uri !== undefined && !uri.startsWith("kamelet")) { return ComponentApi.getComponentNameFromUri(uri) !== uri; } return false; @@ -508,7 +518,7 @@ export class CamelUi { return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+d2FybmluZzwvdGl0bGU+PHBhdGggZD0iTTE2LDJBMTQsMTQsMCwxLDAsMzAsMTYsMTQsMTQsMCwwLDAsMTYsMlptMCwyNkExMiwxMiwwLDEsMSwyOCwxNiwxMiwxMiwwLDAsMSwxNiwyOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cmVjdCB4PSIxNSIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMTEiLz48cG [...] case "ScriptDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2cHgiIGhlaWdodD0iMjU2cHgiIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBpZD0iRmxhdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNDMuMTc1MjksMTI4YTI5Ljc4NTIsMjkuNzg1MiwwLDAsMSw4LjAyMywxMC4yNTk3N0M1NiwxNDguMTYzMDksNTYsMTYwLjI4MTI1LDU2LDE3MmMwLDI0LjMxMzQ4LDEuMDE5NTMsMzYsMjQsMzZhOCw4LDAsMCwxLDAsMTZjLTE3LjQ4MTQ1LDAtMjkuMzI0MjItNi4xNDM1NS0zNS4xOTgyNC0xOC4yNTk3N0M0MCwxOTUuODM2OTEsNDAsMTgzLjcxODc1LDQwLDE3MmMwLTI0LjMxMzQ4LT [...] - case "PausableDefinition": + case "PausableDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGF1c2UtLWZpbGxlZDwvdGl0bGU+PHBhdGggZD0iTTEyLDZIMTBBMiwyLDAsMCwwLDgsOFYyNGEyLDIsMCwwLDAsMiwyaDJhMiwyLDAsMCwwLDItMlY4YTIsMiwwLDAsMC0yLTJaIi8+PHBhdGggZD0iTTIyLDZIMjBhMiwyLDAsMCwwLTIsMlYyNGEyLDIsMCwwLDAsMiwyaDJhMiwyLDAsMCwwLDItMlY4YTIsMiwwLDAsMC [...] case "StopDefinition": return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGlkPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c3RvcC0tZmlsbGVkPC90aXRsZT48cGF0aCBkPSJNMjQsNkg4QTIsMiwwLDAsMCw2LDhWMjRhMiwyLDAsMCwwLDIsMkgyNGEyLDIsMCwwLDAsMi0yVjhhMiwyLDAsMCwwLTItMloiLz48cmVjdCBpZD0iX1RyYW5zcGFyZW50X1JlY3RhbmdsZV8iIGRhdGEtbmFtZT0iJmx0O1RyYW5zcGFyZW50IFJlY3RhbmdsZSZndDsiIG [...] @@ -529,20 +539,20 @@ export class CamelUi { } } - static getIconForDsl = (dsl: DslMetaModel):JSX.Element => { + static getIconForDsl = (dsl: DslMetaModel): JSX.Element => { if (dsl.dsl && (dsl.dsl === "KameletDefinition" || dsl.navigation === 'kamelet')) { return this.getIconFromSource(CamelUi.getKameletIconByName(dsl.name)); } else if ((dsl.dsl && dsl.dsl === "FromDefinition") && dsl.uri?.startsWith("kamelet")) { return this.getIconFromSource(CamelUi.getKameletIconByUri(dsl.uri)); - } else if (dsl.navigation === 'component' ){ + } else if (dsl.navigation === 'component') { return CamelUi.getIconForComponent(dsl.title, dsl.labels); } else { return CamelUi.getIconForDslName(dsl.dsl); } } - static getIconForComponent = (title: string, label: string):JSX.Element => { + static getIconForComponent = (title: string, label: string): JSX.Element => { const labels = label.split(","); if (title === "Ref") { return RefIcon(); @@ -554,7 +564,7 @@ export class CamelUi { return GoogleCloudIcon(); } else if (title.startsWith("Spring")) { return SpringIcon(); - } else if (title.startsWith("Kubernetes")) { + } else if (title.startsWith("Kubernetes") || title.startsWith("Knative")) { return KubernetesIcon(); } else if (title.startsWith("SAP")) { return SapIcon(); @@ -576,90 +586,94 @@ export class CamelUi { return IgniteIcon(); } else if (title.startsWith("Kafka")) { return KafkaIcon(); + } else if (title.startsWith("ActiveMQ")) { + return ActivemqIcon(); } else if (title.startsWith("GitHub")) { return GithubIcon(); } else if (title.startsWith("Git")) { return GitIcon(); + } else if (title.startsWith("Cassandra")) { + return CassandraIcon(); } else if (title.startsWith("Hazelcast")) { return HazelcastIcon(); } else if (title.startsWith("FHIR") || title.startsWith("MLLP")) { return HealthIcon(); } else if (labels.includes('transformation')) { return TransformationIcon(); - } else if (labels.includes("validation")){ + } else if (labels.includes("validation")) { return ValidationIcon(); - } else if (labels.includes("scheduling")){ + } else if (labels.includes("scheduling")) { return SchedulingIcon(); - } else if (labels.includes("database")){ + } else if (labels.includes("database")) { return DatabaseIcon(); - } else if (labels.includes("cloud")){ + } else if (labels.includes("cloud")) { return CloudIcon(); - } else if (labels.includes("chat")){ + } else if (labels.includes("chat")) { return ChatIcon(); - } else if (labels.includes("messaging")){ + } else if (labels.includes("messaging")) { return MessagingIcon(); - } else if (labels.includes("script")){ + } else if (labels.includes("script")) { return ScriptIcon(); - } else if (labels.includes("file")){ + } else if (labels.includes("file")) { return FileIcon(); - } else if (labels.includes("monitoring")){ + } else if (labels.includes("monitoring")) { return MonitoringIcon(); - } else if (labels.includes("iot")){ + } else if (labels.includes("iot")) { return IotIcon(); - } else if (labels.includes("mail")){ + } else if (labels.includes("mail")) { return MailIcon(); - } else if (labels.includes("http")){ + } else if (labels.includes("http")) { return HttpIcon(); - } else if (labels.includes("document")){ + } else if (labels.includes("document")) { return DocumentIcon(); - } else if (labels.includes("social")){ + } else if (labels.includes("social")) { return SocialIcon(); - } else if (labels.includes("networking")){ + } else if (labels.includes("networking")) { return NetworkingIcon(); - } else if (labels.includes("api")){ + } else if (labels.includes("api")) { return ApiIcon(); - } else if (labels.includes("testing")){ + } else if (labels.includes("testing")) { return TestingIcon(); - } else if (labels.includes("clustering")){ + } else if (labels.includes("clustering")) { return ClusterIcon(); - } else if (labels.includes("mobile")){ + } else if (labels.includes("mobile")) { return MobileIcon(); - } else if (labels.includes("workflow")){ + } else if (labels.includes("workflow")) { return WorkflowIcon(); - } else if (labels.includes("webservice") || labels.includes("rest")){ + } else if (labels.includes("webservice") || labels.includes("rest")) { return WebserviceIcon(); - } else if (labels.includes("search")){ + } else if (labels.includes("search")) { return SearchIcon(); - } else if (labels.includes("blockchain")){ + } else if (labels.includes("blockchain")) { return BlockchainIcon(); - } else if (labels.includes("ai")){ + } else if (labels.includes("ai")) { return MachineLearningIcon(); - } else if (labels.includes("rpc")){ + } else if (labels.includes("rpc")) { return RpcIcon(); } else { return this.getIconFromSource(camelIcon); } } - static isElementInternalComponent = (element: CamelElement):boolean => { + static isElementInternalComponent = (element: CamelElement): boolean => { const uri = (element as any).uri; const component = ComponentApi.findByName(uri); return component !== undefined && CamelUi.isComponentInternal(component.component.label); } - static isComponentInternal = (label: string):boolean => { + static isComponentInternal = (label: string): boolean => { const labels = label.split(","); if (labels.includes('core') && ( - labels.includes('transformation') - || labels.includes('testing') - || labels.includes('scheduling') - || labels.includes('monitoring') - || labels.includes('transformation') - || labels.includes('java') - || labels.includes('endpoint') - || labels.includes('script') - || labels.includes('validation') - )) { + labels.includes('transformation') + || labels.includes('testing') + || labels.includes('scheduling') + || labels.includes('monitoring') + || labels.includes('transformation') + || labels.includes('java') + || labels.includes('endpoint') + || labels.includes('script') + || labels.includes('validation') + )) { return true; } else if (label === 'transformation') { return true; @@ -667,7 +681,7 @@ export class CamelUi { return false; } - static getIconForElement = (element: CamelElement):JSX.Element => { + static getIconForElement = (element: CamelElement): JSX.Element => { const uri = (element as any).uri; const component = ComponentApi.findByName(uri); const k: KameletModel | undefined = CamelUtil.getKamelet(element); @@ -683,34 +697,45 @@ export class CamelUi { return this.getIconForDslName(element.dslName); } } - static getIconForDslName = (dslName: string):JSX.Element => { + static getIconForDslName = (dslName: string): JSX.Element => { switch (dslName) { - case 'AggregateDefinition': return <AggregateIcon/>; - case 'ChoiceDefinition' :return <ChoiceIcon/>; - case 'SplitDefinition' :return <SplitIcon/>; - case 'SagaDefinition' :return <SagaIcon/>; - case 'FilterDefinition' :return <FilterIcon/>; - case 'SortDefinition' :return <SortIcon/>; - case 'OnCompletionDefinition' :return <OnCompletion/>; - case 'InterceptDefinition' :return <Intercept/>; - case 'InterceptFromDefinition' :return <InterceptFrom/>; - case 'InterceptSendToEndpointDefinition' :return <InterceptSendToEndpoint/>; - default: return this.getIconFromSource(CamelUi.getIconSrcForName(dslName)) + case 'AggregateDefinition': + return <AggregateIcon/>; + case 'ChoiceDefinition' : + return <ChoiceIcon/>; + case 'SplitDefinition' : + return <SplitIcon/>; + case 'SagaDefinition' : + return <SagaIcon/>; + case 'FilterDefinition' : + return <FilterIcon/>; + case 'SortDefinition' : + return <SortIcon/>; + case 'OnCompletionDefinition' : + return <OnCompletion/>; + case 'InterceptDefinition' : + return <Intercept/>; + case 'InterceptFromDefinition' : + return <InterceptFrom/>; + case 'InterceptSendToEndpointDefinition' : + return <InterceptSendToEndpoint/>; + default: + return this.getIconFromSource(CamelUi.getIconSrcForName(dslName)) } } - static getIconFromSource = (src: string):JSX.Element => { + static getIconFromSource = (src: string): JSX.Element => { return <img draggable={false} src={src} className="icon" alt="icon"/> } - static getConnectionIcon = (element: CamelElement): JSX.Element => { + static getConnectionIcon = (element: CamelElement): JSX.Element => { const k: KameletModel | undefined = CamelUtil.getKamelet(element); const uri = (element as any).uri; const component = ComponentApi.findByName(uri); if (component) { return CamelUi.getIconForComponent(component.component.title, component.component.label); - } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) { - const icon = k ? k.icon() : externalIcon; + } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) { + const icon = k ? k.icon() : externalIcon; return <img src={icon} className="icon"/> } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) { const icon = k ? k.icon() : CamelUi.getIconSrcForName(element.dslName); @@ -737,7 +762,7 @@ export class CamelUi { result.set('rest', i.spec.flows?.filter((e: any) => e.dslName === 'RestDefinition').length || 0); result.set('routeConfiguration', i.spec.flows?.filter((e: any) => e.dslName === 'RouteConfigurationDefinition').length || 0); const beans = i.spec.flows?.filter((e: any) => e.dslName === 'Beans'); - if (beans && beans.length > 0 && beans[0].beans && beans[0].beans.length > 0){ + if (beans && beans.length > 0 && beans[0].beans && beans[0].beans.length > 0) { result.set('beans', Array.from(beans[0].beans).length); } return result; diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx index 0e9b6d82..b7228640 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx @@ -936,6 +936,382 @@ export function GithubIcon() { <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...] </svg> ); +}export function CassandraIcon() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + width={113.636} + height={58.899} + viewBox="0 0 113.63554 58.899029" + className="icon"> + <defs> + <path id="a" d="M24.216.082v24.141H.053V.082z" /> + </defs> + <g + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "none", + strokeWidth: 1, + }} + > + <path + fill="#bbe6fb" + d="M90.565 20.787C91.4 30.202 76.112 39.163 56.422 40.8c-19.69 1.638-36.329-4.669-37.162-14.083C18.426 17.3 33.713 8.34 53.404 6.702c19.69-1.636 36.329 4.669 37.161 14.085" + /> + <path + fill="#fff" + d="M53.334 6.75c-4.16-.255-11.326 1.915-17.302 4.08a17.762 17.762 0 0 0-1.413 6.948c0 10.096 9.154 18.28 18.837 18.28 9.62 0 18.13-8.197 18.836-18.28.23-3.283-.9-6.377-2.47-9.044-6.196-1.091-12.771-1.758-16.488-1.984" + /> + <image + xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUwAAADqCAYAAADJXHwYAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABTKADAAQAAAABAAAA6gAAAAAGjBs3AAAWs0lEQVR4Ae2d+dPctAGG+SABQkI5AyFQ7hZaekA7nbbT0v7J/bkz7bRQGGDKGaCcIRAg5CBAIBchJH3fjfxh79q78q4P2X40o3hty7b02N8T2ZLlrasIEGiIwOXLl7e0qxtCvF7Ta0K8Ovc7W1Y2XZbO6y4pXlT8Pkzzv7Nl2bTuuotbW1uXtV8CBCoJ+AInQCCKgIR4rRJaiLvDNP/by3YpDvmamhdyJt9sWiZhL3P8NsTzYXoBAYvEyMKQL+6RnYp+i5O [...] + width={43.164} + height={31.532} + x={31.672} + y={6.587} + opacity={0.596} + /> + <path + fill="#373535" + d="M42.663 16.453c.51-1.13 1.282-1.683 2.031-2.63-.083-.224-.265-.958-.265-1.212 0-1.128.928-2.056 2.056-2.056.26 0 .517.05.758.146a14.985 14.985 0 0 1 13.597-2.39c-4.45-.617-9.466.96-12.878 3.713.104.246.393.949.393 1.232 0 1.135-.735 1.411-1.87 1.411-.258 0-.504-.05-.732-.136-.771 1.035-1.715 3.006-2.178 4.239 1.887 1.687 3.592 2.299 5.813 3.13-.006-.106.076-.205.076-.312 0-3.424 3.014-6.206 6.438-6.206a6.195 6.195 0 0 1 6.105 5.158c1.53-.974 3.01-1.72 4.139-3.164-. [...] + /> + <path + fill="#373535" + d="M68.25 14.909c.303.265.555.58.748.932.502.9-.503 1.724-1.533 1.724a1.846 1.846 0 0 1-.306-.031c-1.161 1.814-3.194 4.14-5 5.311 2.769.454 5.38 1.563 7.46 3.277 1.513-2.711 2.673-6.627 2.673-9.953 0-2.532-1.117-4.387-2.804-5.748-.089 1.356-.813 3.252-1.236 4.488M45.77 32.084c.922-2.549 3.192-4.524 5.34-6.26-.315-.43-.786-1.496-.982-2a15.027 15.027 0 0 1-6.733-4.261l-.044.17a13.62 13.62 0 0 0-.232 4.52 2.709 2.709 0 0 1 2.203 2.654c0 .783-.687 1.92-1.22 2.414.58 1.25. [...] + /> + <path + fill="#373535" + d="M45.607 34.222c-1.1-1.094-1.862-3.277-2.576-4.648a2.707 2.707 0 0 1-.41.035c-1.494 0-3.058-1.253-2.704-2.702.196-.803.75-1.327 1.652-1.765-.206-1.662-.261-4.051.124-5.78.111-.494.345-.726.5-1.196-1.647-2.41-2.711-5.574-2.711-8.713 0-.115.005-.228.008-.342-2.783 1.396-4.87 3.595-4.87 7.058 0 7.659 4.41 15.171 10.973 18.116l.014-.062m16.138-10.588a6.196 6.196 0 0 1-5.843 4.145 6.167 6.167 0 0 1-3.826-1.327c-2.173 1.692-4.143 4.664-5.145 7.242.45.484.763.882 1.267 1.3 [...] + /> + <path + fill="#1287b1" + d="M42.493 17.348a14.975 14.975 0 0 1 1.898-3.122 2.057 2.057 0 0 1-.132-.72c0-1.127.929-2.056 2.056-2.056.26 0 .517.05.758.147A14.985 14.985 0 0 1 59.46 8.879c.407.093.811.202 1.21.328-4.45-.617-9.048.747-12.46 3.5.107.253.162.525.162.799a2.066 2.066 0 0 1-2.056 2.056 2.05 2.05 0 0 1-.733-.136 13.841 13.841 0 0 0-1.863 3.412c1.62 1.746 3.61 3.127 5.83 3.957-.005-.106-.016-.21-.016-.319a6.195 6.195 0 0 1 12.303-1.04 16.065 16.065 0 0 0 4.019-3.669 1.843 1.843 0 0 1-.4 [...] + /> + <path + fill="#1287b1" + d="M68.54 15.214c.394.35.62.852.622 1.38a1.876 1.876 0 0 1-1.866 1.866 1.85 1.85 0 0 1-.307-.032 15.102 15.102 0 0 1-4.506 4.533 15.09 15.09 0 0 1 7.261 3.263 18.739 18.739 0 0 0 2.379-9.16c0-2.532-1.118-4.387-2.805-5.748a15.01 15.01 0 0 1-.778 3.898M46.054 32.696a15.04 15.04 0 0 1 4.674-6.572 6.186 6.186 0 0 1-.77-1.406 15.025 15.025 0 0 1-6.733-4.26c-.013.057-.03.113-.043.17a13.593 13.593 0 0 0-.232 4.52 2.71 2.71 0 0 1 2.203 2.653c0 .754-.316 1.473-.87 1.984a16.22 [...] + /> + <path + fill="#1287b1" + d="M45.6 34.192a15.07 15.07 0 0 1-2.739-3.722 2.704 2.704 0 0 1-.41.034h-.004c-1.482 0-2.7-1.219-2.7-2.7 0-1.035.594-1.983 1.526-2.432-.273-2.209-.05-4.45.651-6.561a14.95 14.95 0 0 1-2.612-8.463c0-.115.006-.228.008-.341-2.783 1.395-4.87 3.595-4.87 7.057 0 7.659 4.573 14.245 11.136 17.19l.014-.062m15.976-9.661a6.198 6.198 0 0 1-5.843 4.144 6.17 6.17 0 0 1-3.826-1.327c-2.173 1.692-3.813 3.998-4.814 6.577.45.484.929.941 1.433 1.369 1.555.404 3.154.608 4.76.607 6.617 0 12 [...] + /> + <g transform="translate(43.304 10.642)"> + <mask id="b" fill="#fff"> + <use xlinkHref="#a" /> + </mask> + <path + fill="#fff" + d="M14.783 6.242 14.704.147l-2.251 5.43L10.576.081l.101 6.472L7.433.753l1.755 6.16-5.262-3.827 4.122 5.18-6.533-2.403 5.156 3.815-6.612.203 6.76 1.745L.053 13.09l6.68.484L1.1 17.18l5.8-2.103-4.024 5.097 5.085-4.101-1.832 6.838 3.926-5.565-.55 6.573 2.228-5.958 1.897 6.262.461-6.281 2.815 5.36-1.663-6.131 5.155 3.993-3.328-5.091 5.656 2.203-4.325-4.25 5.8.456-5.712-2.192 5.727-1.366-5.748-.293 4.678-3.575-5.309 1.903 3.608-5-4.983 3.312 1.743-5.852z" + mask="url(#b)" + /> + </g> + <image + xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAx4AAADpCAYAAACqReECAAAABGdBTUEAALGOfPtRkwAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAADHqADAAQAAAABAAAA6QAAAADa02YqAABAAElEQVR4Ae292XcT19ruq6qS5B4bm76zMQYSDAZ34AYSyPedMc4a5+Jc5a/M7R5f9l5NFknArYwNiUnnhU2T0BuDbdlqStrPKyQjy2qqpKpSSXpqDLBUzWx+s1Q13/l2Hg83EiABEiABEiABEqhRAn19fU1ff/21VqPdZ7dJgARIgARIgARIgARIgATsJjA4ONg4MjLSZXc9LJ8ESIAESIAESIAESIAESMABAjdv3vSiGsWBqgxX0dvb67969eoNXKAavog [...] + width={111.814} + height={32.542} + x={1.822} + y={1.682} + opacity={0.487} + /> + <path + fill="#373535" + d="M46.372 6.794c1.704-.331 2.026-4.053 2.026-4.053s.238 2.743 1.43 3.1c1.193.357 2.742-4.291 2.742-4.291s-1.43 4.172 0 4.41c1.43.238 4.053-4.053 4.053-4.053s-1.072 3.695-.358 3.933c.715.239 4.291-5.364 4.291-5.364s-2.145 3.695-.119 4.053c2.027.358 4.984-2.521 4.984-2.521s-2.325 2.634-1.289 2.998c4.412 1.55 7.98-4.183 7.98-4.183s-.827 2.514-2.972 5.256C73.788 7.27 77.24.267 77.24.267L73.788 7.27C75.576 8.224 82.728 0 82.728 0s-3.694 6.436-5.84 7.747c1.192.954 5.483-2. [...] + /> + <path + fill="#373535" + d="M0 34.76c9.388 4.71 17.97-.714 28.788 2.334 8.224 2.318 18.239 5.176 31.828 3.209 13.589-1.967 25.21-7.867 30.755-18.416 1.728-4.709 8.76 1.072 8.76 1.072s-5.125-2.145-5.006-1.132c.12 1.013 7.689 4.53 7.689 4.53s-6.855-2.146-6.437-.536c.417 1.608 8.583 8.045 8.583 8.045s-9.239-7.033-10.013-6.079c-.775.953 3.933 4.828 3.933 4.828s-7.808-4.828-10.55-3.405c-1.972 1.024 8.106 7.637 8.106 7.637S89.88 31.84 88.33 33.15c-1.55 1.312 7.391 12.04 7.391 12.04S85.588 34.223 84 [...] + /> + </g> + </svg> + ); +} +export function ActivemqIcon() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={116.42} + height={167.526} + viewBox="0 0 30.803 44.324" + className="icon"> + <defs> + <filter + id="a" + width={1.068} + height={1.046} + x={-0.017} + y={-0.011} + > + <feFlood floodColor="#000" floodOpacity={0.498} result="flood" /> + <feComposite + in="flood" + in2="SourceGraphic" + operator="in" + result="composite1" + /> + <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2} /> + <feOffset dx={1} dy={1} result="offset" /> + <feComposite in="SourceGraphic" in2="offset" result="composite2" /> + </filter> + </defs> + <g + style={{ + display: "inline", + }} + > + <g + style={{ + filter: "url(#a)", + }} + transform="translate(-39.667 -110.707)" + > + <path + d="m64.697 153.552-8.352-.05-4.133-7.257 4.218-7.208 8.352.049 4.134 7.257z" + style={{ + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m52.632 146.553-8.352-.049-4.133-7.257 4.218-7.209 8.352.05 4.134 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m64.771 139.589-8.352-.05-4.133-7.257 4.218-7.208 8.352.05 4.134 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m64.765 125.702-8.351-.049-4.134-7.257 4.219-7.209 8.352.05 4.133 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + <path + d="m52.696 132.676-8.352-.049-4.133-7.257 4.218-7.209 8.352.05 4.133 7.257z" + style={{ + display: "inline", + fill: "#fff", + strokeWidth: 0.394699, + strokeMiterlimit: 4, + strokeDasharray: "none", + }} + /> + </g> + </g> + <g + style={{ + display: "inline", + }} + transform="translate(-39.667 -110.707)" + > + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#c12766", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.031 63.796)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#3e489f", + fillOpacity: 1, + stroke: "none", + strokeWidth: 15, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -71.17 70.76)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#714099", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.106 77.758)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#78932c", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -71.106 56.883)" + /> + <path + d="m1849.139 640.353-96.824 20.558-66.216-73.574 30.608-94.13 96.824-20.559 66.216 73.573z" + style={{ + opacity: 1, + fill: "#cf242a", + fillOpacity: 1, + stroke: "none", + strokeWidth: 3, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + transform="matrix(.07206 .01553 -.01553 .07206 -59.037 49.91)" + /> + <circle + cx={60.564} + cy={146.294} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m61.748 117.71-14.267 8.174M48.514 124.197l.048 16.442M47.525 138.715l14.136 8.397M60.59 117.133l.048 16.442" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.523753, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m60.657 131.093.048 16.442" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.5238, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <path + d="m61.766 131.708-14.267 8.174M47.564 124.84l14.136 8.398" + style={{ + fill: "none", + fillRule: "evenodd", + stroke: "#fff", + strokeWidth: 0.523753, + strokeLinecap: "butt", + strokeLinejoin: "miter", + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={48.334} + cy={139.242} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={60.901} + cy={132.486} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={48.563} + cy={125.419} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + <circle + cx={60.632} + cy={118.445} + r={1.6} + style={{ + opacity: 1, + fill: "#fff", + fillOpacity: 1, + stroke: "none", + strokeWidth: 0.320071, + strokeMiterlimit: 4, + strokeDasharray: "none", + strokeOpacity: 1, + }} + /> + </g> + </svg> + ); } export function KafkaIcon() { return ( diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx index 171efc5c..c2a75b7a 100644 --- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx @@ -59,7 +59,11 @@ export class ComponentsTab extends React.Component<Props, State> { render() { const component = this.state.component; const {filter} = this.props; - const components = ComponentApi.getComponents().filter(c => c.component.name.toLowerCase().includes(filter.toLowerCase())); + const components = ComponentApi.getComponents().filter(c => { + return c.component.name.toLowerCase().includes(filter.toLowerCase()) + || c.component.title.toLowerCase().includes(filter.toLowerCase()) + || c.component.description.toLowerCase().includes(filter.toLowerCase()) + }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ; return ( <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section"> <ComponentModal key={component?.component.name + this.state.isModalOpen.toString()}