aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html360
1 files changed, 178 insertions, 182 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 52503cf53..2bd484258 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -33,11 +33,11 @@
</div>
<div class="modal-body">
<div class="row package-info">
- <div class="col-12">
+ <div class="col">
<h3>Test Package
<span class="package-version">Version 1.0.2</span></h3>
</div>
- <div class="col-12 mb-3">
+ <div class="col mb-3">
<span class="badge badge-primary">test</span>
<span class="badge badge-primary">vDNS-CDS</span>
<span class="badge badge-primary">SCALE-OUT</span>
@@ -100,7 +100,7 @@
</div>
</header>
<div class="source-button editBar">
-
+
<div class="btn-group viewBtns" role="group">
<!-- <button (click)="_toggleSidebar1()" class="topologySource active">
<i style="font-size:24px" class="fa">&#xf101;</i>
@@ -118,54 +118,43 @@
<nav class="row">
<!--Nav Tabs-->
- <div class="col-12">
+ <div class="col">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
- <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab"
- href="#nav-action" role="tab" aria-controls="nav-action" aria-selected="false"
- autofocus #nameit >Actions</a>
- <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab"
- href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+ <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
+ role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+ <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
+ role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
</div>
</div>
</nav>
-
-
- <div class="row mt-2">
- <div class="col-12">
+ <div class="row">
+ <div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-action" role="tabpanel"
aria-labelledby="nav-action-tab">
<!--Action Search Box-->
- <div>
- <h1>Search</h1>
- </div>
+ <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
- <div class="btn-group actionBtns col-8" role="group">
- <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">
- + New Action
- </button>
- </div>
-
- <div>
- <div *ngIf="showAction" class="custom-control">
- <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span>
+ <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
+ + &nbsp;&nbsp;New Action
+ </button>
+ <div class="actionsList">
+ <div *ngIf="showAction" class="custom-control">
+ <label><i class="icon-file" aria-hidden="true"></i>
{{customActionName}} </label>
- </div>
</div>
- </div>
-
- <div class="tab-pane fade" id="nav-function" role="tabpanel"
- aria-labelledby="nav-function-tab">
- <div class="col-12 text-center p-0">
- <b>Drag and drop function to Action’s box</b>
- <div id="palette-paper" class="col-12 componentsList"> </div>
</div>
</div>
+ <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
+ <!--Function Search Box-->
+ <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
+ <div id="palette-paper" class="componentsList"> </div>
+ </div>
+
</div>
</div>
</div>
-
-
+ <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>
</ng-sidebar>
<!-- Page content -->
@@ -242,7 +231,7 @@
<h1>Action Attributes</h1>
<div class="scrolll">
<div class="row m-0">
- <div class="col-12">
+ <div class="col">
<div class="form-group actionName">
<label for="exampleInputEmail1">Action Name</label>
<input type="text" class="form-control" placeholder="Action 1">
@@ -388,36 +377,36 @@
</div>
</ng-sidebar>
- <!-- Function Attribute SideBar -->
- <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'"
- [position]="'right'" #sidebarRight>
+ <!-- Function Attribute SideBar -->
+ <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
+ [mode]="'push'" [position]="'right'" #sidebarRight>
<div class="container-fluid0">
<div class="row m-0">
<div class="col-2 pr-0">
<!-- <button (click)="sidebarRight.close()" class="closeBar"></button> -->
</div>
<div class="col-10 attributesContainer p-0">
- <div class="row m-0">
- <div class="col-12">
- <div class="col-3">
- <button (click)="sidebarRight.close()" class="closeBar"></button>
- </div>
+ <div class="row m-0">
+ <div class="col">
+ <div class="col-3">
+ <button (click)="sidebarRight.close()" class="closeBar"></button>
+ </div>
+
+ <div class="function-attribute">
+ <h6>Function Attributes
+ <span class="trash-span">
+ <i class="fa fa-trash" type="button" aria-hidden="true"></i>
+ </span>
+ </h6>
+ </div>
+
+
+ </div>
+ </div>
- <div class="function-attribute">
- <h6>Function Attributes
- <span class="trash-span">
- <i class="fa fa-trash" type="button" aria-hidden="true"></i>
- </span>
- </h6>
- </div>
-
-
- </div>
- </div>
-
<div>
<div class="row m-0">
- <div class="col-12">
+ <div class="col">
<div class="form-group actionName">
<label for="exampleInputEmail1">Function Name</label>
<input type="text" class="form-control" placeholder="Function Name">
@@ -425,165 +414,172 @@
</div>
</div>
<div class="row m-0">
- <div class="col-12">
+ <div class="col">
<div class=" actionName">
<label>Function Type</label>
<div class="dropdown w-100">
<input class="dropdown-toggle" type="text">
- <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div>
+ <div class="dropdown-text">component-resource-resolution <i
+ class="fa fa-caret-down"></i></div>
<ul class="dropdown-content w-100">
<li>
<div class="form-group ">
- <li>other component</li>
- </div>
- </li>
- </ul>
+ <li>other component</li>
</div>
+ </li>
+ </ul>
</div>
</div>
</div>
- <div class="accordion" id="accordionExample">
- <div class="card">
- <div class="card-header row" id="headingOne">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Interface
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
+ </div>
+ <div class="accordion" id="accordionExample">
+ <div class="card">
+ <div class="card-header row" id="headingOne">
+ <h2 class="col-10 mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Interface
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
</div>
+ </div>
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
- <div class="card-body">
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Resoluton-key</label>
- <input type="text" class="form-control">
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
</div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Store result</label>
- </div>
- <div class="form-group">
- <label>
- <input class="with-gap radio-btn" name="group1" type="radio"/>
- <span class="radio-btn">True</span>
- </label>
- <label class="radio-btn">
- <input class="with-gap radio-btn" name="group1" type="radio" />
- <span class="radio-btn">False</span>
- </label>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Target</label>
- <input type="text" class="form-control" placeholder="">
- </div>
- <div class="form-group">
- <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
- <input type="text" class="form-control" placeholder="">
-
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
</div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Resoluton-key</label>
+ <input type="text" class="form-control">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Store result</label>
+ </div>
+ <div class="form-group">
+ <label>
+ <input class="with-gap radio-btn" name="group1" type="radio" />
+ <span class="radio-btn">True</span>
+ </label>
+ <label class="radio-btn">
+ <input class="with-gap radio-btn" name="group1" type="radio" />
+ <span class="radio-btn">False</span>
+ </label>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Target</label>
+ <input type="text" class="form-control" placeholder="">
+ </div>
+ <div class="form-group">
+ <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
+ <input type="text" class="form-control" placeholder="">
</div>
+
</div>
</div>
-
</div>
- <div class="accordion" id="accordionExample">
- <div class="card">
- <div class="card-header row" id="headingOne">
- <h2 class="col-10 mb-0">
- <button class="btn btn-link" type="button" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- Artifact
- </button>
- </h2>
- <div class="col-2 p-0 text-center">
- <button class="btn btn-addAttribute" type="button"></button>
- </div>
+ </div>
+
+ <div class="accordion" id="accordionExample">
+ <div class="card">
+ <div class="card-header row" id="headingOne">
+ <h2 class="col-10 mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse"
+ data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Artifact
+ </button>
+ </h2>
+ <div class="col-2 p-0 text-center">
+ <button class="btn btn-addAttribute" type="button"></button>
</div>
+ </div>
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordionExample">
- <div class="card-body">
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">base config-template</label> &nbsp;
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
- </div>
- <div class="form-group">
- <label for="exampleInputEmail1">Type</label>
- <div class="dropdown w-100">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div>
- <ul class="dropdown-content w-100">
- <li>
- <div class="form-group ">
- <li>ddwd</li>
- </div>
- </li>
- </ul>
- </div>
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+ data-parent="#accordionExample">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">base config-template</label> &nbsp;
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
</div>
-
- <div style="height: 30px; margin-top: 30px;"><hr></div>
-
- <div class="row">
- <div class="col-9">
- <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
- <button type="button" class="btn p-0">
- <img src="/assets/img/icon-edit.svg">
- </button>
- </div>
- <div class="col-3">
- <button type="button" class="btn btn-deleteAttribute">Delete</button>
- </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
</div>
- <div class="form-group">
- <label for="exampleInputEmail1">Type</label>
- <div class="dropdown w-100">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div>
- <ul class="dropdown-content w-100">
- <li>
- <div class="form-group ">
- <li>ddwd</li>
- </div>
- </li>
- </ul>
- </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Type</label>
+ <div class="dropdown w-100">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">artifact-template-velocity <i
+ class="fa fa-caret-down"></i></div>
+ <ul class="dropdown-content w-100">
+ <li>
+ <div class="form-group ">
+ <li>ddwd</li>
</div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div style="height: 30px; margin-top: 30px;">
+ <hr>
+ </div>
- <div style="height: 30px; margin-top: 30px;"><hr></div>
+ <div class="row">
+ <div class="col-9">
+ <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
+ <button type="button" class="btn p-0">
+ <img src="/assets/img/icon-edit.svg">
+ </button>
+ </div>
+ <div class="col-3">
+ <button type="button" class="btn btn-deleteAttribute">Delete</button>
</div>
</div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Type</label>
+ <div class="dropdown w-100">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">artifact-mapping resource <i
+ class="fa fa-caret-down"></i></div>
+ <ul class="dropdown-content w-100">
+ <li>
+ <div class="form-group ">
+ <li>ddwd</li>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div style="height: 30px; margin-top: 30px;">
+ <hr>
</div>
-
</div>
</div>
</div>
+
</div>
</div>
+ </div>
+ </div>
+ </div>
</ng-sidebar>
-</ng-sidebar-container>
+</ng-sidebar-container> \ No newline at end of file