X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=cds-ui%2Fdesigner-client%2Fsrc%2Fapp%2Fmodules%2Ffeature-modules%2Fpackages%2Fdesigner%2Fdesigner.component.html;h=87ef61c27032cb6808b91e39519725dda3c6dbcc;hb=658b6b1e72261cec2d264ece148205ed43c6dbd3;hp=8ec735aecc0a28e5df043c6e4a0e6b4588b14098;hpb=5e5718c9191f125ad65bd9ab15334147bedd79cc;p=ccsdk%2Fcds.git

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 8ec735aec..87ef61c27 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
@@ -1,20 +1,69 @@
 <!--Header-->
+<ngx-ui-loader></ngx-ui-loader>
 <header>
     <div class="row m-0">
         <div class="col pl-0">
             <p class="logo mb-0"></p>
             <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-0">
+                <ol class="breadcrumb designer-breadcrumb mb-0">
                     <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
-                        <a href="#">Package Name</a>
+                        <a routerLink="/packages/package/{{packageId}}">{{viewedPackage.artifactName}}</a>
+                        <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
+                            data-target="#exampleModalLong" data-tooltip="Package Details">
+                            <i class="icon-info" aria-hidden="true"></i>
+                        </button>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item active" aria-current="page">
-                        <p class="mb-0">Topology View</p>
+                        <p class="mb-0">Designer Mode</p>
                     </li>
                 </ol>
+                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
+                    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" />
+                                </button>
+                            </div>
+                            <div class="modal-body package-info">
+                                <div class="row">
+                                    <div class="col">
+                                        <h3>Test Package
+                                            <span class="package-version">Version 1.0.2</span></h3>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col mb-3">
+                                        <span class="badge badge-primary">test</span>
+                                        <span class="badge badge-primary">vDNS-CDS</span>
+                                        <span class="badge badge-primary">SCALE-OUT</span>
+                                        <span class="badge badge-primary">MARCO</span>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-2 pr-0">
+                                        <img src="/assets/img/img-user3.jpg" class="creator-pic">
+                                    </div>
+                                    <div class="col-10 pl-0">
+                                        <p><b>Author information:</b></p>
+                                        <p>Abdelmuhaimen Seaudi</p>
+                                        <p>abdelmuhaimen.seaudi@orange.com</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="col pr-0 text-right">
@@ -22,15 +71,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>
@@ -39,12 +88,15 @@
                     <div class="dropdown">
                         <input class="dropdown-toggle" type="text">
                         <div class="dropdown-text">Save</div>
-                        <ul class="dropdown-content">
+                        <ul class="dropdown-content save-blueprint">
                             <li>
-                                <a href="">Save</a>
+                                <a (click)="saveBluePrint()"><i class="icon-save-sm" aria-hidden="true"></i> Save</a>
                             </li>
                             <li>
-                                <a href="">Save &amp; Deploy</a>
+                                <a (click)="enrichBluePrint()"><i class="icon-enrich" aria-hidden="true"></i> Enrich</a>
+                            </li>
+                            <li>
+                                <a (click)="publishBluePrint()"><i class="fa fa-play-circle" aria-hidden="true"></i> Deploy</a>
                             </li>
                         </ul>
                     </div>
@@ -55,91 +107,165 @@
         </div>
     </div>
 </header>
+<!--Editor Bar-->
+<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">
+        <i class="fa arr-size">&#xf100;</i>
+    </button>
+    <!--Nav Tabs-->
+    <div class="collapse navbar-collapse ">
+        <!--Action Tabs-->
+        <ul class="navbar-nav">
+            <li class="nav-item active">
+                <nav class="row">
+                    <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>
+                            <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
+                                aria-controls=" " aria-selected="false" style="visibility: hidden;">Template</a>
+                        </div>
+                    </div>
+                </nav>
+            </li>
+        </ul>
+        <!--Requirement/Capability Legend-->
+        <ul class="templateLegend ml-auto mr-auto p-0" style="visibility: hidden;">
+            <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
+            <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
+        </ul>
+        <!--Undo/Redo Buttons-->
+        <ul class="editor navbar">
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
+                    <img src="/assets/img/icon-undoActive.svg">
+                </button>
+            </li>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
+                    <img src="/assets/img/icon-redo.svg">
+                </button>
+            </li>
+            <li class="vertical_line"></li>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
+                    <img src="/assets/img/icon-zoomOut.svg">
+                </button>
+            </li>
+            <li class="zoom-percent">100%</li>
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
+                    <img src="/assets/img/icon-zoomIn.svg"></button>
+            </li>
+        </ul>
+        <!--Designer/Scripting View Tabs-->
+        <ul class="navbar ml-2" style="list-style: none">
+            <li class="nav-item">
+                <div class="btn-group viewBtns" role="group">
+                    <button type="button" class="btn btn-secondary topologySource active">Designer</button>
+                    <button [routerLink]="['/designer/source', packageId]" type="button"
+                        class="btn btn-secondary topologyView">Scripting
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
+
 <ng-sidebar-container class="sidebar-container">
