From: Sarah Abouzainah <sabouzainah.ext@orange.com>
Date: Mon, 2 Nov 2020 13:58:49 +0000 (+0200)
Subject: HTML: Add Attributes from Function - Modal
X-Git-Tag: 1.1.0~108
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=705d8228d980f8a17396a5bce92c4a57b5b6abc6;p=ccsdk%2Fcds.git

HTML: Add Attributes from Function - Modal

Issue-ID: CCSDK-2779

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I8f10cedad7ee88c658206ab31c69b564af470a7c
---

diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index 59ad17a7a..9c6f59ec1 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -82,8 +82,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "16kb",
-                  "maximumError": "20kb"
+                  "maximumWarning": "25kb",
+                  "maximumError": "30kb"
                 }
               ]
             }
@@ -155,4 +155,4 @@
     }
   },
   "defaultProject": "designer-client"
-}
\ No newline at end of file
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index ccf9ce072..ff097111a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -14,13 +14,14 @@
             <div class="row">
                 <div class="col pr-0 text-center">
                     <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
-                            class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
-                                                         aria-hidden="true"></i></button>
+                        class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
+                            aria-hidden="true"></i></button>
                     <span>Custom Attribute</span>
                 </div>
                 <div class="col text-center">
-                    <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button"
-                                                                       aria-hidden="true"></i></button>
+                    <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button"
+                        data-toggle="modal" data-target="#exampleModalScrollable3" class="btn btn-secondary"><i
+                            class="icon-function-attribute" type="button" aria-hidden="true"></i></button>
                     <span>Function Attribute</span>
                 </div>
             </div>
@@ -32,7 +33,7 @@
             <div class="card-header" id="headingOne">
                 <h2 class="mb-0">
                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
-                            aria-expanded="true" aria-controls="collapseOne">
+                        aria-expanded="true" aria-controls="collapseOne">
                         Inputs
                     </button>
                 </h2>
@@ -44,15 +45,16 @@
                             <div class="form-group" *ngFor="let input of inputs">
                                 <label for="exampleFormControlTextarea1">{{input.name}}
                                     <i [hidden]="!input.required" class="icon-required-star" type="button"
-                                       aria-hidden="true"></i>
-                                    <i [hidden]="input.required" class="icon-required-star optional-attribute" type="button" aria-hidden="true"></i>
+                                        aria-hidden="true"></i>
+                                    <i [hidden]="input.required" class="icon-required-star optional-attribute"
+                                        type="button" aria-hidden="true"></i>
                                 </label>
                                 <div class="attributeOptions">
                                     <a data-toggle="modal" data-target="#exampleModalScrollable2"
-                                       class="accordion-delete editAttribute" tooltip="Edit Attribute"
-                                       placement="bottom"><i class="icon-edit"></i></a>
+                                        class="accordion-delete editAttribute" tooltip="Edit Attribute"
+                                        placement="bottom"><i class="icon-edit"></i></a>
                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
-                                       placement="bottom"><i class="icon-delete-sm"></i></a>
+                                        placement="bottom"><i class="icon-delete-sm"></i></a>
                                 </div>
                             </div>
                         </div>
@@ -67,7 +69,7 @@
             <div class="card-header" id="headingOne">
                 <h2 class="mb-0">
                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
-                            aria-expanded="true" aria-controls="collapseTwo">
+                        aria-expanded="true" aria-controls="collapseTwo">
                         Outputs
                     </button>
                 </h2>
@@ -80,9 +82,9 @@
                             <div class="form-group" *ngFor="let output of outputs">
                                 <label for="exampleFormControlTextarea1">{{output.name}}
                                     <i [hidden]="!output.required" class="icon-required-star" type="button"
-                                       aria-hidden="true"></i>
-                                    <i [hidden]="output.required" class="icon-required-star optional-attribute" type="button"
-                                       aria-hidden="true"></i>
+                                        aria-hidden="true"></i>
+                                    <i [hidden]="output.required" class="icon-required-star optional-attribute"
+                                        type="button" aria-hidden="true"></i>
 
                                 </label>
                             </div>
@@ -95,14 +97,14 @@
 </div>
 <!--Action - Add Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
-     aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
     <div class="modal-dialog  modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle">
                     Add Custom Attributes</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg"/>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body createAttributeTabs">
@@ -110,29 +112,29 @@
                 <ul class="nav nav-tabs" id="myTab" role="tablist">
                     <li class="nav-item">
                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
-                           aria-controls="home" aria-selected="true">Inputs</a>
+                            aria-controls="home" aria-selected="true">Inputs</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
-                           aria-controls="profile" aria-selected="false">Outputs</a>
+                            aria-controls="profile" aria-selected="false">Outputs</a>
                     </li>
                 </ul>
                 <div class="tab-content" id="myTabContent">
                     <!--INPUTS Tab-->
                     <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
-                         aria-labelledby="home-tab">
+                        aria-labelledby="home-tab">
                         <div class="form-group row">
                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                             <div class="col-sm-9">
                                 <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
-                                       id="inputEmail3" placeholder="Attribute name">
+                                    id="inputEmail3" placeholder="Attribute name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                             <div class="col-sm-9">
                                 <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
-                                       id="inputPassword3" placeholder="Add some description">
+                                    id="inputPassword3" placeholder="Add some description">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -140,26 +142,25 @@
                             <div class="col-sm-9">
                                 <div class="list-group list-group-horizontal">
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('String')">
+                                        (click)="setInputType('String')">
                                         String
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('Integer')">Integer
+                                        (click)="setInputType('Integer')">Integer
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('Boolean')">Boolean
+                                        (click)="setInputType('Boolean')">Boolean
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('List')">List
+                                        (click)="setInputType('List')">List
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setInputType('Other')">Other
+                                        (click)="setInputType('Other')">Other
                                     </button>
                                 </div>
                                 <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
-                                       id="inputPassword4" placeholder="Add Other type name"
-                                       [(ngModel)]="inputOtherType"
-                                       (change)="setInputType(inputOtherType)">
+                                    id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType"
+                                    (change)="setInputType(inputOtherType)">
 
                             </div>
                         </div>
@@ -168,12 +169,12 @@
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
-                                           class="custom-control-input" (click)="setInputRequired(true)">
+                                        class="custom-control-input" (click)="setInputRequired(true)">
                                     <label class="custom-control-label" for="customRadioInline1">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
-                                           class="custom-control-input" (click)="setInputRequired(false)">
+                                        class="custom-control-input" (click)="setInputRequired(false)">
                                     <label class="custom-control-label" for="customRadioInline2">False</label>
                                 </div>
                             </div>
@@ -185,14 +186,14 @@
                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                             <div class="col-sm-9">
                                 <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
