TOSCA Constraint Editor POC | get_property

Welcome to the TOSCA Constraint Editor POC | get_property Challenge. In this challenge, we are looking for you to enhance the POC application based on Angular 2+ framework with the requirements listed 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 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

In the previous challenges Challenge 1 , Challenge 2 & Challenge 3 we had created the Level 1, Level 2 & Level 3 functions. We have also implemented the get_input functions. In this challenge, we are going implement the get_property functions..

0 Resources & links

1. Storyboard powerpoint slides are attached in the challenge forum. Only the sides mentioned in the forum are in scope.
2. Slides explaining functions & get_property is attached in the forum.

1. Storyboard:

Only the sections marked in green are in scope. Other than that the sidebar should also be updated & button functions should work.

1. This section should stay in sync with the selected sidebar function (with the green arrow). Changing the value in one drop-down should automatically change the value in the other.
2. Function editor: here we have to implement the get_property function.

2. Existing Submission overview

• Importing blueprint YAML, creating sidebar structure & level 1, level 2 & level 3 functions has already been done in the previous challenges.

2. Importing linked file.

• On page load after the Existing.yaml is loaded, load the files listed in imports node. In this case it's create_scheme_node_definitions_v2.yaml.
• This file will be used in then next step (section 3.2). So make sure to save it's values in some variable.

3. get_property

• When a user selects get_property upload the options below with the options shown below the drop-down. Ref: https://d.pr/free/i/aM9h2h
• There are tree drop-downs synched with each other:

3.1 modable_entity

• It should list Self & the values of imports node. Ref: https://d.pr/free/i/wT3LXy

3.2 target_entity

• If no value is selected in modable_entity text-box, it should not show any options. & If Self is selected in the modable_entity select control then it's drop-down options should show the immediate values of node_templates Ref: https://d.pr/free/i/UJPJNX . In this case, it should the options as newEquipmentProject, newEquipmentScheme, pRouterDevice, pRouterShelf, pRouterCard
• If some other option is selected in the modable_entity select control (let say it's create_scheme_node_definitions_v2.yaml) then it's drop-down options should show the immediate values of node_templates from this selected file. In this case, it should the options as newEquipmentProject_2, newEquipmentScheme_2, pRouterDevice_2, pRouterShelf_2, pRouterCard_2. Ref: https://d.pr/free/i/W2TmaZ

3.3 property_entity

• If target_entity select control's value is null then there should be no drop-down values for the property_entity select control.
• If target_entity select control's value is not null then the drop-down options of property_entity select control should list the values from the properties node of the target_entity's selected value. Ref: https://d.pr/free/i/CZ46Qb . In this case, it's sysid, project_id, project_type...

3.4 Code view

• https://d.pr/free/i/tM6HvZ
• Update the code view based on the selected nodes.
• No need to match the style, you can follow the existing style.

4. Existing functions

• The existing functions implemented on clicking the button on the upper right section should continue to work even after implementing the above requirements.