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

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