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> Enrich &amp; Deploy</a>
 100                             </li>
 101                         </ul>
 102                     </div>
 103                 </li>
 104             </ul>
 105
 106
 107         </div>
 108     </div>
 109 </header>
 110 <!--Editor Bar-->
 111 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
 112     <!--Actions/Functions Side Menu Toogole Button-->
 113     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
 114         data-tooltip="Collapse Side bar">
 115         <i class="fa arr-size">&#xf100;</i>
 116     </button>
 117     <!--Nav Tabs-->
 118     <div class="collapse navbar-collapse ">
 119         <!--Action Tabs-->
 120         <ul class="navbar-nav">
 121             <li class="nav-item active">
 122                 <nav class="row">
 123                     <div class="col-12">
 124                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
 125                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
 126                                 aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
 127                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
 128                                 aria-controls=" " aria-selected="false" style="visibility: hidden;">Template</a>
 129                         </div>
 130                     </div>
 131                 </nav>
 132             </li>
 133         </ul>
 134         <!--Requirement/Capability Legend-->
 135         <ul class="templateLegend ml-auto mr-auto p-0" style="visibility: hidden;">
 136             <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
 137             <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
 138         </ul>
 139         <!--Undo/Redo Buttons-->
 140         <ul class="editor navbar">
 141             <li>
 142                 <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
 143                     <img src="/assets/img/icon-undoActive.svg">
 144                 </button>
 145             </li>
 146             <li>
 147                 <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
 148                     <img src="/assets/img/icon-redo.svg">
 149                 </button>
 150             </li>
 151             <li class="vertical_line"></li>
 152             <li>
 153                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
 154                     <img src="/assets/img/icon-zoomOut.svg">
 155                 </button>
 156             </li>
 157             <li class="zoom-percent">100%</li>
 158             <li>
 159                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
 160                     <img src="/assets/img/icon-zoomIn.svg"></button>
 161             </li>
 162         </ul>
 163         <!--Designer/Scripting View Tabs-->
 164         <ul class="navbar ml-2" style="list-style: none">
 165             <li class="nav-item">
 166                 <div class="btn-group viewBtns" role="group">
 167                     <button type="button" class="btn btn-secondary topologySource active"><i class="icon-topologyView-active" aria-hidden="true"></i> Designer</button>
 168                     <button [routerLink]="['/designer/source', packageId]" type="button"
 169                         class="btn btn-secondary topologyView"><i class="icon-topologySource" aria-hidden="true"></i>Scripting
 170                     </button>
 171                 </div>
 172             </li>
 173         </ul>
 174     </div>
 175 </nav>
 176
 177 <ng-sidebar-container class="sidebar-container">
 178     <!--Left Side Menu-->
 179     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
 180         [mode]="'push'" #sidebarLeft>
 181         <nav class="row">
 182             <!--Nav Tabs-->
 183             <div class="col">
 184                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
 185                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
 186                         role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
 187                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
 188                         role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
 189                 </div>
 190             </div>
 191         </nav>
 192         <div class="row">
 193             <div class="col">
 194                 <div class="tab-content" id="nav-tabContent">
 195                     <!--Action List-->
 196                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
 197                         aria-labelledby="nav-action-tab">
 198                         <!--Action Search Box-->
 199                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 200
 201                         <div class="row temp-buttons">
 202                             <div class="col text-center">
 203                                 <!-- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
 204                                      Action Attributes
 205                                  </button> -->
 206                             </div>
 207                             <!-- <div class="col text-center">
 208                                 <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
 209                                     Function Attributes
 210                                 </button>
 211                             </div> -->
 212                         </div>
 213                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
 214                             + &nbsp;&nbsp;New Action
 215                         </button>
 216                         <div class="actionsList">
 217                             <div *ngIf="showAction" class="custom-control">
 218                                 <label><i class="icon-file" aria-hidden="true"></i>
 219                                     {{customActionName}} </label>
 220                             </div>
 221                             <div *ngIf="!showAction" class="custom-control">
 222                                 <ul>
 223                                     <li *ngFor="let customActionName of actions">
 224                                         <label (click)="openActionAttributes(customActionName)"
 225                                             [attr.for]="customActionName">
 226                                             <i class="icon-file" aria-hidden="true" class="icon-file"></i>
 227                                             {{customActionName}} </label>
 228
 229                                         <ul *ngIf="customActionName.includes(this.currentActionName)"
 230                                             class="actionSubList">
 231                                             <li (click)="openFunctionAttributes(currentFunction)"
 232                                                 [attr.for]="customActionName" *ngFor="let currentFunction of steps">
 233                                                 <span>{{getTarget(currentFunction)}}</span>
 234                                             </li>
 235                                         </ul>
 236                                     </li>
 237
 238                                 </ul>
 239                             </div>
 240                         </div>
 241                     </div>
 242                     <!--Function List-->
 243                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
 244                         <!--Function Search Box-->
 245                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
 246                         <div class="functionsList">
 247                             <div id="palette-paper"></div>
 248                         </div>
 249                     </div>
 250                 </div>
 251             </div>
 252         </div>
 253         <div class="helpBox"><i class="icon-info" aria-hidden="true"></i>
 254             <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
 255         </div>
 256     </ng-sidebar>
 257     <!--Page content-->
 258     <div ng-sidebar-content id="board-paper">
 259         <button class="rotate" (click)="_toggleSidebar1()">
 260             <span>
 261                 Controller
 262                 <i class="fa fa-angle-double-left"></i>
 263             </span>
 264         </button>
 265
 266
 267         <!-- CANVAS -->
 268         <!--Editor Bar-->
 269         <div class="editBar text-center">
 270             <div class="btn-group mr-2" role="group" aria-label="First group">
 271                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
 272                     <img src="/assets/img/icon-undoActive.svg">
 273                 </button>
 274                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
 275                     <img src="/assets/img/icon-redo.svg">
 276                 </button>
 277             </div>
 278             <div class="btn-group mr-2" role="group" aria-label="Second group">
 279                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
 280                     <img src="/assets/img/icon-zoomOut.svg">
 281                 </button>
 282                 <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
 283                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
 284                     <img src="/assets/img/icon-zoomIn.svg">
 285                 </button>
 286             </div>
 287             <div class="btn-group viewBtns" role="group" aria-label="Third group">
 288                 <button type="button" class="btn btn-secondary topologySource active">View</button>
 289                 <button type="button" class="btn btn-secondary topologyView">Source</button>
 290             </div>
 291         </div>
 292         <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
 293     </div>
 294     <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
 295         [position]="'right'" #sidebarRight1>
 296         <div class="container-fluid0">
 297             <div class="row m-0">
 298                 <div class="col attributesContainer">
 299                     <div class="row m-0 attributesContainertTitle">
 300                         <div class="col-2 pl-0">
 301                             <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom">
 302                                 <i class="icon-close" type="button" aria-hidden="true"></i></button>
 303                         </div>
 304                         <h6 class="col pl-0">Action Attributes</h6>
 305                         <div class="col-3 pl-0">
 306                             <div class="btn-group" role="group" aria-label="Basic example">
 307                                 <button type="button" class="btn view-source" tooltip="View Action Source"
 308                                     placement="bottom"><i class="icon-source"></i></button>
 309                                 <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
 310                                     class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
 311                                         class="icon-delete-sm" aria-hidden="true"></i></button>
 312                             </div>
 313                         </div>
 314                     </div>
 315                     <app-action-attributes></app-action-attributes>
 316                 </div>
 317             </div>
 318         </div>
 319     </ng-sidebar>
 320     <!--Right Side Menu - Function Attribute-->
 321     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
 322         [position]="'right'" #sidebarRight2>
 323         <div class="container-fluid0">
 324             <div class="row m-0">
 325                 <div class="col attributesContainer">
 326                     <div class="row m-0 attributesContainertTitle">
 327                         <div class="col-2 pl-0">
 328                             <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
 329                                 placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i>
 330                             </button>
 331                         </div>
 332                         <h6 class="col pl-0">Function Attributes</h6>
 333                         <div class="col-3 pl-0">
 334                             <div class="btn-group" role="group" aria-label="Basic example">
 335                                 <button type="button" class="btn view-source" tooltip="View Function Source"
 336                                     placement="bottom"><i class="icon-source"></i></button>
 337                                 <button type="button" class="btn trash-item" tooltip="Delete Function"
 338                                     placement="bottom"><i class="icon-delete-sm" type="button"
 339                                         aria-hidden="true"></i></button>
 340                             </div>
 341                         </div>
 342                     </div>
 343                     <app-functions-attribute (saveEvent)="saveBlueprint()"></app-functions-attribute>
 344                 </div>
 345             </div>
 346         </div>
 347     </ng-sidebar>
 348
 349
 350 </ng-sidebar-container>