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