TOSCA nodes attributes III | Interfaces & Artifacts

Welcome to the TOSCA nodes attributes III | Interfaces & Artifacts challenge. In this challenge, we are looking for you to enhance the Nodes attributes modules. 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/59039067
2. Storyboard source has been provided in the forum.
3. The TOSCA app has been attached in the forum.
4. NgRx docs

• For the option values of drop-downs & autocomplete text JSON file(s) should be used.

1 Interfaces

• Ref: https://marvelapp.com/62b5ae5/screen/59039067
• Interface YAML structure snapshot
• Existing_v2.yaml Refer this only for the Interfaces.
• Clicking Interfaces in the modal sidebar nav should open the interfaces tab.

1.1 Interfaces column

• In the Interfaces column all the text are editable.
• Clicking the + Add Interface button should add a new interface to the column. The YAML code should also be updated.

1.2 Operations column

• In the Operations column all the text are editable.
• Clicking the + Add Operation button should add a new operation to the column. The YAML code should also be updated.

1.3 Implementation API

• A user should be able to type an API name or select an API from the drop-down options.

1.4 Dependencies

• A user should only be able to select a Dependency from the drop-down options.
• Clicking the + button should add a new dependency to the column. The YAML code should also be updated.
• Every added dependency should have input & output properties ref: Interface YAML structure snapshot
• To add/update the values of these inputs & outputs at first select the dependency and then app/update the values from the right side input & output sections.
• Selected any depencency should unselected any selected operation in the operations column

1.5 Inputs

• In the Inputs column all the text are editable.
• Please add a + Add Input button at the bottom similar to what it's there for the Interfaces column.
• Clicking the + Add Input button should add a new input to the column.
• The values of the selected input can be defined through the Values column.
• The value can be of type Constant or get_input or get_property or get_operation_output.
• This should work simlar to the value editor implemented in the Properties tab.
• Ref to the challenge spec. of this challenge for more details on this editor.

1.6 Outputs

• Ref: https://marvelapp.com/62b5ae5/screen/59039038
• In the Inputs column all the text are editable.
• Please add a + Add Output button at the bottom similar to what it's there for the Interfaces column.
• Clicking the + Add Output button should add a new output to the column.

1.2 Input & Output values of Operations column

• Every operation has inputs & outputs fields. Ref: Interface YAML structure snapshot.
• Clicking an operation value from the *operations column` should unselect any selected dependencies & it should allow defining the values of inputs & oputputs for the selected operation.
• Workflow for adding values to inputs & outputs should be same as is described in the 1.5 Inputs & 1.6 Outputs sections.

2 Artifacts

• Ref: https://marvelapp.com/62b5ae5/screen/59039025
• Artifacts YAML structure snapshot
• The second repositories column is NOT required. Please remove this.
• Clicking + Add New should add a new artifact to the column.
• Selecting an artifact should allow adding/updating its values.
• The Type should be a combination editable text field & a dropdown.
• The files search works as am autocomplete control.
• Adding some text shows the matching option & clicking any option for the list should select that file, replacing the existing.
• Version should allow selecting a version.
• Ignore the constraints for now.

3 Existing Function & Network diagram connections

• All the Existing Function & Network diagram connections implemented in this application should work as it is.