change for the slice mgmt UI

Issue-ID: USECASEUI-387

Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79

1 files changed, 197 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html
new file mode 100644
index 00000000..b7d75ad4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html
@@ -0,0 +1,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>
\ No newline at end of file