.. This work is licensed under a Creative Commons Attribution 4.0 International License.
.. http://creativecommons.org/licenses/by/4.0
.. Copyright (C) 2019 IBM.

.. _designer_guide:

Designer Guide
==============
.. toctree::
   :maxdepth: 4

.. note::
    **How to Get Started with CDS Designer UI**

    If you’re new to CDS Designer UI and need to get set up, the following guides may be helpful:

    -  :ref:`running_cds_ui_locally`

Getting Started
---------------
This is your CDS Designer UI guide. No matter how experienced you are or what you want to achieve,
it should cover everything you need to know — from navigating the interface to making the most of different features.

What is CDS Designer UI?
------------------------
+----------------------------------------------+--------------+
| CDS Designer UI is a framework to automate   |              |
| the **resolution of resources** for          |    |image1|  |
| **instantiation** and any **config**         |              |
| provisioning operation, such as day0, day1,  |              |
| or day2 configuration.                       |              |
|                                              |              |
|                                              |              |
| CDS has both **design-time** and             |              |
| **run-time** activities; during design time, |              |
| **Designer** can **define** what **actions** |              |
| are required for a given service, along with |              |
| anything comprising the action. The design   |              |
| produces a  :ref:`CBA Package <cba>`         |              |
|                                              |              |
|                                              |              |
| Its **content** is driven from a **catalog** |              |
| of **reusable data dictionary** and          |              |
| **component**, delivering a reusable and     |              |
| simplified **self-service** experience.      |              |
|                                              |              |
| CDS modeling is mainly based on **the TOSCA  |              |
| standard**, using JSON as a representation.  |              |
+----------------------------------------------+--------------+

What's new?
-----------
+----------------------+----------------------+----------------------+
| |image2|             | |image3|             | |image4|             |
|                      |                      |                      |
| Create full CBA      | Import old packages  | Create sophisticated |
| packages from        | for edit and         | package workflows in |
| built-in forms       | collaboration        | a no-code graphical  |
| without programming  |                      | designer             |
|                      |                      |                      |
| |image5|             | |image6|             | |image7|             |
|                      |                      |                      |
| Customizable CBA     | Easily create and    | Integration between  |
| Package actions      | manage lists of data | CDS UI and SDC       |
|                      | via interface (Data  | Services             |
|                      | Dictionary,          |                      |
|                      | controller catalog,  |                      |
|                      | and config           |                      |
|                      | management)          |                      |
+----------------------+----------------------+----------------------+

Overview of CDS Interface
-------------------------
Full CDS UI screens are available in `InVision <https://invis.io/PAUI9GLJH3Q>`__

|image8|

1. **CDS main menu:** Access all CDS module list including Packages, Data Dictionary, Controller Catalog, etc.
2. **Profile:** Access user profile information
3. **Module Title:** See the current module name and the total number of items in the module list
4. **Module list:** View all active items in module and tools for search and filtering

CBA Packages
------------

Package List
~~~~~~~~~~~~
It gives you quick access to all and most recent created/edit packages

|image9|

1.  **Module Tabs:** Access All, Deployed, Under Construction, or Archived packages
2.  **Search:** Search for a package by title
3.  **Filter:** Filter packages by package tags
4.  **Package Sort:** Sort packages by recent or alphanumeric (name) or version
5.  **List Pagination:** navigate between package list pages
6.  **Create Package:** Create a new CBA package
7.  **Import Package:** Import other packages that are created previously on CDS Editor or Designer or created by other/current user
8.  **Package box:** It shows a brief detail of the package and gives access to some actions of the package
9.  **Deployed package indicator**
10. **Package name and version**
11. **More menu:** Access a list of actions including Clone, Archive, Download, and Delete
12. **Last modified:** Shows user name and date and time of last modifications made in the package
13. **Package Description**
14. **Package Tags**
15. **Collaborators:** See who's collaborating to edit in the package
16. **Configuration button:** Go directly to package configuration
17. **Designer Mode:** It indicates package mode (Designer, Scripting, and Generic scripting) and by clicking on it, it will load to mode screen

Create a New CBA Package
------------------------

