How does it work?
The following image represents what a user visualizes for a Flow Manager service linked to the Configurator.
In order to describe the functionalities of the tool let's split the interface in 3 main components:
Header
The header is always displayed on top of the Configurator, it provides the following features.
Flow Selector
The flow selector component is placed on the left side of the header. It provides a dropdown menu which allows to switch from a Flow Manager service to another.
Go to microservice
The Go to microservice button is placed on the right side of the header. It redirects the user to the Microservices section in Design Area, in particular to the linked Flow Manager microservice.
History Buttons
The history buttons are placed on the right side of the header. They provide the standard history actions: undo and redo. The history is based on actions that result in configuration changes: the maximum supported length is 10 actions.
Settings
The settings button is placed on the right side of the header. It provides a dropdown menu with the following options:
- Persistency Management
- Deep Merge (only for Flow Manager version >=
2.6.0) - Unlink microservice (only for linked services)
Persistency Management
The persistency management modal allows to configure the persistency method used by the Flow Manager service. The displayed types depend on the Flow Manager version as described here.
Deep Merge
The deep merge modal allows to configure the deep merge setting of the Flow Manager as described here.
This feature is available starting from Flow Manager version 2.6.0.
Unlink Microservice
The unlink microservice modal alerts the user before actually performing the unlink process.
Canvas
The canvas component allows to actually visualize the configured flow: states are represented by nodes and events are represented by edges.
Events that link the same states are collapsed into a single edge.
Create Entities
New states can be created in the following ways:
- Click the Add state button placed on the top right corner of the canvas
- Double click on canvas empty space.
New events can be created in the following way:
- Drag and drop from the right handle of the source state to the left handle of the target state.
In addition, it is possible to create both a state and an event at the same time:
- Drag and drop from the right handle of the source state to an empty area of the canvas.
This will create a new state and a new event that link the source state to the new state.
Edit Entities
Some properties of states and events can be edited directly on the canvas. In particular, both states and events position can be edited simply by dragging and dropping the entity into a new position.
Finally, states with no command offer a select to set a command.
Control Buttons
Control buttons are placed in the corners of the canvas.
Button placed in the top left corner provide the following features:
- Searchbar → searches for states and events of the flow, clicking on an item will cause it to be centered and selected
Button placed in the top right corner provide the following features:
- Download flow → exports an image representing the whole flow or the current view
- Highlight → enters the highlight mode
- Add state → creates a new state
Button placed in the bottom right corner provide the following features:
- Zoom out
- Zoom in
- Fit view → centers the flow and chooses the right zoom to visualize the entire flow
- Collapse/Expand → collapses or expands nodes and edges
- Auto layout → auto computes and sets nodes and edge positions
- Toggle side panel visibility.
Side Panel
The side panel component is displayed on the right side of the Configurator, it can be collapsed using a control button on the canvas.
The side panel can display many scenarios as described below.
Library and Communication
This is the default scenario. This scenario is composed by 2 tabs: Library and Communication.
Library
This tab contains the State Groups and Event Groups recap. It allows to open the creation modal or the edit form for each of the entities above.
State Group
State group creation modal can be opened clicking the Plus button placed in the library scenario. A form placed in the side panel allows to edit or delete the selected state group.
Event Group
Event group creation modal can be opened clicking the Plus button placed in the library scenario. A form placed in the side panel allows to edit or delete the selected event group.
Communication
This tab contains the Commands, Protocols, Hooks and Side Effects recap. It allows to open the creation modal or the edit form for each of the entities above.
Command
Command creation modal can be opened clicking the Plus button placed in the communication scenario. A wizard will help the creation process following these steps:
- set a label and an optional description
- set an optional hook (using an existing one or creating in place a new one)
- set a communication protocol (using an existing one or creating in place a new one)
A form placed in the side panel allows to edit or delete the selected command. Moreover it allows to set a custom hook which is not registered in the hooks recap and thus cannot be reused elsewhere.
Protocol
Protocol creation modal can be opened clicking the Plus button placed in the communication scenario. With Kafka type it is possible to create an event, command or duplex protocol; with REST type it is possible to create only command protocols.
A form placed in the side panel allows to edit or delete the selected protocol.
Hook
Hook creation modal can be opened clicking the Plus button placed in the communication scenario. A form placed in the side panel allows to edit or delete the selected hook.
Side Effect
Side effect creation modal can be opened clicking the Plus button placed in the communication scenario. A wizard will help the creation process following these steps:
- set a label and an optional description
- set an optional hook (using an existing one or creating in place a new one)
- set a communication protocol (using an existing one or creating in place a new one)
A form placed in the side panel allows to edit or delete the selected side effect. Moreover it allows to set a custom hook which is not registered in the hooks recap and thus cannot be reused elsewhere.
State
This form allows to edit or delete the selected state. It can be visualized selecting a state (i.e. a node) on the canvas.
The "Is final" toggle is automatically disabled and set to false when an outgoing event (targeting a different state) is created.
Initial Event
This form allows to edit or delete the initial event. It can be visualized selecting the initial event on the canvas.
Event
This form allows to edit or delete the selected event. It can be visualized selecting an event (i.e. an edge) on the canvas. In case the edge refers to multiple events, the scenario will display a collapsed form for each event.