-                                       id="inputEmail3" placeholder="Attribute name">
+                                    id="inputEmail3" placeholder="Attribute name">
                             </div>
                         </div>
                         <div class="form-group row">
                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                             <div class="col-sm-9">
                                 <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control"
-                                       id="inputPassword3" placeholder="Add some description">
+                                    id="inputPassword3" placeholder="Add some description">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -200,29 +201,28 @@
                             <div class="col-sm-9">
                                 <div class="list-group list-group-horizontal">
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('String')">String
+                                        (click)="setOutputType('String')">String
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('Integer')">
+                                        (click)="setOutputType('Integer')">
                                         Integer
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('Boolean')">
+                                        (click)="setOutputType('Boolean')">
                                         Boolean
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('List')">
+                                        (click)="setOutputType('List')">
                                         List
                                     </button>
                                     <button type="button" class="list-group-item list-group-item-action"
-                                            (click)="setOutputType('Other')">
+                                        (click)="setOutputType('Other')">
                                         Other
                                     </button>
                                 </div>
                                 <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
-                                       id="inputPassword3" placeholder="Add Other type name"
-                                       [(ngModel)]="outputOtherType"
-                                       (change)="setOutputType(outputOtherType)">
+                                    id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType"
+                                    (change)="setOutputType(outputOtherType)">
                             </div>
                         </div>
                         <div class="form-group row">
@@ -230,14 +230,14 @@
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline3" name="customRadioInline3"
-                                           class="custom-control-input" (click)="setOutputRequired(true)">
+                                        class="custom-control-input" (click)="setOutputRequired(true)">
                                     <label class="custom-control-label" for="customRadioInline3">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline4" name="customRadioInline3"
-                                           class="custom-control-input">
+                                        class="custom-control-input">
                                     <label class="custom-control-label" for="customRadioInline4"
-                                           (click)="setOutputRequired(false)">False</label>
+                                        (click)="setOutputRequired(false)">False</label>
                                 </div>
                             </div>
                         </div>
@@ -251,16 +251,130 @@
         </div>
     </div>
 </div>
+
+<!--Action - Add Attribute From Function - Modal-->
+<div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog"
+    aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true">
+    <div class="modal-dialog  modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalScrollableTitle3">
+                    Add Attributes from Function</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <img src="assets/img/icon-close.svg" />
+                </button>
+            </div>
+            <div class="modal-body createAttributeTabs">
+                <!--Action - Inputs & Outputs Attribute-->
+                <ul class="nav nav-tabs" id="myTab" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
+                            aria-controls="home" aria-selected="true">Inputs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
+                            aria-controls="profile" aria-selected="false">Outputs</a>
+                    </li>
+                </ul>
+                <div class="tab-content border-0 mt-2" id="myTabContent">
+                    <!--INPUTS Tab-->
+                    <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
+                        aria-labelledby="home-tab">
+                        <div class="form-group row">
+                            <div class="col">
+                                <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-6">
+                                <b class="listBoxTitle">1. Choose Function Name</b>
+                                <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
+                                    <input type="text" class="form-control input-search-controller"
+                                        placeholder="Functions">
+                                    <div class="scrollWrapper">
+                                        <a class="list-group-item list-group-item-action active" id="list-home-list"
+                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
+                                                class="icon-resource_resolution mr-1" aria-hidden="true"></i>
+                                            resource-assignment <i class="icon-next_arrow" aria-hidden="true"></i></a>
+                                        <a class="list-group-item list-group-item-action" id="list-profile-list"
+                                            data-toggle="list" href="#list-profile" role="tab"
+                                            aria-controls="profile"><i class="icon-netconf_executer mr-1"
+                                                aria-hidden="true"></i> netconf-device <i class="icon-next_arrow"
+                                                aria-hidden="true"></i></a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <b class="listBoxTitle">2. Choose Input Attribute Name</b>
+                                <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
+                                    <input type="text" class="form-control input-search-controller"
+                                        placeholder="Attributes">
+                                    <div class="tab-pane fade show active" id="list-home" role="tabpanel"
+                                        aria-labelledby="list-home-list">
+                                        <div class="scrollWrapper">
+                                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                <label class="btn btn-secondary active">
+                                                    <input type="radio" name="options" id="option1" autocomplete="off"
+                                                        checked> resolution-key
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option2" autocomplete="off">
+                                                    occurrence
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option3" autocomplete="off">
+                                                    store-result
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option4" autocomplete="off">
+                                                    resource-type
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option5" autocomplete="off">
+                                                    resolution-summary
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option6" autocomplete="off">
+                                                    artifact-prefix-names
+                                                </label>
+                                                <label class="btn btn-secondary">
+                                                    <input type="radio" name="options" id="option7" autocomplete="off">
+                                                    request-id
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="tab-pane fade" id="list-profile" role="tabpanel"
+                                        aria-labelledby="list-profile-list">2</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!--OUTPUTS Tab-->
+                    <div class="tab-pane fade create-form" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+d
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" (click)="submitAttributes()">Submit Attributes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!--Delete Action - Modal-->
 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
-     aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
+    aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle1">
                     Delete Action</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg"/>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
@@ -275,14 +389,14 @@
 </div>
 <!--Action - Edit Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
-     aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
+    aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle2">
                     Edit Custom Attributes</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg"/>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body createAttributeTabs">
@@ -291,15 +405,15 @@
                         <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
                         <div class="col-sm-9">
                             <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
-                                   value="resource-assignment-properties">
+                                value="resource-assignment-properties">
                         </div>
                     </div>
                     <div class="form-group row">
                         <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
                         <div class="col-sm-9">
                             <input type="text" class="form-control" id="inputPassword3"
-                                   placeholder="Add some description"
-                                   value="Dynamic PropertyDefinition for workflow(resource-assignment).">
+                                placeholder="Add some description"
+                                value="Dynamic PropertyDefinition for workflow(resource-assignment).">
                         </div>
                     </div>
                     <div class="form-group row">
@@ -315,7 +429,7 @@
                                 </button>
                             </div>
                             <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
-                                   placeholder="Add Other type name" value="dt-resource-assignment-properties">
+                                placeholder="Add Other type name" value="dt-resource-assignment-properties">
                         </div>
                     </div>
                     <div class="form-group row">
@@ -323,12 +437,12 @@
                         <div class="col-sm-9">
                             <div class="custom-control custom-radio custom-control-inline">
                                 <input type="radio" id="customRadioInline1" name="customRadioInline1"
-                                       class="custom-control-input" checked>
+                                    class="custom-control-input" checked>
                                 <label class="custom-control-label" for="customRadioInline1">True</label>
                             </div>
                             <div class="custom-control custom-radio custom-control-inline">
                                 <input type="radio" id="customRadioInline2" name="customRadioInline1"
