gerrit.onap Code Review - usecase-ui.git/blob

   1 <div>
   2   <div nz-row>
   3     <div nz-col nzSpan="12" class="task_status">
   4       <span>Status : </span>
   5       <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue"
   6                  (ngModelChange)="getListOfProcessingStatus()">
   7         <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
   8       </nz-select>
   9     </div>
  10     <button nz-button nzType="primary" class="buy-button">Purchase</button>
  11   </div>
  12   <div class="slicing-resource-table-list">
  13     <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger
  14               [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
  15               [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
  16       <thead>
  17       <tr>
  18         <th width=100>No</th>
  19         <th width=280>Service Instance Id</th>
  20         <th width=200>Service Instance Name</th>
  21         <th width=110>Service Type</th>
  22         <th width=110>S-NSSAI</th>
  23         <th width=110>Status</th>
  24         <th width=180>Aciton</th>
  25       </tr>
  26       </thead>
  27       <tbody>
  28       <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
  29         <tr>
  30           <td>{{i+1}}</td>
  31           <td>{{ data.service_instance_id }}</td>
  32           <td>{{ data.service_instance_name }}</td>
  33           <td>{{ data.service_type?data.service_type:'--' }}</td>
  34           <td>{{ data.service_snssai }}</td>
  35           <td>
  36                             <span class="marginLeft10">
  37                                 <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'">
  38                                     {{data.last_operation_progress+'%'}}
  39                                 </span>
  40                                 <br>
  41                                 {{data.orchestration_status}}
  42                             </span>
  43             <br>
  44           </td>
  45           <td>
  46             <div class="action-icon">
  47               <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
  48                          [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'"
  49                          (ngModelChange)="switchChange(data,i)"></nz-switch>
  50               <nz-progress
  51                       *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
  52                       [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
  53               </nz-progress>
  54             </div>
  55             <div class="action-icon">
  56               <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.orchestration_status==='activated')}"
  57                  nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
  58                  (click)="terminate(data)"></i>
  59               <nz-progress
  60                       *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart"
  61                       [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
  62               </nz-progress>
  63             </div>
  64           </td>
  65         </tr>
  66       </ng-template>
  67       </tbody>
  68     </nz-table>
  69   </div>
  70 </div>