ROute Templates in Topology

apache · Nov 26, 2024 · 685d76c · 685d76c
1 parent 87d8f1d
commit 685d76c
Show file tree

Hide file tree

Showing 19 changed files with 398 additions and 56 deletions.
diff --git a/karavan-app/src/main/webui/src/designer/DesignerStore.ts b/karavan-app/src/main/webui/src/designer/DesignerStore.ts
@@ -110,13 +110,16 @@ interface SelectorStateState {
     deleteSelectedToggle: (label: string) => void;
     routeId?: string;
     setRouteId: (routeId: string) => void;
+    isRouteTemplate?: boolean;
+    setIsRouteTemplate: (isRouteTemplate: boolean) => void;
 }
 
 export const useSelectorStore = createWithEqualityFn<SelectorStateState>((set) => ({
     showSelector: false,
     deleteMessage: '',
     parentId: '',
     showSteps: true,
+    isRouteTemplate: false,
     selectedToggles: ['eip', 'components', 'kamelets'],
     addSelectedToggle: (toggle: string) => {
         set(state => ({
@@ -149,6 +152,9 @@ export const useSelectorStore = createWithEqualityFn<SelectorStateState>((set) =
     setRouteId: (routeId: string) => {
         set({routeId: routeId})
     },
+    setIsRouteTemplate: (isRouteTemplate: boolean) => {
+        set({isRouteTemplate: isRouteTemplate})
+    },
 }), shallow)
 
 

diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -388,21 +388,6 @@
     gap: 6px;
 }
 
-.karavan .dsl-page .flows .step-element {
-    align-items: center;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    border-color: var(--pf-v5-global--Color--200);
-    border-radius: 42px;
-    border-width: 1px;
-    min-width: 120px;
-    padding: 3px 4px 4px 4px;
-    margin: 3px auto 0 auto;
-    position: relative;
-}
-
 .karavan {
     --step-border-color: var(--pf-v5-global--Color--200);
     --step-border-color-selected: var(--pf-v5-global--active-color--100);
@@ -449,10 +434,6 @@
 }
 
 .element-builder:hover .add-button,
-.karavan .step-element:hover .add-element-button,
-.karavan .step-element:hover .add-button {
-    visibility: visible;
-}
 
 .dsl-gallery {
     margin-top: 16px;

diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
@@ -97,7 +97,8 @@ export function DslProperties(props: Props) {
             .filter((p: PropertyMeta) => p.name !== 'uri') // do not show uri
             // .filer((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
             .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (p.name === 'onWhen'))
-            .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)));
+            .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)))
+            .filter((p: PropertyMeta) => !(dslName === 'RouteTemplateDefinition' && ['route', 'beans'].includes(p.name)));
         // .filter((p: PropertyMeta) => dslName && !(['RestDefinition', 'GetDefinition', 'PostDefinition', 'PutDefinition', 'PatchDefinition', 'DeleteDefinition', 'HeadDefinition'].includes(dslName) && ['param', 'responseMessage'].includes(p.name))) // TODO: configure this properties
     }
 

