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" (click)="OrderModelShow()">Create</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=200>Created Time</th>
  22           <!--<th width=110>Service Type</th>-->
  23           <th width=110>S-NSSAI</th>
  24           <th width=110>Status</th>
  25           <th width=120>Activate</th>
  26           <th width=130>Terminate</th>
  27         </tr>
  28       </thead>
  29       <tbody>
  30         <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
  31           <tr>
  32             <td>{{i+1}}</td>
  33             <td>{{ data.order_id }}</td>
  34             <td>{{ data.order_name }}</td>
  35             <td>{{ data.order_creation_time }}</td>
  36             <!--<td>{{ data.service_type?data.service_type:'&#45;&#45;' }}</td>-->
  37             <td>{{ data.service_snssai }}</td>
  38             <td>
  39               <span class="marginLeft10">
  40                 {{data.order_status}}
  41               </span>
  42               <br>
  43             </td>
  44             <td>
  45               <div class="action-icon">
  46                 <nz-switch [ngModel]="data.order_status==='activated'?true:false"
  47                   [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && data.last_operation_progress && data.last_operation_progress !== '100')"
  48                   (ngModelChange)="switchChange(data,i)"></nz-switch>
  49                 <nz-progress
  50                   *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
  51                   [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
  52                 </nz-progress>
  53               </div>
  54             </td>
  55             <td>
  56               <div class="action-icon">
  57                 <i [ngClass]="{'cannotclick':data.order_status === 'processing' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}"
  58                   nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
  59                   (click)="terminate(data,i)"></i>
  60                 <nz-progress
  61                   *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
  62                   [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
  63                 </nz-progress>
  64               </div>
  65             </td>
  66           </tr>
  67         </ng-template>
  68       </tbody>
  69     </nz-table>
  70   </div>
  71   <app-business-order [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order>
  72 </div>