-    <!-- Controller SideBar -->
+    <!--Left Side Menu-->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-                [mode]="'push'"
-                #sidebarLeft>
-        <div class="row">
-            <div class="col-12 p-0">
-                <form>
-                    <input type="text" class="form-control input-search-controller"
-                           placeholder="Search actions and functions">
-                </form>
-            </div>
-            <h1 class="col-12">Actions</h1>
-            <div class="col-12 text-center p-0">
-                <div class="btn-group actionBtns" role="group">
-                    <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button>
-                    <button type="button" class="btn">Import Action</button>
+        [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>
+                    <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>
                 </div>
             </div>
-      <div class="col-12 actionsList">
-        <b>Select from other packages:</b>
-        <div class="actions-scroll">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck1">
-            <label class="custom-control-label" for="customCheck1">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck2">
-            <label class="custom-control-label" for="customCheck2">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck3">
-            <label class="custom-control-label" for="customCheck3">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck4">
-            <label class="custom-control-label" for="customCheck4">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-        </div>
-        <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-secondary mr-3">Insert</button>
-          <button type="button" class="btn btn-secondary">Cancel</button>
-        </div>
-      </div>
+        </nav>
+        <div class="row">
+            <div class="col">
+                <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">
+                        <!--Action Search Box-->
+                        <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 
-        <h1 class="col-12">Functions</h1>
-        <div id="palette-paper" class="col-12 componentsList">
-            <b>Drag and drop function to Action’s box</b>
-            <ul class="list-group actions-scroll">
-                <!-- <li class="list-group-item" *ngFor="let function of viewedFunctions">
-                    <p class="compType-1">{{function.modelName}}</p>
-                </li> -->
-                <li class="list-group-item">
-                    <p class="compType-2">component-netconf-executor</p>
-                </li>
-                <li class="list-group-item">
-                    <p class="compType-3">component-remote-ansible-executor</p>
-                </li>
-                <li class="list-group-item">
-                    <p class="compType-4">dg-generic</p>
-                </li>
-                <li class="list-group-item">
-                    <p class="compType-1">component-resource-resolution</p>
-                </li>
-            </ul>
+                        <div class="row temp-buttons">
+                            <div class="col text-center">
+                                <!-- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
+                                     Action Attributes
+                                 </button> -->
+                            </div>
+                            <!-- <div class="col text-center">
+                                <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
+                                    Function Attributes
+                                </button>
+                            </div> -->
+                        </div>
+                        <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
+                            + &nbsp;&nbsp;New Action
+                        </button>
+                        <div class="actionsList">
+                            <div *ngIf="showAction" class="custom-control">
+                                <label><i class="icon-file" aria-hidden="true"></i>
+                                    {{customActionName}} </label>
+                            </div>
+                            <div *ngIf="!showAction" class="custom-control">
+                                <ul>
+                                    <li *ngFor="let customActionName of actions">
+                                        <label (click)="openActionAttributes(customActionName)"
+                                            [attr.for]="customActionName">
+                                            <i class="icon-file" aria-hidden="true" class="icon-file"></i>
+                                            {{customActionName}} </label>
+
+                                        <ul *ngIf="customActionName.includes(this.currentActionName)"
+                                            class="actionSubList">
+                                            <li (click)="openFunctionAttributes(currentFunction)"
+                                                [attr.for]="customActionName" *ngFor="let currentFunction of steps">
+                                                <span>{{getTarget(currentFunction)}}</span>
+                                            </li>
+                                        </ul>
+                                    </li>
+
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <!--Function List-->
+                    <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
+                        <!--Function Search Box-->
+                        <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
+                        <div class="functionsList">
+                            <div id="palette-paper"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
+        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i>
+            <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
         </div>
     </ng-sidebar>
-    <!-- Page content -->
+    <!--Page content-->
     <div ng-sidebar-content id="board-paper">
         <button class="rotate" (click)="_toggleSidebar1()">
-      <span>
-        Controller
-        <i class="fa fa-angle-double-left"></i>
-      </span>
+            <span>
+                Controller
+                <i class="fa fa-angle-double-left"></i>
+            </span>
         </button>
-        <!-- Canvas -->
+
+
+        <!-- CANVAS -->
+        <!--Editor Bar-->
         <div class="editBar text-center">
             <div class="btn-group mr-2" role="group" aria-label="First group">
                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
@@ -163,194 +289,62 @@
                 <button type="button" class="btn btn-secondary topologyView">Source</button>
             </div>
         </div>
-        <!-- <div class="card actionContainer">
-            <div class="card-header">
-                <span>Action 1</span>
-            </div>
-            <div class="card-body">
-                <a (click)="sidebarRight.open()" class="componentContainer text-center">
-                    <img src="/assets/img/icon-comType1.svg" title="">
-                    <h2>config-assign</h2>
-                    <p>component-resource-resolution</p>
-                </a>
-                <a (click)="sidebarRight.open()" class="componentContainer text-center">
-                    <img src="/assets/img/icon-comType2.svg" title="">
-                    <h2>execute</h2>
-                    <p>component-netconf-executor</p>
-                </a>
-                <a (click)="sidebarRight.open()" class="componentContainer text-center">
-                    <img src="/assets/img/icon-comType3.svg" title="">
-                    <h2>function 1</h2>
-                    <p>dg-generic</p>
-                </a>
-                <a (click)="sidebarRight.open()" class="componentContainer text-center">
-                    <img src="/assets/img/icon-comType2.svg" title="">
-                    <h2>execute</h2>
-                    <p>component-netconf-executor</p>
-                </a>
-            </div>
-        </div> -->
-        <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+        <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
     </div>
-    <!-- Attribute SideBar -->
-    <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'"
-                #sidebarRight>
+    <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
+        [position]="'right'" #sidebarRight1>
         <div class="container-fluid0">
             <div class="row m-0">
-                <div class="col-2 pr-0">
-                    <button (click)="sidebarRight.close()" class="closeBar"></button>
-                </div>
-                <div class="col-10 attributesContainer p-0">
-                    <h1>Action Attributes</h1>
-                    <div class="scrolll">
-                        <div class="row m-0">
-                            <div class="col-12">
-                                <div class="form-group actionName">
-                                    <label for="exampleInputEmail1">Action Name</label>
-                                    <input type="text" class="form-control" placeholder="Action 1">
-                                </div>
-                            </div>
+                <div class="col attributesContainer">
+                    <div class="row m-0 attributesContainertTitle">
+                        <div class="col-2 pl-0">
+                            <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom">
+                                <i class="icon-close" type="button" aria-hidden="true"></i></button>
                         </div>
-                        <div class="accordion" id="accordionExample">
-                            <div class="card">
-                                <div class="card-header row" id="headingOne">
-                                    <h2 class="col-10 mb-0">
-                                        <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseOne" aria-expanded="true"
-                                                aria-controls="collapseOne">
-                                            Steps
-                                        </button>
-                                    </h2>
-                                    <div class="col-2 p-0 text-center">
-                                        <button class="btn btn-addAttribute" type="button"></button>
-                                    </div>
-                                </div>
-
-                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                     data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">Name</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Name</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">Description</label>
-                                            <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Target</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-
-                                    </div>
-                                </div>
+                        <h6 class="col pl-0">Action 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 Action Source"
+                                    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="icon-delete-sm" aria-hidden="true"></i></button>
                             </div>
-                            <div class="card">
-                                <div class="card-header row" id="headingTwo">
-                                    <h2 class="col-10 mb-0">
-                                        <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseTwo" aria-expanded="true"
-                                                aria-controls="collapseTwo">
-                                            Inputs
-                                        </button>
-                                    </h2>
-                                    <div class="col-2 p-0 text-center">
-                                        <button class="btn btn-addAttribute" type="button"></button>
-                                    </div>
-                                </div>
-                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
-                                     data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">Name</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Name</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">Description</label>
-                                            <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Target</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="card">
-                                <div class="card-header row" id="headingThree">
-                                    <h2 class="col-10 mb-0">
-                                        <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseThree" aria-expanded="true"
-                                                aria-controls="collapseThree">
-                                            Outputs
-                                        </button>
-                                    </h2>
-                                    <div class="col-2 p-0 text-center">
-                                        <button class="btn btn-addAttribute" type="button"></button>
-                                    </div>
-                                </div>
-                                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
-                                     data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">Name</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Name</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">Description</label>
-                                            <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Target</label>
-                                            <input type="text" class="form-control" placeholder="Action 1">
-                                        </div>
-
-                                    </div>
-                                </div>
+                        </div>
+                    </div>
+                    <app-action-attributes></app-action-attributes>
+                </div>
+            </div>
+        </div>
+    </ng-sidebar>
+    <!--Right Side Menu - Function Attribute-->
+    <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
+        [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>
+                            </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>
+                                <button type="button" class="btn trash-item" tooltip="Delete Function"
+                                    placement="bottom"><i class="icon-delete-sm" type="button"
+                                        aria-hidden="true"></i></button>
                             </div>
                         </div>
                     </div>
+                    <app-functions-attribute (saveEvent)="saveBluePrint()"></app-functions-attribute>
                 </div>
             </div>
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
+
+</ng-sidebar-container>
\ No newline at end of file