summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
blob: 535ee0128de58f6f1b66de85038ddca0983f05c2 (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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<div class="slicing-resource-table">
    <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>
    </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>Service Instance Id</th>
                    <th>Service Instance Name</th>
                    <th>Service Type</th>
                    <th width="90px">S-NSSAI</th>
                    <th width="110px">Status</th>
                	<th width="140px">Aciton</th>
                    <th width="110px">Detail</th>
                </tr>
            </thead>
            <tbody>
                <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
                    <tr>
                        <td>{{ data.service_instance_id }}</td>
                        <td>{{ data.service_instance_name }}</td>
                        <td>{{ data.service_type }}</td>
                        <td>{{ data.service_snssai }}</td>
                        <td>

                        <span  class="marginLeft10">
                            <span *ngIf="data.last_operation_progress !== 100">
                                {{data.last_operation_progress+'%'}}
                            </span>
                            <br>
                            {{data.orchestration_status}}
                        </span>
                        <br>
                    </td>
                    <td>
                        <div class="action-icon">
                            <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
                                       [nzDisabled]="data.last_operation_progress !== 100"
                                       (ngModelChange)="switchChange(data,i)"
                            ></nz-switch>
                            <nz-progress *ngIf="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_progress !== 100 && data.last_operation_type !== 'delete') || data.orchestration_status==='activated'}"
                               nz-icon
                               nzType="poweroff"
                               nzTheme="outline"
                               class="anticon anticon-poweroff"
                               (click)="terminate(data)"
                            ></i>
                            <nz-progress *ngIf="data.last_operation_progress !== 100 && terminateStart"
                                         [nzPercent]="data.last_operation_progress"
                                         [nzShowInfo]="false" nzStatus="active"></nz-progress>
                        </div>
                    </td>
                    <td>
                            <a (click)="showdetail(data)"
                                [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">View Detail</a>
                        </td>
                    </tr>
                </ng-template>
            </tbody>
        </nz-table>
    </div>
</div>
<app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>