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

   1 <div class="slicing-resource-table">
   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     </div>
  11     <div class="slicing-resource-table-list">
  12         <nz-table
  13                 #basicTable
  14                 [nzData]="listOfData"
  15                 [nzFrontPagination]="false"
  16                 nzShowSizeChanger
  17                 [nzPageSizeOptions]="[5,10,15,20]"
  18                 [nzTotal]='total'
  19                 [(nzPageSize)]="pageSize"
  20                 [(nzPageIndex)]='pageIndex'
  21                 [nzLoading]="loading"
  22                 (nzPageIndexChange)="searchData()"
  23                 (nzPageSizeChange)="searchData(true)"
  24         >
  25             <thead>
  26                 <tr>
  27                     <th>Service Instance Id</th>
  28                     <th>Service Instance Name</th>
  29                     <th>Service Type</th>
  30                     <th>S-NSSAI</th>
  31                     <th>Status</th>
  32                         <th width="180px">Aciton</th>
  33                     <th width="110px">Detail</th>
  34                 </tr>
  35             </thead>
  36             <tbody>
  37                 <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
  38                     <tr>
  39                         <td>{{ data.service_instance_id }}</td>
  40                         <td>{{ data.service_instance_name }}</td>
  41                         <td>{{ data.service_type }}</td>
  42                         <td>{{ data.service_snssai }}</td>
  43                         <td>
  44
  45                         <span  class="marginLeft10">
  46                             <span *ngIf="data.last_operation_progress !== 100">
  47                                 {{data.last_operation_progress+'%'}}
  48                             </span>
  49                             <br>
  50                             {{data.orchestration_status}}
  51                         </span>
  52                         <br>
  53                     </td>
  54                     <td>
  55                         <div class="action-icon">
  56                             <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
  57                                        [nzDisabled]="data.last_operation_progress !== 100"
  58                                        (ngModelChange)="switchChange(data,i)"
  59                             ></nz-switch>
  60                             <nz-progress *ngIf="data.last_operation_progress !== 100 && data.orchestration_status !== 'delete'"
  61                                          [nzPercent]="data.last_operation_progress"
  62                                          [nzShowInfo]="false" nzStatus="active"></nz-progress>
  63                         </div>
  64                         <div class="action-icon">
  65                             <i [ngClass]="{'cannotclick':data.last_operation_progress !== 100 || data.orchestration_status==='activated'}"
  66                                nz-icon
  67                                nzType="poweroff"
  68                                nzTheme="outline"
  69                                class="anticon anticon-poweroff"
  70                                (click)="terminate(data)"
  71                             ></i>
  72                             <nz-progress *ngIf="data.last_operation_progress !== 100 && terminateStart"
  73                                          [nzPercent]="data.last_operation_progress"
  74                                          [nzShowInfo]="false" nzStatus="active"></nz-progress>
  75                         </div>
  76                     </td>
  77                     <td>
  78                             <a (click)="showdetail(data)"
  79                                 [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">View Detail</a>
  80                         </td>
  81                     </tr>
  82                 </ng-template>
  83             </tbody>
  84         </nz-table>
  85     </div>
  86 </div>
  87 <app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>