gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <div class="scrollWrapper">
   2     <div class="row m-0">
   3         <div class="col">
   4             <div class="form-group">
   5                 <label for="exampleInputEmail1">Function Instance Name</label>
   6                 <input type="text" class="form-control" placeholder="Function Instance Name">
   7             </div>
   8             <div class="form-group mb-0">
   9                 <label>Function Type</label>
  10                 <label class="attribute-value">component-resource-resolution</label>
  11             </div>
  12             <div class="form-group">
  13                 <label for="exampleFormControlTextarea1">Description</label>
  14                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  15             </div>
  16         </div>
  17     </div>
  18
  19     <div class="accordion function-accordion" id="accordionExample">
  20         <!--INTERFACES-->
  21         <div class="card">
  22             <div class="card-header" id="headingOne">
  23                 <h2 class="mb-0">
  24                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
  25                         aria-expanded="true" aria-controls="collapseOne">
  26                         Interfaces
  27                     </button>
  28                 </h2>
  29             </div>
  30
  31             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  32                 <div class="card-body">
  33                     <!--Inputs & Outputs Tabs-->
  34                     <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
  35                         <li class="nav-item" role="presentation">
  36                             <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
  37                                 role="tab" aria-controls="pills-home" aria-selected="true">Inputs</a>
  38                         </li>
  39                         <li class="nav-item" role="presentation">
  40                             <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
  41                                 role="tab" aria-controls="pills-profile" aria-selected="false">Outputs</a>
  42                         </li>
  43                     </ul>
  44                     <div class="tab-content" id="pills-tabContent">
  45                         <!--Inputs-->
  46                         <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
  47                             aria-labelledby="pills-home-tab">
  48                             <div class="row">
  49                                 <div class="col">
  50                                     <!--list-->
  51                                     <div class="attribute-wrap" *ngIf="artifactPrefix">
  52                                         <div class="form-group">
  53                                             <label for="exampleFormControlTextarea1">artifact-prefix-names
  54                                                 <i class="icon-required-star" type="button"
  55                                                     aria-hidden="true"></i></label>
  56                                         </div>
  57                                         <div class="custom-control custom-radio custom-control-inline">
  58                                             <input type="radio" id="customRadioInline1" name="customRadioInline1"
  59                                                 class="custom-control-input">
  60                                             <label class="custom-control-label" for="customRadioInline1">Pre-defined
  61                                                 Template</label>
  62                                         </div>
  63                                         <div class="custom-control custom-radio custom-control-inline">
  64                                             <input type="radio" id="customRadioInline2" name="customRadioInline1"
  65                                                 class="custom-control-input">
  66                                             <label class="custom-control-label" for="customRadioInline2">Input Drivin
  67                                                 Template</label>
  68                                         </div>
  69                                         <br />
  70                                         <button type="button" data-toggle="modal" data-target="#templateModal"
  71                                             class="btn btn-select-template m-auto"><i class="icon-add-circle"
  72                                                 type="button" aria-hidden="true"></i> Select Template</button>
  73                                     </div>
  74                                     <!--string-->
  75                                     <div class="attribute-wrap" *ngFor="let requiredInput of getKeys(requiredInputs)">
  76                                         <div class="form-group">
  77                                             <label for="exampleInputEmail1">{{ requiredInput }}<i
  78                                                     class="icon-required-star" type="button"
  79                                                     [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
  80                                                     aria-hidden="true"></i></label>
  81                                             <input type="text" class="form-control">
  82                                         </div>
  83                                     </div>
  84                                     <!--integer-->
  85                                     <!-- <div class="attribute-wrap">
  86                                         <div class="form-group">
  87                                             <label for="exampleInputEmail1">request-id <i class="icon-required-star"
  88                                                     type="button" aria-hidden="true"></i></label>
  89                                             <input type="number" class="form-control" placeholder="" value="356">
  90                                         </div>
  91                                     </div> -->
  92                                     <!--boolean-->
  93                                     <!-- <div class="attribute-wrap">
  94                                         <div class="form-group">
  95                                             <label for="exampleFormControlTextarea1">resolution-summary
  96                                                 <i class="icon-required-star optional-attribute" type="button"
  97                                                     aria-hidden="true"></i></label>
  98                                         </div>
  99                                         <div class="custom-control custom-radio custom-control-inline">
 100                                             <input type="radio" id="customRadioInline1" name="customRadioInline1"
 101                                                 class="custom-control-input">
 102                                             <label class="custom-control-label" for="customRadioInline1">True</label>
 103                                         </div>
 104                                         <div class="custom-control custom-radio custom-control-inline">
 105                                             <input type="radio" id="customRadioInline2" name="customRadioInline1"
 106                                                 class="custom-control-input">
 107                                             <label class="custom-control-label" for="customRadioInline2">False</label>
 108                                         </div>
 109                                     </div> -->
 110                                 </div>
 111                             </div>
 112                             <!-- Add Optional Attributes button -->
 113                             <div class="row">
 114                                 <div class="col p-0">
 115                                     <div class="optional-attributes-menu">
 116                                         <div class="dropdown">
 117                                             <input class="dropdown-toggle" type="text">
 118                                             <div class="dropdown-text">
 119                                                 <i class="icon-add-circle" type="button" aria-hidden="true"></i> Add
 120                                                 Optional Attributes
 121                                             </div>
 122                                             <ul class="dropdown-content save-blueprint">
 123                                                 <li *ngFor="let optionalInput of getKeys(OptionalInputs)">
 124                                                     <a (click)="addToInputs(optionalInput)">{{ optionalInput }}</a>
 125                                                     <i (click)="addToInputs(optionalInput)"
 126                                                         class="icon-add-circle float-right" type="button"
 127                                                         aria-hidden="true"></i>
 128                                                 </li>
 129                                             </ul>
 130                                         </div>
 131                                     </div>
 132                                 </div>
 133                             </div>
 134                         </div>
 135                         <!--Outputs-->
 136                         <!-- Optional params -->
 137                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
 138                             aria-labelledby="pills-profile-tab">
 139                             <div class="attribute-wrap" *ngFor="let requiredOutput of getKeys(requiredOutputs)">
 140                                 <div class="form-group">
 141                                     <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star"
 142                                             type="button" aria-hidden="true"></i></label>
 143                                     <input type="text" class="form-control">
 144                                 </div>
 145                             </div>
 146                         </div>
 147                     </div>
 148                 </div>
 149             </div>
 150         </div>
 151         <!--ARTIFACTS-->
 152         <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
 153             <div class="card-header" id="headingTwo">
 154                 <h2 class="mb-0">
 155                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
 156                         aria-expanded="true" aria-controls="collapseTwo">
 157                         Artifacts
 158                     </button>
 159                 </h2>
 160             </div>
 161             <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
 162                 <div class="card-body">
 163                     <div class="row">
 164                         <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
 165                             <a class="template-mapping-list">
 166                                 <p>{{file}}</p>
 167                                 <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
 168                                 <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 169
 170                                 <a data-toggle="modal" (click)="fileToDelete = file"
 171                                     data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
 172                                     title="Delete Template"><i class="icon-delete-sm"></i></a>
 173                             </a>
 174
 175                         </div>
 176                     </div>
 177                 </div>
 178             </div>
 179         </div>
 180     </div>
 181 </div>
 182
 183 <!--function - Select Template - Modal-->
 184 <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle"
 185     aria-hidden="true">
 186     <div class="modal-dialog modal-dialog-scrollable" role="document">
 187         <div class="modal-content">
 188             <div class="modal-header">
 189                 <h5 class="modal-title" id="templateModalTitle">
 190                     Select Pre-defined Tempalte Name</h5>
 191                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 192                     <img src="assets/img/icon-close.svg" />
 193                 </button>
 194             </div>
 195             <div class="modal-body createAttributeTabs">
 196                 <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
 197                     <a class="template-mapping-list float" [ngClass]="{'active':selectedTemplates.has(file)}">
 198                         <p (click)="setTemplate(file)">{{file}}</p>
 199                         <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
 200                         <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 201                     </a>
 202
 203                 </div>
 204
 205             </div>
 206             <div class="modal-footer">
 207                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 208                 <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="addTemplates()">Add
 209                     Templates</button>
 210             </div>
 211         </div>
 212     </div>
 213 </div>
 214
 215 <!-- Delete Modal -->
 216 <div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog"
 217     aria-labelledby="templateDeletionModalLabel" aria-hidden="true">
 218     <div class="modal-dialog" role="document">
 219         <div class="modal-content">
 220             <div class="modal-header">
 221                 <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5>
 222                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 223                     <img src="assets/img/icon-close.svg" />
 224                 </button>
 225             </div>
 226             <div class="modal-body">
 227                 <p>Are you sure you want to delete Template file
 228                     <span>{{fileToDelete}}</span>?</p>
 229             </div>
 230             <div class="modal-footer">
 231                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 232                 <button type="button" (click)="setTemplate(fileToDelete)" data-dismiss="modal"
 233                     class="btn btn-primary">Delete</button>
 234             </div>
 235         </div>
 236     </div>
 237 </div>