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
 103 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
 104     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
 105         data-tooltip="Collapse Side bar">
 106         <i class="fa arr-size">&#xf100;</i>
 107     </button>
 108     <div class="collapse navbar-collapse ">
 109         <ul class="navbar-nav">
 110             <li class="nav-item active">
 111                 <nav class="row">
 112                     <!--Nav Tabs-->
 113                     <div class="col-12">
 114                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
 115                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
 116                                 aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
 117                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
 118                                 aria-controls=" " aria-selected="false">Template</a>
 119                         </div>
 120                     </div>
 121                 </nav>
 122             </li>
 123         </ul>
 124         <ul class="templateLegend ml-auto mr-auto p-0">
 125             <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
 126             <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
 127         </ul>
 128
 129         <ul class="editor navbar ml-auto">
 130             <li>
 131                 <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
 132                     <img src="/assets/img/icon-undoActive.svg">
 133                 </button>
 134             </li>
 135             <li>
 136                 <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
 137                     <img src="/assets/img/icon-redo.svg">
 138                 </button>
 139             </li>
 140             <li class="vertical_line"></li>
 141             <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
 142                     <img src="/assets/img/icon-zoomOut.svg">
 143                 </button></li>
 144             <li>100%</li>
 145             <li>
 146                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
 147                     <img src="/assets/img/icon-zoomIn.svg"> </button>
 148             </li>
 149         </ul>
 150
 151         <ul class="navbar ml-auto" style="list-style: none">
 152             <li class="nav-item">
 153                 <div class="btn-group viewBtns" role="group">
 154                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
 155                     <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
 156                         class="btn btn-secondary topologyView">Scripting</button>
 157                 </div>
 158             </li>
 159         </ul>
 160
 161     </div>
 162 </nav>
 163
 164 <ng-sidebar-container class="sidebar-container">
 165     <!-- Controller SideBar -->
 166     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
 167         [mode]="'push'" #sidebarLeft>
 168
 169         <nav class="row">
 170             <!--Nav Tabs-->
 171             <div class="col">
 172                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
 173                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
 174                         role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
 175                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
 176                         role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
 177                 </div>
 178             </div>
 179         </nav>
 180         <div class="row">
 181             <div class="col">
 182                 <div class="tab-content" id="nav-tabContent">
 183                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
 184                         aria-labelledby="nav-action-tab">
 185                         <!--Action Search Box-->
 186                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 187
 188                         <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
 189                             + &nbsp;&nbsp;New Action
 190                         </button>
 191                         <div class="actionsList">
 192                             <div *ngIf="showAction" class="custom-control">
 193                                 <label><i class="icon-file" aria-hidden="true"></i>
 194                                     {{customActionName}} </label>
 195                             </div>
 196                         </div>
 197                     </div>
 198                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
 199                         <!--Function Search Box-->
 200                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
 201                         <div id="palette-paper" class="componentsList"> </div>
 202                     </div>
 203
 204                 </div>
 205             </div>
 206         </div>
 207         <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
 208                 href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
 209         </div>
 210     </ng-sidebar>
 211     <!-- Page content -->
 212
 213     <div ng-sidebar-content id="board-paper">
 214         <button class="rotate" (click)="_toggleSidebar1()">
 215             <span>
 216                 Controller
 217                 <i class="fa fa-angle-double-left"></i>
 218             </span>
 219         </button>
 220
 221         <!-- Canvas -->
 222         <div class="editBar text-center">
 223             <div class="btn-group mr-2" role="group" aria-label="First group">
 224                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
 225                     <img src="/assets/img/icon-undoActive.svg">
 226                 </button>
 227                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
 228                     <img src="/assets/img/icon-redo.svg">
 229                 </button>
 230             </div>
 231             <div class="btn-group mr-2" role="group" aria-label="Second group">
 232                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
 233                     <img src="/assets/img/icon-zoomOut.svg">
 234                 </button>
 235                 <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
 236                 <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
 237                     <img src="/assets/img/icon-zoomIn.svg">
 238                 </button>
 239             </div>
 240             <div class="btn-group viewBtns" role="group" aria-label="Third group">
 241                 <button type="button" class="btn btn-secondary topologySource active">View</button>
 242                 <button type="button" class="btn btn-secondary topologyView">Source</button>
 243             </div>
 244         </div>
 245         <!-- <div class="card actionContainer">
 246             <div class="card-header">
 247                 <span>Action 1</span>
 248             </div>
 249             <div class="card-body">
 250                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 251                     <img src="/assets/img/icon-comType1.svg" title="">
 252                     <h2>config-assign</h2>
 253                     <p>component-resource-resolution</p>
 254                 </a>
 255                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 256                     <img src="/assets/img/icon-comType2.svg" title="">
 257                     <h2>execute</h2>
 258                     <p>component-netconf-executor</p>
 259                 </a>
 260                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 261                     <img src="/assets/img/icon-comType3.svg" title="">
 262                     <h2>function 1</h2>
 263                     <p>dg-generic</p>
 264                 </a>
 265                 <a (click)="sidebarRight.open()" class="componentContainer text-center">
 266                     <img src="/assets/img/icon-comType2.svg" title="">
 267                     <h2>execute</h2>
 268                     <p>component-netconf-executor</p>
 269                 </a>
 270             </div>
 271         </div> -->
 272         <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
 273     </div>
 274     <!-- Action Attribute SideBar -->
 275     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
 276         [position]="'right'" #sidebarRight>
 277         <div class="container-fluid0">
 278             <div class="row m-0">
 279                 <div class="col-2 pr-0">
 280                     <button (click)="sidebarRight.close()" class="closeBar"></button>
 281                 </div>
 282                 <div class="col-10 attributesContainer p-0">
 283                     <h1>Action Attributes</h1>
 284                     <div class="scrolll">
 285                         <div class="row m-0">
 286                             <div class="col">
 287                                 <div class="form-group actionName">
 288                                     <label for="exampleInputEmail1">Action Name</label>
 289                                     <input type="text" class="form-control" placeholder="Action 1">
 290                                 </div>
 291                             </div>
 292                         </div>
 293                         <div class="accordion" id="accordionExample">
 294                             <div class="card">
 295                                 <div class="card-header row" id="headingOne">
 296                                     <h2 class="col-10 mb-0">
 297                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 298                                             data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 299                                             Steps
 300                                         </button>
 301                                     </h2>
 302                                     <div class="col-2 p-0 text-center">
 303                                         <button class="btn btn-addAttribute" type="button"></button>
 304                                     </div>
 305                                 </div>
 306
 307                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 308                                     data-parent="#accordionExample">
 309                                     <div class="card-body">
 310                                         <div class="row">
 311                                             <div class="col-9">
 312                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 313                                                 <button type="button" class="btn p-0">
 314                                                     <img src="/assets/img/icon-edit.svg">
 315                                                 </button>
 316                                             </div>
 317                                             <div class="col-3">
 318                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 319                                             </div>
 320                                         </div>
 321                                         <div class="form-group">
 322                                             <label for="exampleInputEmail1">Name</label>
 323                                             <input type="text" class="form-control" placeholder="Action 1">
 324                                         </div>
 325                                         <div class="form-group">
 326                                             <label for="exampleFormControlTextarea1">Description</label>
 327                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 328                                                 rows="3"></textarea>
 329                                         </div>
 330                                         <div class="form-group">
 331                                             <label for="exampleInputEmail1">Target</label>
 332                                             <input type="text" class="form-control" placeholder="Action 1">
 333                                         </div>
 334
 335                                     </div>
 336                                 </div>
 337                             </div>
 338                             <div class="card">
 339                                 <div class="card-header row" id="headingTwo">
 340                                     <h2 class="col-10 mb-0">
 341                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 342                                             data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
 343                                             Inputs
 344                                         </button>
 345                                     </h2>
 346                                     <div class="col-2 p-0 text-center">
 347                                         <button class="btn btn-addAttribute" type="button"></button>
 348                                     </div>
 349                                 </div>
 350                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
 351                                     data-parent="#accordionExample">
 352                                     <div class="card-body">
 353                                         <div class="row">
 354                                             <div class="col-9">
 355                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 356                                                 <button type="button" class="btn p-0">
 357                                                     <img src="/assets/img/icon-edit.svg">
 358                                                 </button>
 359                                             </div>
 360                                             <div class="col-3">
 361                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 362                                             </div>
 363                                         </div>
 364                                         <div class="form-group">
 365                                             <label for="exampleInputEmail1">Name</label>
 366                                             <input type="text" class="form-control" placeholder="Action 1">
 367                                         </div>
 368                                         <div class="form-group">
 369                                             <label for="exampleFormControlTextarea1">Description</label>
 370                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 371                                                 rows="3"></textarea>
 372                                         </div>
 373                                         <div class="form-group">
 374                                             <label for="exampleInputEmail1">Target</label>
 375                                             <input type="text" class="form-control" placeholder="Action 1">
 376                                         </div>
 377
 378                                     </div>
 379                                 </div>
 380                             </div>
 381                             <div class="card">
 382                                 <div class="card-header row" id="headingThree">
 383                                     <h2 class="col-10 mb-0">
 384                                         <button class="btn btn-link" type="button" data-toggle="collapse"
 385                                             data-target="#collapseThree" aria-expanded="true"
 386                                             aria-controls="collapseThree">
 387                                             Outputs
 388                                         </button>
 389                                     </h2>
 390                                     <div class="col-2 p-0 text-center">
 391                                         <button class="btn btn-addAttribute" type="button"></button>
 392                                     </div>
 393                                 </div>
 394                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
 395                                     data-parent="#accordionExample">
 396                                     <div class="card-body">
 397                                         <div class="row">
 398                                             <div class="col-9">
 399                                                 <label for="exampleInputEmail1">Name</label> &nbsp;
 400                                                 <button type="button" class="btn p-0">
 401                                                     <img src="/assets/img/icon-edit.svg">
 402                                                 </button>
 403                                             </div>
 404                                             <div class="col-3">
 405                                                 <button type="button" class="btn btn-deleteAttribute">Delete</button>
 406                                             </div>
 407                                         </div>
 408                                         <div class="form-group">
 409                                             <label for="exampleInputEmail1">Name</label>
 410                                             <input type="text" class="form-control" placeholder="Action 1">
 411                                         </div>
 412                                         <div class="form-group">
 413                                             <label for="exampleFormControlTextarea1">Description</label>
 414                                             <textarea class="form-control" id="exampleFormControlTextarea1"
 415                                                 rows="3"></textarea>
 416                                         </div>
 417                                         <div class="form-group">
 418                                             <label for="exampleInputEmail1">Target</label>
 419                                             <input type="text" class="form-control" placeholder="Action 1">
 420                                         </div>
 421
 422                                     </div>
 423                                 </div>
 424                             </div>
 425                         </div>
 426                     </div>
 427                 </div>
 428             </div>
 429         </div>
 430     </ng-sidebar>
 431
 432     <!-- Function Attribute SideBar -->
 433     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
 434         [mode]="'push'" [position]="'right'" #sidebarRight>
 435         <div class="container-fluid0">
 436             <div class="row m-0">
 437                 <div class="col-2 pr-0">
 438                     <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> -->
 439                 </div>
 440                 <div class="col-10 attributesContainer p-0">
 441                     <div class="row m-0">
 442                         <div class="col">
 443                             <div class="col-3">
 444                                 <button (click)="sidebarRight.close()" class="closeBar"></button>
 445                             </div>
 446
 447                             <div class="function-attribute">
 448                                 <h6>Function Attributes
 449                                     <span class="trash-span">
 450                                         <i class="fa fa-trash" type="button" aria-hidden="true"></i>
 451                                     </span>
 452                                 </h6>
 453                             </div>
 454
 455
 456                         </div>
 457                     </div>
 458
 459                     <div>
 460                         <div class="row m-0">
 461                             <div class="col">
 462                                 <div class="form-group actionName">
 463                                     <label for="exampleInputEmail1">Function Name</label>
 464                                     <input type="text" class="form-control" placeholder="Function Name">
 465                                 </div>
 466                             </div>
 467                         </div>
 468                         <div class="row m-0">
 469                             <div class="col">
 470                                 <div class=" actionName">
 471                                     <label>Function Type</label>
 472                                     <div class="dropdown  w-100">
 473                                         <input class="dropdown-toggle" type="text">
 474                                         <div class="dropdown-text">component-resource-resolution <i
 475                                                 class="fa fa-caret-down"></i></div>
 476                                         <ul class="dropdown-content w-100">
 477                                             <li>
 478                                                 <div class="form-group ">
 479                                             <li>other component</li>
 480                                     </div>
 481                                     </li>
 482                                     </ul>
 483                                 </div>
 484                             </div>
 485                         </div>
 486                     </div>
 487                     <div class="accordion" id="accordionExample">
 488                         <div class="card">
 489                             <div class="card-header row" id="headingOne">
 490                                 <h2 class="col-10 mb-0">
 491                                     <button class="btn btn-link" type="button" data-toggle="collapse"
 492                                         data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 493                                         Interface
 494                                     </button>
 495                                 </h2>
 496                                 <div class="col-2 p-0 text-center">
 497                                     <button class="btn btn-addAttribute" type="button"></button>
 498                                 </div>
 499                             </div>
 500
 501                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 502                                 data-parent="#accordionExample">
 503                                 <div class="card-body">
 504                                     <div class="row">
 505                                         <div class="col-9">
 506                                             <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
 507                                             <button type="button" class="btn p-0">
 508                                                 <img src="/assets/img/icon-edit.svg">
 509                                             </button>
 510                                         </div>
 511                                         <div class="col-3">
 512                                             <button type="button" class="btn btn-deleteAttribute">Delete</button>
 513                                         </div>
 514                                     </div>
 515                                     <div class="form-group">
 516                                         <label for="exampleInputEmail1">Resoluton-key</label>
 517                                         <input type="text" class="form-control">
 518                                     </div>
 519                                     <div class="form-group">
 520                                         <label for="exampleFormControlTextarea1">Store result</label>
 521                                     </div>
 522                                     <div class="form-group">
 523                                         <label>
 524                                             <input class="with-gap radio-btn" name="group1" type="radio" />
 525                                             <span class="radio-btn">True</span>
 526                                         </label>
 527                                         <label class="radio-btn">
 528                                             <input class="with-gap radio-btn" name="group1" type="radio" />
 529                                             <span class="radio-btn">False</span>
 530                                         </label>
 531                                     </div>
 532                                     <div class="form-group">
 533                                         <label for="exampleInputEmail1">Target</label>
 534                                         <input type="text" class="form-control" placeholder="">
 535                                     </div>
 536                                     <div class="form-group">
 537                                         <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
 538                                         <input type="text" class="form-control" placeholder="">
 539
 540                                     </div>
 541
 542                                 </div>
 543                             </div>
 544                         </div>
 545
 546                     </div>
 547
 548                     <div class="accordion" id="accordionExample">
 549                         <div class="card">
 550                             <div class="card-header row" id="headingOne">
 551                                 <h2 class="col-10 mb-0">
 552                                     <button class="btn btn-link" type="button" data-toggle="collapse"
 553                                         data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 554                                         Artifact
 555                                     </button>
 556                                 </h2>
 557                                 <div class="col-2 p-0 text-center">
 558                                     <button class="btn btn-addAttribute" type="button"></button>
 559                                 </div>
 560                             </div>
 561
 562                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
 563                                 data-parent="#accordionExample">
 564                                 <div class="card-body">
 565                                     <div class="row">
 566                                         <div class="col-9">
 567                                             <label for="exampleInputEmail1">base config-template</label> &nbsp;
 568                                             <button type="button" class="btn p-0">
 569                                                 <img src="/assets/img/icon-edit.svg">
 570                                             </button>
 571                                         </div>
 572                                         <div class="col-3">
 573                                             <button type="button" class="btn btn-deleteAttribute">Delete</button>
 574                                         </div>
 575                                     </div>
 576                                     <div class="form-group">
 577                                         <label for="exampleInputEmail1">Type</label>
 578                                         <div class="dropdown  w-100">
 579                                             <input class="dropdown-toggle" type="text">
 580                                             <div class="dropdown-text">artifact-template-velocity <i
 581                                                     class="fa fa-caret-down"></i></div>
 582                                             <ul class="dropdown-content w-100">
 583                                                 <li>
 584                                                     <div class="form-group ">
 585                                                 <li>ddwd</li>
 586                                         </div>
 587                                         </li>
 588                                         </ul>
 589                                     </div>
 590                                 </div>
 591
 592                                 <div style="height: 30px; margin-top: 30px;">
 593                                     <hr>
 594                                 </div>
 595
 596                                 <div class="row">
 597                                     <div class="col-9">
 598                                         <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
 599                                         <button type="button" class="btn p-0">
 600                                             <img src="/assets/img/icon-edit.svg">
 601                                         </button>
 602                                     </div>
 603                                     <div class="col-3">
 604                                         <button type="button" class="btn btn-deleteAttribute">Delete</button>
 605                                     </div>
 606                                 </div>
 607                                 <div class="form-group">
 608                                     <label for="exampleInputEmail1">Type</label>
 609                                     <div class="dropdown  w-100">
 610                                         <input class="dropdown-toggle" type="text">
 611                                         <div class="dropdown-text">artifact-mapping resource <i
 612                                                 class="fa fa-caret-down"></i></div>
 613                                         <ul class="dropdown-content w-100">
 614                                             <li>
 615                                                 <div class="form-group ">
 616                                             <li>ddwd</li>
 617                                     </div>
 618                                     </li>
 619                                     </ul>
 620                                 </div>
 621                             </div>
 622
 623                             <div style="height: 30px; margin-top: 30px;">
 624                                 <hr>
 625                             </div>
 626                         </div>
 627                     </div>
 628                 </div>
 629
 630             </div>
 631         </div>
 632         </div>
 633         </div>
 634         </div>
 635     </ng-sidebar>
 636
 637 </ng-sidebar-container>