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>
  12         <nz-table
  13                 #basicTable
  14                 [nzData]="listOfData"
  15                 [nzFrontPagination]="false"
  16                 [nzPageSizeOptions]="[5,10,15,20]"
  17                 [nzTotal]='total'
  18                 [(nzPageSize)]="pageSize"
  19                 [(nzPageIndex)]='pageIndex'
  20                 [nzLoading]="loading"
  21                 (nzPageIndexChange)="searchData()"
  22                 (nzPageSizeChange)="searchData(true)"
  23         >
  24             <thead>
  25             <tr>
  26                 <th>Service_instance_id</th>
  27                 <th>Service_instance_name</th>
  28                 <th>Service_type</th>
  29                 <th>S-NSSAI</th>
  30                 <th>Orchestration_status</th>
  31                 <th width="130px">Aciton</th>
  32                 <th width="100px">Detail</th>
  33             </tr>
  34             </thead>
  35             <tbody>
  36             <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
  37                 <tr>
  38                     <td>{{ data.service_instance_id }}</td>
  39                     <td>{{ data.service_instance_name }}</td>
  40                     <td>{{ data.service_type }}</td>
  41                     <td>{{ data.service_snssai }}</td>
  42                     <td>
  43
  44                         <span  class="marginLeft10">
  45                                  {{ data.last_operation_progress !== 100?data.last_operation_type+'&nbsp;&nbsp;&nbsp;'+data.last_operation_progress+'%':data.orchestration_status }}
  46                         </span>
  47                         <nz-progress *ngIf="data.last_operation_progress !== 100"
  48                                      [nzPercent]="data.last_operation_progress"
  49                                      [nzShowInfo]="false" nzStatus="active"></nz-progress>
  50                     </td>
  51                     <td>
  52                         <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
  53                                    [nzDisabled]="data.last_operation_progress !== 100"
  54                                    (ngModelChange)="switchChange(data,i)"
  55                         ></nz-switch>
  56                         <i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}"
  57                            nz-icon
  58                            nzType="poweroff"
  59                            nzTheme="outline"
  60                            class="anticon anticon-poweroff"
  61                            (click)="terminate(data)"
  62                         ></i>
  63                     </td>
  64                     <td>
  65                         <!--<i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}"-->
  66                            <!--class="anticon anticon-bars"-->
  67                            <!--(click)="showdetail(data)">-->
  68                         <!--</i>-->
  69                         <a (click)="showdetail(data)" [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">detail</a>
  70                     </td>
  71                 </tr>
  72             </ng-template>
  73             </tbody>
  74         </nz-table>
  75     </div>
  76 </div>