TOSCA POC | Blueprint editor workflow

Welcome to the TOSCA POC | Blueprint editor workflow 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.

Storyboard:

Only the sections listed below are in scope.

1. It's the sidebar section.
2. It's the actions sections.
3. It's the YAML code viewer.

1. Importing blueprint YAML

• 1.1 On running the application, YAML format blueprint file should be load using ajax.
• 1.2 After loading YAML, parse this into JSON & based on the JSON implement the requirements below.

2. Creating sections & populating data

• Based on the JSON parsed from the YAML blueprint file, the sidebar tree structure should be created. https://d.pr/free/i/qNt908
• Notice that there are child nodes for every root node & some subnodes.

3. CTAs (Action buttons)

• Clicking View YAML buttons should show the YAML code in the code editor (code should be read-only). The YAML code should be generated from JSON data we created in section 1.1 above.
• Clicking Download should generate the YAML file & trigger the browser download dialog to download the generated YAML.
• Clicking Save should do nothing.
• Clicking Validate should validate the generated YAML & show the validation status in a browser default alert window.