gerrit.onap Code Review - vid.git/blob

   1 <div id="template-popup" class="modal-dialog">
   2   <div class="modal-content">
   3     <div class="modal-header">
   4       <button type="button"
   5               class="close"
   6               (click)="closeModal()">&times;
   7       </button>
   8       <span [attr.data-tests-id]="'template-modal-title'"
   9             class="modal-title">Templates
  10       </span>
  11     </div>
  12     <div class="modal-body templateModalBody">
  13       <div class="row description-section">
  14         <div class="col-md-6">
  15           <div [attr.data-tests-id]="'description-part-1'">The following list presents previous instantiations done for
  16             this model in this version.
  17           </div>
  18           <div [attr.data-tests-id]="'description-part-2'">You may use one of them as a baseline for your instantiation
  19             or start from scratch.
  20           </div>
  21           <div [attr.data-tests-id]="'description-part-3'">Once you selecting one allows you to change the data before
  22             start instantiating.
  23           </div>
  24         </div>
  25         <div class="col-md-6">
  26           <input
  27             (keypress)="onFilterKeypress($event)"
  28             class="filter-input form-control input-text"
  29             placeholder="Filter...">
  30         </div>
  31
  32       </div>
  33       <div class="row" style="margin-left: 0;margin-right: 0;padding: 20px;">
  34         <table id="member-table" class="table table-bordered" style="table-layout: fixed">
  35           <thead class="thead-dark">
  36           <tr>
  37             <th class="header-title" id="header-userId">User ID</th>
  38             <th class="header-title" id="header-createDate" style="width: 21ch;">Date</th>
  39             <th class="header-title" id="header-instanceName" style="max-width: 50ch;">Instance Name</th>
  40             <th class="header-title" id="header-instantiationStatus">Instantiation Status</th>
  41             <th class="header-title" id="header-summary">Summary</th>
  42             <th class="header-title" id="header-region">Region</th>
  43             <th class="header-title" id="header-tenant">Tenant</th>
  44             <th class="header-title" id="header-aicZone">AIC Zone</th>
  45           </tr>
  46           </thead>
  47           <tbody>
  48           <tr class="member-table-row"
  49               *ngFor="let item of filterTableData;"
  50               (click)="selectedJobId = item.jobId"
  51               [ngClass]="{'selected' : selectedJobId === item.jobId}"
  52               [attr.data-tests-id]="'row-' + item.jobId">
  53             <td>
  54               <div>
  55                 <custom-ellipsis
  56                   [dataTestId]="'userId-' + item.jobId"
  57                   [id]="item.userId"
  58                   [value]="item.userId"
  59                   [breakWord]="true">
  60                 </custom-ellipsis>
  61               </div>
  62             </td>
  63             <td style="width: 21ch;">
  64               <div>
  65                 <custom-ellipsis
  66                   [dataTestId]="'createDate-' + item.jobId"
  67                   [id]="item.createDate"
  68                   [value]="item.createDate"
  69                   [breakWord]="true">
  70                 </custom-ellipsis>
  71               </div>
  72             </td>
  73             <td style="max-width: 50ch;">
  74               <div>
  75                 <custom-ellipsis
  76                   [showDots]="true"
  77                   [dataTestId]="'instanceName-' + item.jobId"
  78                   [id]="item.instanceName"
  79                   [value]="item.instanceName"
  80                   [breakWord]="true">
  81                 </custom-ellipsis>
  82               </div>
  83             </td>
  84             <td>
  85               <div>
  86                 <custom-ellipsis
  87                   [showDots]="true"
  88                   [dataTestId]="'instantiationStatus-' + item.jobId"
  89                   [id]="item.instantiationStatus"
  90                   [value]="item.instantiationStatus"
  91                   [breakWord]="true">
  92                 </custom-ellipsis>
  93               </div>
  94             </td>
  95             <td>
  96               <div>
  97                 <custom-ellipsis
  98                   [dataTestId]="'summary-' + item.jobId"
  99                   [id]="item.summary"
 100                   [value]="item.summary"
 101                   [breakWord]="true">
 102                 </custom-ellipsis>
 103               </div>
 104             </td>
 105             <td>
 106               <div>
 107                 <custom-ellipsis
 108                   [showDots]="true"
 109                   [dataTestId]="'region-' + item.jobId"
 110                   [id]="item.region"
 111                   [value]="item.region"
 112                   [breakWord]="true">
 113                 </custom-ellipsis>
 114               </div>
 115             </td>
 116             <td>
 117               <div>
 118                 <custom-ellipsis
 119                   [showDots]="true"
 120                   [dataTestId]="'tenant-' + item.jobId"
 121                   [id]="item.tenant"
 122                   [value]="item.tenant"
 123                   [breakWord]="true">
 124                 </custom-ellipsis>
 125               </div>
 126             </td>
 127             <td>
 128               <div>
 129                 <custom-ellipsis
 130                   [dataTestId]="'aicZone-' + item.jobId"
 131                   [id]="item.aicZone"
 132                   [value]="item.aicZone"
 133                   [breakWord]="true">
 134                 </custom-ellipsis>
 135               </div>
 136             </td>
 137           </tr>
 138           </tbody>
 139         </table>
 140       </div>
 141
 142     </div>
 143     <div class="modal-footer row" style="padding: 0">
 144       <div class="col-md-6">
 145       </div>
 146       <div class="col-md-6" style="padding: 15px;padding-right: 35px;">
 147         <button
 148           [disabled]="selectedJobId === null"
 149           [attr.data-tests-id]="'LoadTemplateButton'"
 150           type="button" class="btn btn-primary submit"
 151           (click)="loadTemplate()"><span>Load Template</span>
 152         </button>
 153         <button
 154           [attr.data-tests-id]="'startFromScratchButton'"
 155           type="button" class="btn btn-success submit startFromScratchButton"
 156           (click)="closeModal()"><span>Start from Scratch</span>
 157         </button>
 158       </div>
 159     </div>
 160   </div>
 161 </div>