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