You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/11/19 02:03:34 UTC

[camel-karavan] 02/12: Create camel.yaml plain route integration

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 0643df51b60a3c35ff88c786f11aa96ea75177f5
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Nov 18 16:26:49 2022 -0500

    Create camel.yaml plain route integration
---
 karavan-app/src/main/webui/package-lock.json       | 81 ++++++++++++++--------
 .../main/webui/src/components/ComponentCard.tsx    |  2 +-
 .../src/main/webui/src/designer/DesignerPage.tsx   | 10 +--
 .../src/main/webui/src/designer/utils/CamelUi.tsx  | 13 ----
 karavan-app/src/main/webui/src/eip/EipCard.tsx     |  2 +-
 .../src/main/webui/src/kamelets/KameletCard.tsx    |  2 +-
 .../main/webui/src/projects/CreateFileModal.tsx    |  2 +-
 .../src/main/webui/src/projects/ProjectModels.ts   |  6 +-
 .../src/main/webui/src/projects/ProjectPage.tsx    | 36 +++-------
 .../main/webui/src/projects/ProjectPageToolbar.tsx |  4 +-
 10 files changed, 77 insertions(+), 81 deletions(-)

diff --git a/karavan-app/src/main/webui/package-lock.json b/karavan-app/src/main/webui/package-lock.json
index 6077662..76ae782 100644
--- a/karavan-app/src/main/webui/package-lock.json
+++ b/karavan-app/src/main/webui/package-lock.json
@@ -39,6 +39,28 @@
         "monaco-editor": "0.29.1"
       }
     },
+    "../../../../karavan-core": {
+      "version": "3.18.6",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/js-yaml": "^4.0.5",
+        "@types/uuid": "^8.3.4",
+        "typescript": "^4.5.5",
+        "uuid": "8.3.2"
+      },
+      "devDependencies": {
+        "@types/chai": "^4.3.0",
+        "@types/dagre": "^0.7.47",
+        "@types/localforage": "0.0.34",
+        "@types/mocha": "^9.1.0",
+        "@types/node": "^17.0.23",
+        "chai": "^4.3.4",
+        "cross-env": "^7.0.3",
+        "fs": "^0.0.1-security",
+        "mocha": "^9.2.0",
+        "ts-node": "^10.4.0"
+      }
+    },
     "../karavan-core": {
       "extraneous": true
     },
@@ -4534,9 +4556,9 @@
       }
     },
     "node_modules/babel-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -10889,15 +10911,8 @@
       }
     },
     "node_modules/karavan-core": {
-      "version": "3.18.6",
-      "resolved": "file:../../../../karavan-core",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/js-yaml": "^4.0.5",
-        "@types/uuid": "^8.3.4",
-        "typescript": "^4.5.5",
-        "uuid": "8.3.2"
-      }
+      "resolved": "../../../../karavan-core",
+      "link": true
     },
     "node_modules/keycloak-js": {
       "version": "19.0.1",
@@ -10995,9 +11010,9 @@
       }
     },
     "node_modules/loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -13450,9 +13465,9 @@
       }
     },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
-      "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
       "engines": {
         "node": ">= 12.13.0"
       }
@@ -19866,9 +19881,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -24472,10 +24487,20 @@
       }
     },
     "karavan-core": {
-      "version": "3.18.6",
+      "version": "file:../../../../karavan-core",
       "requires": {
+        "@types/chai": "^4.3.0",
+        "@types/dagre": "^0.7.47",
         "@types/js-yaml": "^4.0.5",
+        "@types/localforage": "0.0.34",
+        "@types/mocha": "^9.1.0",
+        "@types/node": "^17.0.23",
         "@types/uuid": "^8.3.4",
+        "chai": "^4.3.4",
+        "cross-env": "^7.0.3",
+        "fs": "^0.0.1-security",
+        "mocha": "^9.2.0",
+        "ts-node": "^10.4.0",
         "typescript": "^4.5.5",
         "uuid": "8.3.2"
       }
@@ -24555,9 +24580,9 @@
       "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
     },
     "loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -26207,9 +26232,9 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "loader-utils": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
