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 href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
  14                         <button type="button" class="btn package-info-btn" data-toggle="modal"
  15                             data-target="#exampleModalLong">
  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">
  35                                 <div class="row package-info">
  36                                     <div class="col">
  37                                         <h3>Test Package
  38                                             <span class="package-version">Version 1.0.2</span></h3>
  39                                     </div>
  40                                     <div class="col mb-3">
  41                                         <span class="badge badge-primary">test</span>
  42                                         <span class="badge badge-primary">vDNS-CDS</span>
  43                                         <span class="badge badge-primary">SCALE-OUT</span>
  44                                         <span class="badge badge-primary">MARCO</span>
  45                                     </div>
  46                                     <div class="col-2">
  47                                         <img src="/assets/img/img-user3.jpg" class="creator-pic">
  48                                     </div>
  49                                     <div class="col-10 pl-0">
  50                                         <p><b>Author information:</b></p>
  51                                         <p>Abdelmuhaimen Seaudi</p>
  52                                         <p>abdelmuhaimen.seaudi@orange.com</p>
  53                                     </div>
  54                                 </div>
  55                             </div>
  56                             <div class="modal-footer">
  57                                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  58                             </div>
  59                         </div>
  60                     </div>
  61                 </div>
  62             </nav>
  63         </div>
  64         <div class="col pr-0 text-right">
  65             <ul class="topology-actions">
  66                 <li>
  67                     <div class="btn-group" role="group" aria-label="Basic example">
  68                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  69                             data-tooltip="Preview">
  70                             <i class="fa fa-eye"></i>
  71                         </a>
  72                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  73                             data-tooltip="Download">
  74                             <i class="fa fa-download"></i>
  75                         </a>
  76                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
  77                             data-tooltip="Share">
  78                             <i class="fa fa-share-square"></i>
  79                         </a>
  80                     </div>
  81                 </li>
  82                 <li>
  83                     <div class="dropdown">
  84                         <input class="dropdown-toggle" type="text">
  85                         <div class="dropdown-text">Save</div>
  86                         <ul class="dropdown-content">
  87                             <li>
  88                                 <a href="">Save</a>
  89                             </li>
  90                             <li>
  91                                 <a href="">Save &amp; Deploy</a>
  92                             </li>
  93                         </ul>
  94                     </div>
  95                 </li>
  96             </ul>
  97
  98
  99         </div>
 100     </div>
 101 </header>
 102 <div class="source-button editBar">
 103
 104     <div class="btn-group viewBtns" role="group">
 105         <!-- <button (click)="_toggleSidebar1()" class="topologySource active">
 106             <i style="font-size:24px" class="fa">&#xf101;</i>
 107         </button> -->
 108         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
 109         <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
 110             class="btn btn-secondary topologyView">Scripting</button>
 111     </div>
 112 </div>
 113
 114 <ng-sidebar-container class="sidebar-container">
 115     <!-- Controller SideBar -->
 116     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
 117         [mode]="'push'" #sidebarLeft>
 118
 119         <nav class="row">
 120             <!--Nav Tabs-->
 121             <div class="col">
 122                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
 123                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
 124                         role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
 125                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
 126                         role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
 127                 </div>
 128             </div>
 129         </nav>
 130         <div class="row">
 131             <div class="col">
 132                 <div class="tab-content" id="nav-tabContent">
 133                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
 134                         aria-labelledby="nav-action-tab">
 135                         <!--Action Search Box-->
 136                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 137
 138                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
 139                             + &nbsp;&nbsp;New Action
 140                         </button>
 141                         <div class="actionsList">
 142                             <div *ngIf="showAction" class="custom-control">
 143                                 <label><i class="icon-file" aria-hidden="true"></i>
 144                                     {{customActionName}} </label>
 145                             </div>
 146                         </div>
 147                     </div>
 148                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
 149                         <!--Function Search Box-->
 150                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
 151                         <div id="palette-paper" class="componentsList"> </div>
 152                     </div>
 153
 154                 </div>
 155             </div>
 156         </div>
 157         <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>
 158     </ng-sidebar>
 159     <!-- Page content -->
 160
 161     <div ng-sidebar-content id="board-paper">
 162         <button class="rotate" (click)="_toggleSidebar1()">
 163             <span>
 164                 Controller
 165                 <i class="fa fa-angle-double-left"></i>
 166             </span>
 167         </button>
 168
 169         <!-- Canvas -->
 170         <div class="editBar text-center">
 171             <div class="btn-group mr-2" role="group" aria-label="First group">
 172                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
 173                     <img src="/assets/img/icon-undoActive.svg">
 174                 </button>
 175                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
 176                     <img src="/assets/img/icon-redo.svg">
 177                 </button>
 178             </div>
 179             <div class="btn-group mr-2" role="group" aria-label="Second group">
 180                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
 181                     <img src="/assets/img/icon-zoomOut.svg">
 182                 </button>
 183                 <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
 184                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
 185                     <img src="/assets/img/icon-zoomIn.svg">
 186                 </button>
 187             </div>
 188             <div class="btn-group viewBtns" role="group" aria-label="Third group">
 189                 <button type="button" class="btn btn-secondary topologySource active">View</button>
 190                 <button type="button" class="btn btn-secondary topologyView">Source</button>
 191             </div>
 192         </div>
 193         <!-- <div class="card actionContainer">
 194             <div class="card-header">
 195                 <span>Action 1</span>
 196             </div>
 197             <div class="card-body">
 198                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 199                     <img src="/assets/img/icon-comType1.svg" title="">
 200                     <h2>config-assign</h2>
 201                     <p>component-resource-resolution</p>
 202                 </a>
 203                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 204                     <img src="/assets/img/icon-comType2.svg" title="">
 205                     <h2>execute</h2>
 206                     <p>component-netconf-executor</p>
 207                 </a>
 208                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 209                     <img src="/assets/img/icon-comType3.svg" title="">
 210                     <h2>function 1</h2>
 211                     <p>dg-generic</p>
 212                 </a>
 213                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 214                     <img src="/assets/img/icon-comType2.svg" title="">
 215                     <h2>execute</h2>
 216                     <p>component-netconf-executor</p>
 217                 </a>
 218             </div>
 219         </div> -->
 220         <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
 221     </div>
 222     <!-- Action Attribute SideBar -->
 223     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
 224         [position]="'right'" #sidebarRight>
 225         <div class="container-fluid0">
 226             <div class="row m-0">
 227                 <div class="col-2 pr-0">
 228                     <button (click)="sidebarRight.close()" class="closeBar"></button>
 229                 </div>
 230                 <div class="col-10 attributesContainer p-0">
 231                     <h1>Action Attributes</h1>
 232                     <div class="scrolll">
 233                         <div class="row m-0">
 234                             <div class="col">
 235                                 <div class="form-group actionName">
 236                                     <label for="exampleInputEmail1">Action Name</label>
 237                                     <input type="text" class="form-control" placeholder="Action 1">
 238                                 </div>
 239                             </div>
 240                         </div>
 241                         <div class="accordion" id="accordionExample">
 242                             <div class="card">
 243                                 <div class="card-header row" id="headingOne">
 244                                     <h2 class="col-10 mb-0">
 245                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 246                                             data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 247                                             Steps
 248                                         </button>
 249                                     </h2>
 250                                     <div class="col-2 p-0 text-center">
 251                                         <button class="btn btn-addAttribute" type="button"></button>
 252                                     </div>
 253                                 </div>
 254
 255                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 256                                     data-parent="#accordionExample">
 257                                     <div class="card-body">
 258                                         <div class="row">
 259                                             <div class="col-9">
 260                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 261                                                 <button type="button" class="btn p-0">
 262                                                     <img src="/assets/img/icon-edit.svg">
 263                                                 </button>
 264                                             </div>
 265                                             <div class="col-3">
 266                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 267                                             </div>
 268                                         </div>
 269                                         <div class="form-group">
 270                                             <label for="exampleInputEmail1">Name</label>
 271                                             <input type="text" class="form-control" placeholder="Action 1">
 272                                         </div>
 273                                         <div class="form-group">
 274                                             <label for="exampleFormControlTextarea1">Description</label>
 275                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 276                                                 rows="3"></textarea>
 277                                         </div>
 278                                         <div class="form-group">
 279                                             <label for="exampleInputEmail1">Target</label>
 280                                             <input type="text" class="form-control" placeholder="Action 1">
 281                                         </div>
 282
 283                                     </div>
 284                                 </div>
 285                             </div>
 286                             <div class="card">
 287                                 <div class="card-header row" id="headingTwo">
 288                                     <h2 class="col-10 mb-0">
 289                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 290                                             data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
 291                                             Inputs
 292                                         </button>
 293                                     </h2>
 294                                     <div class="col-2 p-0 text-center">
 295                                         <button class="btn btn-addAttribute" type="button"></button>
 296                                     </div>
 297                                 </div>
 298                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
 299                                     data-parent="#accordionExample">
 300                                     <div class="card-body">
 301                                         <div class="row">
 302                                             <div class="col-9">
 303                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 304                                                 <button type="button" class="btn p-0">
 305                                                     <img src="/assets/img/icon-edit.svg">
 306                                                 </button>
 307                                             </div>
 308                                             <div class="col-3">
 309                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 310                                             </div>
 311                                         </div>
 312                                         <div class="form-group">
 313                                             <label for="exampleInputEmail1">Name</label>
 314                                             <input type="text" class="form-control" placeholder="Action 1">
 315                                         </div>
 316                                         <div class="form-group">
 317                                             <label for="exampleFormControlTextarea1">Description</label>
 318                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 319                                                 rows="3"></textarea>
 320                                         </div>
 321                                         <div class="form-group">
 322                                             <label for="exampleInputEmail1">Target</label>
 323                                             <input type="text" class="form-control" placeholder="Action 1">
 324                                         </div>
 325
 326                                     </div>
 327                                 </div>
 328                             </div>
 329                             <div class="card">
 330                                 <div class="card-header row" id="headingThree">
 331                                     <h2 class="col-10 mb-0">
 332                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 333                                             data-target="#collapseThree" aria-expanded="true"
 334                                             aria-controls="collapseThree">
 335                                             Outputs
 336                                         </button>
 337                                     </h2>
 338                                     <div class="col-2 p-0 text-center">
 339                                         <button class="btn btn-addAttribute" type="button"></button>
 340                                     </div>
 341                                 </div>
 342                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
 343                                     data-parent="#accordionExample">
 344                                     <div class="card-body">
 345                                         <div class="row">
 346                                             <div class="col-9">
 347                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 348                                                 <button type="button" class="btn p-0">
 349                                                     <img src="/assets/img/icon-edit.svg">
 350                                                 </button>
 351                                             </div>
 352                                             <div class="col-3">
 353                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 354                                             </div>
 355                                         </div>
 356                                         <div class="form-group">
 357                                             <label for="exampleInputEmail1">Name</label>
 358                                             <input type="text" class="form-control" placeholder="Action 1">
 359                                         </div>
 360                                         <div class="form-group">
 361                                             <label for="exampleFormControlTextarea1">Description</label>
 362                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 363                                                 rows="3"></textarea>
 364                                         </div>
 365                                         <div class="form-group">
 366                                             <label for="exampleInputEmail1">Target</label>
 367                                             <input type="text" class="form-control" placeholder="Action 1">
 368                                         </div>
 369
 370                                     </div>
 371                                 </div>
 372                             </div>
 373                         </div>
 374                     </div>
 375                 </div>
 376             </div>
 377         </div>
 378     </ng-sidebar>
 379
 380     <!-- Function Attribute SideBar -->
 381     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
 382         [mode]="'push'" [position]="'right'" #sidebarRight>
 383         <div class="container-fluid0">
 384             <div class="row m-0">
 385                 <div class="col-2 pr-0">
 386                     <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> -->
 387                 </div>
 388                 <div class="col-10 attributesContainer p-0">
 389                     <div class="row m-0">
 390                         <div class="col">
 391                             <div class="col-3">
 392                                 <button (click)="sidebarRight.close()" class="closeBar"></button>
 393                             </div>
 394
 395                             <div class="function-attribute">
 396                                 <h6>Function Attributes
 397                                     <span class="trash-span">
 398                                         <i class="fa fa-trash" type="button" aria-hidden="true"></i>
 399                                     </span>
 400                                 </h6>
 401                             </div>
 402
 403
 404                         </div>
 405                     </div>
 406
 407                     <div>
 408                         <div class="row m-0">
 409                             <div class="col">
 410                                 <div class="form-group actionName">
 411                                     <label for="exampleInputEmail1">Function Name</label>
 412                                     <input type="text" class="form-control" placeholder="Function Name">
 413                                 </div>
 414                             </div>
 415                         </div>
 416                         <div class="row m-0">
 417                             <div class="col">
 418                                 <div class=" actionName">
 419                                     <label>Function Type</label>
 420                                     <div class="dropdown  w-100">
 421                                         <input class="dropdown-toggle" type="text">
 422                                         <div class="dropdown-text">component-resource-resolution <i
 423                                                 class="fa fa-caret-down"></i></div>
 424                                         <ul class="dropdown-content w-100">
 425                                             <li>
 426                                                 <div class="form-group ">
 427                                             <li>other component</li>
 428                                     </div>
 429                                     </li>
 430                                     </ul>
 431                                 </div>
 432                             </div>
 433                         </div>
 434                     </div>
 435                     <div class="accordion" id="accordionExample">
 436                         <div class="card">
 437                             <div class="card-header row" id="headingOne">
 438                                 <h2 class="col-10 mb-0">
 439                                     <button class="btn btn-link" type="button" data-toggle="collapse"
 440                                         data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 441                                         Interface
 442                                     </button>
 443                                 </h2>
 444                                 <div class="col-2 p-0 text-center">
 445                                     <button class="btn btn-addAttribute" type="button"></button>
 446                                 </div>
 447                             </div>
 448
 449                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 450                                 data-parent="#accordionExample">
 451                                 <div class="card-body">
 452                                     <div class="row">
 453                                         <div class="col-9">
 454                                             <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
 455                                             <button type="button" class="btn p-0">
 456                                                 <img src="/assets/img/icon-edit.svg">
 457                                             </button>
 458                                         </div>
 459                                         <div class="col-3">
 460                                             <button type="button" class="btn btn-deleteAttribute">Delete</button>
 461                                         </div>
 462                                     </div>
 463                                     <div class="form-group">
 464                                         <label for="exampleInputEmail1">Resoluton-key</label>
 465                                         <input type="text" class="form-control">
 466                                     </div>
 467                                     <div class="form-group">
 468                                         <label for="exampleFormControlTextarea1">Store result</label>
 469                                     </div>
 470                                     <div class="form-group">
 471                                         <label>
 472                                             <input class="with-gap radio-btn" name="group1" type="radio" />
 473                                             <span class="radio-btn">True</span>
 474                                         </label>
 475                                         <label class="radio-btn">
 476                                             <input class="with-gap radio-btn" name="group1" type="radio" />
 477                                             <span class="radio-btn">False</span>
 478                                         </label>
 479                                     </div>
 480                                     <div class="form-group">
 481                                         <label for="exampleInputEmail1">Target</label>
 482                                         <input type="text" class="form-control" placeholder="">
 483                                     </div>
 484                                     <div class="form-group">
 485                                         <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
 486                                         <input type="text" class="form-control" placeholder="">
 487
 488                                     </div>
 489
 490                                 </div>
 491                             </div>
 492                         </div>
 493
 494                     </div>
 495
 496                     <div class="accordion" id="accordionExample">
 497                         <div class="card">
 498                             <div class="card-header row" id="headingOne">
 499                                 <h2 class="col-10 mb-0">
 500                                     <button class="btn btn-link" type="button" data-toggle="collapse"
 501                                         data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 502                                         Artifact
 503                                     </button>
 504                                 </h2>
 505                                 <div class="col-2 p-0 text-center">
 506                                     <button class="btn btn-addAttribute" type="button"></button>
 507                                 </div>
 508                             </div>
 509
 510                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 511                                 data-parent="#accordionExample">
 512                                 <div class="card-body">
 513                                     <div class="row">
 514                                         <div class="col-9">
 515                                             <label for="exampleInputEmail1">base config-template</label> &nbsp;
 516                                             <button type="button" class="btn p-0">
 517                                                 <img src="/assets/img/icon-edit.svg">
 518                                             </button>
 519                                         </div>
 520                                         <div class="col-3">
 521                                             <button type="button" class="btn btn-deleteAttribute">Delete</button>
 522                                         </div>
 523                                     </div>
 524                                     <div class="form-group">
 525                                         <label for="exampleInputEmail1">Type</label>
 526                                         <div class="dropdown  w-100">
 527                                             <input class="dropdown-toggle" type="text">
 528                                             <div class="dropdown-text">artifact-template-velocity <i
 529                                                     class="fa fa-caret-down"></i></div>
 530                                             <ul class="dropdown-content w-100">
 531                                                 <li>
 532                                                     <div class="form-group ">
 533                                                 <li>ddwd</li>
 534                                         </div>
 535                                         </li>
 536                                         </ul>
 537                                     </div>
 538                                 </div>
 539
 540                                 <div style="height: 30px; margin-top: 30px;">
 541                                     <hr>
 542                                 </div>
 543
 544                                 <div class="row">
 545                                     <div class="col-9">
 546                                         <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
 547                                         <button type="button" class="btn p-0">
 548                                             <img src="/assets/img/icon-edit.svg">
 549                                         </button>
 550                                     </div>
 551                                     <div class="col-3">
 552                                         <button type="button" class="btn btn-deleteAttribute">Delete</button>
 553                                     </div>
 554                                 </div>
 555                                 <div class="form-group">
 556                                     <label for="exampleInputEmail1">Type</label>
 557                                     <div class="dropdown  w-100">
 558                                         <input class="dropdown-toggle" type="text">
 559                                         <div class="dropdown-text">artifact-mapping resource <i
 560                                                 class="fa fa-caret-down"></i></div>
 561                                         <ul class="dropdown-content w-100">
 562                                             <li>
 563                                                 <div class="form-group ">
 564                                             <li>ddwd</li>
 565                                     </div>
 566                                     </li>
 567                                     </ul>
 568                                 </div>
 569                             </div>
 570
 571                             <div style="height: 30px; margin-top: 30px;">
 572                                 <hr>
 573                             </div>
 574                         </div>
 575                     </div>
 576                 </div>
 577
 578             </div>
 579         </div>
 580         </div>
 581         </div>
 582         </div>
 583     </ng-sidebar>
 584
 585 </ng-sidebar-container>