TOSCA POC V | Create Network from YAML

Welcome to the TOSCA POC V | Create Network from YAML Challenge. In this challenge, we are looking for you to update the Angular 2+ POC application based on requirements below.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript

General requirements

Layout

• The POC should support resolutions 1920px x 1080px and above.
• The application layout should appear somewhat similar to the sides/images provided.
• It's NOT required to exactly match font, font-size, color, element dimension, etc because the focus is mainly on the POC functions.

Framework specific

• Imp!: Blueprint data should be fetched from YAML file for other application data JSON format mock files can be used.
• Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
• Use Dependency Injection coding pattern.
• ng build should work without throwing any error.

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

0 Resources & links

• Refer to the forum.

1 Storyboard:

2. Download

• After drawing a network, Click download button download the YAML based on the network drawn. Refer to this challenge spec to know more.

3. Importing YAML

1. Add a new button Import in the upper right buttons section.
2. Clicking this button should open browser default upload window that should allow importing *.yaml format files only.
3. On importing these file the page (sidebar, canvas network etc.) should be updated based on the uploaded YAML file.

3. Drawing Network from YAML code.

1. The network on the canvas must be drawn based on the imported YAML file. For this, you may update the YAML file structure when drawing the Network Diagram.
2. All the codes/data for drawing the Network should be placed under the interfaces > ConnectedNode variable. See the image below.

1. Create an algorithm or use some open source plugin to create the Canvas network diagram based on the imported YAML.
2. The algorithm/plugin must not use the properties>positionX & properties>positionY values, instead the position should be automatically calculated.
3. It's acceptable if every time a user uploads a file the Canvas Network Diagram is drawn differently. As it's based on the algo.

6. Refreshing the page

1. Currently, on refreshing the page, the canvas network stays as it is. We are using LocalStorage to store network info. This feature should work after implementing the requirements here.