cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html

   1 <!--Header-->
   2 <ngx-ui-loader></ngx-ui-loader>
   3 <header>
   4     <div class="row m-0">
   5         <div class="col pl-0">
   6             <p class="logo mb-0"></p>
   7             <nav aria-label="breadcrumb">
   8                 <ol class="breadcrumb designer-breadcrumb mb-0">
   9                     <li class="breadcrumb-item">
  10                         <a href="#">CBA Packages</a>
  11                     </li>
  12                     <i class="fa fa-angle-right ml-2 mr-2"></i>
  13                     <li class="breadcrumb-item">
  14                         <a routerLink="/packages/package/{{packageId}}">{{viewedPackage.artifactName}}</a>
  15                         <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
  16                             data-target="#exampleModalLong" data-tooltip="Package Details">
  17                             <i class="icon-info" aria-hidden="true"></i>
  18                         </button>
  19                     </li>
  20                     <i class="fa fa-angle-right ml-2 mr-2"></i>
  21                     <li class="breadcrumb-item active" aria-current="page">
  22                         <p class="mb-0">Designer Mode</p>
  23                     </li>
  24                 </ol>
  25                 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
  26                     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  27                     <div class="modal-dialog" role="document">
  28                         <div class="modal-content">
  29                             <div class="modal-header">
  30                                 <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
  31                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  32                                     <img src="assets/img/icon-close.svg" />
  33                                 </button>
  34                             </div>
  35                             <div class="modal-body package-info">
  36                                 <div class="row">
  37                                     <div class="col">
  38                                         <h3>Test Package
  39                                             <span class="package-version">Version 1.0.2</span></h3>
  40                                     </div>
  41                                 </div>
  42                                 <div class="row">
  43                                     <div class="col mb-3">
  44                                         <span class="badge badge-primary">test</span>
  45                                         <span class="badge badge-primary">vDNS-CDS</span>
  46                                         <span class="badge badge-primary">SCALE-OUT</span>
  47                                         <span class="badge badge-primary">MARCO</span>
  48                                     </div>
  49                                 </div>
  50                                 <div class="row">
  51                                     <div class="col-2 pr-0">
  52                                         <img src="/assets/img/img-user3.jpg" class="creator-pic">
  53                                     </div>
  54                                     <div class="col-10 pl-0">
  55                                         <p><b>Author information:</b></p>
  56                                         <p>Abdelmuhaimen Seaudi</p>
  57                                         <p>abdelmuhaimen.seaudi@orange.com</p>
  58                                     </div>
  59                                 </div>
  60                             </div>
  61                             <div class="modal-footer">
  62                                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  63                             </div>
  64                         </div>
  65                     </div>
  66                 </div>
  67             </nav>
  68         </div>
  69         <div class="col pr-0 text-right">
  70             <ul class="topology-actions">
  71                 <li>
  72                     <div class="btn-group" role="group" aria-label="Basic example">
  73                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  74                             data-tooltip="Preview">
  75                             <i class="fa fa-eye"></i>
  76                         </a>
  77                         <a (click)="downloadPackage()" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  78                             data-tooltip="Download">
  79                             <i class="fa fa-download"></i>
  80                         </a>
  81                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  82                             data-tooltip="Share">
  83                             <i class="fa fa-share-square"></i>
  84                         </a>
  85                     </div>
  86                 </li>
  87                 <li>
  88                     <div class="dropdown">
  89                         <input class="dropdown-toggle" type="text">
  90                         <div class="dropdown-text">Save</div>
  91                         <ul class="dropdown-content save-blueprint">
  92                             <li>
  93                                 <a (click)="saveBluePrint()"><i class="icon-save-sm" aria-hidden="true"></i> Save</a>
  94                             </li>
  95                             <!-- <li>
  96                                 <a (click)="enrichBluePrint()"><i class="icon-enrich" aria-hidden="true"></i> Enrich</a>
  97                             </li> -->
  98                             <li>
  99                                 <a (click)="enrichBluePrint()"><i class="fa fa-play-circle" aria-hidden="true"></i>
 100                                     Enrich & Deploy</a>
 101                             </li>
 102                         </ul>
 103                     </div>
 104                 </li>
 105             </ul>
 106
 107
 108         </div>
 109     </div>
 110 </header>
 111 <!--Editor Bar-->
 112 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
 113     <!--Actions/Functions Side Menu Toogole Button-->
 114     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
 115         data-tooltip="Collapse Side bar">
 116         <i class="fa arr-size">&#xf100;</i>
 117     </button>
 118     <!--Nav Tabs-->
 119     <div class="collapse navbar-collapse ">
 120         <!--Action Tabs-->
 121         <ul class="navbar-nav">
 122             <li class="nav-item active">
 123                 <nav class="row">
 124                     <div class="col-12">
 125                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
 126                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
 127                                 aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
 128                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
 129                                 aria-controls=" " aria-selected="false" style="visibility: hidden;">Template</a>
 130                         </div>
 131                     </div>
 132                 </nav>
 133             </li>
 134         </ul>
 135         <!--Requirement/Capability Legend-->
 136         <ul class="templateLegend ml-auto mr-auto p-0" style="visibility: hidden;">
 137             <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
 138             <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
 139         </ul>
 140         <!--Undo/Redo Buttons-->
 141         <ul class="editor navbar">
 142             <li>
 143                 <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
 144                     <img src="/assets/img/icon-undoActive.svg">
 145                 </button>
 146             </li>
 147             <li>
 148                 <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
 149                     <img src="/assets/img/icon-redo.svg">
 150                 </button>
 151             </li>
 152             <li class="vertical_line"></li>
 153             <li>
 154                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
 155                     <img src="/assets/img/icon-zoomOut.svg">
 156                 </button>
 157             </li>
 158             <li class="zoom-percent">100%</li>
 159             <li>
 160                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
 161                     <img src="/assets/img/icon-zoomIn.svg"></button>
 162             </li>
 163         </ul>
 164         <!--Designer/Scripting View Tabs-->
 165         <ul class="navbar ml-2" style="list-style: none">
 166             <li class="nav-item">
 167                 <div class="btn-group viewBtns" role="group">
 168                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
 169                     <button [routerLink]="['/designer/source', packageId]" type="button"
 170                         class="btn btn-secondary topologyView">Scripting
 171                     </button>
 172                 </div>
 173             </li>
 174         </ul>
 175     </div>
 176 </nav>
 177
 178 <ng-sidebar-container class="sidebar-container">
 179     <!--Left Side Menu-->
 180     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
 181         [mode]="'push'" #sidebarLeft>
 182         <nav class="row">
 183             <!--Nav Tabs-->
 184             <div class="col">
 185                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
 186                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
 187                         role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
 188                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
 189                         role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
 190                 </div>
 191             </div>
 192         </nav>
 193         <div class="row">
 194             <div class="col">
 195                 <div class="tab-content" id="nav-tabContent">
 196                     <!--Action List-->
 197                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
 198                         aria-labelledby="nav-action-tab">
 199                         <!--Action Search Box-->
 200                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 201
 202                         <div class="row temp-buttons">
 203                             <div class="col text-center">
 204                                 <!-- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
 205                                      Action Attributes
 206                                  </button> -->
 207                             </div>
 208                             <!-- <div class="col text-center">
 209                                 <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
 210                                     Function Attributes
 211                                 </button>
 212                             </div> -->
 213                         </div>
 214                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
 215                             + &nbsp;&nbsp;New Action
 216                         </button>
 217                         <div class="actionsList">
 218                             <div *ngIf="showAction" class="custom-control">
 219                                 <label><i class="icon-file" aria-hidden="true"></i>
 220                                     {{customActionName}} </label>
 221                             </div>
 222                             <div *ngIf="!showAction" class="custom-control">
 223                                 <ul>
 224                                     <li *ngFor="let customActionName of actions">
 225                                         <label (click)="openActionAttributes(customActionName)"
 226                                             [attr.for]="customActionName">
 227                                             <i class="icon-file" aria-hidden="true" class="icon-file"></i>
 228                                             {{customActionName}} </label>
 229
 230                                         <ul *ngIf="customActionName.includes(this.currentActionName)"
 231                                             class="actionSubList">
 232                                             <li (click)="openFunctionAttributes(currentFunction)"
 233                                                 [attr.for]="customActionName" *ngFor="let currentFunction of steps">
 234                                                 <span>{{getTarget(currentFunction)}}</span>
 235                                             </li>
 236                                         </ul>
 237                                     </li>
 238
 239                                 </ul>
 240                             </div>
 241                         </div>
 242                     </div>
 243                     <!--Function List-->
 244                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
 245                         <!--Function Search Box-->
 246                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
 247                         <div class="functionsList">
 248                             <div id="palette-paper"></div>
 249                         </div>
 250                     </div>
 251                 </div>
 252             </div>
 253         </div>
 254         <div class="helpBox"><i class="icon-info" aria-hidden="true"></i>
 255             <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
 256         </div>
 257     </ng-sidebar>
 258     <!--Page content-->
 259     <div ng-sidebar-content id="board-paper">
 260         <button class="rotate" (click)="_toggleSidebar1()">
 261             <span>
 262                 Controller
 263                 <i class="fa fa-angle-double-left"></i>
 264             </span>
 265         </button>
 266
 267
 268         <!-- CANVAS -->
 269         <!--Editor Bar-->
 270         <div class="editBar text-center">
 271             <div class="btn-group mr-2" role="group" aria-label="First group">
 272                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
 273                     <img src="/assets/img/icon-undoActive.svg">
 274                 </button>
 275                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
 276                     <img src="/assets/img/icon-redo.svg">
 277                 </button>
 278             </div>
 279             <div class="btn-group mr-2" role="group" aria-label="Second group">
 280                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
 281                     <img src="/assets/img/icon-zoomOut.svg">
 282                 </button>
 283                 <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
 284                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
 285                     <img src="/assets/img/icon-zoomIn.svg">
 286                 </button>
 287             </div>
 288             <div class="btn-group viewBtns" role="group" aria-label="Third group">
 289                 <button type="button" class="btn btn-secondary topologySource active">View</button>
 290                 <button type="button" class="btn btn-secondary topologyView">Source</button>
 291             </div>
 292         </div>
 293         <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
 294     </div>
 295     <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
 296         [position]="'right'" #sidebarRight1>
 297         <div class="container-fluid0">
 298             <div class="row m-0">
 299                 <div class="col attributesContainer">
 300                     <div class="row m-0 attributesContainertTitle">
 301                         <div class="col-2 pl-0">
 302                             <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom">
 303                                 <i class="icon-close" type="button" aria-hidden="true"></i></button>
 304                         </div>
 305                         <h6 class="col pl-0">Action Attributes</h6>
 306                         <div class="col-3 pl-0">
 307                             <div class="btn-group" role="group" aria-label="Basic example">
 308                                 <button type="button" class="btn view-source" tooltip="View Action Source"
 309                                     placement="bottom"><i class="icon-source"></i></button>
 310                                 <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
 311                                     class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
 312                                         class="icon-delete-sm" aria-hidden="true"></i></button>
 313                             </div>
 314                         </div>
 315                     </div>
 316                     <app-action-attributes></app-action-attributes>
 317                 </div>
 318             </div>
 319         </div>
 320     </ng-sidebar>
 321     <!--Right Side Menu - Function Attribute-->
 322     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
 323         [position]="'right'" #sidebarRight2>
 324         <div class="container-fluid0">
 325             <div class="row m-0">
 326                 <div class="col attributesContainer">
 327                     <div class="row m-0 attributesContainertTitle">
 328                         <div class="col-2 pl-0">
 329                             <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
 330                                 placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
 331                             </button>
 332                         </div>
 333                         <h6 class="col pl-0">Function Attributes</h6>
 334                         <div class="col-3 pl-0">
 335                             <div class="btn-group" role="group" aria-label="Basic example">
 336                                 <button type="button" class="btn view-source" tooltip="View Function Source"
 337                                     placement="bottom"><i class="icon-source"></i></button>
 338                                 <button type="button" class="btn trash-item" tooltip="Delete Function"
 339                                     placement="bottom"><i class="icon-delete-sm" type="button"
 340                                         aria-hidden="true"></i></button>
 341                             </div>
 342                         </div>
 343                     </div>
 344                     <app-functions-attribute (saveEvent)="saveBluePrint()"></app-functions-attribute>
 345                 </div>
 346             </div>
 347         </div>
 348     </ng-sidebar>
 349
 350
 351 </ng-sidebar-container>