-          "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ=="
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+          "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw=="
         },
         "supports-color": {
           "version": "7.2.0",
diff --git a/karavan-app/src/main/webui/src/components/ComponentCard.tsx b/karavan-app/src/main/webui/src/components/ComponentCard.tsx
index 1fe5269..ba18bd4 100644
--- a/karavan-app/src/main/webui/src/components/ComponentCard.tsx
+++ b/karavan-app/src/main/webui/src/components/ComponentCard.tsx
@@ -51,7 +51,7 @@ export class ComponentCard extends React.Component<Props, State> {
                 <CardHeader>
                     {CamelUi.getIconFromSource(camelIcon)}
                 </CardHeader>
-                <CardTitle>{CamelUi.titleFromName(component.component.name)}</CardTitle>
+                <CardTitle>{component.component.title}</CardTitle>
                 <CardBody>{component.component.description}</CardBody>
                 <CardFooter>
                     <Badge isRead className="labels">{component.component.label}</Badge>
diff --git a/karavan-app/src/main/webui/src/designer/DesignerPage.tsx b/karavan-app/src/main/webui/src/designer/DesignerPage.tsx
index fb05426..baee350 100644
--- a/karavan-app/src/main/webui/src/designer/DesignerPage.tsx
+++ b/karavan-app/src/main/webui/src/designer/DesignerPage.tsx
@@ -30,7 +30,7 @@ interface Props {
     name: string,
     yaml: string,
     dark: boolean,
-    onSave?: (filename: string, yaml: string, propertyOnly: boolean) => void
+    onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
 }
 
 interface State {
@@ -83,16 +83,16 @@ export class DesignerPage extends React.Component<Props, State> {
                             <Toolbar id="toolbar-group-types">
                                 <ToolbarContent>
                                     <ToolbarItem>
-                                        <Tooltip content="Download source" position={"bottom-end"}>
+                                        <Tooltip content="Download YAML" position={"bottom"}>
                                             <Button variant="primary" icon={<DownloadIcon/>} onClick={e => this.download()}>
-                                                Download yaml
+                                                YAML
                                             </Button>
                                         </Tooltip>
                                     </ToolbarItem>
                                     <ToolbarItem>
-                                        <Tooltip content="Download image" position={"bottom-end"}>
+                                        <Tooltip content="Download image" position={"bottom"}>
                                             <Button variant="secondary" icon={<DownloadImageIcon/>} onClick={e => this.downloadImage()}>
-                                                Download image
+                                                Image
                                             </Button>
                                         </Tooltip>
                                     </ToolbarItem>
diff --git a/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx b/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
index 3083c36..5c98f13 100644
--- a/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
+++ b/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
@@ -196,19 +196,6 @@ export class CamelUi {
         return name.split("-").map(v => CamelUtil.capitalizeName(v)).join('');
     }
 
-    static titleFromName = (name?: string) => {
-        name = name ? (name.substring(0, name.lastIndexOf('.')) || name) : undefined;
-        return name
-            ? name
-                .replace(".yaml", "")
-                .split("-")
-                .map((value) => CamelUtil.capitalizeName(value))
-                .reduce(
-                    (previousValue, currentValue) => previousValue + " " + currentValue
-                )
-            : name;
-    }
-
     static isActionKamelet = (element: CamelElement): boolean => {
         const kamelet = CamelUtil.getKamelet(element);
         if (kamelet) return kamelet.type() === 'action'
diff --git a/karavan-app/src/main/webui/src/eip/EipCard.tsx b/karavan-app/src/main/webui/src/eip/EipCard.tsx
index 0fab47e..bfb2f8d 100644
--- a/karavan-app/src/main/webui/src/eip/EipCard.tsx
+++ b/karavan-app/src/main/webui/src/eip/EipCard.tsx
@@ -51,7 +51,7 @@ export class EipCard extends React.Component<Props, State> {
                 <CardHeader>
                     {CamelUi.getIconForDslName(component.className)}
                 </CardHeader>
-                <CardTitle>{CamelUi.titleFromName(component.title)}</CardTitle>
+                <CardTitle>{component.title}</CardTitle>
                 <CardBody>{component.description}</CardBody>
                 <CardFooter>
                         <Badge isRead className="labels">{component.labels}</Badge>
diff --git a/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx b/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
index 2bae9fc..20d4388 100644
--- a/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
+++ b/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
@@ -51,7 +51,7 @@ export class KameletCard extends React.Component<Props, State> {
                 <CardHeader>
                     {CamelUi.getIconFromSource(kamelet.icon())}
                 </CardHeader>
-                <CardTitle>{CamelUi.titleFromName(kamelet.metadata.name)}</CardTitle>
+                <CardTitle>{kamelet.spec.definition.title}</CardTitle>
                 <CardBody>{kamelet.spec.definition.description}</CardBody>
                 <CardFooter>
                     {/*<div style={{justifyContent: "space-between"}}>*/}
diff --git a/karavan-app/src/main/webui/src/projects/CreateFileModal.tsx b/karavan-app/src/main/webui/src/projects/CreateFileModal.tsx
index 3072cf4..e2143f3 100644
--- a/karavan-app/src/main/webui/src/projects/CreateFileModal.tsx
+++ b/karavan-app/src/main/webui/src/projects/CreateFileModal.tsx
@@ -41,7 +41,7 @@ export class CreateFileModal extends React.Component<Props, State> {
         const extension = ProjectFileTypes.filter(value => value.name === fileType)[0].extension;
         const filename = (extension !== 'java') ? CamelUi.nameFromTitle(name) : CamelUi.javaNameFromTitle(name);
         const code = fileType === 'INTEGRATION'
-            ? CamelDefinitionYaml.integrationToYaml(Integration.createNew(name))
+            ? CamelDefinitionYaml.integrationToYaml(Integration.createNew(name, 'plain'))
             : '';
         if (filename && extension){
             const file = new ProjectFile(filename + '.' + extension, this.props.project.projectId, code);
diff --git a/karavan-app/src/main/webui/src/projects/ProjectModels.ts b/karavan-app/src/main/webui/src/projects/ProjectModels.ts
index 1b8515d..6ceb51b 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectModels.ts
+++ b/karavan-app/src/main/webui/src/projects/ProjectModels.ts
@@ -97,10 +97,10 @@ export class ProjectFileType {
 }
 
 export const ProjectFileTypes: ProjectFileType[] = [
-    new ProjectFileType("INTEGRATION", "Integration", "yaml"),
+    new ProjectFileType("INTEGRATION", "Integration", "camel.yaml"),
     new ProjectFileType("CODE", "Code", "java"),
     new ProjectFileType("PROPERTIES", "Properties", "properties"),
-    new ProjectFileType("OPENAPI", "OpenAPI", "json"),
-    new ProjectFileType("OPENAPI", "OpenAPI", "yaml"),
+    new ProjectFileType("OPENAPI_JSON", "OpenAPI YAML", "json"),
+    new ProjectFileType("OPENAPI_YAML", "OpenAPI JSON", "yaml"),
     new ProjectFileType("LOG", "Log", "log"),
 ];
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index ed3dbb4..e09b981 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -7,8 +7,6 @@ import {
     PageSection,
     Text,
     TextContent,
-    Toolbar,
-    ToolbarContent,
     Bullseye,
     EmptyState,
     EmptyStateVariant,
@@ -18,10 +16,8 @@ import {
     Modal,
     Flex,
     FlexItem,
-    ToggleGroup,
-    ToggleGroupItem,
     CodeBlockCode,
-    CodeBlock, Skeleton, Checkbox, Tabs, Tab, Tooltip, ToolbarItem
+    CodeBlock, Skeleton, Tabs, Tab
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {MainToolbar} from "../MainToolbar";
@@ -186,21 +182,11 @@ export class ProjectPage extends React.Component<Props, State> {
     }
 
     getType = (file: ProjectFile) => {
+        if (file.name.endsWith(".camel.yaml")) return ProjectFileTypes.filter(p => p.name === "INTEGRATION").map(p => p.title)[0];
+        if (file.name.endsWith(".json")) return ProjectFileTypes.filter(p => p.name === "OPENAPI_JSON").map(p => p.title)[0];
+        if (file.name.endsWith(".yaml")) return ProjectFileTypes.filter(p => p.name === "OPENAPI_YAML").map(p => p.title)[0];
         const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
-        if (extension === 'yaml') {
-            const isIntegration = CamelDefinitionYaml.yamlIsIntegration(file.code);
-            return isIntegration
-                ? ProjectFileTypes.filter(p => p.name === "INTEGRATION").map(p => p.title)[0]
-                : ProjectFileTypes.filter(p => p.name === "OPENAPI").map(p => p.title)[0];
-        } else {
-            const type = ProjectFileTypes.filter(p => p.extension === extension).map(p => p.title)[0];
-            if (type) {
-                return type
-                return type
-            } else {
-                return "Unknown"
-            }
-        }
+        return ProjectFileTypes.filter(p => p.extension === extension).map(p => p.title)[0];
     }
 
     title = () => {
@@ -219,7 +205,7 @@ export class ProjectPage extends React.Component<Props, State> {
                         <BreadcrumbItem to="#" isActive>{this.getType(file)}</BreadcrumbItem>
                     </Breadcrumb>
                     <TextContent className="title">
-                        <Text component="h1">{isLog ? filename : CamelUi.titleFromName(file.name)}</Text>
+                        <Text component="h1">{isLog ? filename : file.name}</Text>
                     </TextContent>
                 </div>
             }
@@ -263,9 +249,8 @@ export class ProjectPage extends React.Component<Props, State> {
             <TableComposable aria-label="Files" variant={"compact"} className={"table"}>
                 <Thead>
                     <Tr>
-                        <Th key='type'>Type</Th>
-                        <Th key='name'>Name</Th>
-                        <Th key='filename'>Filename</Th>
+                        <Th key='type' width={10}>Type</Th>
+                        <Th key='filename' width={50}>Filename</Th>
                         <Th key='action'></Th>
                     </Tr>
                 </Thead>
@@ -273,16 +258,15 @@ export class ProjectPage extends React.Component<Props, State> {
                     {files.map(file => {
                         const type = this.getType(file)
                         return <Tr key={file.name}>
-                            <Td modifier={"fitContent"}>
+                            <Td>
                                 <Badge>{type}</Badge>
                             </Td>
                             <Td>
                                 <Button style={{padding: '6px'}} variant={"link"}
                                         onClick={e => this.select(file)}>
-                                    {CamelUi.titleFromName(file.name)}
+                                    {file.name}
                                 </Button>
                             </Td>
-                            <Td>{file.name}</Td>
                             <Td modifier={"fitContent"}>
                                 <Button style={{padding: '0'}} variant={"plain"}
                                         isDisabled={file.name === 'application.properties'}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
index 23b346f..93e2ec2 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
@@ -121,9 +121,9 @@ export class ProjectPageToolbar extends React.Component<Props> {
 
     render() {
         const {isTemplates} = this.props;
-        return <Toolbar id="toolbar-group-types">
+        return <div>
             {isTemplates && this.getTemplatesToolbar()}
             {!isTemplates && this.getProjectToolbar()}
-        </Toolbar>
+        </div>
     }
 }