diff options
Diffstat (limited to 'usecaseui-portal')
19 files changed, 731 insertions, 22 deletions
diff --git a/usecaseui-portal/package-lock.json b/usecaseui-portal/package-lock.json index 4263998f..2ae3b21c 100644 --- a/usecaseui-portal/package-lock.json +++ b/usecaseui-portal/package-lock.json @@ -3932,12 +3932,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3957,7 +3959,8 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -4105,6 +4108,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } 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/mock/json/slicing_business_list.json b/usecaseui-portal/src/app/mock/json/slicing_business_list.json index bedefa98..f57945e8 100644 --- a/usecaseui-portal/src/app/mock/json/slicing_business_list.json +++ b/usecaseui-portal/src/app/mock/json/slicing_business_list.json @@ -11,8 +11,8 @@ "service_instance_name": "slicing-01-eMBB", "service_type": "eMMB", "service_snssai": "1-010101", - "orchestration_status": "activated", - "last_operation_type": "activate", + "orchestration_status": "processing", + "last_operation_type": "processing", "last_operation_progress": 80 }, { @@ -21,7 +21,7 @@ "service_type": "eMMB", "service_snssai": "1-010101", "orchestration_status": "activated", - "last_operation_type": "activate", + "last_operation_type": "DELETE", "last_operation_progress": 99 }, { 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/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index 936338dc..6b43a8af 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -54,7 +54,7 @@ </td> <td> <div class="action-icon"> - <i [ngClass]="{'cannotclick':data.order_status === 'processing' || data.order_status === 'error' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}" + <i [ngClass]="{'cannotclick':data.order_status !== 'deactivated' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}" nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" (click)="terminate(data,i)"></i> <nz-progress diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html index 14c51f19..640ba3b4 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html @@ -43,7 +43,7 @@ <td> <div class="action-icon"> <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false" - [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'" + [nzDisabled]="data.orchestration_status === 'processing' || (data.orchestration_status !== 'processing' && data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100')" (ngModelChange)="switchChange(data,i)"></nz-switch> <nz-progress *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'" @@ -51,11 +51,11 @@ </nz-progress> </div> <div class="action-icon"> - <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.orchestration_status==='activated')}" + <i [ngClass]="{'cannotclick': data.orchestration_status !== 'deactivated' || (data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.orchestration_status==='activated'))}" nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" (click)="terminate(data,i)"></i> <nz-progress - *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart" + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]" [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"> </nz-progress> </div> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts index 39e5f1d2..d5cda96c 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -149,7 +149,10 @@ export class SlicingTaskManagementComponent implements OnInit { if (this.selectedValue && this.selectedValue !== 'all') { this.getListOfProcessingStatus(); } else { - this.getTaskList(); + this.loading = true; + setTimeout(() => { + this.getTaskList() + }, 5000); } } } diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index bcb7851d..fdee1adf 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 dd967e94..9a453e08 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." } |