Fix #1174

apache · May 17, 2024 · ab760aa · ab760aa
1 parent 8ac9f30
commit ab760aa
Show file tree

Hide file tree

Showing 13 changed files with 235 additions and 22 deletions.
diff --git a/karavan-app/src/main/webui/package-lock.json b/karavan-app/src/main/webui/package-lock.json
diff --git a/karavan-app/src/main/webui/src/designer/icons/OtherIcons.tsx b/karavan-app/src/main/webui/src/designer/icons/OtherIcons.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+import React from 'react';
+
+export function AutoStartupIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="M19.88 21.847h2l-5-12h-2l-5 12h2l1.24-3h5.53zm-5.93-5 1.82-4.42h.25l1.86 4.42z"/>
+        </svg>
+    );
+}
+
+export function ErrorHandlerIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="m19.264 14.98-3.998 7-1.736-1 2.287-4h-3.889l3.993-7 1.737 1-2.284 4z"/>
+        </svg>
+    );
+}
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
@@ -125,6 +125,12 @@
     align-items: center;
 }
 
+.karavan .step-element .route-icons {
+    position: absolute;
+    top: 0;
+    display: flex;
+}
+
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
     height: 20px;

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
@@ -181,6 +181,8 @@ export function DslElement(props: Props) {
                 const cc = CamelDefinitionApiExt.getElementChildrenDefinition(child.className);
                 return child.name === 'steps' || cc.filter(c => c.multiple).length > 0;
             })
