TOSCA POC II | Blueprint Editor Network Diagram

Welcome to the TOSCA POC II | Blueprint Editor Network Diagram Challenge. In this challenge, we are looking for you to create a POC application based on Angular 2+ framework.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript

General requirements

Layout

• The POC should support resolutions 1280px x 720px and above.
• The application layout should appear somewhat similar to the sides 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

• 0.1 Storyboard powerpoint slides are attached in the forum only the sides mentioned in forum are in scope.
• 0.2 YAML blueprint files structure & example YAML file are also prvided in the forum.

1 Storyboard:

Only the sections listed below are in scope.

1. Sidebar section
2. Dynamic Nodes list (list of nodes present on canvas)
3. Canvas
4. Nodes List Dropdown
5. Dragged element

2. Sidebar section & Dynamic Nodes list

1. Hardcode all the nodes. No need to add child elements for any of these nodes except Nodes node.
2. The child elements Nodes should be dynamic & are based on Nodes present on the canvas.
3. When a user drags a new node or removes a node from canvas, this dynamic list should be updated.

3. Nodes List Dropdown & Canvas

1. The nodes in Nodes List Dropdown should be populated by importing this YAML. You may need to convert the YAML to JSON.
2. A user can drag-drop these nodes on canvas. Clicking Nodes drop-down element will open the list & the list will stay open unless the user clicks 'Nodes' drop down again.
3. When A new node is dropped on the canvas, the node should get a unique id. Id name is up to you.
4. Use any icons of your choice for the node list. These icons should be from Material icons

4. Making connection among nodes

1. Every node has one Capability & one Requirement.
2. If the Capability of a node matches the Requirement of any other node then only the two nodes can be connected.
3. Clicking a node on the canvas should show X or tick icon below every node icon. If a connection can be made between clicked node the other node then the other node should show a tick icon below the node otherwise it should show X icon. Ref. to the above image.
4. When a node is connected with another node then the interfaces > ConnectedNode should add the id of node it's connected with. In other words, the interfaces > ConnectedNode values of a node should contain the ids of nodes it is connected with.

ex: Here the 1st & 2nd nodes are connected. Ref: sample_blueprint_network.yaml

1. A node can have at most 4 connection. Ctrl + Click a node with the tick icon below it should make a connection between the selected node & the Ctrl + Clicked node.
2. You can also suggest other approaches to make connections among nodes in the challenge forum.
3. A node can have at most 4 connection.
4. Any open source library can also be used for creating a network on canvas.

5. Save

1. Clicking Save button should print the blueprint of Network drawn on the canvas in JSON format, in the browser console window.
2. The JSON network appears like this blueprint_network.json. You are free to add more data if needed.

1. The 'PositionX & PositionY' values contain the x, y positions of node placed on the canvas

6. Refreshing the page

1. On refreshing the page the network diagram on canvas should retain its structure.
2. To achieve this requirement you can save the JSON structure of the network diagram in local-storage & on refreshing the page the network diagram can be drawn from the JSON data save in local-storage.
3. You can also suggest any other approach in the challenge forum.