User Flow
~~~~~~~~~

|image10|

Create a New Package
~~~~~~~~~~~~~~~~~~~~
You can create a new CBA Package by creating a new custom package or by import a package file that is already created before.

.. note::
	**Create/Import Package**
	You can’t create/import a CBA package that has the same name and version
	of an existing package. Packages can be in the same name but in
	different version numbers (ex., Package one v1.0.0 & Package one v1.0.1).

**Create a New Custom CBA Package**
From the Packages page, click on the **Create Package** button to navigate to **Package** **Configuration**

|image11|

:ref:`MetaData <tosca_meta>`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

In **MetaData Tab,** select Package Mode, enter package Name, Version,
Description and other configurations

|image12|

Once you fill in all required inputs, you can save this package by clicking the **Save** button in the Actions menu

|image13|

**Package Info Box:** It is in top of configurations tabs and it appears after you save a package for the first time

|image14|

You can continue adding package configuration or go directly to the **Designer Mode** screen from Package info box

All changes will be saved when you click on the **Save** button

To close the package configuration and go back to the Package list, navigate to the top left in breadcrumb and click the **CBA Packages**
link or click on the **Packages** link in the Main menu.

:ref:`Template & Mapping <template>`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can create as many templates using

artifact-mapping-resource (:ref:`artifact_type` -> Mapping)
or/and
artifact-template-velocity  (:ref:`artifact_type` -> Velocity)

|image15|

1. **Template name**
2. **Template Section:** Where you include template attributes
3. **Manage Mapping:** Here the automapping process occurs to template attributes to refer to the data dictionary that will be used to resolve a particular resource.

**Template Section**

|image16|

1. **Template Type:** Template is defined by one of three templates (Velocity, Jinja, Kotlin)
2. **Import Template Attributes/Parameters:** You can add attributes by Import attribute list file or by
3. **Insert Template Attributes/Parameters Manually:** You can insert Attributes manually in the code editor. Code editor validates attributes according to the pre-selected template type

**Import Template Attributes**

|image17|

After import attributes, you can add/edit/delete attributes in the code editor.

|image18|

**Manage Mapping Section**

|image19|

1. **Use current Template Instance:** You can use attributes from the Template section
2. **Upload Attributes List:** In case you don’t have existing attributes in Template section or have different attributes, you can upload the attributes list

Once you select the source of attributes, you get a confirmation of success fetching.

|image20|

Then the Mapped Table appears to show the Resource Dictionary reference.

|image21|

When you finish the creation process, you must click on **the Finish button (1)**
to submit the template, or you can clear all data by click on **the Clear button** **(2).**

|image22|

:ref:`Scripts <scripts>`
~~~~~~~~~~~~~~~~~~~~~~~~

*Allowed file type: Kotlin(kt), Python(py), Jython, Ansible*

To add script file/s, you have two options:

1. **Create Script**
2. **Import File**

**Enter file URL:** Script file can be stored in server and you can add this script file by copy and paste file URL in URL input then
**press ENTER** key from the keyboard

|image23|

**Create a Script File**

1. **File Name:** Add the script file name
2. **Script Type:** Choose script type (Kotlin, Jython, Ansible)
3. **Script Editor:** Enter the script file content

|image24|

After you type the script, click on the **Create Script** button to save it

|image25|

By adding script file/s, you can:
1. Edit file: You can edit each script file from the code editor
2. Delete file

|image26|

:ref:`Definitions <data_type>`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To define a data type that represents the **schema** of a specific type of **data**,
you have to **enrich** the package to automatically generate all definition files:

1. **Enrich Package:** from the package details box, click on the Enrich button

|image27|

Once you successfully enrich the package, all definition files will be listed.

|image28|

By definition file/s, you can Delete file

|image29|

:ref:`External System Authentication Properties <external_system>`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In order to populate the system information within the package, you have to provide **dsl_definitions**

|image30|

Topology Template
~~~~~~~~~~~~~~~~~
Here you can **manually** add your package:

