TOSCA node attributes III | Requirement, Capabilities & Interfaces

Welcome to the TOSCA node attributes III | Requirement, Capabilities & Interfaces challenge. In this challenge, we are looking for you to create a new module Nodes attributes in the existing TOSCA APP. The new module should make use of NgRx & Redux.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript
• Redux
• NgRx

General requirements

Layout

• The UI should support resolutions 1920px x 1080px and above.

Framework specific

• Follow the best practices of NgRx listed here.
• Create a state that should be accessed by many components and services.
• Follow the SHARI principle:
• • Shared: a state that is accessed by many components and services.
• • Hydrated: a state that is persisted and rehydrated from external storage.
• • Available: a state that needs to be available when re-entering routes.
• • Retrieved: a state that must be retrieved with a side-effect.
• • Impacted: a state that is impacted by actions from other sources.
• Store & Store Devtools integration should be added.

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
• IE11 is the primary browser.

App Requirement

The layout of the given app should be updated based on the new storyboard. As much as possible use the same directory structure.

0 Resources & links

1. Marvel storyboard https://marvelapp.com/62b5ae5/screen/59039051
2. Storyboard source has been provided in the forum.
3. The TOSCA app has been attached in the forum.
4. NgRx docs

1 Requirements

• Ref: https://marvelapp.com/62b5ae5/screen/59039048
• The right side sections is a placeholder image, replace the placeholder image with UI elements & functions.
• Based on this snapshot, update the structure of requirement node in Existing.yaml when adding the right side section attribute.
• Remove the capability attribute, it's no longer required sanpshot. After removing the capability make sure that the nodes in the network diagram can still be linked/connected.
• The object structure should be updated for all the properties in existing.yaml
• modable_entity should have the same options as it's for properties values editor https://d.pr/free/i/kYhsfm & work similarly.
• target_entity option list should be blank if no modable_entity selected, if it's selected then it should list the direct values node_templates for the selected modable_entity. Refer to the properties values editor for more details.
• The Requirement Type drop-down options should be empty if the value target_entiy is null otherwise it should list the direct values of requirements field value of the selected target_entity snapshot.
• The Relationship Type should be a text field & NOT a dropdown. It should be empty if the value Requirement Type is null otherwise it should have the value of relationship field value of the selected ``Requirement Type` snapshot.
• The rightmost constraint editor should be multi-level constraint editor & on adding/updating the values constraint editor the values of constraints node of the property should be updated.
• The nodes list with pink + sign should list the direct values of node_templates if the value of target_entity is not null. Clicking + should do nothing for now.

2 Capabilities

• Ref: https://marvelapp.com/62b5ae5/screen/59039025
• The right side sections is a placeholder image, replace the placeholder image with UI elements & functions.
• Follow the 1. Requirements section to implement this.
• This is the object structure of the capabilities node value.

3 Synching Requirement & Capability with the network diagram

• Every node has Requirements & Capabilities. If any of the requirement_name matches any of the capability_name then only those two nodes can be connected.
• As a user updates the requirements and capabilities of a node the network diagram should also be updated based on these changes.
• Let's say two nodes are connected & user updates the capabilities & requirements such that capabilities of the node no longer match any requirement of the other nodes. In this case, the existing connection should be removed from the network diagram.
• Ref: https://d.pr/free/i/JjqpDO the tick & cross icons when selecting a node should also be updated based on the change made by a user for a node.
• Right now there's some bug in the network diagram. On clicking a node, other matching nodes are not getting a green tick. Please fix this by following the workflow here (click nodes from left sidebar list to make the network diagram visible).
• Ref network editor here: https://tc-tosca-nw.herokuapp.com/yaml-editor/network. On pressing the refresh button on the network editor, the same auto-layout should be drawn every time. Right now, it's different every time a user clicks the refresh button.

4. Interfaces

• Ref: https://d.pr/free/i/KKTEtx
• The sections marked in red is out of scope. You can use placeholder image for that section or can leave it blank.
• The value of an interface should be added to the interfaces attribute of the selected node. Ref this for mapping of values in scope: https://d.pr/free/i/x2wPAa
• Operation has only one value & more can be added using the + Add button.
• Clicking + Add button in interfaces column should also add a new interface.

5 Existing Function

• All the existing functions implemented in this application should work as it is.