-                                       class="custom-control-input">
+                                    class="custom-control-input">
                                 <label class="custom-control-label" for="customRadioInline2">False</label>
                             </div>
                         </div>
@@ -341,4 +455,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index f15d735f6..1fee353e3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -1106,6 +1106,7 @@ ul.editor{
   max-width: 50%;
 }
 .modal-body{
+  padding: 18px 24px !important;
   font-size: 14px;
 }
 .createAttributeTabs .nav-link{
@@ -1132,6 +1133,88 @@ ul.editor{
   padding: 20px 50px;
   border: solid 1px #F4F9FE;
 }
+.createAttributeTabs .listBoxTitle{
+  font-size: 11px;
+  line-height: 29px;
+}
+.addedFunctionsList,
+.nestedAttributes{
+  background: #F4F9FE;
+  border: solid 1px #D0DFF1 !important;
+}
+.addedFunctionsList .scrollWrapper,
+.nestedAttributes .scrollWrapper{
+  height: 150px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+.addedFunctionsList .input-search-controller,
+.nestedAttributes .input-search-controller{
+  height: 32px;
+  padding-left: 28px !important;
+  background-position: 9px;
+}
+.addedFunctionsList .input-search-controller::placeholder,
+.nestedAttributes .input-search-controller::placeholder{
+  font-weight: bold;
+}
+.create-form .addedFunctionsList .input-search-controller:focus,
+.create-form .nestedAttributes .input-search-controller:focus{
+  background-color: #fff !important;
+}
+.addedFunctionsList .list-group-item{
+  margin-bottom: 0;
+  padding-left: 10px;
+  padding-right: 12px;
+  text-align: left;
+  font-size: 12px;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+}
+.addedFunctionsList .list-group-item:hover{
+  background-color: #fff !important;
+  color: #1B3E6F;
+}
+.addedFunctionsList .list-group-item.active{
+  background-color: #E0E8F2 !important;
+}
+.addedFunctionsList .list-group-item i{
+  font-size: 18px;
+  vertical-align: middle;
+}
+.addedFunctionsList .list-group-item i:last-child{
+  float: right;
+  font-size: 15px;
+  line-height: 17px;
+}
+.nestedAttributes .btn-group{
+  display: grid;
+}
+.nestedAttributes .btn-group .btn{
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  height: 36px;
+  border-radius: 0;
+  background-color: transparent;
+  border: 0;
+  color: #1B3E6F !important;
+  text-align: left;
+  font-weight: normal;
+  line-height: 24px;
+}
+.nestedAttributes .btn-group .btn:hover{
+  background-color: #fff !important;
+}
+.nestedAttributes .btn-group .btn.active,
+.nestedAttributes .btn-group .btn.active:hover{
+  background-color: #E0E8F2 !important;
+  outline: 0;
+}
+.nestedAttributes .btn-group .btn.active:focus{
+  box-shadow: none;
+  border: 0;
+}
 /*FORM*/
 .create-form .col-form-label{
   color: #1B3E6F;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 5695c915a..27d493e87 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -12,7 +12,7 @@
                     <li class="breadcrumb-item">
                         <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
-                                data-target="#exampleModalLong" data-tooltip="Package Details">
+                            data-target="#exampleModalLong" data-tooltip="Package Details">
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
@@ -22,13 +22,13 @@
                     </li>
                 </ol>
                 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
-                     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                     <div class="modal-dialog" role="document">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <img src="assets/img/icon-close.svg"/>
+                                    <img src="assets/img/icon-close.svg" />
                                 </button>
                             </div>
                             <div class="modal-body package-info">
@@ -70,15 +70,15 @@
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Preview">
+                            data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Download">
+                            data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Share">
+                            data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
@@ -107,7 +107,7 @@
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <!--Actions/Functions Side Menu Toogole Button-->
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
-            data-tooltip="Collapse Side bar">
+        data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <!--Nav Tabs-->
@@ -119,9 +119,9 @@
                     <div class="col-12">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
-                               aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
-                               aria-controls=" " aria-selected="false">Template</a>
+                                aria-controls=" " aria-selected="false">Template</a>
                         </div>
                     </div>
                 </nav>
@@ -162,7 +162,7 @@
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                     <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
-                            class="btn btn-secondary topologyView">Scripting
+                        class="btn btn-secondary topologyView">Scripting
                     </button>
                 </div>
             </li>
@@ -173,15 +173,15 @@
 <ng-sidebar-container class="sidebar-container">
     <!--Left Side Menu-->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-                [mode]="'push'" #sidebarLeft>
+        [mode]="'push'" #sidebarLeft>
         <nav class="row">
             <!--Nav Tabs-->
             <div class="col">
                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
-                       role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
-                       role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
         </nav>
@@ -190,7 +190,7 @@
                 <div class="tab-content" id="nav-tabContent">
                     <!--Action List-->
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
-                         aria-labelledby="nav-action-tab">
+                        aria-labelledby="nav-action-tab">
                         <!--Action Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 
@@ -219,14 +219,13 @@
                                     <li *ngFor="let customActionName of actions">
                                         <label [attr.for]="customActionName">
                                             <i class="icon-file" aria-hidden="true" class="icon-file"
-                                               (click)="openActionAttributes(customActionName)"
-                                            ></i>
+                                                (click)="openActionAttributes(customActionName)"></i>
                                             {{customActionName}} </label>
 
                                         <ul *ngIf="customActionName.includes(this.currentActionName)">
-                                            <li
-                                                    [attr.for]="customActionName" *ngFor="let currentFunction of steps">
-                                                <span (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span>
+                                            <li [attr.for]="customActionName" *ngFor="let currentFunction of steps">
+                                                <span
+                                                    (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span>
                                             </li>
                                         </ul>
                                     </li>
@@ -288,7 +287,7 @@
         <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
     </div>
     <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'" #sidebarRight1>
+        [position]="'right'" #sidebarRight1>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col attributesContainer">
@@ -301,9 +300,9 @@
                         <div class="col-3 pl-0">
                             <div class="btn-group" role="group" aria-label="Basic example">
                                 <button type="button" class="btn view-source" tooltip="View Action Source"
-                                        placement="bottom"><i class="icon-source"></i></button>
+                                    placement="bottom"><i class="icon-source"></i></button>
                                 <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
-                                        class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
+                                    class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
                                         class="icon-delete-sm" aria-hidden="true"></i></button>
                             </div>
                         </div>
@@ -315,24 +314,24 @@
     </ng-sidebar>
     <!--Right Side Menu - Function Attribute-->
     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
-                [position]="'right'" #sidebarRight2>
+        [position]="'right'" #sidebarRight2>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col attributesContainer">
                     <div class="row m-0 attributesContainertTitle">
                         <div class="col-2 pl-0">
                             <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
-                                    placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
+                                placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
                             </button>
                         </div>
                         <h6 class="col pl-0">Function Attributes</h6>
                         <div class="col-3 pl-0">
                             <div class="btn-group" role="group" aria-label="Basic example">
                                 <button type="button" class="btn view-source" tooltip="View Function Source"
-                                        placement="bottom"><i class="icon-source"></i></button>
+                                    placement="bottom"><i class="icon-source"></i></button>
                                 <button type="button" class="btn trash-item" tooltip="Delete Function"
-                                        placement="bottom"><i class="icon-delete-sm" type="button"
-                                                              aria-hidden="true"></i></button>
+                                    placement="bottom"><i class="icon-delete-sm" type="button"
+                                        aria-hidden="true"></i></button>
                             </div>
                         </div>
                     </div>
@@ -343,4 +342,4 @@
     </ng-sidebar>
 
 
-</ng-sidebar-container>
+</ng-sidebar-container>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
index 494256eea..f2aaf5d3a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -1,7 +1,8 @@
 <div class="dropdown packagesFilter w-100">
     <input class="dropdown-toggle" type="text">
-    <div class="dropdown-text">Filter By Tags <span class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div>
-    <ul class="dropdown-content w-100">
+    <div class="dropdown-text">Filter By Tags <span
+            class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div>
+    <!-- <ul class="dropdown-content w-100">
         <li>
             <div class="form-group">
                 <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
@@ -14,5 +15,21 @@
             </div>
         </li>
         <li class="reset-filter"><a (click)="resetFilter()">Reset filter</a></li>
-    </ul>
-</div>
+    </ul> -->
+
+    <div class="dropdown-content w-100">
+        <div class="form-group">
+            <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
+        </div>
+        <ul>
+            <li *ngFor="let tag of viewedTags">
+                <div class="custom-control custom-checkbox">
+                    <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}
+                        #checkboxes>
+                    <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+                </div>
+            </li>
+        </ul>
+        <div class="reset-filter"><a (click)="resetFilter()">Reset filter</a></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 2bdafa68d..7e97a3db8 100755
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index 7b07f9c3f..a01e88536 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -23,6 +23,11 @@
 <glyph unicode="&#xe90d;" glyph-name="icon-add-circle" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
 <glyph unicode="&#xe90e;" glyph-name="icon-function-attribute" horiz-adv-x="1229" d="M1166.428 461.798c3.568 8.632 1.58 18.556-5.028 25.151l-415.328 415.328c-9.167 8.851-23.772 8.598-32.629-0.569-8.633-8.944-8.633-23.117 0-32.058l375.967-375.967h-1005.695c-12.742-0.002-23.075-10.331-23.075-23.077s10.331-23.075 23.075-23.075h1005.695l-375.918-375.918c-9.167-8.851-9.42-23.46-0.569-32.629 8.851-9.167 23.46-9.418 32.629-0.569 0.192 0.188 0.38 0.373 0.569 0.569l415.328 415.328c2.132 2.144 3.826 4.686 4.981 7.481zM729.778 32.212c-12.742-0.026-23.094 10.289-23.114 23.035-0.012 6.144 2.431 12.036 6.778 16.376l399.041 398.99-399.041 398.992c-8.851 9.167-8.598 23.772 0.569 32.629 8.944 8.633 23.117 8.633 32.058 0l415.328-415.328c9.010-9.012 9.010-23.615 0-32.629l-415.328-415.328c-4.321-4.312-10.178-6.736-16.29-6.736zM1145.107 447.538h-1061.393c-12.742 0-23.075 10.331-23.075 23.072s10.331 23.075 23.075 23.075h1061.396c12.742 0 23.075-10.331 23.075-23.075s-10.331-23.072-23.077-23.072z" />
 <glyph unicode="&#xe90f;" glyph-name="icon-custom-attribute" d="M35.552 421.088c-19.808 0-35.552 16.256-35.552 36.064s15.744 35.552 35.552 35.552h431.2v431.232c0.032 19.808 16.288 36.064 36.096 36.064s35.552-16.256 35.552-36.064v-431.232h431.2c19.808 0 36.064-15.744 36.064-35.552s-16.256-36.064-36.064-36.064h-431.2v-431.232c0-19.808-15.744-36.064-35.552-36.064s-36.064 16.256-36.064 36.064v431.232h-431.232z" />
+<glyph unicode="&#xe910;" glyph-name="icon-dg_generic" d="M179.2 856.422c-42.342 0-76.8-34.458-76.8-76.8s34.458-76.8 76.8-76.8c42.342 0 76.8 34.458 76.8 76.8s-34.458 76.8-76.8 76.8zM179.2 736.956c-23.518 0-42.667 19.132-42.667 42.667s19.149 42.667 42.667 42.667c23.518 0 42.667-19.132 42.667-42.667s-19.149-42.667-42.667-42.667zM860.153 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM862.976 709.637c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM949.39 818.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM950.447 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM775.504 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM680.208 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM680.563 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM766.268 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM594.149 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM591.542 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM1024 679.083v201.097c0 43.366-35.277 78.643-78.643 78.643h-866.714c-43.366 0-78.643-35.277-78.643-78.643v-201.097c0-25.071 11.998-47.172 30.327-61.577-18.33-14.421-30.327-36.523-30.327-61.594v-201.097c0-43.366 35.277-78.643 78.643-78.643h866.714c43.366 0 78.643 35.277 78.643 78.643v201.097c0 25.071-11.998 47.172-30.327 61.577 18.33 14.421 30.327 36.523 30.327 61.594zM989.867 555.913v-201.097c0-24.542-19.968-44.51-44.51-44.51h-866.714c-24.542-0.017-44.51 19.951-44.51 44.51v201.097c0 24.542 19.968 44.51 44.51 44.51h866.697c24.559 0 44.527-19.968 44.527-44.51zM78.643 634.556c-24.542 0-44.51 19.968-44.51 44.527v201.097c0 24.542 19.968 44.51 44.51 44.51h866.697c24.559 0 44.527-19.968 44.527-44.51v-201.097c0-24.542-19.968-44.51-44.51-44.51l-866.714-0.017zM179.2 378.556c42.342 0 76.8 34.458 76.8 76.8s-34.458 76.8-76.8 76.8c-42.342 0-76.8-34.441-76.8-76.8s34.458-76.8 76.8-76.8zM179.2 498.022c23.518 0 42.667-19.132 42.667-42.667s-19.149-42.667-42.667-42.667c-23.518 0-42.667 19.132-42.667 42.667s19.149 42.667 42.667 42.667zM537.139 98.901c3.908-2.202 7.492-4.915 10.684-8.038 3.328-3.26 7.646-4.881 11.947-4.881 4.42 0 8.841 1.724 12.186 5.12 6.605 6.741 6.485 17.527-0.239 24.132-5.308 5.205-11.264 9.677-17.732 13.363-8.243 4.625-18.62 1.792-23.262-6.434-4.642-8.192-1.775-18.603 6.417-23.262zM537.668 9.967c-3.84-2.253-7.97-3.959-12.271-5.12-9.097-2.458-14.49-11.81-12.049-20.924 2.065-7.612 8.943-12.629 16.469-12.629 1.468 0 2.953 0.188 4.454 0.58 7.202 1.946 14.131 4.83 20.565 8.585 8.141 4.745 10.906 15.206 6.161 23.347-4.745 8.158-15.189 10.889-23.33 6.161zM580.267 71.765c-9.421 0-17.067-8.038-17.067-17.459 0-4.506-0.58-8.943-1.724-13.227-2.441-9.097 2.987-18.449 12.083-20.89 1.468-0.393 2.953-0.58 4.403-0.58 7.543 0 14.438 5.035 16.486 12.663 1.911 7.134 2.884 14.558 2.884 22.016v0.802c0 9.438-7.646 16.674-17.067 16.674zM486.571 9.865c-3.874 2.219-7.441 4.932-10.598 8.073-6.69 6.656-17.476 6.588-24.132-0.068-6.656-6.69-6.622-17.493 0.068-24.132 5.291-5.257 11.247-9.796 17.715-13.5 2.679-1.536 5.581-2.253 8.465-2.253 5.922 0 11.674 3.089 14.831 8.585 4.659 8.175 1.826 18.603-6.349 23.296zM489.25 136.533c-7.168-1.963-14.063-4.898-20.48-8.67-8.124-4.779-10.837-15.241-6.059-23.364 3.191-5.393 8.892-8.414 14.729-8.414 2.935 0 5.922 0.751 8.636 2.355 3.857 2.27 7.97 4.011 12.271 5.205 9.079 2.492 14.421 11.895 11.913 20.975-2.526 9.079-11.913 14.387-21.009 11.913zM460.8 54.289c0 4.403 0.563 8.755 1.655 12.954 2.372 9.114-3.089 18.432-12.22 20.821-9.131 2.355-18.449-3.089-20.821-12.22-1.826-6.997-2.748-14.251-2.748-21.914v-0.034c0-9.438 7.629-16.862 17.067-16.862 9.438-0.017 17.067 7.817 17.067 17.254zM925.904 422.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM830.965 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM917.374 499.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM838.435 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM752.025 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM759.494 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM673.084 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM680.559 419.455c0-19.444-15.763-35.205-35.205-35.205s-35.205 15.763-35.205 35.205c0 19.444 15.763 35.205 35.205 35.205s35.205-15.763 35.205-35.205zM594.145 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM601.615 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM375.467 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM238.933 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM307.2 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM34.133 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM102.4 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM170.667 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM665.6 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM802.133 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM733.867 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM1006.933 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM870.4 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM938.667 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM529.067 173.756v17.067c0 9.438-7.646 17.067-17.067 17.067s-17.067-7.629-17.067-17.067v-17.067c0-9.438 7.646-17.067 17.067-17.067s17.067 7.629 17.067 17.067zM494.933 259.089v-17.067c0-9.438 7.646-17.067 17.067-17.067s17.067 7.629 17.067 17.067v17.067c0 9.438-7.646 17.067-17.067 17.067s-17.067-7.629-17.067-17.067z" />
+<glyph unicode="&#xe911;" glyph-name="icon-remote_ansible" d="M512 960c-282.767 0-512-229.233-512-512s229.233-512 512-512c282.767 0 512 229.233 512 512-0.317 282.633-229.367 511.683-512 512zM954.808 268.633l-145.608-25.125c16.667 61.125 25.667 124.083 26.792 187.425h153.45c-1.925-55.717-13.65-110.658-34.633-162.3v0zM34.558 430.933h153.45c1.125-63.342 10.125-126.3 26.792-187.425l-145.608 25.125c-20.983 51.642-32.708 106.583-34.633 162.3zM69.192 627.367l145.608 25.125c-16.667-61.125-25.667-124.083-26.792-187.425h-153.45c1.925 55.717 13.65 110.658 34.633 162.3zM529.067 685.975c61.325-0.783 122.5-6.367 182.958-16.708l60.242-10.392c18.508-62.983 28.467-128.167 29.608-193.808h-272.808v220.908zM717.842 702.908c-62.375 10.658-125.5 16.417-188.775 17.2v204.8c97.842-9.4 182.833-98.983 231-229.358l-42.225 7.358zM494.933 720.108c-63.275-0.783-126.383-6.542-188.758-17.2l-42.242-7.308c48.167 130.408 133.158 220.025 231 229.383v-204.875zM311.992 669.267c60.45 10.342 121.617 15.925 182.942 16.708v-220.908h-272.808c1.142 65.642 11.1 130.825 29.608 193.808l60.258 10.392zM222.125 430.933h272.808v-220.908c-61.325 0.783-122.5 6.367-182.958 16.708l-60.242 10.392c-18.508 62.983-28.467 128.167-29.608 193.808v0zM306.158 193.092c62.375-10.675 125.492-16.458 188.775-17.292v-204.8c-97.842 9.408-182.833 98.992-231 229.367l42.225-7.275zM529.067 175.8c63.275 0.833 126.383 6.617 188.758 17.292l42.242 7.308c-48.167-130.408-133.158-220.025-231-229.383v204.783zM712.008 226.733c-60.45-10.342-121.617-15.925-182.942-16.708v220.908h272.808c-1.142-65.642-11.1-130.825-29.608-193.808l-60.258-10.392zM835.992 465.067c-1.125 63.342-10.125 126.3-26.792 187.425l145.608-25.125c20.983-51.642 32.708-106.583 34.633-162.3h-153.45zM937.542 664.983l-139.575 24.083c-25.092 81.858-72.033 155.325-135.783 212.483 119.208-39.783 218.067-124.708 275.358-236.567zM361.817 901.55c-63.75-57.158-110.692-130.625-135.783-212.483l-139.575-24.083c57.292 111.858 156.15 196.783 275.358 236.567zM86.458 231.017l139.575-24.083c25.092-81.858 72.033-155.325 135.783-212.483-119.208 39.783-218.067 124.708-275.358 236.567zM662.183-5.55c63.75 57.158 110.692 130.625 135.783 212.483l139.575 24.083c-57.292-111.858-156.15-196.783-275.358-236.567z" />
+<glyph unicode="&#xe912;" glyph-name="icon-netconf_executer" horiz-adv-x="926" d="M918.242 804.814c-21.117 78.231-178.291 155.186-453.231 155.186s-432.132-76.955-453.231-155.186c-1.532-2.681-2.662-5.617-2.662-8.936v-674.722c0-2.954 0.784-5.744 2.134-8.224 21.536-89.264 214.215-155.897 453.76-155.897 238.998 0 431.366 66.36 453.614 155.296 1.459 2.608 2.279 5.617 2.279 8.826v674.722c0 3.319-1.131 6.255-2.662 8.936zM882.993 340.259c-0.511-2.207-1.222-4.395-2.115-6.62-0.729-1.805-1.623-3.611-2.608-5.416-1.222-2.243-2.589-4.486-4.212-6.729-1.204-1.696-2.571-3.374-3.994-5.051-2.024-2.389-4.176-4.778-6.62-7.148-1.477-1.441-3.1-2.863-4.741-4.304-2.991-2.608-6.109-5.197-9.592-7.768-1.495-1.112-3.1-2.188-4.687-3.282-4.121-2.845-8.425-5.671-13.148-8.443-1.24-0.748-2.571-1.459-3.866-2.188-5.434-3.064-11.106-6.109-17.233-9.063-0.784-0.383-1.605-0.748-2.407-1.112-6.838-3.228-13.987-6.401-21.628-9.464-0.219-0.091-0.438-0.164-0.656-0.255-41.413-16.54-94.388-30.454-156.116-39.572-0.31-0.036-0.62-0.073-0.93-0.128-11.999-1.769-24.308-3.337-36.946-4.723-2.061-0.219-4.231-0.365-6.31-0.584-11.033-1.149-22.193-2.207-33.681-3.045-5.252-0.383-10.759-0.565-16.102-0.894-8.644-0.511-17.196-1.076-26.059-1.386-14.479-0.456-29.25-0.748-44.331-0.748s-29.852 0.292-44.349 0.802c-8.863 0.31-17.415 0.894-26.059 1.386-5.343 0.31-10.85 0.511-16.102 0.894-11.489 0.839-22.649 1.897-33.681 3.045-2.079 0.219-4.249 0.365-6.31 0.584-12.637 1.386-24.946 2.972-36.946 4.723-0.31 0.036-0.62 0.073-0.93 0.128-61.728 9.118-114.703 23.032-156.116 39.572-0.219 0.073-0.438 0.164-0.656 0.255-7.641 3.064-14.807 6.237-21.628 9.464-0.784 0.383-1.623 0.748-2.407 1.112-6.127 2.954-11.799 5.981-17.233 9.063-1.277 0.729-2.626 1.441-3.866 2.188-4.723 2.772-9.027 5.598-13.148 8.443-1.568 1.094-3.191 2.17-4.687 3.282-3.483 2.571-6.601 5.161-9.592 7.768-1.623 1.422-3.264 2.845-4.741 4.304-2.444 2.371-4.595 4.741-6.62 7.148-1.422 1.678-2.79 3.355-3.994 5.051-1.605 2.243-2.972 4.486-4.212 6.729-0.985 1.805-1.86 3.611-2.608 5.416-0.894 2.207-1.605 4.413-2.115 6.62-0.675 2.899-1.422 5.854-1.422 8.79 0 2.061 0.237 4.121 0.565 6.164 0.456 2.754 0.201 5.507-0.565 8.115v135.382c0.511-0.474 1.149-0.93 1.678-1.404 3.975-3.501 8.024-6.984 12.583-10.34 68.694-51.954 206.064-92.328 405.162-92.328 198.259 0 335.282 40.046 404.268 91.689 5.507 4.012 10.467 8.151 15.136 12.364l0.018 0.018v-135.382c-0.766-2.608-1.021-5.361-0.565-8.115 0.346-2.042 0.565-4.103 0.565-6.164 0-2.936-0.748-5.89-1.441-8.844zM884.433 717.592v-135.382c-0.766-2.608-1.021-5.361-0.565-8.115 0.346-2.042 0.565-4.103 0.565-6.164 0-2.936-0.748-5.89-1.441-8.844-0.511-2.207-1.222-4.395-2.115-6.62-0.729-1.805-1.623-3.611-2.608-5.416-1.222-2.243-2.589-4.486-4.212-6.729-1.204-1.696-2.571-3.374-3.994-5.051-2.024-2.389-4.176-4.778-6.62-7.148-1.477-1.441-3.1-2.863-4.741-4.304-2.991-2.608-6.109-5.197-9.592-7.768-1.495-1.112-3.1-2.188-4.687-3.282-4.121-2.845-8.425-5.671-13.148-8.443-1.24-0.748-2.571-1.459-3.866-2.188-5.434-3.064-11.106-6.109-17.233-9.063-0.784-0.383-1.605-0.748-2.407-1.112-6.838-3.228-13.987-6.401-21.628-9.464-0.219-0.091-0.438-0.164-0.656-0.255-41.413-16.54-94.388-30.454-156.116-39.572-0.31-0.036-0.62-0.073-0.93-0.128-11.999-1.769-24.308-3.337-36.946-4.723-2.061-0.219-4.231-0.365-6.31-0.584-11.033-1.149-22.193-2.207-33.681-3.045-5.252-0.383-10.759-0.565-16.102-0.894-8.644-0.511-17.196-1.076-26.059-1.386-14.479-0.456-29.25-0.748-44.331-0.748s-29.852 0.292-44.349 0.802c-8.863 0.31-17.415 0.894-26.059 1.386-5.343 0.31-10.85 0.511-16.102 0.894-11.489 0.839-22.649 1.897-33.681 3.045-2.079 0.219-4.249 0.365-6.31 0.584-12.637 1.386-24.946 2.972-36.946 4.723-0.31 0.036-0.62 0.073-0.93 0.128-61.728 9.118-114.703 23.032-156.116 39.572-0.219 0.073-0.438 0.164-0.656 0.255-7.641 3.064-14.807 6.237-21.628 9.464-0.784 0.383-1.623 0.748-2.407 1.112-6.127 2.954-11.799 5.981-17.233 9.063-1.277 0.729-2.626 1.441-3.866 2.188-4.723 2.772-9.027 5.598-13.148 8.443-1.568 1.094-3.191 2.17-4.687 3.282-3.483 2.571-6.601 5.161-9.592 7.768-1.623 1.422-3.264 2.845-4.741 4.304-2.444 2.371-4.595 4.741-6.62 7.148-1.422 1.678-2.79 3.355-3.994 5.051-1.605 2.243-2.972 4.486-4.212 6.729-0.985 1.805-1.86 3.611-2.608 5.416-0.894 2.207-1.605 4.413-2.115 6.62-0.675 2.899-1.422 5.854-1.422 8.79 0 2.061 0.237 4.121 0.565 6.164 0.456 2.754 0.201 5.507-0.565 8.115v135.382c2.188-1.988 4.687-3.939 7.057-5.908 1.313-1.094 2.535-2.188 3.921-3.282 5.471-4.304 11.379-8.553 17.78-12.692 1.331-0.857 2.827-1.696 4.212-2.553 5.361-3.337 11.033-6.601 16.996-9.811 2.207-1.185 4.413-2.352 6.693-3.519 6.656-3.392 13.64-6.693 20.989-9.884 1.204-0.529 2.298-1.076 3.519-1.587 8.553-3.629 17.634-7.094 27.080-10.449 2.608-0.93 5.343-1.805 8.024-2.717 7.513-2.535 15.282-4.96 23.324-7.313 2.899-0.839 5.744-1.714 8.717-2.517 10.668-2.954 21.682-5.762 33.244-8.352 1.587-0.365 3.301-0.656 4.905-1.003 10.194-2.225 20.771-4.285 31.639-6.218 3.684-0.656 7.422-1.277 11.179-1.897 10.34-1.696 20.989-3.246 31.913-4.668 2.808-0.365 5.489-0.784 8.334-1.131 13.567-1.641 27.609-3.045 42.033-4.249 3.556-0.292 7.258-0.511 10.868-0.766 11.543-0.839 23.342-1.532 35.414-2.079 4.395-0.201 8.771-0.401 13.257-0.565 15.719-0.529 31.73-0.912 48.325-0.912s32.605 0.383 48.325 0.912c4.468 0.164 8.844 0.365 13.257 0.565 12.072 0.547 23.871 1.24 35.414 2.079 3.611 0.274 7.294 0.474 10.869 0.766 14.424 1.185 28.466 2.608 42.033 4.249 2.845 0.346 5.525 0.766 8.334 1.131 10.923 1.422 21.555 2.972 31.913 4.668 3.757 0.62 7.495 1.24 11.179 1.897 10.869 1.933 21.445 3.994 31.639 6.218 1.605 0.346 3.319 0.656 4.905 1.003 11.561 2.589 22.576 5.416 33.244 8.352 2.972 0.821 5.817 1.678 8.717 2.517 8.042 2.352 15.81 4.778 23.324 7.313 2.681 0.912 5.416 1.787 8.024 2.717 9.446 3.355 18.546 6.82 27.080 10.449 1.222 0.511 2.316 1.058 3.519 1.587 7.349 3.209 14.333 6.492 20.989 9.884 2.279 1.167 4.504 2.334 6.693 3.519 5.963 3.191 11.634 6.455 16.996 9.811 1.386 0.857 2.881 1.696 4.212 2.553 6.401 4.14 12.309 8.37 17.78 12.692 1.368 1.094 2.589 2.188 3.921 3.282 2.371 1.969 4.869 3.921 7.057 5.908zM465.011 923.529c247.185 0 419.422-72.068 419.422-136.768s-172.237-136.768-419.422-136.768c-247.185 0-419.422 72.068-419.422 136.768s172.237 136.768 419.422 136.768zM884.433 126.572c-0.255-0.802-0.438-1.623-0.584-2.462-10.34-63.077-181.117-130.604-418.838-130.604s-408.499 67.527-418.838 130.604c-0.146 0.821-0.346 1.623-0.584 2.389v153.435c0.511-0.474 1.149-0.93 1.678-1.404 3.975-3.501 8.024-6.984 12.583-10.34 68.694-51.954 206.064-92.328 405.162-92.328 198.259 0 335.282 40.046 404.268 91.689 5.507 4.012 10.467 8.151 15.136 12.364l0.018 0.018v-153.363z" />
+<glyph unicode="&#xe913;" glyph-name="icon-resource_resolution" d="M1024 940.966c-0.026 4.551-1.873 8.898-5.136 12.076-3.271 3.169-7.669 4.89-12.22 4.785h-989.288c-4.551 0.113-8.958-1.616-12.22-4.785s-5.119-7.525-5.136-12.076v-817.72c-0.051-9.712 7.644-17.712 17.356-18.034h237.907l8.322-18.678c2.975-6.703 9.864-10.788 17.178-10.178l34.856 2.644c13.034-16.186 28.153-30.576 44.966-42.788l-1.025-34.763c-0.212-7.356 4.237-14.051 11.102-16.695l74.042-28.585c6.839-2.636 14.602-0.695 19.39 4.864l22.602 26.195c20.653-1.924 41.449-1.39 61.975 1.61l24.195-25.237c5.042-5.254 12.814-6.805 19.483-3.89l72.746 31.831c6.737 2.949 10.89 9.831 10.347 17.169l-2.559 34.856c16.203 13.034 30.61 28.161 42.831 44.983l34.788-1.025c7.305-0.39 14.042 3.949 16.703 10.763l2.805 6.924h236.636c9.712 0.331 17.407 8.322 17.356 18.034v633.729c0 0.059 0 0.11 0 0.169s0 0.11 0 0.169v183.653zM989.288 923.11v-149.695h-954.576v149.695h954.576zM707.356 123.525c-5.983 0.195-11.644-2.729-14.949-7.72-12.915-19.39-29.102-36.39-47.839-50.237-4.788-3.534-7.424-9.288-6.992-15.22l2.347-31.915-50.39-22.042-22.127 23.076c-4.034 4.212-9.915 6.11-15.653 5.059-23.093-4.229-46.703-4.839-69.983-1.805-5.788 0.754-11.568-1.458-15.373-5.873l-20.593-23.864-51.178 19.737 0.941 31.898c0.178 5.975-2.746 11.627-7.72 14.949-19.39 12.915-36.39 29.102-50.237 47.839-3.542 4.78-9.288 7.415-15.22 6.983l-31.924-2.339-6.864 15.686c-0.449 1.686-1.153 3.305-2.093 4.788l-13.085 29.915 23.076 22.127c4.212 4.034 6.11 9.915 5.059 15.644-4.229 23.093-4.839 46.703-1.805 69.983 0.746 5.788-1.458 11.568-5.873 15.381l-23.864 20.593 19.737 51.178 31.898-0.941c5.983-0.195 11.644 2.729 14.949 7.72 12.915 19.398 29.102 36.398 47.839 50.237 4.788 3.542 7.424 9.288 6.992 15.229l-2.347 31.915 50.39 22.042 22.136-23.076c4.034-4.212 9.915-6.11 15.644-5.059 23.102 4.229 46.712 4.839 69.992 1.805 5.788-0.746 11.568 1.458 15.381 5.873l20.593 23.864 51.178-19.737-0.941-31.89c-0.178-5.983 2.737-11.636 7.72-14.958 19.39-12.907 36.39-29.102 50.229-47.839 3.542-4.78 9.288-7.415 15.22-6.983l31.915 2.347 22.051-50.39-23.085-22.127c-4.203-4.034-6.102-9.915-5.059-15.644 4.229-23.093 4.839-46.703 1.814-69.983-0.754-5.788 1.449-11.568 5.873-15.381l23.864-20.593-19.754-51.178-31.89 0.924zM783.407 139.924l12.364 32.407c2.636 6.89 0.703 14.695-4.856 19.559l-26.195 22.686c1.932 20.661 1.398 41.483-1.602 62.017l25.237 24.22c5.246 5.042 6.797 12.822 3.881 19.492l-31.822 72.746c-2.949 6.746-9.831 10.898-17.169 10.356l-34.864-2.559c-13.025 16.203-28.136 30.61-44.949 42.839l1.025 34.788c0.212 7.356-4.237 14.051-11.102 16.703l-74.042 28.576c-6.839 2.636-14.602 0.695-19.39-4.856l-22.61-26.212c-20.653 1.932-41.458 1.398-61.983-1.602l-24.195 25.246c-5.034 5.254-12.814 6.805-19.483 3.89l-72.746-31.822c-6.737-2.949-10.89-9.839-10.347-17.178l2.559-34.856c-16.203-13.034-30.602-28.161-42.831-44.975l-34.788 1.017c-7.364 0.237-14.068-4.212-16.703-11.093l-28.568-74.042c-2.636-6.839-0.695-14.602 4.856-19.39l26.203-22.61c-1.932-20.644-1.398-41.449 1.602-61.966l-25.229-24.203c-5.263-5.169-6.805-13.042-3.89-19.822l8.305-19.356h-205.364v598.78h954.576v-598.78h-205.881zM224.127 794.305c29.076 0 52.737 24.432 52.737 54.466s-23.653 54.458-52.737 54.458c-29.085 0-52.737-24.424-52.737-54.458s23.661-54.466 52.737-54.466zM224.127 868.525c9.941 0 18.025-8.864 18.025-19.746s-8.085-19.754-18.025-19.754c-9.932 0-18.025 8.856-18.025 19.746s8.093 19.754 18.025 19.754zM339.093 794.305c29.068 0 52.729 24.432 52.729 54.466s-23.644 54.458-52.729 54.458c-29.085 0-52.72-24.424-52.72-54.458s23.644-54.466 52.72-54.466zM339.093 868.525c9.932 0 18.017-8.864 18.017-19.746s-8.085-19.754-18.017-19.754c-9.941 0-18.008 8.856-18.008 19.746s8.076 19.754 18.008 19.754zM109.161 794.305c29.076 0 52.737 24.432 52.737 54.466s-23.653 54.458-52.737 54.458c-29.085 0-52.729-24.432-52.729-54.458s23.653-54.466 52.729-54.466zM109.161 868.525c9.932 0 18.025-8.864 18.025-19.746s-8.093-19.754-18.025-19.754c-9.932 0-18.017 8.864-18.017 19.754 0 10.898 8.085 19.746 18.017 19.746zM512 406.958c-92.22 0-166.983-74.763-166.983-166.992 0-92.22 74.763-166.983 166.983-166.983s166.983 74.763 166.983 166.983c-0.102 92.186-74.805 166.881-166.983 166.992zM512 107.695c-73.051 0-132.271 59.22-132.271 132.271 0 73.059 59.22 132.28 132.271 132.28s132.271-59.22 132.271-132.28c-0.076-73.017-59.254-132.186-132.271-132.271zM512 323.381c-46.068 0-83.415-37.347-83.415-83.415 0-46.059 37.347-83.407 83.415-83.407s83.407 37.339 83.407 83.407c-0.051 46.042-37.364 83.356-83.407 83.415v0zM512 191.271c-26.898 0-48.703 21.805-48.703 48.695 0 26.898 21.805 48.703 48.703 48.703s48.695-21.805 48.695-48.703c-0.025-26.881-21.814-48.661-48.695-48.695v0z" />
+<glyph unicode="&#xe914;" glyph-name="icon-next_arrow" horiz-adv-x="559" d="M538.45 421.572l-421.316-421.303c-26.801-26.814-70.254-26.814-97.041 0-26.79 26.79-26.79 70.241 0 97.028l372.799 372.789-372.789 372.776c-26.79 26.801-26.79 70.247 0 97.037 26.79 26.801 70.241 26.801 97.041 0l421.316-421.309c13.395-13.401 20.085-30.947 20.085-48.501 0-17.563-6.703-35.121-20.096-48.516z" />
 <glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
 <glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
 <glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index 48987f472..98cca965f 100755
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index 6bea7e8eb..04f864fc0 100755
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index 899647321..e4dccceac 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?h11si2');
-  src:  url('fonts/icomoon.eot?h11si2#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?h11si2') format('truetype'),
-    url('fonts/icomoon.woff?h11si2') format('woff'),
-    url('fonts/icomoon.svg?h11si2#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?pyhe9j');
+  src:  url('fonts/icomoon.eot?pyhe9j#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?pyhe9j') format('truetype'),
+    url('fonts/icomoon.woff?pyhe9j') format('woff'),
+    url('fonts/icomoon.svg?pyhe9j#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -35,6 +35,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-dg_generic:before {
+  content: "\e910";
+  color: #1b3e6f;
+}
+.icon-remote_ansible:before {
+  content: "\e911";
+  color: #1b3e6f;
+}
+.icon-netconf_executer:before {
+  content: "\e912";
+  color: #1b3e6f;
+}
+.icon-resource_resolution:before {
+  content: "\e913";
+  color: #1b3e6f;
+}
+.icon-next_arrow:before {
+  content: "\e914";
+  color: #1b3e6f;
+}
 .icon-function-attribute:before {
   content: "\e90e";
 }
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 0a3a4cc89..5950c6a99 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -468,6 +468,7 @@ height: 40px;
   background: none !important;
   text-decoration: none;
   color: #1B3E6F;
+  cursor: pointer;
 }
 .tags-filter-list{
   max-height: 260px;
@@ -1165,6 +1166,14 @@ height: 40px;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
+.packagesFilter .dropdown-content ul{
+  max-height: 200px;
+  overflow-y: auto;
+  padding-left: 0;
+}
+.packagesFilter .dropdown-content li{
+  list-style: none;
+}
 .packagesFilter .dropdown-content li:hover .custom-checkbox{
   cursor: pointer;
 }