usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html


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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

<div class="main">
    <div class="divCls">
        <table>
            <tr>
                <td>
                    <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_subscriptionType" | translate}}</nz-form-label>
                </td>
                <td>
                    <nz-select class="colm-s-2" id="subscriptionType" [(ngModel)]="selectedSubscriptionType" (ngModelChange)="getServiceInstanceList($event)" nzAllowClear
                        nzPlaceHolder="Choose">
                        <nz-option *ngFor="let option of serviceSubscriptionList" [nzValue]="option.serviceType" [nzLabel]="option.serviceType"></nz-option>
                    </nz-select>
                </td>
                <td style="width: 5%"></td>
                <td>
                    <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_serviceInstance" | translate}}</nz-form-label>
                </td>
                <td>
                    <nz-select class="colm-s-2" id="serviceInstance" [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSubscribedSites($event)" nzAllowClear
                        nzPlaceHolder="Choose">
                        <nz-option *ngFor="let option of serviceInstanceList" [nzValue]="option.serviceInstance" [nzLabel]="option.serviceInstancename"></nz-option>
                    </nz-select>
                </td>
                <td style="width: 5%"></td>
                <td>
                    <button *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" nz-button nzType="primary"
                    (click)="deleteSelectedService()">{{"i18nTextDefine_delete" | translate}}</button>
                </td>
            </tr>
        </table>
        </div>
        <div class="desktop view">
            <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false>
                <tbody>
                    <ng-template ngFor let-data [ngForOf]="nzExpandTable.data">
                        <tr>
                            <td width="4%" class="tdCls" nzShowExpand [(nzExpand)]="data.expand"></td>
                            <td width="96%" class="tdCls">{{data.name | translate}}</td>
                        </tr>
                        <tr [nzExpand]="data.expand">
                            <td class="noPadding" colspan="2">
                                <ng-template [ngIf]="data.rowIdx == 1">
                                    <div style="display: flex; justify-content: center; padding: 1%;">
                                        <div style="width: 45%" class="">
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Name: </b>
                                                </span>
                                                <span>{{summaryInfo.name}}</span>
                                            </div>
                                        </div>
                                        <div style="width: 45%" class="">
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Description: </b>
                                                </span>
                                                <span>{{summaryInfo.description}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </ng-template>
                                <ng-template [ngIf]="data.rowIdx == 2">
                                    <div style="display: flex; justify-content: center; padding: 1%;">
                                        <div style="width: 45%" class="">
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Name: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_name}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Description: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_description}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>COS: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_COS}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Dual Link: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_dualLink}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Tenant ID: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_tenantId}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>VPN Type: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_vpnType}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>CBC: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_cbs}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>EBC: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_ebs}}</span>
                                            </div>
                                        </div>
                                        <div style="width: 45%" class="">
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Color Aware: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_colorAware}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Re-route: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_reroute}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Coupling Flag: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_couplingFlag}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>CIR: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_cir}}</span>
                                            </div>
                                            
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>Start Time: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_startTime}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>End Time: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_endTime}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>EIR: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_eir}}</span>
                                            </div>
                                            <div style="padding: 1%">
                                                <span>
                                                    <b>SLS: </b>
                                                </span>
                                                <span>{{vpnInfo.l2vpn_SLS}}</span>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </ng-template>
                                <ng-template [ngIf]="data.rowIdx == 3">
                                    <div style="display: flex; justify-content: center; padding: 1%;">
                                        <div style="width: 90%" class="">
                                            <nz-table #basicTable [nzData]="uniInfo" [nzShowPagination]="false">
                                                <thead>
                                                    <tr>
                                                    <th>UNI</th>
                                                    <th>TP Id</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let data of basicTable.data">
                                                    <td>{{ data.sotnuni_cVLAN }}</td>
                                                    <td>{{ data.sotnuni_tpId }}</td>
                                                    </tr>
                                                </tbody>
                                                </nz-table>
                                        </div>
                                    </div>
                                </ng-template>
                            </td>
                        </tr>
                    </ng-template>
                </tbody>
            </nz-table>
        </div>
        <!-- <app-sotn-order-service *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" [subscriptionType]="selectedSubscriptionType"
            [serviceInstanceId]="selectedServiceInstance"></app-sotn-order-service>
        <app-ordered-service *ngIf="((selectedSubscriptionType|lowercase) == 'sdwan' && selectedServiceInstance !='' )"></app-ordered-service> -->
</div>