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