USECASEUI-414 Add Inter-Domain Link provisioning support for MDONS

Issue-ID: USECASEUI-414
Change-Id: Ic9f94e4637a5b98ab885e6189842b55a0b38955b
Signed-off-by: Arjun M Gupta <arjun.manigupta@us.fujitsu.com>

14 files changed, 714 insertions, 12 deletions

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index e3be9e84..6a6d414d 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -28,8 +28,8 @@ import { AlarmComponent } from './views/alarm/alarm.component';
 import { PerformanceComponent } from './views/performance/performance.component';
 import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
 import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
-
-import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component';
+import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component';
+import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component';
 import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
 import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
 import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
@@ -63,7 +63,8 @@ const routes: Routes = [
   { path: 'performance', component: PerformanceComponent },
   { path: 'performance/performance-vnf', component: PerformanceVnfComponent },
   { path: 'performance/performance-vm', component: PerformanceVmComponent },
-  { path: 'network', component: CcvpnNetworkComponent },
+  { path: 'network/ccvpn-network', component: CcvpnNetworkComponent },
+  { path: 'network/mdons-network', component: MdonsNetworkComponent },
   { path: '**', redirectTo: 'home', pathMatch: 'full' }
 ];
 
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 32e3fc08..c8240a7d 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -87,17 +87,23 @@
       </li>
       <hr>
       <!-- network page -->
-      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'network'}">
-        <a routerLink="network">
+      <li nz-submenu [ngClass]="{'activeMenuBar': url.indexOf('network') === 0}" [nzOpen]="network_flag">
           <span title>
             <i>
               <img
-                src="{{url === 'network' ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
+                src="{{url.indexOf('network') === 0 ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
                 alt="home">
             </i>
             <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
           </span>
-        </a>
+          <ul>
+            <li nz-menu-item [ngClass]="{'activeMenuList': url === 'network/ccvpn-network'}">
+              <a routerLink='network/ccvpn-network'> {{"i18nTextDefine_CCVPNNetwork" | translate}} </a>
+            </li>
+            <li nz-menu-item [ngClass]="{'activeMenuList': url === 'network/mdons-network'}">
+              <a routerLink='network/mdons-network'> {{"i18nTextDefine_MDONSNetwork" | translate}} </a>
+            </li>
+          </ul>
       </li>
       <hr>
       <!-- monitor page -->
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index 90d5606f..7abec444 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -81,5 +81,13 @@ export class AppComponent {
             return false
         }
     }
+    // Whether the submenu expands the identifier
+    get network_flag () {
+        if(!this.url.indexOf('network')){
+            return true
+        }else{
+            return false
+        }
+    }
 
 }
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 137d0b6c..6cb30500 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -49,11 +49,12 @@ import { AlarmComponent } from './views/alarm/alarm.component';
 import { PerformanceComponent } from './views/performance/performance.component';
 import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
 import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
-import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component';
+import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component';
 import { CcvpnDetailComponent } from './views/services/services-list/ccvpn-detail/ccvpn-detail.component';
 import { CcvpnCreationComponent } from './views/services/services-list/ccvpn-creation/ccvpn-creation.component';
 import { MdonsDetailComponent } from './views/services/services-list/mdons-detail/mdons-detail.component';
 import { MdonsCreationComponent } from './views/services/services-list/mdons-creation/mdons-creation.component';
+import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component';
 
 import { DetailsComponent } from './shared/components/details/details.component';
 import { GraphiclistComponent } from './shared/components/graphiclist/graphiclist.component';
@@ -178,7 +179,8 @@ import { fakeBackendProvider } from '../../testBE/FakeBackendInterceptor';
     SotnManagementComponent,
     OrderServiceComponent,
     ManageServiceComponent,