1. :ref:`Workflow <workflow>` that define an overall action to be taken on the service
2. :ref:`Node/Component template <node_type>` that is used to represent a **functionality** along with its **contracts**, such as **inputs**, **outputs**, and **attributes**

|image31|


Hello World CBA Reference
-------------------------

-  :ref:`hello_world_resource_resolution_cba`
-  :ref:`hello_world_script_executor_cba`


.. |image1| image:: https://wiki.onap.org/download/attachments/84650426/CDS%20Logo.png?version=4&modificationDate=1591723580000&api=v2
   :width: 200pt
.. |image2| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%201.png?version=1&modificationDate=1591032224000&api=v2
   :width: 50pt
.. |image3| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%202.png?version=1&modificationDate=1591032225000&api=v2
   :width: 47pt
.. |image4| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%203.png?version=1&modificationDate=1591032226000&api=v2
   :width: 47pt
.. |image5| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%204.png?version=1&modificationDate=1591032227000&api=v2
   :width: 60pt
.. |image6| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%205.png?version=1&modificationDate=1591032227000&api=v2
   :width: 50pt
.. |image7| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%206.png?version=1&modificationDate=1591032228000&api=v2
   :width: 30pt
.. |image8| image:: https://wiki.onap.org/download/attachments/84650426/Interface.jpg?version=2&modificationDate=1609155664000&api=v2
   :width: 1000pt
.. |image9| image:: https://wiki.onap.org/download/attachments/84650426/Package%20List.jpg?version=3&modificationDate=1609322704000&api=v2
   :width: 1000pt
.. |image10| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package%20User%20flow.jpg?version=2&modificationDate=1609156805000&api=v2
   :width: 1000pt
.. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=2&modificationDate=1609157022000&api=v2
   :width: 1000pt
.. |image12| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20MetaData.jpg?version=2&modificationDate=1609157275000&api=v2
   :width: 1000pt
.. |image13| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Action%20Menu.jpg?version=2&modificationDate=1609157671000&api=v2
   :width: 1000pt
.. |image14| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Info%20Box.jpg?version=2&modificationDate=1609158391000&api=v2
   :width: 1000pt
.. |image15| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%201.jpg?version=2&modificationDate=1609158797000&api=v2
   :width: 1000pt
.. |image16| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%202.jpg?version=2&modificationDate=1609158980000&api=v2
   :width: 1000pt
.. |image17| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%203.jpg?version=2&modificationDate=1609159240000&api=v2
   :width: 500pt
.. |image18| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%204.jpg?version=1&modificationDate=1609159448000&api=v2
   :width: 1000pt
.. |image19| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%205.jpg?version=1&modificationDate=1609159694000&api=v2
   :width: 1000pt
.. |image20| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%206.jpg?version=2&modificationDate=1609159862000&api=v2
   :width: 1000pt
.. |image21| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%207.jpg?version=3&modificationDate=1609162172000&api=v2
   :width: 1000pt
.. |image22| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%208.jpg?version=2&modificationDate=1609162135000&api=v2
   :width: 1000pt
.. |image23| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%201.jpg?version=2&modificationDate=1609163160000&api=v2
   :width: 1000pt
.. |image24| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%202.jpg?version=2&modificationDate=1609164336000&api=v2
   :width: 1000pt
.. |image25| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%203.jpg?version=2&modificationDate=1609164337000&api=v2
   :width: 1000pt
.. |image26| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%204.jpg?version=1&modificationDate=1609164989000&api=v2
   :width: 1000pt
.. |image27| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%201.jpg?version=2&modificationDate=1609167774000&api=v2
   :width: 1000pt
.. |image28| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%202.jpg?version=2&modificationDate=1609168384000&api=v2
   :width: 1000pt
.. |image29| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%203.jpg?version=2&modificationDate=1609168385000&api=v2
   :width: 1000pt
.. |image30| image:: https://wiki.onap.org/download/attachments/84650426/DSL.jpg?version=1&modificationDate=1609168557000&api=v2
   :width: 1000pt
.. |image31| image:: https://wiki.onap.org/download/attachments/84650426/Topology%20Template.jpg?version=1&modificationDate=1609169308000&api=v2
   :width: 1000pt