Chapter 4. The Visual Designer

1. Locate the integration in the flows list

2. Click on the pencil button

   

3. Type the new name

   
4. Press Enter or click in the accept button
5. Save the file

1. Locate the integration in the flows list

2. Click the eye icon next to the integration name

   

3. The integration toggles between visible and hidden on the canvas

   

1. Locate the integration in the flows list

2. Click the delete icon next to the integration name

   

3. Confirm deletion in the dialog that appears

   
4. The integration content is removed from the file

1. You can either Right-Click on the step you want to insert before or after. This will bring up a context menu with the available actions to choose from.
2. An easier alternative would be to hover over the connection between the two steps you want to insert between and then click on the + button that appears.

3. Hover over the connection between the Timer and the Log steps now and click the + button to execute the Add step action.

   
   Note

   When using the right-click context menu, the set of available actions depend on the selected step and can vary. There are actions for appending, prepending, replacing and deleting steps as well as some more specialized actions.

4. This will open up the Camel Catalog where you can search the step you want to add.

   

5. As already mentioned we would like to modify the message body before sending it along to the Log component. To achieve that we need to add a Processor called setBody. Let’s enter this name into the filter text field on top of the Catalog.

   

6. You can now select the setBody tile to add it to your route. Select the new added step now on the canvas to open the configuration form to the right.

   
7. Let’s change the Expression text field to <code>Hello from Kaoto!</code>.

8. Now the Log component will receive a <code>Hello from Kaoto!</code> message every second and logs it to the console.

   Note

   When using the right click context menu of a step, adding new steps is usually done with two actions.

   • Prepend can be used to add a step before the selected step
   • Append will add the new step after the selected step.

   However, on the first step of a flow and on steps that can have children, the Add Step action is used.

1. You can replace any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Replace action.

   
2. Alternatively you can do that also by invoking the context menu on a step and selecting the item Replace. Both ways it will open up the Camel Catalog and you can choose the replacement from there.

1. You can delete any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Delete action.

   
2. Alternatively you can do that also by invoking the context menu on a step and selecting the item Delete. This will remove the step from your integration.

1. You can enable or disable any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Enable / Disable action.

   Note

   Disabling a step will instruct the Apache Camel runtime to ignore the step when executing the flow. This can be convenient when prototyping a new route.

   

2. Alternatively you can enable / disable any step in your route by invoking the context menu on a step and selecting the item Enable / Disable.

   
3. In the picture above the Log component has been disabled. The icon is grayed out and there is a marker icon at the top right of the step to indicate it is disabled.

1. You can use the built-in documentation generating feature to create a Markdown file containing all the steps in your integration and all the changed parameters for these steps together with an image of your integration.

   

2. When you click the button it will open up a dialog with a preview of your integration documentation.

   
3. You can use the Visible Entities control in the top left of the dialog to control which routes are part of the documentation. You can either select all, just a subset or even just a single route.
4. Once you have made your choice you can specify a file name in the top right and then hit the Download button to retrieve the file in ZIP format.

1. Choose the right method: Use drag-and-drop for visual reorganization, copy/paste for duplication, and move-before/after for precise positioning
2. Plan before you reorganize: Think about the logical flow before moving or copying steps
3. Use visual feedback: When dragging, pay attention to the visual indicators showing valid drop zones and compatible targets
4. Test after reorganizing: Validate your routes after significant changes
5. Leverage undo/redo: Don’t hesitate to experiment - you can always undo
6. Combine methods: Use drag-and-drop, copy/paste, and move operations together for efficient workflow design
7. Save frequently: While undo/redo is available, regular saves ensure you don’t lose your work

How to use?

1. Clone Kaoto Camel catalog project
2. Navigate to the camel-catalog directory

3. Install the project dependencies

   yarn install

4. Build the default catalogs

   yarn build

5. This will generate a Catalog library containing:

   • Camel Main versions
   • Camel extensions for Quarkus
   • Camel Spring boot

   • Camel Kamelets

     Note

     To check what specific versions are included, please visit the index file

6. The resulting files will be in the catalog folder

   Note

   The latest catalog is version is available in the GitHub repository

7. Providing that folder through a http server will make it available for using it in Kaoto

1. In order to add multiple runtimes to the Catalog library, we can provide each runtime with its version using the following flags:

    -m,--main <version>               Camel Main version. If not specified,
                                      it will use the generator installed
                                      version
    -q,--quarkus <version>            Camel Extensions for Quarkus version
    -s,--springboot <version>         Camel SpringBoot version

2. For instance, running the following command will create a Catalog library with Camel Main 4.15.0 and Camel extensions for Quarkus 3.27.0:

   ./mvnw package; java -jar ./target/catalog-generator-0.0.1-SNAPSHOT.jar -o ./dist/camel-catalog -k 4.15.0 -m 4.15.0 -q 3.27.0 -n "My Catalog"

3. For a different Kamelets catalog version, the --kamelets or -k flag can be specified

   ./mvnw package; java -jar ./target/catalog-generator-0.0.1-SNAPSHOT.jar -o ./dist/camel-catalog -k 4.15.0 -m 4.15.0  -n "My Catalog"

1. In VSCode, go to the settings page and look for "Kaoto"

   

2. In the TextField, provide the URL of the index.json file that specifies the location of the subsequent catalogs, for instance, the public Kaoto catalog can be used:

   

3. Use the Kaoto editor status bar to select from a custom catalogs.

   

1. Navigate to the Deployments panel and click the Terminate button (🚫) next to your running integration:

   

1. Go to the terminal where Camel is running
2. Press Ctrl + C (or Cmd + C on macOS)

1. Create an integration in Kaoto’s visual designer
2. Run** the single integration to test basic functionality
3. Modify the integration based on test results
4. Run the folder to test with related integrations
5. Run the workspace to verify complete integration

1. Unit testing: Run single integrations in isolation
2. Integration testing: Run folders with related integrations
3. System testing: Run the entire workspace

1. Start with single integration execution to isolate issues
2. Add log processors to track message flow
3. Use the terminal output to identify problems
4. Make incremental changes and re-run

1. Group related integrations: Keep related integrations in the same folder for easier management
2. Use meaningful names: Name files descriptively (e.g., order-processing.camel.yaml, customer-sync.camel.yaml)
3. One integration per file: Recommended approach for better organization, testing, and version control
4. Separate concerns: Use different folders for different modules, features, or business domains
5. Consistent naming: Follow a naming convention across your project (e.g., domain-action.camel.yaml)

1. Test incrementally: Start with single integrations, then folders, then workspace
2. Use workspace settings: Configure Kaoto settings at workspace level (.vscode/settings.json), not globally
3. Monitor output: Keep the terminal visible during development to catch errors early
4. Stop when done: Always stop integrations when finished testing to free up resources
5. Clean restarts: Stop all integrations before making significant changes
6. Use logs effectively: Add log processors at key points for debugging