-    MonitorServiceComponent
+    MonitorServiceComponent,
+    MdonsNetworkComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css
index 53cf02b4..53cf02b4 100644
--- a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.css
diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html
index fb025d96..fb025d96 100644
--- a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.html
diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.spec.ts
index 9ec321c5..9ec321c5 100644
--- a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.spec.ts
diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts
index a2f9561c..56009546 100644
--- a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/views/network/ccvpn-network/ccvpn-network.component.ts
@@ -16,7 +16,7 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
-import { networkHttpservice } from '../../core/services/networkHttpservice.service';
+import { networkHttpservice } from '../../../core/services/networkHttpservice.service';
 
 @Component({
     selector: 'app-ccvpn-network',
diff --git a/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.html b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.html
new file mode 100644
index 00000000..2fb79db1
--- /dev/null
+++ b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.html
@@ -0,0 +1,99 @@
+<!--
+    Copyright (C) 2020 Fujitsu Network Communications, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+
+<nz-spin nzTip="Loading resource details..." [nzSpinning]="isSpinning" nzSize="large">
+<div>
+    <h1>{{"i18nTextDefine_InterDomainTitle" | translate}}</h1>
+    <form id="createForm">
+        <ul> 
+            <li>
+                <label for="linkName"><span class="red-span">*</span>{{"i18nTextDefine_LinkName" | translate}}</label>
+                <input nz-input [(ngModel)]="linkName" name="linkName" maxlength="20" required>
+            </li>
+            <li>
+                <h2>{{"i18nTextDefine_NearEnd" | translate}} :</h2>
+            </li>
+            <li>
+                <label for="dm1"><span class="red-span">*</span>{{"i18nTextDefine_Domain" | translate}} 1</label>
+                <nz-select name="dm1" [(ngModel)]="dm1Selected" nzShowSearch nzAllowClear (ngModelChange)="dm1Change()">
+                    <nz-option *ngFor="let dm of dm1List" [nzValue]="dm.id" [nzLabel]="dm.name"></nz-option>
+                </nz-select>
+            </li>
+            <li>
+                <label for="ep1"><span class="red-span">*</span>{{"i18nTextDefine_Node" | translate}} 1</label>
+                <nz-select name="ep1" [disabled]="dm2Disable" [(ngModel)]="endPoint1Selected" nzShowSearch nzAllowClear (ngModelChange)="node1Change()">
+                    <nz-option *ngFor="let node of nodeList1" [nzValue]="node.id" [nzLabel]="node.name"></nz-option>
+                </nz-select>
+            </li>
+            <li>
+                <label for="nni1"><span class="red-span">*</span>{{"i18nTextDefine_Interface" | translate}} 1</label>
+                <nz-select  name="nni1" [disabled]="dm2Disable" [(ngModel)]="pInterface1Selected" nzShowSearch nzAllowClear>
+                    <nz-option *ngFor="let ip of pInterfaceList1" [nzValue]="ip.id" [nzLabel]="ip.name" ></nz-option>
+                </nz-select>
+            </li>
+            <li>
+                <h2>{{"i18nTextDefine_FarEnd" | translate}} :</h2>
+            </li>
+            <li>
+                <label for="dm2"><span class="red-span">*</span>{{"i18nTextDefine_Domain" | translate}} 2</label>
+                <nz-select name="dm2" [disabled]="dm2Disable" [(ngModel)]="dm2Selected" nzShowSearch nzAllowClear (ngModelChange)="dm2Change()">
+                    <nz-option *ngFor="let dm of dm2List" [nzValue]="dm.id" [nzLabel]="dm.name"></nz-option>
+                </nz-select>
+            </li>
+            <li>
+                <label for="ep2"><span class="red-span">*</span>{{"i18nTextDefine_Node" | translate}} 2</label>
+                <nz-select  name="ep2" [disabled]="node2Disable || dm2Disable" [(ngModel)]="endPoint2Selected" nzShowSearch nzAllowClear (ngModelChange)="node2Change()">
+                    <nz-option *ngFor="let node of nodeList2" [nzValue]="node.id" [nzLabel]="node.name"></nz-option>
+                </nz-select>
+            </li>
+            <li>
+                <label for="nni2"><span class="red-span">*</span>{{"i18nTextDefine_Interface" | translate}} 2</label>
+                <nz-select  name="nni2" [disabled]="node2Disable || dm2Disable" [(ngModel)]="pInterface2Selected" nzShowSearch nzAllowClear>
+                    <nz-option *ngFor="let ip of pInterfaceList2" [nzValue]="ip.id" [nzLabel]="ip.name"></nz-option>
+                </nz-select>
+            </li>
+            <!-- future feature add <li>
+                <label nz-checkbox [(ngModel)]="messageShow"  [ngModelOptions]="{standalone: true}"> Is External Network? </label>
+            </li> -->
+        </ul>       
+    </form>
+    <div class="center"><span *ngIf="messageShow" class="red-span">{{"i18nTextDefine_ExternalNetworkMessage" | translate}}</span></div>
+    <button class="submit" [disabled]="isSpinning" nz-button nzType="primary" nzSize="small" (click)="submitForm()" [nzLoading]="isConfirmCreating" form="createForm"><span>{{"i18nTextDefine_CreateLink" | translate}}</span></button>
+    <button class="submit delete topright" nz-button nzType="primary" nzSize="small" (click)="showDelete()"><span>{{"i18nTextDefine_DeleteLink" | translate}}</span></button>
+</div>
+<nz-modal
+    [(nzVisible)]="delBoxisVisible"
+    [nzTitle]="modalTitle"
+    [nzContent]="modalContent"
+    [nzFooter]="modalFooter"
+    (nzOnCancel)="hideDel()">
+    <ng-template #modalTitle>
+        <h2 class="red">{{"i18nTextDefine_DeleteLink" | translate}}</h2>
+    </ng-template>
+    <ng-template #modalContent>
+        <div>
+            <label for="delLinkName"><span class="red-span">*</span>{{"i18nTextDefine_LinkName" | translate}}</label>
+            <nz-select  name="delLinkName" [(ngModel)]="logicalLinkSelected" nzShowSearch nzAllowClear>
+                <nz-option *ngFor="let ll of logicalLinkList" [nzValue]="ll.id" [nzLabel]="ll.name"></nz-option>
+            </nz-select>
+        </div>
+    </ng-template>
+    <ng-template #modalFooter>
+    <button class="delete" nz-button nzType="primary" (click)="delLink()" [nzLoading]="isConfirmDeleting">{{"i18nTextDefine_DeleteLink" | translate}}</button>
+    <button nz-button nzType="default" (click)="hideDel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+    </ng-template>
+</nz-modal>
+</nz-spin>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.less b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.less
new file mode 100644
index 00000000..6a2465f4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.less
@@ -0,0 +1,105 @@
+/*
+    Copyright (C) 2020 Fujitsu Network Communications, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.submit {
+    position: relative;
+    height:41px;
+    background:#0DA9E2;
+    border-radius:6px;
+    margin:auto;.red-span{
+        color: red;
+        margin-right: 3px;
+      }
+    display: block;
+    span {
+        color: #fff;
+        font-weight: 400;
+        font-size: 18px;
+    }
+}
+.delete{
+    background:rgb(185, 41, 15);
+    border-color:rgb(185, 41, 15);
+}
+.topright{
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+ul{
+    margin-left: 30px;
+}
+ul li {
+    margin-bottom: 10px;
+    width: 50%;
+    margin-right: 5%;
+    float: left;
+    text-align: left;
+    input{
+        width: 49%;
+        height: 27px;
+        float:right;
+    }
+}
+label {
+    display: inline-block;
+    width: 50%;
+    min-width: 80px;
+    font: 700 14px "Arial";
+    overflow: hidden;
+    text-align: left;
+    word-break: break-all;
+    margin-top: 12px;
+}
+form{
+    display: inline-block;
+  }
+
+.red{
+    color: rgb(185, 41, 15);
+}
+.red-span{
+    position: relative;
+    font: 700 14px "Arial";
+    color: red;
+    margin: auto;
+}
+.center{
+    display: flex;
+}
+
+h1{
+    background-color: #dce1e7;
+    text-align: center;
+}
+form .ant-select
+{
+    height: 27px;
+}
+.dropdown{
+overflow: visible;
+}
+.ant-modal{
+    width: auto !important;
+}
+.ant-btn-danger{
+    color: #fff;
+    background-color: #ff4d4f;
+    border-color: #ff4d4f;
+}
+div .ant-select
+{
+    width: 100%;
+}
diff --git a/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.spec.ts b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.spec.ts
new file mode 100644
index 00000000..59be9d0c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    Copyright (C) 2020 Fujitsu Network Communications, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MdonsNetworkComponent } from './mdons-network.component';
+
+describe('MdonsNetworkComponent', () => {
+  let component: MdonsNetworkComponent;
+  let fixture: ComponentFixture<MdonsNetworkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MdonsNetworkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MdonsNetworkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.ts b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.ts
new file mode 100644
index 00000000..98f7b434
--- /dev/null
+++ b/usecaseui-portal/src/app/views/network/mdons-network/mdons-network.component.ts
@@ -0,0 +1,416 @@
+/*
+    Copyright (C) 2020 Fujitsu Network Communications, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { Component, OnInit, HostBinding, ViewChild } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+import { ServiceListService } from '../../../core/services/serviceList.service';
+import { networkHttpservice } from '../../../core/services/networkHttpservice.service';
+import { Observable } from 'rxjs';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-mdons-network',
+  templateUrl: './mdons-network.component.html',
+  styleUrls: ['./mdons-network.component.less'],
+  animations: [slideToRight]
+})
+export class MdonsNetworkComponent implements OnInit {
+  
+  @HostBinding('@routerAnimate') routerAnimateState;
+  @ViewChild('notification') notification: any;
+
+  ngOnInit(): void {
+    //Load all the data
+    this.getAllResources().subscribe(() => {
+        this.getDomainList();
+    });
+  }
+  constructor(private serviceHttp: ServiceListService, private networkHttp: networkHttpservice,private modalService: NzModalService)
+  {
+      
+  }
+
+  // variables
+  isSpinning = false;
+  messageShow = false;
+  dm2Disable=true;
+  node2Disable=true;
+  isConfirmCreating = false;
+  linkName = null;
+  data= [];
+  dataNNI=[]
+  dm1List = [];
+  dm1Selected = null;
+  dm2List = [];
+  dm2Selected = null;
+  nodeList1= [];
+  nodeList2= [];
+  endPoint1Selected = null;
+  endPoint2Selected = null;
+  pInterfaceList1= [];
+  pInterfaceList2= [];
+  pInterface1Selected = null;
+  pInterface2Selected = null;
+  logicalLinkList = [];
+  logicalLinkSelected=null;
+  isConfirmDeleting =null;
+
+  delBoxisVisible = false;
+
+  //Fetching All domains and nodes (ie. NNI Nodes)
+  getAllResources():Observable<boolean>{
+    this.isSpinning = true;
+    return new Observable(observer => {
+            this.networkHttp.getNetworkD3Data()
+              .subscribe((data) => {
+                  this.data=data.slice();
+                  if (data.length == 0) {
+                      //write logic for error message
+                      observer.error("No data avaliable");
+                      observer.complete();
+                  }
+            this.serviceHttp.getAllNI("NNI")
+             .subscribe((data) => {
+               this.dataNNI=data.slice();
+                }, (err) => {
+                console.log(err);
+                });
+                  observer.next(true);
+                  observer.complete();
+                  this.isSpinning = false;
+              })
+            }) 
+      }
+
+  //get domain list
+  getDomainList(){
+    for (let i = 0; i < this.data.length; i++) {
+        let dm = {};
+        dm['id']=i;
+        dm['name']=this.data[i]['networkId'];
+        this.dm1List.push(dm);
+    }
+    this.dm2List=this.dm1List.slice();
+  }
+
+  //On change of domain 1
+  dm1Change(): void {
+    this.dm2List=this.dm1List.slice();
+    this.dm2Disable=true;
+    if(this.dm1Selected!=null){
+        this.dm2Selected = null;
+        this.endPoint1Selected = null;
+        this.pInterface1Selected = null;
+        this.dm2List.splice(this.dm1Selected, 1);
+        this.dm2Disable=false;
+        this.getNodeList1();
+     }
+    }
+
+  //On change of domain 2
+  dm2Change(): void {
+    this.node2Disable=true;
+    if(this.dm2Selected!=null){
+        this.endPoint2Selected = null;
+        this.pInterface2Selected = null;
+        this.getNodeList2();
+        this.node2Disable=false;
+     }
+    }
+
+  //Fetch respective nodes for 1
+  getNodeList1(){
+    this.nodeList1=[];
+    for (let i = 0; i < this.data[this.dm1Selected]["pnfs"].length; i++) {
+        let node={};
+        node['id']=this.data[this.dm1Selected]['pnfs'][i]['pnfName'];     
+        this.serviceHttp.getPnfDetail(this.data[this.dm1Selected]['pnfs'][i]['pnfName'])
+            .subscribe((data) => {
+               node['name']=data['pnf-id']
+            }, (err) => {
+                console.log(err);
+            });
+            this.nodeList1.push(node);
+    }
+  }
+
+  //Fetch respective nodes for 1
+  getNodeList2(){
+    this.nodeList2=[];
+    for (let i = 0; i < this.data[this.dm2Selected]["pnfs"].length; i++) {
+        let node={};
+        node['id']=this.data[this.dm2Selected]['pnfs'][i]['pnfName'];     
+        this.serviceHttp.getPnfDetail(this.data[this.dm2Selected]['pnfs'][i]['pnfName'])
+            .subscribe((data) => {
+               node['name']=data['pnf-id']
+            }, (err) => {
+                console.log(err);
+            });
+            this.nodeList2.push(node);
+    }
+  }
+
+   //On change of node 1
+  node1Change(): void {
+        this.pInterface1Selected = null;
+        this.getPInterfaces1();
+    }
+
+  //Get the Physical Interface data under the node 1
+  getPInterfaces1() {
+        let params = {
+            pnfName: this.endPoint1Selected,
+        };
+        this.networkHttp.getPInterfacesData(params)
+            .subscribe((data) => {
+                this.pInterfaceList1 = [];
+                let iplist=[];
+                for (let i = 0; i < data.length; i++) {
+                    let pi = {};
+                    this.dataNNI.find(function(element) { 
+                         if (element.includes(data[i]['interface-name']))
+                         {
+                            pi['id']= data[i]['interface-name'];
+                            pi['name']= element.replace(data[i]['interface-name'],"");
+                            iplist.push(pi);
+                            return true;
+                         } 
+                         return false;
+                      })
+                }
+                this.pInterfaceList1=iplist.slice();
+            }, (err) => {
+                console.log(err);
+            });
+    }
+
+  //On change of node 2
+  node2Change(): void {
+        this.pInterface2Selected = null;
+        this.getPInterfaces2();
+    }
+
+  //Get the Physical Interface data under the node 2
+  getPInterfaces2() {
+    let params = {
+        pnfName: this.endPoint2Selected,
+    };
+    this.networkHttp.getPInterfacesData(params)
+        .subscribe((data) => {
+            this.pInterfaceList2 = [];
+            let iplist=[];
+            for (let i = 0; i < data.length; i++) {
+                let pi = {};
+                this.dataNNI.find(function(element) { 
+                     if (element.includes(data[i]['interface-name']))
+                     {
+                        pi['id']= data[i]['interface-name'];
+                        pi['name']= element.replace(data[i]['interface-name'],"");
+                        iplist.push(pi);
+                        return true;
+                     } 
+                     return false;
+                  });
+            }
+            this.pInterfaceList2=iplist.slice();
+        }, (err) => {
+            console.log(err);
+        });
+    }
+  //Create Logical connection, call interface createLink
+  createLogicalLink() {
+    let params = {
+        'link-name': this.linkName,
+        'link-type': 'inter-domain',
+        'operational-status': 'up',
+        'relationship-list': {
+            'relationship': [
+                {
+                    'related-to': 'p-interface',
+                    'related-link': '/aai/v14/network/pnfs/pnf/' + this.endPoint1Selected + '/p-interfaces/p-interface/' + this.pInterface1Selected,
+                    'relationship-data': [
+                        {
+                            'relationship-key': 'pnf.pnf-id',
+                            'relationship-value': this.endPoint1Selected
+                        },
+                        {
+                            'relationship-key': 'p-interface.p-interface-id',
+                            'relationship-value': this.pInterface1Selected,
+                        }
+                    ]
+                },
+                {
+                    'related-to': 'p-interface',
+                    'related-link': '/aai/v14/network/pnfs/pnf/' + this.endPoint2Selected + '/p-interfaces/p-interface/' + this.pInterface2Selected,
+                    'relationship-data': [
+                        {
+                            'relationship-key': 'pnf.pnf-id',
+                            'relationship-value': this.endPoint2Selected
+                        },
+                        {
+                            'relationship-key': 'p-interface.p-interface-id',
+                            'relationship-value': this.pInterface2Selected
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+    this.networkHttp.createLink(params)
+        .subscribe((data) => {
+            if (data['status'] == 'SUCCESS') {
+                this.queryLogicalLink();
+            }
+            else if (data['status'] == 'FAILED') {
+                console.log("Link Creation Failed : ", data);
+                alert('\n\nLink Creation FAILED');
+                this.isConfirmCreating=false;
+            }
+        }, (err) => {
+            console.log(err);
+            console.log('Create connection interface call failed');
+            this.isConfirmCreating=false;
+        });
+    }
+
+  //Query the newly added connection immediately after creating the logical link
+  queryLogicalLink() {
+        let linkName = this.linkName;
+        let params = {
+            'link-name': linkName,
+        };
+        this.networkHttp.querySpecificLinkInfo(params)
+            .subscribe((data) => {
+                console.log("Created Link: ", data);
+                alert('\n\nLink Created With, \n\nName : ' + data['link-name'] + '\nResource version : ' + data['resource-version']);
+
+                //Resetting the form
+                this.linkName = null;
+                this.dm1Selected = null;
+                this.dm2Selected = null;
+                this.endPoint1Selected = null;
+                this.endPoint2Selected = null;
+                this.pInterface1Selected = null;
+                this.pInterface2Selected = null;
+                this.dm2Disable=true;
+                this.node2Disable=true;
+                this.isConfirmCreating=false;
+            }, (err) => {
+                console.log(err);
+            });
+    }
+
+  //When the form is submitted  
+  submitForm(){
+      this.isConfirmCreating=true;
+        if (this.linkName == null ||this.linkName == ''|| this.dm1Selected == null || this.dm2Selected == null || this.endPoint1Selected == null || this.endPoint2Selected == null || this.pInterface1Selected == null || this.pInterface2Selected == null) {
+            alert('Mandatory fields cannot be empty. Please select the right information.');
+            this.isConfirmCreating=false;
+            return;
+        } 
+        else{
+            this.createLogicalLink();
+        }
+    }
+
+  //Pop for confirming deletion
+  showDeleteConfirm(): void {
+        this.modalService.confirm({
+          nzTitle: 'Confirm',
+          nzContent: '<b>Are you sure you want to delete the link?</b>',
+          nzOkText: 'Yes',
+          nzOkType: 'danger',
+          nzOnOk: () => this.deteleLink(),
+          nzCancelText: 'No'
+        });
+    }
+
+   //When detele link is clicked  
+  showDelete(){
+        this.getLinksData();
+        this.delBoxisVisible = true;
+    }
+
+  //Delete link validaton
+  delLink(){
+        if (this.logicalLinkSelected===null || this.logicalLinkSelected.length===0) {
+            alert('Mandatory fields cannot be empty. Please select the right information.');
+            return;
+        } 
+        else{
+            this.showDeleteConfirm();
+        }
+    }
+
+   //Delete link
+  deteleLink(){
+    this.isConfirmDeleting = true;
+    let params = {
+        'logical-link': this.logicalLinkList[this.logicalLinkSelected]['name'],
+        'resource-version': this.logicalLinkList[this.logicalLinkSelected]['resourceVersion'],
+    };
+    this.networkHttp.deleteLink(params)
+        .subscribe((data) => {
+            if (data['status'] == 'SUCCESS') {
+                alert('Link ' + this.logicalLinkList[this.logicalLinkSelected]['name'] + ' deleted successfully.');
+                this.delBoxisVisible = false;
+                this.isConfirmDeleting = false;
+                this.logicalLinkSelected = null;
+            }
+            else if (data['status'] == 'FAILED')
+            {
+                this.isConfirmDeleting = false;
+                alert('Link deletion failed!');
+                console.log("Response :", data);
+                console.log('Deleting the logical link failed');
+            }
+        }, (err) => {
+            this.isConfirmDeleting = false;
+            alert('Link deletion failed!');
+            console.log(err);
+            console.log('Deleting a connection interface call failed');
+        });
+    }
+
+  //On cancel of deletion  
+  hideDel(){
+    this.delBoxisVisible=false;
+  }
+
+  //Get Logical links
+  getLinksData() {
+    this.isSpinning = true;
+    this.logicalLinkList=[];
+    this.networkHttp.getLogicalLinksData()
+        .subscribe((data) => {
+            let j = 0;
+            for (let i = 0; i < data['logical-link'].length; i++) {
+                if(data['logical-link'][i]['link-type']=="inter-domain"){
+                    let logicalLink = {};
+                    logicalLink['id']=j++;
+                    logicalLink['resourceVersion']=data['logical-link'][i]['resource-version'];
+                    logicalLink['name']=data['logical-link'][i]['link-name'];
+                    this.logicalLinkList.push(logicalLink);
+                }
+            }
+            this.isSpinning = false;
+        }, (err) => {
+            alert('Fetching logical links failed!');
+            console.log(err);
+            console.log('Fetching logical links failed!');
+            this.isSpinning = false;
+        })
+    }
+}
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index f8ec2481..225330b1 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -12,6 +12,8 @@
   "i18nTextDefine_Alarm": "告警",
   "i18nTextDefine_Performance": "性能",
   "i18nTextDefine_NetworkTopology": "网络拓扑",
+  "i18nTextDefine_CCVPNNetwork":"CCVPN网络",
+  "i18nTextDefine_MDONSNetwork":"MDONS网络",
 
   "home-component": "--:",
   "i18nTextDefine_SERVICES": "服务",
@@ -155,5 +157,16 @@
   "i18nTextDefine_resourceTopology": "资源拓扑",
   "i18nTextDefine_orderService":"订购服务",
   "i18nTextDefine_monitorService":"监控服务", 
-  "i18nTextDefine_manageService":"管理服务"
+  "i18nTextDefine_manageService":"管理服务",
+
+  	
+  "mdons-network-component":"--:",
+  "i18nTextDefine_InterDomainTitle": "域间链接",
+  "i18nTextDefine_Domain":"域",
+  "i18nTextDefine_Interface": "接口",
+  "i18nTextDefine_ResourceVersion": "资源版本",
+  "i18nTextDefine_NearEnd": "近端",
+  "i18nTextDefine_FarEnd": "远端",
+  "i18nTextDefine_ExternalNetworkMessage":"注意：两个端点都将更改为ENNI。"
+	
 }
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index 41b7c8d8..8d57aae5 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -12,6 +12,8 @@
   "i18nTextDefine_Alarm": "Alarm",
   "i18nTextDefine_Performance": "Performance",
   "i18nTextDefine_NetworkTopology": "Network Topology",
+  "i18nTextDefine_CCVPNNetwork":"CCVPN Network",
+  "i18nTextDefine_MDONSNetwork":"MDONS Network",
 
   "home-component": "--:",
   "i18nTextDefine_SERVICES": "SERVICES",
@@ -154,5 +156,15 @@
   "i18nTextDefine_resourceTopology": "Resource Topology",
   "i18nTextDefine_orderService":"Order Service",
   "i18nTextDefine_monitorService":"Monitor Service", 
-  "i18nTextDefine_manageService":"Manage Service"
+  "i18nTextDefine_manageService":"Manage Service",
+
+
+  "mdons-network-component":"--:",
+  "i18nTextDefine_InterDomainTitle": "Inter-domain link",
+  "i18nTextDefine_Domain":"Domain",
+  "i18nTextDefine_Interface": "Interface",
+  "i18nTextDefine_ResourceVersion": "Resource version",
+  "i18nTextDefine_NearEnd": "Near End",
+  "i18nTextDefine_FarEnd": "Far End",
+  "i18nTextDefine_ExternalNetworkMessage":"Note: Both the endpoints would be changed to ENNI."
 }