summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/.storybook/webpack.config.js
blob: aeb97c1b5a24bf35e0706134c0eba767d2e6e67c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ASDCConfig = require('../webpack.common.js');

module.exports = function(baseConfig, configType) {
    baseConfig.module.loaders =  baseConfig.module.loaders.concat([
        {test: /\.(css|scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},

        // required for font icons
        {test: /\.(woff|woff2)(\?.*)?$/, loader: 'url-loader?limit=16384&mimetype=application/font-woff'},
        {test: /\.(ttf|eot|otf)(\?.*)?$/, loader: 'file-loader'},
        {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=16384'},

        {test: /\.json$/, loaders: ['json']},
        {test: /\.html$/, loaders: ['html']}
    ]);
    baseConfig.resolve = { root: ASDCConfig.resolve.modules, alias:  ASDCConfig.resolve.alias };
    return baseConfig;
}
* Comment.PreprocFile */ .highlight .c1 { color: #75715e } /* Comment.Single */ .highlight .cs { color: #75715e } /* Comment.Special */ .highlight .gd { color: #f92672 } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gi { color: #a6e22e } /* Generic.Inserted */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #75715e } /* Generic.Subheading */ .highlight .kc { color: #66d9ef } /* Keyword.Constant */ .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ .highlight .kn { color: #f92672 } /* Keyword.Namespace */ .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ .highlight .kt { color: #66d9ef } /* Keyword.Type */ .highlight .ld { color: #e6db74 } /* Literal.Date */ .highlight .m { color: #ae81ff } /* Literal.Number */ .highlight .s { color: #e6db74 } /* Literal.String */ .highlight .na { color: #a6e22e } /* Name.Attribute */ .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ .highlight .nc { color: #a6e22e } /* Name.Class */ .highlight .no { color: #66d9ef } /* Name.Constant */ .highlight .nd { color: #a6e22e } /* Name.Decorator */ .highlight .ni { color: #f8f8f2 } /* Name.Entity */ .highlight .ne { color: #a6e22e } /* Name.Exception */ .highlight .nf { color: #a6e22e } /* Name.Function */ .highlight .nl { color: #f8f8f2 } /* Name.Label */ .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ .highlight .nx { color: #a6e22e } /* Name.Other */ .highlight .py { color: #f8f8f2 } /* Name.Property */ .highlight .nt { color: #f92672 } /* Name.Tag */ .highlight .nv { color: #f8f8f2 } /* Name.Variable */ .highlight .ow { color: #f92672 } /* Operator.Word */ .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */ .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ .highlight .sa { color: #e6db74 } /* Literal.String.Affix */ .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ .highlight .sc { color: #e6db74 } /* Literal.String.Char */ .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ .highlight .se { color: #ae81ff } /* Literal.String.Escape */ .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ .highlight .sx { color: #e6db74 } /* Literal.String.Other */ .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ } @media (prefers-color-scheme: light) { .highlight .hll { background-color: #ffffcc } .highlight .c { color: #888888 } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { color: #008800; font-weight: bold } /* Keyword */ .highlight .ch { color: #888888 } /* Comment.Hashbang */ .highlight .cm { color: #888888 } /* Comment.Multiline */ .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ .highlight .cpf { color: #888888 } /* Comment.PreprocFile */ .highlight .c1 { color: #888888 } /* Comment.Single */ .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #333333 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666666 } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ }
.. This work is licensed under a Creative Commons Attribution 4.0 International License.
.. http://creativecommons.org/licenses/by/4.0
.. Copyright (C) 2019 IBM.

.. _hello_world_script_executor_cba:

How to create a “Hello World” Package with CDS Designer UI? The Script Executor Type
====================================================================================

.. toctree::
   :maxdepth: 2

.. 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`
    -  :ref:`designer_guide`

.. note::
    **NOTE:**

    In order to see the latest version described below in the tutorial, we will need to use the latest cds-ui-server docker image:
    nexus3.onap.org:10001/onap/ccsdk-cds-ui-server:1.1.0-STAGING-latest


Create New CBA Package
~~~~~~~~~~~~~~~~~~~~~~

In the Package List, click on the **Create Package** button.

|image1|

Define Package MetaData
~~~~~~~~~~~~~~~~~~~~~~~

In METADATA Tab:

1. Package name (Required), type **"Hello-world-package-kotlin"**
2. Package version (Required), type **"1.0.0"**
3. Package description (Required), type **"just description"**
4. Package Tags (Required), type **"kotlin"** then use the **Enter** key on the keyboard
5. In the Custom Key section, add Key name **"template_type"** and
6. For Key Value **"DEFAULT"**

|image2|

Once you enter all fields you will be able to save your package. Click on the **Save** button and continue to define your package.

|image3|

Define Scripts
~~~~~~~~~~~~~~

In the SCRIPTS Tab:

1. Click on the **Create Script** button

|image4|

In the **Create Script File** modal:

|image5|

1. Enter script file name **"Test"**
2. Choose the script type **"Kotlin"**
3. Type or copy and paste the below script in the code editor

.. code-block:: kotlin

    /*
     \* Copyright © 2020, Orange
     \*
     \* Licensed under the Apache License, Version 2.0 (the "License");
     \* you may not use this file except in compliance with the License.
     \* You may obtain a copy of the License at
     \*
     \* http://www.apache.org/licenses/LICENSE-2.0
     \*
     \* Unless required by applicable law or agreed to in writing, software
     \* distributed under the License is distributed on an "AS IS" BASIS,
     \* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     \* See the License for the specific language governing permissions and
     \* limitations under the License.
    */

    package org.onap.ccsdk.cds.blueprintsprocessor.services.execution.scripts

    import org.onap.ccsdk.cds.blueprintsprocessor.core.api.data.ExecutionServiceInput
    import org.onap.ccsdk.cds.blueprintsprocessor.services.execution.AbstractScriptComponentFunction
    import org.onap.ccsdk.cds.blueprintsprocessor.services.execution.ComponentRemoteScriptExecutor
    import org.onap.ccsdk.cds.controllerblueprints.core.asJsonPrimitive
    import org.slf4j.LoggerFactory

    open class HelloWorld : AbstractScriptComponentFunction() {
        private val log = LoggerFactory.getLogger(HelloWorld::class.java)!!

        override fun getName(): String {
             return "Check"
        }

        override suspend fun processNB(executionRequest: ExecutionServiceInput) {
              log.info("executing hello world script ")
              val username = getDynamicProperties("username").asText()
              log.info("username : $username")
              //executionRequest.payload.put("Action1-response","hello from $username")
              setAttribute("response-data", "Hello, $username".asJsonPrimitive())
        }

        override suspend fun recoverNB(runtimeException: RuntimeException, executionRequest: ExecutionServiceInput) {
               log.info("Executing Recovery")
               bluePrintRuntimeService.getBlueprintError().addError("${runtimeException.message}")
         }
    }

4. Click on the **Create Script** button to save the script file

|image6|

Now, you can view and edit your script file.

|image7|

After the new script is added to the **scripts list**, click on the **Save** button to save the package updates.

|image8|

Define DSL Properties
~~~~~~~~~~~~~~~~~~~~~

In the DSL PROPERTIES Tab:

1. Copy and paste the below DSL definition

.. code-block::

    {
        "Action1-properties": {
            "username": {
                "get_input": "username"
            }
        }
    }

|image9|

Then click on the **Save** button to update the package.

|image10|

Create An Action
~~~~~~~~~~~~~~~~~

From the Package information box on top, click on the **Designer Mode** button.

|image11|

Click on the **Skip to Designer Canvas** button to go directly to Designer Mode.

|image12|

Now the designer has zero action added. Let's start adding the first Action.

|image13|

Go to the left side of the designer screen and in the **ACTIONS tab**, click on the **+ New Action** button.

|image14|

Now, the first Action **Action1** is added to the **Actions list** and in the **Workflow canvas**.

|image15|

Add Script Executor Function To The Action
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

On the left side of the designer screen, Click on the **FUNCTIONS tab** to view all the **Functions List.**

|image16|

**Drag** the function type **"component-script-executor"**

|image17|

**Drop** the function to the **"Action1"** Action container.

|image18|

Define Action Attributes
~~~~~~~~~~~~~~~~~~~~~~~~

Click on **Action1** from the ACTIONS tab to open **the ACTION ATTRIBUTES** section on designer screens’ right side.

|image19|

Let's customize the first action's attribute by click on the **+ Create Custom** button to open **Add Custom Attributes** modal window.

|image20|

In the **Add Custom Attributes** **Window**, and the **INPUTS tab** starts to add the first input attribute for **Action1**.
**INPUTS Tab:** Enter the required properties for the inputs’ attribute:

1. Name: **"username"**
2. Type: **"Other"**
3. Attribute type name:  **"dt-resource-assignment-properties"**
4. Required: **"True"**

|image21|

After you add the **username** input's attribute, click on In the OUTPUT Tab to create the output attribute too.

|image22|

**OUTPUTS Tab:** Enter the required properties for the output’ attribute:

1. Name: **"hello-world-output"**
2. Required: **"True"**
3. Type: **"Other"**
4. Type name: **"json"**
5. Value (get_attribute): From the **Functions list**, select **"component-script-executor"** that will show all attributes included in this function
6. Select parameter name **"response-data"**
7. Click on the **Submit Attributes** button to add input and output attributes to **Actions' Attributes list**
8. Click on the **Close** button to close the modal window and go back to the designer screen.

|image23|

Now, you can see all the added attributes listed in the **ACTION ATTRIBUTES** area.

|image24|

Define Function Attributes
~~~~~~~~~~~~~~~~~~~~~~~~~~

From **ACTIONS** List, Click on the function nam **"component-script-executor"**.

|image25|

When you click on the **component-script-executor** function, the **FUNCTION ATTRIBUTES** section will be open on the right side of the designers' screen.
Now, you need to add the values of **Inputs** required attributes in **the Interfaces** **section**.

|image26|

1. **script-type:** **"kotlin"**
2. **script-class-reference: "org.onap.ccsdk.cds.blueprintsprocessor.services.execution.scripts.HelloWorld"**
3. Add optional attribute by click on **Add Optional Attributes** button, add **"dynamic-properties"** then enter the value **"*Action1-properties"**

|image27|

From the page header and inside **the Save** **menu**, click on the **Save** button to save all the changes.

|image29|

Enrich And Deploy The CBA Package
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

From the page header and inside the **Save menu**, click on the **Enrich & Deploy** button.

|image30|

Once the process is done, a confirmation message will appear.

|image31|

Test The CBA package With CDS REST API
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To test the CDS hello_world package we created, we can use the REST API shown below to run the **script executor** workflow in the **Hello-world-package-kotlin** package, which will resolve the value of the "username" resource from the REST Call input, and will send it back to the user in the form of "Hello, $username!".

**CURL Request to RUN CBA Package**

.. code-block:: bash

     curl --location --request POST 'http://10.1.1.9:8080/api/v1/execution-service/process' \
     --header 'Content-Type: application/json;charset=UTF-8' \
     --header 'Accept: application/json;charset=UTF-8,application/json' \
     --header 'Authorization: Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==' \
     --header 'Host: cds-blueprints-processor-http:8080' \
     --header 'Cookie: JSESSIONID=7E69BC3F752FD5A3D7D1663FE583ED71' \
     --data-raw '{
                    "actionIdentifiers": {
                        "mode": "sync",
                        "blueprintName": "Hello-world-package-kotlin",
                        "blueprintVersion": "1.0.0",
                        "actionName": "Action1"
                    },
                    "payload": {
                        "Action1-request": {
                            "username":"Orange Egypt"
                        }
                    },
                    "commonHeader": {
                        "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
                        "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
                        "originatorId": "SDNC_DG"
                    }
                 }'


**CDS Response showing result of running package**

.. code-block:: bash

    200 OK
        {
            "correlationUUID": null,
            "commonHeader": {
                "timestamp": "2021-01-12T13:22:26.518Z",
                "originatorId": "SDNC_DG",
                "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
                "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
                "flags": null
            },
            "actionIdentifiers": {
                "blueprintName": "Hello-world-package-kotlin",
                "blueprintVersion": "1.0.0",
                "actionName": "Action1",
                "mode": "sync"
            },
            "status": {
                "code": 200,
                "eventType": "EVENT_COMPONENT_EXECUTED",
                "timestamp": "2021-01-12T13:22:56.144Z",
                "errorMessage": null,
                "message": "success"
            },
            "payload": {
                "Action1-response": {
                    "hello-world-output": {
                        "hello_world_template": "Hello, Orange Egypt"
                     }
                 }
            }
        }

Screenshot from POSTMAN showing how to run the **Hello_world-package-kotlin** package, and the CDS Response:

|image32|

.. |image1| image:: https://wiki.onap.org/download/attachments/93006316/1.png?version=1&modificationDate=1610364491000&api=v2
   :width: 1000pt
.. |image2| image:: https://wiki.onap.org/download/attachments/93006316/02.png?version=1&modificationDate=1610390913000&api=v2
   :width: 1000pt
.. |image3| image:: https://wiki.onap.org/download/attachments/93006316/03.png?version=1&modificationDate=1610390934000&api=v2
   :width: 1000pt
.. |image4| image:: https://wiki.onap.org/download/attachments/93006316/04.png?version=1&modificationDate=1610391083000&api=v2
   :width: 1000pt
.. |image5| image:: https://wiki.onap.org/download/attachments/93006316/05.png?version=1&modificationDate=1610391137000&api=v2
   :width: 1000pt
.. |image6| image:: https://wiki.onap.org/download/attachments/93006316/06.png?version=1&modificationDate=1610391364000&api=v2
   :width: 1000pt
.. |image7| image:: https://wiki.onap.org/download/attachments/93006316/07.png?version=1&modificationDate=1610391427000&api=v2
   :width: 1000pt
.. |image8| image:: https://wiki.onap.org/download/attachments/93006316/08.png?version=1&modificationDate=1610391642000&api=v2
   :width: 1000pt
.. |image9| image:: https://wiki.onap.org/download/attachments/93006316/09.png?version=1&modificationDate=1610391749000&api=v2
   :width: 1000pt
.. |image10| image:: https://wiki.onap.org/download/attachments/93006316/10.png?version=2&modificationDate=1610391971000&api=v2
   :width: 1000pt
.. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=1&modificationDate=1591034193000&api=v2
   :width: 1000pt
.. |image12| image:: https://wiki.onap.org/download/attachments/93006316/11.png?version=1&modificationDate=1610364492000&api=v2
   :width: 1000pt
.. |image13| image:: https://wiki.onap.org/download/attachments/93006316/12.png?version=2&modificationDate=1610392150000&api=v2
   :width: 1000pt
.. |image14| image:: https://wiki.onap.org/download/attachments/93006316/13.png?version=2&modificationDate=1610392171000&api=v2
   :width: 300pt
.. |image15| image:: https://wiki.onap.org/download/attachments/93006316/14.png?version=2&modificationDate=1610392192000&api=v2
   :width: 1000pt
.. |image16| image:: https://wiki.onap.org/download/attachments/93006316/15.png?version=2&modificationDate=1610392224000&api=v2
   :width: 300pt
.. |image17| image:: https://wiki.onap.org/download/attachments/93006316/16.png?version=2&modificationDate=1610392392000&api=v2
   :width: 800pt
.. |image18| image:: https://wiki.onap.org/download/attachments/93006316/17.png?version=3&modificationDate=1610392589000&api=v2
   :width: 800pt
.. |image19| image:: https://wiki.onap.org/download/attachments/93006316/18.png?version=2&modificationDate=1610392609000&api=v2
   :width: 300pt
.. |image20| image:: https://wiki.onap.org/download/attachments/93006316/19.png?version=1&modificationDate=1610364492000&api=v2
   :width: 300pt
.. |image21| image:: https://wiki.onap.org/download/attachments/93006316/20.png?version=2&modificationDate=1610392718000&api=v2
   :width: 700pt
.. |image22| image:: https://wiki.onap.org/download/attachments/93006316/21.png?version=2&modificationDate=1610392773000&api=v2
   :width: 800pt
.. |image23| image:: https://wiki.onap.org/download/attachments/93006316/22.png?version=2&modificationDate=1610392886000&api=v2
   :width: 400pt
.. |image24| image:: https://wiki.onap.org/download/attachments/93006316/23.png?version=2&modificationDate=1610392915000&api=v2
   :width: 300pt
.. |image25| image:: https://wiki.onap.org/download/attachments/93006316/24.png?version=2&modificationDate=1610392939000&api=v2
   :width: 300pt
.. |image26| image:: https://wiki.onap.org/download/attachments/93006316/25.png?version=4&modificationDate=1612796837000&api=v2
   :width: 378pt
.. |image27| image:: https://wiki.onap.org/download/attachments/93006316/26.png?version=5&modificationDate=1612796934000&api=v2
   :width: 300pt
.. |image28| image:: https://wiki.onap.org/download/attachments/93006316/26.png?version=4&modificationDate=1610393629000&api=v2
   :width: 200pt
.. |image29| image:: https://wiki.onap.org/download/attachments/93006316/28.png?version=5&modificationDate=1612797010000&api=v2
   :width: 1000pt
.. |image30| image:: https://wiki.onap.org/download/attachments/93006316/29.png?version=5&modificationDate=1612797073000&api=v2
   :width: 1000pt
.. |image31| image:: https://wiki.onap.org/download/attachments/93006316/30.png?version=2&modificationDate=1612797108000&api=v2
   :width: 1000pt
.. |image32| image:: https://wiki.onap.org/download/attachments/93006316/31.png?version=1&modificationDate=1610459101000&api=v2
   :width: 1000pt