change for the slice mgmt UI

Issue-ID: USECASEUI-387

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

4 files changed, 740 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
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less
new file mode 100644
index 00000000..92fff32e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less
@@ -0,0 +1,208 @@
+.main {
+  min-height: calc(~"100vh - 165px"); 
+}
+.paddingLeft{
+    padding-left: 40px;
+  }
+  nz-table{
+    
+  
+  
+   td{
+     border-bottom: 1px solid #F7F8FC;
+      background-color:var(--primary) ; 
+       color: var(--on-primary) ; 
+   }
+   .tdCls{
+     font-weight:bold;
+     color: var(--on-primary) ;
+     background-color:var(--primary) ;    
+   }
+   .Clscol
+   {
+    color: var(--on-primary) ;
+   }
+  
+   .thCls{
+    font-weight:bold;
+     color: var(--on-primary) ;
+     background-color: var(--th-background);
+     
+    border-bottom: 1px solid #F7F8FC;
+    border-top: 1px solid #F7F8FC;
+   }
+   .noPadding
+   {
+     padding-left:0px;
+     padding-right:0px;
+   }
+  .costCls{
+   margin-left: 40%;
+  // padding-left: 20px;
+    color: red;   
+  } 
+  .costCls_mob{
+    color: red;   
+  }   
+   .divCls{
+    display: inline-block;
+    width: 40%;
+    padding-left: 3%;
+    padding-bottom: 10px;
+     color : var(--on-lables) ; 
+   }
+   .spanCls
+   {
+     color:#999999;   
+   }
+
+   .textAlignLeft
+   {
+    text-align: left;  
+   }
+   .paddingZero{
+      padding:0px;
+   }
+  }
+  
+  .container
+  {
+    height: calc(~"100vh - 120px");
+    overflow: auto;  
+  }
+  
+  :host ::ng-deep .ant-table-row-expand-icon
+  { background: var(--primary);
+  
+  } 
+  .divCls
+  {
+  .spanCls {
+      color : var(--on-lables) ; 
+  }}
+
+  .inner_data
+  {
+    padding-left: 52px;
+  }
+
+.paddingLeft{
+  padding-left: 40px;
+}
+nz-table{
+  td{
+   border-bottom: 1px solid #F7F8FC;
+    background-color:var(--primary) ; 
+     color: var(--on-primary) ; 
+ }
+ .tdCls{
+   font-weight:bold;
+   color: var(--on-primary) ;
+   background-color:var(--primary) ;
+   overflow: hidden; 
+   height:21px;   
+ }
+ .clscol
+ {
+  color: var(--on-primary) ;
+ }
+
+ .thCls{
+  font-weight:bold;
+   color: var(--on-primary) ;
+   background-color: var(--th-background);
+   
+  border-bottom: 1px solid #F7F8FC;
+  border-top: 1px solid #F7F8FC;
+  height:21px;  
+ }
+ .noPadding
+ {
+   padding-left:0px;
+   padding-right:0px;
+ }
+
+ .divCls{
+  display: inline-block;
+  width: 40%;
+  padding-left: 3%;
+  padding-bottom: 10px;
+   color : var(--on-lables) ; 
+ }
+ .spanCls
+ {
+   color:#999999;   
+ }
+ .costCls
+ {
+   color:red;
+   text-align: center;
+   font-size: 16px;
+   font-weight:400;
+   border:0px;
+ }
+ .textAlignLeft
+ {
+  text-align: left;  
+ }
+ .paddingZero{
+    padding:0px;
+ }
+}
+
+.container1
+{
+  height: calc(~"100vh - 210px");
+  overflow: auto;  
+}
+
+:host ::ng-deep .ant-table-row-expand-icon
+{ background: var(--primary);
+
+} 
+.divCls
+{
+.spanCls {
+    color : var(--on-lables) ; 
+}}
+
+@media (max-width: 575px) {
+
+
+  .xs-clr-blue{
+    color: var(--on-primary) ;
+  }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
+  .xs-clr-red{
+    color: red!important;
+  }
+  .xs-flex-col{
+    display: flex!important;
+    flex-direction: column!important;
+  }
+ 
+  .text-align-center{
+    text-align: center!important
+  }
+  .min-hight{
+    min-height: calc(~"50vh - 50px")!important;
+  }
+  
+}
+
+.divCls{
+  display: inline-block;
+  width: 100%;
+  padding-bottom: 10px;
+   color : var(--on-lables) ; 
+ }
+
+ .main {
+     padding-left:80px
+ }
+ .ant-col-sm-6 {
+     width:100%;
+ }
+
+ #subscriptionType, #serviceInstance {
+     width: 250px;
+ }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts
new file mode 100644
index 00000000..2d0b9902
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageServiceComponent } from './manage-service.component';
+
+describe('ManageServiceComponent', () => {
+  let component: ManageServiceComponent;
+  let fixture: ComponentFixture<ManageServiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManageServiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManageServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts
new file mode 100644
index 00000000..d3143e82
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts
@@ -0,0 +1,310 @@
+import { Component, OnInit, SimpleChanges } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-manage-service',
+  templateUrl: './manage-service.component.html',
+  styleUrls: ['./manage-service.component.less']
+})
+export class ManageServiceComponent implements OnInit {
+
+  selectedSubscriptionType:string = "SOTN";
+  serviceSubscriptionList:any = [{
+    serviceType:"SOTN"
+  }];
+  selectedServiceInstance:string = "";
+  serviceInstanceList:any = [
+    {
+      serviceInstance: "SiteService-5011",
+      serviceInstancename: "SiteService-5011"
+    },
+    {
+      serviceInstance: "ISAAC-IS0333",
+      serviceInstancename: "ISAAC-IS0333"
+    }
+  ];
+  graphData: boolean = true;
+  expandDataSet = [
+    { rowIdx: 1, name: 'Service',cost: '', expand: true , mobileExpand:false},
+    { rowIdx: 2, name: 'VPN',cost: '', expand: true,mobileExpand:false },
+    { rowIdx: 3, name: 'UNI',cost: '', expand: true,mobileExpand:false }
+  ];
+
+  summaryInfo:object = {};
+  serviceList:object = {};
+  vpnInfo = [];
+  uniInfo = [];
+  mapped: any;
+  myKeys = [] as Array<any>;
+  baseUrl:string = '/api/usecaseui-server/v1'
+  constructor(private http: HttpClient) { }
+
+  ngOnInit() {
+    this.getSubscribeTypes();
+  }
+
+   //Get SubscriptionType
+   getSubscribeTypes() {
+    let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
+    // this.http.get<any>(url, {}).subscribe((data) => {
+    //   this.serviceSubscriptionList = data.subscriptions;
+    //   this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
+    //   this.getServiceInstanceList(this.selectedSubscriptionType);
+    // }, (err) => {
+    //   console.log(err);
+    // });
+    let data = {
+      "subscriptions": [
+        {
+          "serviceType": "SOTN",
+        }]
+     }
+     this.serviceSubscriptionList = data.subscriptions;
+     this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
+     this.getServiceInstanceList(this.selectedSubscriptionType);
+  }
+
+  //Get subscription instanceID by calling With Subscription Type
+  getServiceInstanceList(subscriptionType) {
+    this.serviceInstanceList = [];
+    this.selectedServiceInstance="";
+    let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType;
+    // this.http.get<any>(url,{}).subscribe((data) => {
+    //   this.serviceInstanceList = data.serviceInstanceList; 
+    //   this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
+    //   this.getSubscribedSites(data.serviceInstanceList[0]);
+    //   this.graphData = false;     
+    // }, (err) => {
+    //   console.log(err);
+    // });    
+    let data = {
+        "serviceInstanceList": [
+            {
+                "serviceInstance": "ISAAC-IS02",
+                "serviceInstancename":"SiteService-5011"
+            },
+            {
+                "serviceInstance": "ISAAC-IS03",
+                "serviceInstancename":"ISAAC-IS0333"
+            }
+        ]
+    }
+    this.serviceInstanceList = data.serviceInstanceList;
+    this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
+    this.getSubscribedSites(data.serviceInstanceList[0]);
+    
+    // var datas= {  
+    //     "ethtSvcName":"vpn022",
+    //     "colorAware":"true",
+    //     "cbs":"100",
+    //     "couplingFlag":"true",
+    //     "ebs":"EVPL",
+    //     "cir":"98900",
+    //     "eir":"1000",                    
+    //     "vpnInformations":[{  
+    //       "vpnThreshold":"1000",
+    //       "vpnBandwidth":"100",
+    //       "vpnType":"Hub-Spoke",
+    //       "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c",
+    //       "vpnName":"vpn022",
+    //       "sites":[  
+    //           {  
+    //             "zipCode":"100008",
+    //             "address":"beijing",
+    //             "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59",
+    //             "siteName":"ISAAC01-hub1",
+    //             "description":"desc"
+    //           }
+    //       ]
+    //     }]
+    // };
+    // this.assignData(datas, false);
+    var datas = {
+      "service":{
+        "name":"CCVPNServiceV2-36",
+        "description":"CCVPNServiceV2",
+        "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
+        "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
+        "globalSubscriberId": "{{customer}}",
+        "serviceType": "{{service-subscription}}",
+        "parameters":{
+          "locationConstraints":[],
+          "resources":[],
+          "requestInputs":{                
+            "sotnUnderlay":[
+              {
+                l2vpn:[
+                  {
+                    "l2vpn_COS": "123",         
+                    "l2vpn_dualLink": "Yes",
+                    "l2vpn_description": "VPN Description",                 
+                    "l2vpn_name": "VPN2",
+                    "l2vpn_tenantId": "989933",                  
+                    "l2vpn_vpnType": "SOTN",         
+                    "l2vpn_cbs": "123",                 
+                    "l2vpn_ebs": "23",         
+                    "l2vpn_colorAware": "true",         
+                    "l2vpn_reroute": "Yes",        
+                    "l2vpn_couplingFlag": "true",                 
+                    "l2vpn_cir": "100",
+                    "l2vpn_startTime": "28-02-2020",
+                    "l2vpn_endTime": "21-02-2020",         
+                    "l2vpn_eir": "1000",         
+                    "l2vpn_SLS": "1234"
+                  }
+                ],
+                "sotnUni":[
+                  {
+                    "sotnuni_cVLAN": "Huawei",						
+                    "sotnuni_tpId": "Huawei-112233"
+                  },
+                  {
+                    "sotnuni_cVLAN": "Huawei-1",						
+                    "sotnuni_tpId": "Huawei1-554433"
+                  }
+                ]					  						                 
+              }
+            ]
+          }
+        }
+      }
+    }
+    this.assignData(datas, false);
+  }
+
+  getSubscribedSites(selectedServiceInstance) {}
+
+  deleteSelectedService()
+  {
+
+    let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
+    
+    // this.http.delete<any>(url,{}).subscribe((data) => {
+    //   this.serviceInstanceList = [];
+    //   this.selectedServiceInstance = "";
+    //   this.getServiceInstanceList(this.selectedSubscriptionType);
+    // }, (err) => {
+    //   console.log(err);
+    // });
+  }
+
+
+  ngOnChanges(changes: SimpleChanges) {  
+    console.log("on change");
+    if (this.selectedServiceInstance) {
+      // let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
+      // this.http.get<any>(url, {}).subscribe((data) => {
+      //   this.assignData(data, false);
+      // }, (err) => {
+      //   console.log(err);
+      // });
+      //   var data= {  
+      //     "ethtSvcName":"vpn022",
+      //     "colorAware":"true",
+      //     "cbs":"100",
+      //     "couplingFlag":"true",
+      //     "ebs":"EVPL",
+      //     "cir":"98900",
+      //     "eir":"1000",                    
+      //     "vpnInformations":[{  
+      //       "vpnThreshold":"1000",
+      //       "vpnBandwidth":"100",
+      //       "vpnType":"Hub-Spoke",
+      //       "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c",
+      //       "vpnName":"vpn022",
+      //       "sites":[  
+      //           {  
+      //             "zipCode":"100008",
+      //             "address":"beijing",
+      //             "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59",
+      //             "siteName":"ISAAC01-hub1",
+      //             "description":"desc"
+      //           }
+      //       ]
+      //     }]
+      // };
+      var datas = {
+        "service":{
+          "name":"CCVPNServiceV2-36",
+          "description":"CCVPNServiceV2",
+          "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
+          "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
+          "globalSubscriberId": "{{customer}}",
+          "serviceType": "{{service-subscription}}",
+          "parameters":{
+            "locationConstraints":[],
+            "resources":[],
+            "requestInputs":{                
+              "sotnUnderlay":[
+                {
+                  l2vpn:[
+                    {
+                      "l2vpn_COS": "123",         
+                      "l2vpn_dualLink": "Yes",
+                      "l2vpn_description": "VPN Description",                 
+                      "l2vpn_name": "VPN2",
+                      "l2vpn_tenantId": "989933",                  
+                      "l2vpn_vpnType": "SOTN",         
+                      "l2vpn_cbs": "123",                 
+                      "l2vpn_ebs": "23",         
+                      "l2vpn_colorAware": "true",         
+                      "l2vpn_reroute": "Yes",        
+                      "l2vpn_couplingFlag": "true",                 
+                      "l2vpn_cir": "100",
+                      "l2vpn_startTime": "28-02-2020",
+                      "l2vpn_endTime": "21-02-2020",         
+                      "l2vpn_eir": "1000",         
+                      "l2vpn_SLS": "1234"
+                    }
+                  ],
+                  "sotnUni":[
+                    {
+                      "sotnuni_cVLAN": "Huawei",						
+                      "sotnuni_tpId": "Huawei-112233"
+                    },
+                    {
+                      "sotnuni_cVLAN": "Huawei-1",						
+                      "sotnuni_tpId": "Huawei1-554433"
+                    }
+                  ]					  						                 
+                }
+              ]
+            }
+          }
+        }
+      }
+      this.assignData(datas, false);
+    }
+    else {
+    //   const httpOptions = {
+    //     headers: new HttpHeaders({
+    //      'Content-Type': 'application/json',
+    //     })
+    //   };
+    //   let body = JSON.stringify({}); //this.orderServiceData
+
+    //   let url = this.baseUrl + "/uui-lcm/Sotnservices/cost";
+    // return this.http.post<any>(url,body,httpOptions).subscribe((data) => {
+    //     this.assignData(data, true);
+    //   }, (err) => {
+    //     console.log(err);
+    //   });
+    }
+  }
+
+  assignData(data,isCost) {
+    this.summaryInfo = data.service;
+    this.mapped = JSON.parse(JSON.stringify(this.summaryInfo));
+    // delete this.mapped.vpninformations;
+    // delete this.mapped.vpnInformations;
+    // if(isCost)
+    // {
+    //   delete this.mapped.cost;
+    //   this.expandDataSet[0].cost = this.summaryInfo["cost"]["serviceCost"];
+    //   this.expandDataSet[1].cost = this.summaryInfo["cost"]["vpnCost"];
+    // }  
+    this.myKeys = Object.keys(this.mapped);
+    this.vpnInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].l2vpn[0];
+    this.uniInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].sotnUni;
+  }
+}