change for the slice mgmt UI

Issue-ID: USECASEUI-387

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

16 files changed, 1791 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;
+  }
+}
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html
new file mode 100644
index 00000000..358f60df
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html
@@ -0,0 +1,43 @@
+<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 id="subscriptionType" class= "colm-s-2" [(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 id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSelectedsubscriptionInfo($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>
+            <nz-form-label class ="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">Topology</nz-form-label>
+        </td>
+        <td>
+            <nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedTopology" (ngModelChange)="getTopologyInfo($event)"
+            nzAllowClear nzPlaceHolder="Choose">
+            <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType"></nz-option>
+        </nz-select>
+        </td>
+      </tr>
+    </table>
+  </div>
+  
+  <div class="flexDiv">   
+    <div id="mynetwork"  class="colm-s-3"></div>
+    <div class="colm-s-4"><div id="nodeDetails"></div></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less
new file mode 100644
index 00000000..9ebe3741
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less
@@ -0,0 +1,98 @@
+#mynetwork {
+    width: 100%;
+    height: calc(~"100vh - 300px");
+    border: 1px solid lightgray;
+    margin-right: 40px;
+    background-color: #333333;
+}
+
+  
+:host ::ng-deep .ant-form-item-label label {
+    color:  var(--on-primary) ;
+    background-color:var(--primary);
+}
+
+:host ::ng-deep .ant-select-dropdown-menu-item{
+    color: var(--on-primary) ;
+    background-color:var(--primary);
+  
+}
+:host ::ng-deep .ant-select-selection__rendered {
+    background-color:var(--primary);
+  
+}
+:host ::ng-deep .ant-select-selection--single {
+    background-color:var(--primary);
+  
+}
+
+:host ::ng-deep .ant-select-selection-selected-value {
+
+    color: var(--on-primary) !important ;
+
+}
+
+@media only screen and (min-width: 600px) {    
+.flexDiv {
+    display: flex!important; 
+}
+}
+@media only screen and (min-width: 768px) {    
+.flexDiv {
+    display: flex!important; 
+}  
+}
+
+.font-size{
+    font-size: 17px;
+}
+.font-weight{
+    font-weight:bold;
+}
+
+.refreshBtn{
+    right: 580px;
+    position: absolute;
+    top: 35px;
+    z-index: 1
+}
+
+:host ::ng-deep .ant-form-item-label label {
+    color:  var(--on-primary) ;
+}
+
+:host ::ng-deep .ant-select-selection__placeholder
+{
+    color: var(--on-primary);
+}
+
+:host ::ng-deep .ant-select-arrow {
+  
+ 
+    color:  var(--on-primary);
+    font-size: 12px;
+}
+
+
+.popup-table-row
+{
+    color: aqua;
+}
+
+.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/monitor-service/monitor-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts
new file mode 100644
index 00000000..21012f6d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonitorServiceComponent } from './monitor-service.component';
+
+describe('MonitorServiceComponent', () => {
+  let component: MonitorServiceComponent;
+  let fixture: ComponentFixture<MonitorServiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MonitorServiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MonitorServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
new file mode 100644
index 00000000..5e003ff3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
@@ -0,0 +1,330 @@
+import { Component, OnInit } from '@angular/core';
+import { Network, DataSet, Node, Edge, IdType } from 'vis';
+
+@Component({
+  selector: 'app-monitor-service',
+  templateUrl: './monitor-service.component.html',
+  styleUrls: ['./monitor-service.component.less']
+})
+export class MonitorServiceComponent implements OnInit {
+
+  selectedSubscriptionType:string = "SOTN";
+  serviceSubscriptionList:any = [{
+    serviceType:"SOTN"
+  }];
+  selectedServiceInstance:string = "SiteService-5011";
+  serviceInstanceList:any = [
+    {
+      serviceInstance: "SiteService-5011",
+      serviceInstancename: "SiteService-5011"
+    },
+    {
+      serviceInstance: "ISAAC-IS0333",
+      serviceInstancename: "ISAAC-IS0333"
+    }
+  ];
+  selectedTopology:string = 'Network Topology';
+  serviceTopologyList:any = [
+    {
+      topologyType:"Network Topology"
+    },
+    {
+      topologyType:"Resource Topology"
+    }
+  ];
+
+  title = 'Network';
+    public nodes: Node;
+    public edges: Edge;
+    public network: Network;
+    public serviceList: any;
+    public tempNode: any;
+    public tempEdge: any;
+    public selectedNode: any;
+    public selectedNodeIds: any;
+    public x: any;
+    public abc = [];
+    container: any;
+    networkOptions = {
+      layout: { 
+          randomSeed: 15 
+      },
+      nodes: {
+          borderWidth: 13,
+          size: 30,
+          color: {
+              border: '#54bd55',
+              background: '#666666'
+          },
+          font: { color: '#eeeeee' }
+      },
+      edges: {
+          color: 'lightgray'
+      },
+
+      interaction: {
+          tooltipDelay: 200,
+          hideEdgesOnDrag: true,
+          navigationButtons: false,
+          keyboard: true,
+          hover: true
+      },
+    };
+
+    node1:any = {
+      "nodes": [
+        {
+          "id": "1",
+          "shape": "circularImage",
+          "image": "./assets/images/edge.png",
+          "label": "Node",
+          "color": "Green",
+          "dataNode": {
+            "ethtSvcName": "sotn-021-VS-monitored",
+            "colorAware": "true",
+            "cbs": "100",
+            "couplingFlag": "true",
+            "ebs": "evpl",
+            "cir": "200000",
+            "eir": "0"
+          }
+        },
+        {
+          "id": "2",
+          "shape": "circularImage",
+          "image": "./assets/images/logicallink.png",
+          "label": "Logical Link",
+          "color": "Green",
+          "dataNode": {
+            "ethtSvcName": "sotn-021-VS-monitored",
+            "colorAware": "true",
+            "cbs": "100",
+            "couplingFlag": "true",
+            "ebs": "evpl",
+            "cir": "200000",
+            "eir": "0"
+          }
+        },
+        {
+          "id": "3",
+          "shape": "circularImage",
+          "image": "./assets/images/edge.png",
+          "label": "Node",
+          "color": "Green",
+          "dataNode": {
+            "zipcode": "100095",
+            "siteName": "hubtravel",
+            "description": "desc",
+            "location": "laptop-5",
+            "cvlan": "100"
+          }
+        }
+      ],
+      "edges": [
+        {
+          "from": "1",
+          "to": "2"
+        },
+        {
+          "from": "2",
+          "to": "3"
+        }
+      ]
+    }
+
+  node2:any = {
+    "nodes": [
+      {
+        "id": "1",
+        "shape": "circularImage",
+        "image": "./assets/images/tpoint.png",
+        "label": "Termination Point",
+        "color": "Green",
+        "dataNode": {}
+      },
+      {
+        "id": "2",
+        "shape": "circularImage",
+        "image": "./assets/images/edge.png",
+        "label": "Node",
+        "color": "Green",
+        "dataNode": {
+          "ethtSvcName": "sotn-021-VS-monitored",
+          "colorAware": "true",
+          "cbs": "100",
+          "couplingFlag": "true",
+          "ebs": "evpl",
+          "cir": "200000",
+          "eir": "0"
+        }
+      },
+      {
+        "id": "3",
+        "shape": "circularImage",
+        "image": "./assets/images/logicallink.png",
+        "label": "Logical Link",
+        "color": "Green",
+        "dataNode": {
+          "ethtSvcName": "sotn-021-VS-monitored",
+          "colorAware": "true",
+          "cbs": "100",
+          "couplingFlag": "true",
+          "ebs": "evpl",
+          "cir": "200000",
+          "eir": "0"
+        }
+      },
+      {
+        "id": "4",
+        "shape": "circularImage",
+        "image": "./assets/images/edge.png",
+        "label": "Node",
+        "color": "Green",
+        "dataNode": {
+          "zipcode": "100095",
+          "siteName": "hubtravel",
+          "description": "desc",
+          "location": "laptop-5",
+          "cvlan": "100"
+        }
+      },
+      {
+        "id": "5",
+        "shape": "circularImage",
+        "image": "./assets/images/tpoint.png",
+        "label": "Termination Point",
+        "color": "Green",
+        "dataNode": {
+          "accessltpid": "155",
+          "siteName": "hubtravel",
+          "description": "desc",
+          "accessnodeid": "10.10.10.10",
+          "cvlan": "100"
+        }
+      }
+    ],
+    "edges": [
+      {
+        "from": "1",
+        "to": "2"
+      },
+      {
+        "from": "2",
+        "to": "3"
+      },
+      {
+        "from": "3",
+        "to": "4"
+      },
+      {
+        "from": "4",
+        "to": "5"
+      }
+    ]
+  }
+
+  constructor() { }
+
+  intervalData: any;
+  returnResponse: boolean = true;
+
+  //Get SubscriptionType
+  getSubscribeTypes() {
+      this.getTopologyInfo('Network Topology');
+  }
+
+  getTopologyInfo (topo) {
+    this.selectedTopology = topo;
+    this.getData();
+    this.refreshData();
+  }
+
+  //Get subscription instanceID by calling With Subscription Type
+  getServiceInstanceList(subscriptionType) {
+          this.getSelectedsubscriptionInfo(subscriptionType);
+  }
+  ngOnInit() {
+      this.container = document.getElementById('mynetwork');
+      this.getSubscribeTypes();
+  }
+
+  refreshData() {
+
+      var data1 = {
+          nodes: this.serviceList.nodes,
+          edges: this.serviceList.edges
+      };
+
+      var network = new Network(this.container, data1, this.networkOptions);
+
+
+      network.on('select', function (selection) {
+          this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
+          var filteredNode = data1.nodes.filter(item => (
+              item.id == this.selectedNodeIds
+          ));
+          var t1 = '<div class="tblDiv">\
+          <nz-form-label class="lblCls">Node Information</nz-form-label>\
+          <table class="table table-striped table-bordered">\
+              <thead>\
+                  <tr>\
+                      <th class="clr-primary padding-2p">Specification</th>\
+                      <th class="clr-primary padding-2p">Value</th>\
+                  </tr>\
+              </thead>\
+              <tbody>\
+          ';
+          Object.entries(filteredNode[0].dataNode).forEach(entry => {                
+              if( entry[1] !== "null")
+              {
+                  t1 += '<tr class="popup-table-row">\
+                      <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
+                      <td class="popup-table-data  clr-primary padding-2p">'+ entry[1] + '</td>\
+                  </tr>\
+                  ';
+              }    
+          });
+          t1 += '</tbody>\
+          </table>\
+          </div>\
+          ';
+          document.getElementById('nodeDetails').innerHTML = t1;
+      });
+      network.on("afterDrawing", function (this) {
+          network.fit();
+      });
+  }
+
+  getData ()
+  {
+    if (this.selectedTopology == 'Network Topology') {
+      this.serviceList = this.node1;
+    } else {
+      this.serviceList = this.node2;
+    }
+  }
+  // Getting sitedata Based On Type and ID
+  getSelectedsubscriptionInfo(s) {       
+      this.getData();
+      this.refreshData();
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }        
+  }
+
+  ngOnDestroy() {
+      console.log('clear interval');
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }
+
+  }
+
+  ngOnDelete() {
+      console.log('clear interval');
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
new file mode 100644
index 00000000..4adf3747
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
@@ -0,0 +1,204 @@
+<div theme class="main">
+  <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false>
+    <tbody>
+      <tr>
+        <td width="4%"></td>
+        <td width="96%">
+          <button style="float:right" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button>
+        </td>
+      </tr>
+      <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">
+            <form autocomplete="off" [formGroup]="validateForm">
+              <ng-template [ngIf]="data.rowIdx == 1">
+                <div style="display: flex; justify-content: center; padding: 1%;">
+                  <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" |  translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="name" id="name" [(ngModel)]="siteData.name">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="description" id="description" [(ngModel)]="siteData.description">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+              <ng-template [ngIf]="data.rowIdx == 2">
+                <div style="display: flex; justify-content: center; padding: 1%;">
+                  <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" |  translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_name" id="l2vpn_name" [(ngModel)]="l2vpn.l2vpn_name">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_description" id="l2vpn_description" [(ngModel)]="l2vpn.l2vpn_description">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_COS"><span class="form-lable-font">COS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_COS" id="l2vpn_COS" [(ngModel)]="l2vpn.l2vpn_COS"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_dualLink"><span class="form-lable-font">Dual Link</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_dualLink" id="l2vpn_dualLink" [(ngModel)]="l2vpn.l2vpn_dualLink"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_tenantId"><span class="form-lable-font">Tenant ID</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_tenantId" id="l2vpn_tenantId" [(ngModel)]="l2vpn.l2vpn_tenantId"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_vpnType"><span class="form-lable-font">VPN Type</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_vpnType" id="l2vpn_vpnType" [(ngModel)]="l2vpn.l2vpn_vpnType"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cbs"><span class="form-lable-font">CBS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_cbs" id="l2vpn_cbs" [(ngModel)]="l2vpn.l2vpn_cbs"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_ebs"><span class="form-lable-font">EBS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_ebs" id="l2vpn_ebs" [(ngModel)]="l2vpn.l2vpn_ebs"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">Color Aware</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_colorAware" id="l2vpn_colorAware" [(ngModel)]="l2vpn.l2vpn_colorAware">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_reroute"><span class="form-lable-font">Re-route</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_reroute" id="l2vpn_reroute" [(ngModel)]="l2vpn.l2vpn_reroute">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">Coupling Flag</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_couplingFlag" id="l2vpn_couplingFlag" [(ngModel)]="l2vpn.l2vpn_couplingFlag"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cir"><span class="form-lable-font">CIR</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_cir" id="l2vpn_cir" [(ngModel)]="l2vpn.l2vpn_cir"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_startTime"><span class="form-lable-font">Strat Time</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <nz-date-picker formControlName="l2vpn_startTime" id="l2vpn_startTime" [(ngModel)]="l2vpn.l2vpn_startTime"></nz-date-picker>
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_endTime"><span class="form-lable-font">End Time</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <nz-date-picker formControlName="l2vpn_endTime" id="l2vpn_endTime" [(ngModel)]="l2vpn.l2vpn_endTime"></nz-date-picker>
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_eir"><span class="form-lable-font">EIR</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_eir" id="l2vpn_eir" [(ngModel)]="l2vpn.l2vpn_eir"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_SLS"><span class="form-lable-font">SLS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_SLS" id="l2vpn_SLS" [(ngModel)]="l2vpn.l2vpn_SLS"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                </div>
+              </div>
+            </ng-template>
+            <ng-template [ngIf]="data.rowIdx == 3">
+              <div style="display: flex; justify-content: center; padding: 1%;">
+                <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_cVLAN" ><span class="form-lable-font">VLAN</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="sotnuni_cVLAN" id="sotnuni_cVLAN" [(ngModel)]="uni.sotnuni_cVLAN">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_tpId" ><span class="form-lable-font">TP ID</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="sotnuni_tpId" id="sotnuni_tpId" [(ngModel)]="uni.sotnuni_tpId">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <button (click)="addUNI($event)" nz-button nzType="primary">Add</button>
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                    <nz-table #basicTable [nzData]="sotnUni" [nzShowPagination]="false">
+                      <thead>
+                        <tr>
+                          <th>VLAN</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>
+                          <td>
+                            <a>Delete</a>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </nz-table>
+                  </div>
+                </div>
+              </ng-template>
+            </form>
+          </td>
+        </tr>
+      </ng-template>
+    </tbody>
+   </nz-table>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
new file mode 100644
index 00000000..5ac5c07d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
@@ -0,0 +1,59 @@
+
+.main {
+    min-height: calc(~"100vh - 165px");
+}
+nz-table
+{
+    th,tr,td,nz-spin,div,span
+    {
+        background: var(--primary);
+        color: var(--on-primary) ;        
+        .action
+        {
+            margin-left:10px;
+        }
+    }
+    td{
+        border-bottom: 1px solid #F7F8FC;
+        padding:5px;
+    }
+    th{
+        padding:5px;
+        font-weight:bold;  
+        color: var(--on-primary) ; 
+    }
+    tr{
+        border-left-color: var(--primary);
+    }
+
+        
+}
+.tdCls{
+    font-weight:bold;
+    color: var(--on-primary) ;
+    background-color:var(--primary) ;
+    overflow: hidden; 
+    height:21px;   
+  }
+.sotn-form{
+    display: flex;
+    flex-direction: column;
+    width: 45%;
+}
+.crt-btn{
+
+    display: flex;
+    justify-content: flex-end;
+}
+.form-lable-font{
+    font-weight: bold;
+    color: deepskyblue;
+}
+.mar-0x{
+    margin:0;
+}
+
+.labelcls{
+    color: var(--on-primary);
+}
+
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts
new file mode 100644
index 00000000..d135a250
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderServiceComponent } from './order-service.component';
+
+describe('OrderServiceComponent', () => {
+  let component: OrderServiceComponent;
+  let fixture: ComponentFixture<OrderServiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderServiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
new file mode 100644
index 00000000..5a6bf6a2
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
@@ -0,0 +1,197 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,  
+  FormGroup,
+  Validators
+} from '@angular/forms';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { NzMessageService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-order-service',
+  templateUrl: './order-service.component.html',
+  styleUrls: ['./order-service.component.less']
+})
+export class OrderServiceComponent implements OnInit {
+
+  validateForm: FormGroup;
+  validateForm1: FormGroup;
+  validateForm2: FormGroup;
+  l2vpn:object = {};
+  siteData:object = {};
+  tipMsg: String = "serviceCreationInitiated";
+  displayMsg:boolean = false;
+  displayMsg2:boolean = false;
+  buttonDisabled:boolean = false;
+  intervalData:any;
+  baseUrl:string = '/api/usecaseui-server/v1';
+  expandDataSet = [
+    { rowIdx: 1, name: 'Service', expand: true },
+    { rowIdx: 2, name: 'VPN', expand: true },
+    { rowIdx: 3, name: 'UNI', expand: true }
+  ];
+  uni = {
+    sotnuni_cVLAN:"asdf",
+    sotnuni_tpId:"asdf"
+  };
+  sotnUni = [
+    {
+      sotnuni_cVLAN:"asdf",
+      sotnuni_tpId:"saf"
+    }
+  ];
+
+  constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService) { }
+
+  ngOnInit() {
+    this.validateForm = this.fb.group({
+      name:[null, [Validators.required]],
+      description:[null, [Validators.required]],
+      l2vpn_name:[null, [Validators.required]],
+      l2vpn_dualLink:[null, [Validators.required]],
+      l2vpn_description:[null, [Validators.required]],
+      l2vpn_SLS:[null, [Validators.required]],
+      l2vpn_COS:[null, [Validators.required]],
+      l2vpn_tenantId:[null, [Validators.required]],
+      l2vpn_vpnType:[null, [Validators.required]],
+      l2vpn_cbs:[null, [Validators.required]],
+      l2vpn_ebs:[null, [Validators.required]],
+      l2vpn_colorAware:[null, [Validators.required]],
+      l2vpn_reroute:[null, [Validators.required]],
+      l2vpn_couplingFlag:[null, [Validators.required]],
+      l2vpn_cir:[null, [Validators.required]],
+      l2vpn_eir:[null, [Validators.required]],
+      l2vpn_startTime:[null, [Validators.required]],
+      l2vpn_endTime:[null, [Validators.required]],
+      sotnuni_cVLAN:[null, [Validators.required]],
+      sotnuni_tpId:[null, [Validators.required]],
+    });
+    // this.validateForm1 = this.fb.group({
+    //   l2vpn_name:[null, [Validators.required]],
+    //   l2vpn_dualLink:[null, [Validators.required]],
+    //   l2vpn_description:[null, [Validators.required]],
+    //   l2vpn_SLS:[null, [Validators.required]],
+    //   l2vpn_COS:[null, [Validators.required]],
+    //   l2vpn_tenantId:[null, [Validators.required]],
+    //   l2vpn_vpnType:[null, [Validators.required]],
+    //   l2vpn_cbs:[null, [Validators.required]],
+    //   l2vpn_ebs:[null, [Validators.required]],
+    //   l2vpn_colorAware:[null, [Validators.required]],
+    //   l2vpn_reroute:[null, [Validators.required]],
+    //   l2vpn_couplingFlag:[null, [Validators.required]],
+    //   l2vpn_cir:[null, [Validators.required]],
+    //   l2vpn_eir:[null, [Validators.required]],
+    //   l2vpn_startTime:[null, [Validators.required]],
+    //   l2vpn_endTime:[null, [Validators.required]],
+    // });
+    // this.validateForm2 = this.fb.group({
+    //   sotnuni_cVLAN:[null, [Validators.required]],
+    //   sotnuni_tpId:[null, [Validators.required]],
+    // });
+  }
+
+  numberOnly(event): boolean {
+    const charCode = (event.which) ? event.which : event.keyCode;
+    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+        }
+    return true;
+  }
+
+  addUNI () {
+    this.sotnUni.push(this.uni);
+    // this.uni = {};
+  }
+
+  selectOrderSiteData(): void {
+    if (!this.validateVpnAndUni() ||
+      !this.validateServices() ) {
+      this.displayMsg = true;
+      this.message.error("Please fill all mandatory fields");
+      var comp = this;
+      setTimeout(function () {
+        comp.displayMsg = false;
+      }, 5000);
+    } else {
+      this.putnewSotnSiteData()
+    }
+  }
+
+  validateServices (): boolean {
+    if (this.siteData["name"] == null ||
+      this.siteData["description"] == null) {
+        return false;
+    }
+    return true;
+  }
+
+  validateVpnAndUni (): boolean {
+    if (this.l2vpn["l2vpn_COS"] == null ||
+      this.l2vpn["l2vpn_dualLink"] == null ||
+      this.l2vpn["l2vpn_description"] == null ||
+      this.l2vpn["l2vpn_name"] == null ||
+      this.l2vpn["l2vpn_tenantId"] == null ||
+      this.l2vpn["l2vpn_vpnType"] == null ||
+      this.l2vpn["l2vpn_cbs"] == null ||
+      this.l2vpn["l2vpn_ebs"] == null ||
+      this.l2vpn["l2vpn_colorAware"] == null ||
+      this.l2vpn["l2vpn_cir"] == null ||
+      this.l2vpn["l2vpn_startTime"] == null ||
+      this.l2vpn["l2vpn_endTime"] == null ||
+      this.l2vpn["l2vpn_eir"] == null ||
+      this.l2vpn["l2vpn_SLS"] == null ||
+      this.sotnUni.length == 0 ||
+      this.l2vpn["l2vpn_reroute"] == null) {
+        return false;
+    }
+    return true;
+  }
+
+  putnewSotnSiteData() {
+    console.log("order service data===>", this.siteData)
+    let comp = this;
+    this.message.info('Instantiation In Progress');
+    this.buttonDisabled = true;
+    let body = JSON.stringify(this.siteData);
+    const httpOptions = {
+      headers: new HttpHeaders({
+       'Content-Type': 'application/json',
+      })
+    };
+    let url1 = this.baseUrl + '/uui-lcm/Sotnservices';
+    // this.http.post<any>(url1, body, httpOptions).subscribe((data) => { 
+    //   let comp = this;
+    //   this.message.info('Instantiation In Progress');
+    //   comp.displayMsg2 = true;
+    //   this.intervalData = setInterval(() => {
+    //     let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId;
+    //     this.http.get<any>(url2, {}).subscribe((data) => {
+    //       if (data.status == "1") {
+    //         clearInterval(comp.intervalData);
+    //         comp.displayMsg2 = true;
+    //         comp.message.success('Service Created');
+    //         comp.goToPage();
+    //       }
+    //       else {
+    //         comp.message.info('Instantiation In Progress');
+    //         comp.displayMsg2 = true;
+    //       }
+    //     }, (err) => {
+    //       console.log(err);
+    //     });
+    //   }, 1000);
+    // }, (err) => {
+    //   console.log(err);
+    // });
+    setTimeout(() => {
+      comp.message.success("Service Created");
+      comp.goToPage();
+    }, 3000);
+  }
+
+  goToPage(): void {
+    setTimeout(function () {
+      // document.getElementById('manageService').click();
+    }, 1000);
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html
new file mode 100644
index 00000000..12fcb851
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html
@@ -0,0 +1,17 @@
+<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing">
+  <nz-tab nzTitle="Order Service">
+    <app-order-service
+            *ngIf="currentTab ==='Order Service'"
+    ></app-order-service>
+  </nz-tab>
+  <nz-tab nzTitle="Manage Service" >
+    <app-manage-service
+            *ngIf="currentTab ==='Manage Service'"
+    ></app-manage-service>
+  </nz-tab>
+  <nz-tab nzTitle="Monitor Service">
+    <app-monitor-service
+            *ngIf="currentTab ==='Monitor Service'"
+    ></app-monitor-service>
+  </nz-tab>
+</nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less
new file mode 100644
index 00000000..dae93f22
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less
@@ -0,0 +1,3 @@
+.slicing-content{
+    padding: 20px;
+  }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts
new file mode 100644
index 00000000..071a6789
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SotnManagementComponent } from './sotn-management.component';
+
+describe('SotnManagementComponent', () => {
+  let component: SotnManagementComponent;
+  let fixture: ComponentFixture<SotnManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SotnManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SotnManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts
new file mode 100644
index 00000000..84886f31
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+
+@Component({
+  selector: 'app-sotn-management',
+  templateUrl: './sotn-management.component.html',
+  styleUrls: ['./sotn-management.component.less'],
+  animations: [slideToRight]
+})
+export class SotnManagementComponent implements OnInit {
+
+  @HostBinding('@routerAnimate') routerAnimateState;
+
+  currentTab = 'Order Service';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  
+  handleTabChange($event): void {
+      console.log($event,"$event");
+      this.currentTab = $event.tab._title;
+  }
+}