[METRON-1856] [UI] Implement parser grouping with drag and drop

• Type: New Feature
• Status: To Do
• Priority: Major
• Resolution: Unresolved
• Assignee: Unassigned
• Reporter: Tibor Meller
• Created: 05/Nov/18 14:01
• Updated: 06/May/19 10:16

Description

The capability to group parsers via the CLI already exists in Metron, but it currently is not possible to do so through the Management UI. This feature seems important as it allows users to pass in groups of parsers to start, stop, disable and enable rather than enacting the action on each individual parser.

An initial implementation of the UI was done by Tamás Fodor, Tibor Meller and myself (@ruffle1986, @tiborm and @sardell on GitHub, respectively), and the REST endpoint work was performed by Ryan Merriman in PR 1396: https://github.com/apache/metron/pull/1396.

Here is a brief description of the UI changes we proposing (and subsequently implemented in PR 1360).

In order to create a parser group, simply drag and drop two parsers together. A user can optionally update the name and add a description before creating the group. Notice that once a group is created, the parser group is highlighted in green and the parsers moved inside of a group are highlighted in yellow.

Once a user has created the parser groups they want, they can simply click on the apply button at the bottom of the screen. You'll notice the highlighting colors go away, a success message appears and controls for all the parsers in the group are available at the group level (in this case the start button).

If a user wants to add to a group or create a new group from nested parsers, they can choose to either merge or create a new group as shown below.

If a user wants to delete a group, they can simply click on the trash can icon in the group's controls section. We chose to keep the confirmation popup in addition to the apply button in order to prevent accidental group deletions and prevent sending multiple http delete calls one after the other to the backend. If a user decides not to delete a group after confirming with the modal window, they can click on the discard button to return to the previous state.

Issue Links

• relates to: METRON-2100 Update developer documentation for full dev management UI parser aggregation feature gap
• links to: GitHub Pull Request #1360

Sub-Tasks

• Add Drag and Drop Capability to Parsers: To Do
• Setup Parser Grouping Service with Mock Backend: To Do
• [UI] Moving components to sensor parser module: Done
• [UI] Aligning UI to the parser aggregation API: Done
• [UI] Removing redundant AppConfigService: Done
• [UI] Aligning models to grouping feature: Done
• [UI] Fixing early app config access issue: Done
• [UI] Move status information and start/stop to the Aggregate level: Done
• [UI] Making changes visible in the parser list by marking changed items: Done
• [UI] Editing parser aggregate updates: To Do
• Add NgRx and related dependencies: Done
• Add NgRx effects to communicate with the server: Done
• Add NgRx reducers to perform parser and group changes in the store: Done
• Add NgRx actions to trigger state changes: Done
• Add parser aggregation sidebar: Done
• Implement drag and drop mechanism and wire NgRx: Done
• Code clean up: Done
• Refactoring sensor-parser-config.component and wire NgRx: Done
• Update with the latest master branch: Done
• Update sensor effect tests to use mock store and actions: To Do
• [UI] Eliminate Create new/merge screen: Done
• [UI] Extend e2e tests: Done
• [UI] Delete confirmation dialogue looks visually broken: In Progress
• Merge master into feature branch: To Do
• Wrong validation message appears when clicking on input of existing group: Done