summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
blob: 0c3983ddf1f49d5347524f3415ac1c8ac5c7e4f0 (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
<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()">Create</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>Created Time</th>
          <!--<th width=110>Service Type</th>-->
          <th width=110>S-NSSAI</th>
          <th width=110>Status</th>
          <th width=120>Activate</th>
          <th width=130>Terminate</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">
                {{data.order_status}}
              </span>
              <br>
            </td>
            <td>
              <div class="action-icon">
                <nz-switch [ngModel]="data.order_status==='activated'?true:false"
                  [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && 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]="true" nzStatus="active">
                </nz-progress>
              </div>
            </td>
            <td>
              <div class="action-icon">
                <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'))}"
                  nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
                  (click)="terminate(data,i)"></i>
                <nz-progress
                  *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
                  [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
                </nz-progress>
              </div>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>
  </div>
  <app-business-order [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order>
</div>