docs/ui/designer-guide.rst

   1
   2 .. This work is licensed under a Creative Commons Attribution 4.0 International License.
   3 .. http://creativecommons.org/licenses/by/4.0
   4 .. Copyright (C) 2019 IBM.
   5
   6 .. _designer_guide:
   7
   8 Designer Guide
   9 ==============
  10 .. toctree::
  11    :maxdepth: 4
  12
  13 .. note::
  14     **How to Get Started with CDS Designer UI**
  15
  16     If you’re new to CDS Designer UI and need to get set up, the following guides may be helpful:
  17
  18     -  :ref:`running_cds_ui_locally`
  19
  20 Getting Started
  21 ---------------
  22 This is your CDS Designer UI guide. No matter how experienced you are or what you want to achieve,
  23 it should cover everything you need to know — from navigating the interface to making the most of different features.
  24
  25 What is CDS Designer UI?
  26 ------------------------
  27 +----------------------------------------------+--------------+
  28 | CDS Designer UI is a framework to automate   |              |
  29 | the **resolution of resources** for          |    |image1|  |
  30 | **instantiation** and any **config**         |              |
  31 | provisioning operation, such as day0, day1,  |              |
  32 | or day2 configuration.                       |              |
  33 |                                              |              |
  34 |                                              |              |
  35 | CDS has both **design-time** and             |              |
  36 | **run-time** activities; during design time, |              |
  37 | **Designer** can **define** what **actions** |              |
  38 | are required for a given service, along with |              |
  39 | anything comprising the action. The design   |              |
  40 | produces a  :ref:`CBA Package <cba>`         |              |
  41 |                                              |              |
  42 |                                              |              |
  43 | Its **content** is driven from a **catalog** |              |
  44 | of **reusable data dictionary** and          |              |
  45 | **component**, delivering a reusable and     |              |
  46 | simplified **self-service** experience.      |              |
  47 |                                              |              |
  48 | CDS modeling is mainly based on **the TOSCA  |              |
  49 | standard**, using JSON as a representation.  |              |
  50 +----------------------------------------------+--------------+
  51
  52 What's new?
  53 -----------
  54 +----------------------+----------------------+----------------------+
  55 | |image2|             | |image3|             | |image4|             |
  56 |                      |                      |                      |
  57 | Create full CBA      | Import old packages  | Create sophisticated |
  58 | packages from        | for edit and         | package workflows in |
  59 | built-in forms       | collaboration        | a no-code graphical  |
  60 | without programming  |                      | designer             |
  61 |                      |                      |                      |
  62 | |image5|             | |image6|             | |image7|             |
  63 |                      |                      |                      |
  64 | Customizable CBA     | Easily create and    | Integration between  |
  65 | Package actions      | manage lists of data | CDS UI and SDC       |
  66 |                      | via interface (Data  | Services             |
  67 |                      | Dictionary,          |                      |
  68 |                      | controller catalog,  |                      |
  69 |                      | and config           |                      |
  70 |                      | management)          |                      |
  71 +----------------------+----------------------+----------------------+
  72
  73 Overview of CDS Interface
  74 -------------------------
  75 Full CDS UI screens are available in `InVision <https://invis.io/PAUI9GLJH3Q>`__
  76
  77 |image8|
  78
  79 1. **CDS main menu:** Access all CDS module list including Packages, Data Dictionary, Controller Catalog, etc.
  80 2. **Profile:** Access user profile information
  81 3. **Module Title:** See the current module name and the total number of items in the module list
  82 4. **Module list:** View all active items in module and tools for search and filtering
  83
  84 CBA Packages
  85 ------------
  86
  87 Package List
  88 ~~~~~~~~~~~~
  89 It gives you quick access to all and most recent created/edit packages
  90
  91 |image9|
  92
  93 1.  **Module Tabs:** Access All, Deployed, Under Construction, or Archived packages
  94 2.  **Search:** Search for a package by title
  95 3.  **Filter:** Filter packages by package tags
  96 4.  **Package Sort:** Sort packages by recent or alphanumeric (name) or version
  97 5.  **List Pagination:** navigate between package list pages
  98 6.  **Create Package:** Create a new CBA package
  99 7.  **Import Package:** Import other packages that are created previously on CDS Editor or Designer or created by other/current user
 100 8.  **Package box:** It shows a brief detail of the package and gives access to some actions of the package
 101 9.  **Deployed package indicator**
 102 10. **Package name and version**
 103 11. **More menu:** Access a list of actions including Clone, Archive, Download, and Delete
 104 12. **Last modified:** Shows user name and date and time of last modifications made in the package
 105 13. **Package Description**
 106 14. **Package Tags**
 107 15. **Collaborators:** See who's collaborating to edit in the package
 108 16. **Configuration button:** Go directly to package configuration
 109 17. **Designer Mode:** It indicates package mode (Designer, Scripting, and Generic scripting) and by clicking on it, it will load to mode screen
 110
 111 Create a New CBA Package
 112 ------------------------
 113
 114 User Flow
 115 ~~~~~~~~~
 116
 117 |image10|
 118
 119 Create a New Package
 120 ~~~~~~~~~~~~~~~~~~~~
 121 You can create a new CBA Package by creating a new custom package or by import a package file that is already created before.
 122
 123 .. note::
 124         **Create/Import Package**
 125         You can’t create/import a CBA package that has the same name and version
 126         of an existing package. Packages can be in the same name but in
 127         different version numbers (ex., Package one v1.0.0 & Package one v1.0.1).
 128
 129 **Create a New Custom CBA Package**
 130 From the Packages page, click on the **Create Package** button to navigate to **Package** **Configuration**
 131
 132 |image11|
 133
 134 :ref:`MetaData <tosca_meta>`
 135 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 136
 137 In **MetaData Tab,** select Package Mode, enter package Name, Version,
 138 Description and other configurations
 139
 140 |image12|
 141
 142 Once you fill in all required inputs, you can save this package by clicking the **Save** button in the Actions menu
 143
 144 |image13|
 145
 146 **Package Info Box:** It is in top of configurations tabs and it appears after you save a package for the first time
 147
 148 |image14|
 149
 150 You can continue adding package configuration or go directly to the **Designer Mode** screen from Package info box
 151
 152 All changes will be saved when you click on the **Save** button
 153
 154 To close the package configuration and go back to the Package list, navigate to the top left in breadcrumb and click the **CBA Packages**
 155 link or click on the **Packages** link in the Main menu.
 156
 157 :ref:`Template & Mapping <template>`
 158 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 159
 160 You can create as many templates using
 161
 162 artifact-mapping-resource (:ref:`artifact_type` -> Mapping)
 163 or/and
 164 artifact-template-velocity  (:ref:`artifact_type` -> Velocity)
 165
 166 |image15|
 167
 168 1. **Template name**
 169 2. **Template Section:** Where you include template attributes
 170 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.
 171
 172 **Template Section**
 173
 174 |image16|
 175
 176 1. **Template Type:** Template is defined by one of three templates (Velocity, Jinja, Kotlin)
 177 2. **Import Template Attributes/Parameters:** You can add attributes by Import attribute list file or by
 178 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
 179
 180 **Import Template Attributes**
 181
 182 |image17|
 183
 184 After import attributes, you can add/edit/delete attributes in the code editor.
 185
 186 |image18|
 187
 188 **Manage Mapping Section**
 189
 190 |image19|
 191
 192 1. **Use current Template Instance:** You can use attributes from the Template section
 193 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
 194
 195 Once you select the source of attributes, you get a confirmation of success fetching.
 196
 197 |image20|
 198
 199 Then the Mapped Table appears to show the Resource Dictionary reference.
 200
 201 |image21|
 202
 203 When you finish the creation process, you must click on **the Finish button (1)**
 204 to submit the template, or you can clear all data by click on **the Clear button** **(2).**
 205
 206 |image22|
 207
 208 :ref:`Scripts <scripts>`
 209 ~~~~~~~~~~~~~~~~~~~~~~~~
 210
 211 *Allowed file type: Kotlin(kt), Python(py), Jython, Ansible*
 212
 213 To add script file/s, you have two options:
 214
 215 1. **Create Script**
 216 2. **Import File**
 217
 218 **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
 219 **press ENTER** key from the keyboard
 220
 221 |image23|
 222
 223 **Create a Script File**
 224
 225 1. **File Name:** Add the script file name
 226 2. **Script Type:** Choose script type (Kotlin, Jython, Ansible)
 227 3. **Script Editor:** Enter the script file content
 228
 229 |image24|
 230
 231 After you type the script, click on the **Create Script** button to save it
 232
 233 |image25|
 234
 235 By adding script file/s, you can:
 236 1. Edit file: You can edit each script file from the code editor
 237 2. Delete file
 238
 239 |image26|
 240
 241 :ref:`Definitions <data_type>`
 242 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 243
 244 To define a data type that represents the **schema** of a specific type of **data**,
 245 you have to **enrich** the package to automatically generate all definition files:
 246
 247 1. **Enrich Package:** from the package details box, click on the Enrich button
 248
 249 |image27|
 250
 251 Once you successfully enrich the package, all definition files will be listed.
 252
 253 |image28|
 254
 255 By definition file/s, you can Delete file
 256
 257 |image29|
 258
 259 :ref:`External System Authentication Properties <external_system>`
 260 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 261 In order to populate the system information within the package, you have to provide **dsl_definitions**
 262
 263 |image30|
 264
 265 Topology Template
 266 ~~~~~~~~~~~~~~~~~
 267 Here you can **manually** add your package:
 268
 269 1. :ref:`Workflow <workflow>` that define an overall action to be taken on the service
 270 2. :ref:`Node/Component template <node_type>` that is used to represent a **functionality** along with its **contracts**, such as **inputs**, **outputs**, and **attributes**
 271
 272 |image31|
 273
 274
 275 Hello World CBA Reference
 276 -------------------------
 277
 278 -  :ref:`hello_world_resource_resolution_cba`
 279 -  :ref:`hello_world_script_executor_cba`
 280
 281
 282 .. |image1| image:: https://wiki.onap.org/download/attachments/84650426/CDS%20Logo.png?version=4&modificationDate=1591723580000&api=v2
 283    :width: 200pt
 284 .. |image2| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%201.png?version=1&modificationDate=1591032224000&api=v2
 285    :width: 50pt
 286 .. |image3| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%202.png?version=1&modificationDate=1591032225000&api=v2
 287    :width: 47pt
 288 .. |image4| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%203.png?version=1&modificationDate=1591032226000&api=v2
 289    :width: 47pt
 290 .. |image5| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%204.png?version=1&modificationDate=1591032227000&api=v2
 291    :width: 60pt
 292 .. |image6| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%205.png?version=1&modificationDate=1591032227000&api=v2
 293    :width: 50pt
 294 .. |image7| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%206.png?version=1&modificationDate=1591032228000&api=v2
 295    :width: 30pt
 296 .. |image8| image:: https://wiki.onap.org/download/attachments/84650426/Interface.jpg?version=2&modificationDate=1609155664000&api=v2
 297    :width: 1000pt
 298 .. |image9| image:: https://wiki.onap.org/download/attachments/84650426/Package%20List.jpg?version=3&modificationDate=1609322704000&api=v2
 299    :width: 1000pt
 300 .. |image10| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package%20User%20flow.jpg?version=2&modificationDate=1609156805000&api=v2
 301    :width: 1000pt
 302 .. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=2&modificationDate=1609157022000&api=v2
 303    :width: 1000pt
 304 .. |image12| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20MetaData.jpg?version=2&modificationDate=1609157275000&api=v2
 305    :width: 1000pt
 306 .. |image13| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Action%20Menu.jpg?version=2&modificationDate=1609157671000&api=v2
 307    :width: 1000pt
 308 .. |image14| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Info%20Box.jpg?version=2&modificationDate=1609158391000&api=v2
 309    :width: 1000pt
 310 .. |image15| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%201.jpg?version=2&modificationDate=1609158797000&api=v2
 311    :width: 1000pt
 312 .. |image16| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%202.jpg?version=2&modificationDate=1609158980000&api=v2
 313    :width: 1000pt
 314 .. |image17| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%203.jpg?version=2&modificationDate=1609159240000&api=v2
 315    :width: 500pt
 316 .. |image18| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%204.jpg?version=1&modificationDate=1609159448000&api=v2
 317    :width: 1000pt
 318 .. |image19| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%205.jpg?version=1&modificationDate=1609159694000&api=v2
 319    :width: 1000pt
 320 .. |image20| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%206.jpg?version=2&modificationDate=1609159862000&api=v2
 321    :width: 1000pt
 322 .. |image21| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%207.jpg?version=3&modificationDate=1609162172000&api=v2
 323    :width: 1000pt
 324 .. |image22| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%208.jpg?version=2&modificationDate=1609162135000&api=v2
 325    :width: 1000pt
 326 .. |image23| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%201.jpg?version=2&modificationDate=1609163160000&api=v2
 327    :width: 1000pt
 328 .. |image24| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%202.jpg?version=2&modificationDate=1609164336000&api=v2
 329    :width: 1000pt
 330 .. |image25| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%203.jpg?version=2&modificationDate=1609164337000&api=v2
 331    :width: 1000pt
 332 .. |image26| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%204.jpg?version=1&modificationDate=1609164989000&api=v2
 333    :width: 1000pt
 334 .. |image27| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%201.jpg?version=2&modificationDate=1609167774000&api=v2
 335    :width: 1000pt
 336 .. |image28| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%202.jpg?version=2&modificationDate=1609168384000&api=v2
 337    :width: 1000pt
 338 .. |image29| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%203.jpg?version=2&modificationDate=1609168385000&api=v2
 339    :width: 1000pt
 340 .. |image30| image:: https://wiki.onap.org/download/attachments/84650426/DSL.jpg?version=1&modificationDate=1609168557000&api=v2
 341    :width: 1000pt
 342 .. |image31| image:: https://wiki.onap.org/download/attachments/84650426/Topology%20Template.jpg?version=1&modificationDate=1609169308000&api=v2
 343    :width: 1000pt