diff options
author | 2020-02-24 21:19:03 +0800 | |
---|---|---|
committer | 2020-02-25 12:43:50 +0000 | |
commit | f23ed2484b1a51ed11e6d0b104f3c31f63ab8b45 (patch) | |
tree | aaa5883278cf83b1fca026ee3b10b47ce59f48ba /usecaseui-portal/src/app/views/services/sotn-management/monitor-service | |
parent | c6b270f19596b513d4a855d40c55ac754b726955 (diff) |
change for the slice mgmt UI
Issue-ID: USECASEUI-387
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79
Diffstat (limited to 'usecaseui-portal/src/app/views/services/sotn-management/monitor-service')
4 files changed, 496 insertions, 0 deletions
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); + } + } + +} |