+        } else {
+            children = children.filter(child => child.className === 'FromDefinition')
         }
         if (step.dslName === 'CatchDefinition') { // exception
             children = children.filter(value => value.name !== 'onWhen')

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
@@ -28,6 +28,7 @@ import {shallow} from "zustand/shallow";
 import {useRouteDesignerHook} from "../useRouteDesignerHook";
 import {AddElementIcon, DeleteElementIcon, InsertElementIcon} from "../../utils/ElementIcons";
 import { RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {AutoStartupIcon, ErrorHandlerIcon} from "../../icons/OtherIcons";
 
 interface Props {
     headerRef: React.RefObject<HTMLDivElement>
@@ -103,8 +104,8 @@ export function DslElementHeader(props: Props) {
         return [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount]
     }
 
-    function hasWideChildrenElement() {
-        const [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount] = getChildrenInfo(props.step);
+    function getHasWideChildrenElement(childrenInfo: [boolean, number, boolean, number, number]) {
+        const [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount] = childrenInfo;
         if (props.step.dslName === 'SetHeadersDefinition') return false;
         else if (isHorizontal() && stepsChildrenCount > 1) return true;
         else if (hasStepsField && stepsChildrenCount > 0 && hasNonStepsFields && nonStepChildrenCount > 0) return true;
@@ -169,6 +170,8 @@ export function DslElementHeader(props: Props) {
             !['FromDefinition', 'RouteConfigurationDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName)
             && !inRouteConfiguration;
         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) &&
@@ -178,9 +181,20 @@ export function DslElementHeader(props: Props) {
                         {CamelUi.getIconForElement(step)}
                     </div>
                 }
-                <div className={hasWideChildrenElement() ? "header-text" : ""}>
-                    {hasWideChildrenElement() && <div className="spacer"/>}
-                    {getHeaderTextWithTooltip(step)}
+                {'RouteDefinition' === step.dslName&&
+                    <div className={"route-icons"}>
+                        {(step as any).autoStartup !== false && <AutoStartupIcon/>}
+                        {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
+                    </div>
+                }
+                {'RouteConfigurationDefinition' === step.dslName&&
+                    <div className={"route-icons"}>
+                        {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
+                    </div>
+                }
+                <div className={hasWideChildrenElement ? "header-text" : ""}>
+                    {hasWideChildrenElement && <div className="spacer"/>}
+                    {getHeaderTextWithTooltip(step, hasWideChildrenElement)}
                 </div>
                 {showInsertButton && getInsertElementButton()}
                 {getDeleteButton()}
@@ -199,10 +213,10 @@ export function DslElementHeader(props: Props) {
         }
     }
 
-    function getHeaderTextWithTooltip(step: CamelElement) {
+    function getHeaderTextWithTooltip(step: CamelElement, hasWideChildrenElement: boolean) {
         const title = getHeaderText(step);
         const checkRequired = CamelUtil.checkRequired(step);
-        let className = hasWideChildrenElement() ? "text text-right" : "text text-bottom";
+        let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
         if (checkRequired[0]) {
             return <Text className={className}>{title}</Text>

diff --git a/karavan-designer/src/designer/icons/OtherIcons.tsx b/karavan-designer/src/designer/icons/OtherIcons.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+import React from 'react';
+
+export function AutoStartupIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="M19.88 21.847h2l-5-12h-2l-5 12h2l1.24-3h5.53zm-5.93-5 1.82-4.42h.25l1.86 4.42z"/>
+        </svg>
+    );
+}
+
+export function ErrorHandlerIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="m19.264 14.98-3.998 7-1.736-1 2.287-4h-3.889l3.993-7 1.737 1-2.284 4z"/>
+        </svg>
+    );
+}
diff --git a/karavan-designer/src/designer/route/element/DslElement.css b/karavan-designer/src/designer/route/element/DslElement.css
@@ -125,6 +125,12 @@
     align-items: center;
 }
 
+.karavan .step-element .route-icons {
+    position: absolute;
+    top: 0;
+    display: flex;
+}
+
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
     height: 20px;

diff --git a/karavan-designer/src/designer/route/element/DslElement.tsx b/karavan-designer/src/designer/route/element/DslElement.tsx
@@ -181,6 +181,8 @@ export function DslElement(props: Props) {
                 const cc = CamelDefinitionApiExt.getElementChildrenDefinition(child.className);
                 return child.name === 'steps' || cc.filter(c => c.multiple).length > 0;
             })
+        } else {
+            children = children.filter(child => child.className === 'FromDefinition')
         }
         if (step.dslName === 'CatchDefinition') { // exception
             children = children.filter(value => value.name !== 'onWhen')

diff --git a/karavan-designer/src/designer/route/element/DslElementHeader.tsx b/karavan-designer/src/designer/route/element/DslElementHeader.tsx
@@ -28,6 +28,7 @@ import {shallow} from "zustand/shallow";
 import {useRouteDesignerHook} from "../useRouteDesignerHook";
 import {AddElementIcon, DeleteElementIcon, InsertElementIcon} from "../../utils/ElementIcons";
 import { RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {AutoStartupIcon, ErrorHandlerIcon} from "../../icons/OtherIcons";
 
 interface Props {
     headerRef: React.RefObject<HTMLDivElement>
@@ -103,8 +104,8 @@ export function DslElementHeader(props: Props) {
         return [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount]
     }
 
-    function hasWideChildrenElement() {
-        const [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount] = getChildrenInfo(props.step);
+    function getHasWideChildrenElement(childrenInfo: [boolean, number, boolean, number, number]) {
+        const [hasStepsField, stepsChildrenCount, hasNonStepsFields, nonStepChildrenCount, childrenCount] = childrenInfo;
         if (props.step.dslName === 'SetHeadersDefinition') return false;
         else if (isHorizontal() && stepsChildrenCount > 1) return true;
         else if (hasStepsField && stepsChildrenCount > 0 && hasNonStepsFields && nonStepChildrenCount > 0) return true;
@@ -169,6 +170,8 @@ export function DslElementHeader(props: Props) {
             !['FromDefinition', 'RouteConfigurationDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName)
             && !inRouteConfiguration;
         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) &&
@@ -178,9 +181,20 @@ export function DslElementHeader(props: Props) {
                         {CamelUi.getIconForElement(step)}
                     </div>
                 }
-                <div className={hasWideChildrenElement() ? "header-text" : ""}>
-                    {hasWideChildrenElement() && <div className="spacer"/>}
-                    {getHeaderTextWithTooltip(step)}
+                {'RouteDefinition' === step.dslName&&
+                    <div className={"route-icons"}>
+                        {(step as any).autoStartup !== false && <AutoStartupIcon/>}
+                        {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
+                    </div>
+                }
+                {'RouteConfigurationDefinition' === step.dslName&&
+                    <div className={"route-icons"}>
+                        {(step as any).errorHandler !== undefined && <ErrorHandlerIcon/>}
+                    </div>
+                }
+                <div className={hasWideChildrenElement ? "header-text" : ""}>
+                    {hasWideChildrenElement && <div className="spacer"/>}
+                    {getHeaderTextWithTooltip(step, hasWideChildrenElement)}
                 </div>
                 {showInsertButton && getInsertElementButton()}
                 {getDeleteButton()}
@@ -199,10 +213,10 @@ export function DslElementHeader(props: Props) {
         }
     }
 
-    function getHeaderTextWithTooltip(step: CamelElement) {
+    function getHeaderTextWithTooltip(step: CamelElement, hasWideChildrenElement: boolean) {
         const title = getHeaderText(step);
         const checkRequired = CamelUtil.checkRequired(step);
-        let className = hasWideChildrenElement() ? "text text-right" : "text text-bottom";
+        let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
         if (checkRequired[0]) {
             return <Text className={className}>{title}</Text>

diff --git a/karavan-space/src/designer/icons/OtherIcons.tsx b/karavan-space/src/designer/icons/OtherIcons.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+import React from 'react';
+
+export function AutoStartupIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="M19.88 21.847h2l-5-12h-2l-5 12h2l1.24-3h5.53zm-5.93-5 1.82-4.42h.25l1.86 4.42z"/>
+        </svg>
+    );
+}
+
+export function ErrorHandlerIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="icon" width="24px" height="24px">
+            <path d="M16 4A12 12 0 1 1 4 16 12.035 12.035 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14.041 14.041 0 0 0 16 2Z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+            <path d="m19.264 14.98-3.998 7-1.736-1 2.287-4h-3.889l3.993-7 1.737 1-2.284 4z"/>
+        </svg>
+    );
+}
diff --git a/karavan-space/src/designer/route/element/DslElement.css b/karavan-space/src/designer/route/element/DslElement.css
@@ -125,6 +125,12 @@
     align-items: center;
 }
 
+.karavan .step-element .route-icons {
+    position: absolute;
+    top: 0;
+    display: flex;
+}
+
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
     height: 20px;

diff --git a/karavan-space/src/designer/route/element/DslElement.tsx b/karavan-space/src/designer/route/element/DslElement.tsx
@@ -181,6 +181,8 @@ export function DslElement(props: Props) {
                 const cc = CamelDefinitionApiExt.getElementChildrenDefinition(child.className);
                 return child.name === 'steps' || cc.filter(c => c.multiple).length > 0;
             })
+        } else {
+            children = children.filter(child => child.className === 'FromDefinition')
         }
         if (step.dslName === 'CatchDefinition') { // exception
             children = children.filter(value => value.name !== 'onWhen')