diff --git a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
@@ -269,7 +269,7 @@ export function ComponentPropertyField(props: Props) {
                            type={property.secret && !showPassword ? "password" : "text"}
                            autoComplete="off"
                            id={id} name={id}
-                           value={textValue !== undefined ? textValue : property.defaultValue}
+                           value={(textValue !== undefined ? textValue : property.defaultValue) || ''}
                            onBlur={_ => parametersChanged(property.name, textValue, property.kind === 'path')}
                            onChange={(_, v) => {
                                setTextValue(v);
@@ -325,7 +325,7 @@ export function ComponentPropertyField(props: Props) {
                         type={(property.secret ? "password" : "text")}
                         autoComplete="off"
                         id={id} name={id}
-                        value={textValue !== undefined ? textValue : property.defaultValue}
+                        value={(textValue !== undefined ? textValue : property.defaultValue) || ''}
                         onBlur={_ => parametersChanged(property.name, textValue, property.kind === 'path')}
                         onChange={(_, v) => {
                             setTextValue(v);
@@ -396,7 +396,7 @@ export function ComponentPropertyField(props: Props) {
                         name={property.name + "-placeholder"}
                         type="text"
                         aria-label="placeholder"
-                        value={!isValueBoolean ? textValue?.toString() : undefined}
+                        value={!isValueBoolean ? textValue?.toString() : ''}
                         onBlur={_ => onParametersChange(property.name, textValue)}
                         onChange={(_, v) => {
                             setTextValue(v);

diff --git a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
@@ -205,7 +205,7 @@ export function DslPropertyField(props: Props) {
     }
 
     function isParameter(property: PropertyMeta): boolean {
-        return property.name === 'parameters' && property.description === 'parameters';
+        return property.name === 'parameters' || property.description === 'parameters';
     }
 
     function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
@@ -230,7 +230,7 @@ export function DslPropertyField(props: Props) {
             )
         }
         if (isParameter(property)) {
-            return isKamelet ? "Kamelet properties:" : "Component properties:";
+            return isKamelet ? "Kamelet properties:" : isRouteTemplate ? "Parameters:" : "Component properties:";
         } else if (!["ExpressionDefinition"].includes(property.type)) {
             return (
                 <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
@@ -1084,6 +1084,7 @@ export function DslPropertyField(props: Props) {
 
     const element = props.element;
     const isKamelet = CamelUtil.isKameletComponent(element);
+    const isRouteTemplate = element?.dslName === 'RouteTemplateDefinition';
     const property: PropertyMeta = props.property;
     const value = props.value;
     const isVariable = getIsVariable();

diff --git a/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx b/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx
@@ -37,11 +37,12 @@ import {Command, EventBus} from "../utils/EventBus";
 import useMutationsObserver from "./useDrawerMutationsObserver";
 import {DeleteConfirmation} from "./DeleteConfirmation";
 import {DslElementMoveModal} from "./element/DslElementMoveModal";
+import {RouteTemplateElement} from "./element/RouteTemplateElement";
 
 export function RouteDesigner() {
 
     const {openSelector, createRouteConfiguration, onCommand, unselectElement, onDslSelect,
-        isSourceKamelet, isActionKamelet, isKamelet, isSinkKamelet} = useRouteDesignerHook();
+        isSourceKamelet, isActionKamelet, isKamelet, isSinkKamelet, createRouteTemplate} = useRouteDesignerHook();
 
     const [integration] = useIntegrationStore((state) => [state.integration], shallow)
     const [showDeleteConfirmation, setPosition, width, height, top, left, showMoveConfirmation, setShowMoveConfirmation] =
@@ -130,12 +131,23 @@ export function RouteDesigner() {
                 >
                     Create configuration
                 </Button>}
+                {<Button
+                    variant="secondary"
+                    icon={<PlusIcon/>}
+                    onClick={evt => {
+                        evt.stopPropagation();
+                        openSelector(undefined, undefined, undefined, undefined, true);
+                    }}
+                >
+                    Create template
+                </Button>}
             </div>
         )
     }
     function getGraph() {
         const routes = CamelUi.getRoutes(integration);
         const routeConfigurations = CamelUi.getRouteConfigurations(integration);
+        const routeTemplates = CamelUi.getRouteTemplates(integration);
         return (
             <div className="graph" ref={printerRef}>
                 <DslConnections/>
@@ -154,6 +166,16 @@ export function RouteDesigner() {
                                     inStepsLength={array.length}
                                     parent={undefined}/>
                     ))}
+                    {routeTemplates?.map((routeTemplate, index: number, array) => (
+                        <RouteTemplateElement key={routeTemplate.uuid}
+                                    inSteps={false}
+                                    position={index}
+                                    step={routeTemplate}
+                                    nextStep={undefined}
+                                    prevStep={undefined}
+                                    inStepsLength={array.length}
+                                    parent={undefined}/>
+                    ))}
                     {routes?.map((route: any, index: number, array) => {
                         return (
                             <DslElement key={route.uuid}

diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElement.css b/karavan-app/src/main/webui/src/designer/route/element/DslElement.css
@@ -14,6 +14,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.karavan .dsl-page .flows .step-element {
+    align-items: center;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    border-color: var(--pf-v5-global--Color--200);
+    border-radius: 42px;
+    border-width: 1px;
+    min-width: 120px;
+    padding: 3px 4px 4px 4px;
+    margin: 3px auto 0 auto;
+    position: relative;
+}
+.karavan .dsl-page .flows .step-element:hover .add-element-button,
+.karavan .dsl-page .flows .step-element:hover .add-button {
+    visibility: visible;
+}
 
 .karavan .dsl-page .flows .step-element .header-route {
     display: block;

diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx
@@ -243,17 +243,12 @@ export function DslElement(props: Props) {
         const hideAddButton = step.dslName === 'StepDefinition' && !CamelDisplayUtil.isStepDefinitionExpanded(integration, step.uuid, selectedUuids.at(0));
         if (hideAddButton) return (<></>)
         else return (
-                <Tooltip position={"left"}
-                         content={<div>{"Add step to " + CamelDisplayUtil.getTitle(step)}</div>}
-                >
-                    <button type="button"
-                            aria-label="Add"
-                            onClick={e => onOpenSelector(e)}
-                            className={isAddStepButtonLeft() ? "add-button add-button-left" : "add-button add-button-bottom"}>
-                        <AddElementIcon/>
-                    </button>
-
-                </Tooltip>
+            <button type="button"
+                    aria-label="Add"
+                    onClick={e => onOpenSelector(e)}
+                    className={isAddStepButtonLeft() ? "add-button add-button-left" : "add-button add-button-bottom"}>
+                <AddElementIcon/>
+            </button>
         )
     }
 

diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx
@@ -80,7 +80,7 @@ export function DslElementHeader(props: Props) {
     }
 
     function isWide(): boolean {
-        return ['RouteConfigurationDefinition', 'RouteDefinition', 'ChoiceDefinition', 'MulticastDefinition',
+        return ['RouteConfigurationDefinition', 'RouteTemplateDefinition', 'RouteDefinition', 'ChoiceDefinition', 'MulticastDefinition',
             'LoadBalanceDefinition', 'TryDefinition', 'CircuitBreakerDefinition']
             .includes(props.step.dslName);
     }
@@ -163,6 +163,10 @@ export function DslElementHeader(props: Props) {
             classes.push('header-route')
             classes.push('header-bottom-line')
             classes.push(isElementSelected() ? 'header-bottom-selected' : 'header-bottom-not-selected')
+        } else if (step.dslName === 'RouteTemplateDefinition') {
+            classes.push('header-route')
+            classes.push('header-bottom-line')
+            classes.push(isElementSelected() ? 'header-bottom-selected' : 'header-bottom-not-selected')
         } else if (step.dslName === 'RouteConfigurationDefinition') {
             classes.push('header-route')
             if (hasElements(step)) {
@@ -181,39 +185,43 @@ export function DslElementHeader(props: Props) {
         const step: CamelElement = props.step;
         const parent = props.parent;
         const inRouteConfiguration = parent !== undefined && parent.dslName === 'RouteConfigurationDefinition';
-        const showAddButton = !['CatchDefinition', 'RouteDefinition'].includes(step.dslName) && availableModels.length > 0;
+        const showAddButton = !['CatchDefinition', 'RouteTemplateDefinition', 'RouteDefinition'].includes(step.dslName) && availableModels.length > 0;
         const showInsertButton =
-            !['FromDefinition', 'RouteConfigurationDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName)
+            !['FromDefinition', 'RouteConfigurationDefinition', 'RouteTemplateDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName)
             && !inRouteConfiguration;
+        const showDeleteButton = !('RouteDefinition' === step.dslName && 'RouteTemplateDefinition' === parent?.dslName);
         const headerClasses = getHeaderClasses();
         const childrenInfo = getChildrenInfo(props.step) || [];
         const hasWideChildrenElement = getHasWideChildrenElement(childrenInfo)
         return (
             <div className={"dsl-element " + headerClasses} style={getHeaderStyle()} ref={props.headerRef}>
-                {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
+                {!['RouteConfigurationDefinition', 'RouteTemplateDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
                     <div
                         className={getHeaderIconClasses()}
                         style={isWide() ? {width: ""} : {}}>
                         {CamelUi.getIconForElement(step)}
                     </div>
                 }
-                {'RouteDefinition' === step.dslName&&
+                {'RouteDefinition' === step.dslName &&
                     <div className={"route-icons"}>
                         {(step as any).autoStartup !== false && <AutoStartupIcon/>}
                         {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
                     </div>
                 }
-                {'RouteConfigurationDefinition' === step.dslName&&
+                {'RouteConfigurationDefinition' === step.dslName &&
                     <div className={"route-icons"}>
                         {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
                     </div>
                 }
+                {'RouteTemplateDefinition' === step.dslName &&
+                    <div style={{height: '10px'}}></div>
+                }
                 <div className={hasWideChildrenElement ? "header-text" : ""}>
                     {hasWideChildrenElement && <div className="spacer"/>}
                     {getHeaderTextWithTooltip(step, hasWideChildrenElement)}
                 </div>
                 {showInsertButton && getInsertElementButton()}
-                {getDeleteButton()}
+                {showDeleteButton && getDeleteButton()}
                 {showAddButton && getAddElementButton()}
             </div>
         )

diff --git a/karavan-app/src/main/webui/src/designer/route/element/RouteTemplateElement.css b/karavan-app/src/main/webui/src/designer/route/element/RouteTemplateElement.css
@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.karavan .dsl-page .flows .route-template-element {
+    align-items: center;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    border-color: var(--pf-v5-global--Color--200);
+    border-radius: 42px;
+    border-width: 1px;
+    min-width: 120px;
+    padding: 3px 4px 4px 4px;
+    margin: 3px auto 0 auto;
+    position: relative;
+}
+.karavan .dsl-page .flows .route-template-element:hover .add-element-button,
+.karavan .dsl-page .flows .route-template-element:hover .add-button {
+    visibility: visible;
+}
+
+.karavan .dsl-page .flows .route-template-element .header .delete-button {
+    position: absolute;
+    top: -11px;
+    line-height: 1;
+    border: 0;
+    padding: 0;
+    margin: 0 0 0 10px;
+    background: transparent;
+    color: #909090;
+    visibility: hidden;
+}
+
+.karavan .dsl-page .flows .route-template-element .header:hover .delete-button,
+.karavan .dsl-page .flows .route-template-element .header-route:hover .delete-button {
+    visibility: visible;
+}
+
+.karavan .dsl-page .flows .route-template-element .delete-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    line-height: 1;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: #909090;
+    visibility: hidden;
+}