From f23ed2484b1a51ed11e6d0b104f3c31f63ab8b45 Mon Sep 17 00:00:00 2001 From: seshukm Date: Mon, 24 Feb 2020 21:19:03 +0800 Subject: change for the slice mgmt UI Issue-ID: USECASEUI-387 Signed-off-by: seshukm Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79 --- .../monitor-service/monitor-service.component.html | 43 +++ .../monitor-service/monitor-service.component.less | 98 ++++++ .../monitor-service.component.spec.ts | 25 ++ .../monitor-service/monitor-service.component.ts | 330 +++++++++++++++++++++ 4 files changed, 496 insertions(+) create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts (limited to 'usecaseui-portal/src/app/views/services/sotn-management/monitor-service') 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 @@ +
+
+ + + + + + + + + + + +
+ {{"i18nTextDefine_subscriptionType" | translate}} + + + + + + + {{"i18nTextDefine_serviceInstance" | translate}} + + + + + + Topology + + + + +
+
+ +
+
+
+
+
\ 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; + + 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 = '
\ + Node Information\ + \ + \ + \ + \ + \ + \ + \ + \ + '; + Object.entries(filteredNode[0].dataNode).forEach(entry => { + if( entry[1] !== "null") + { + t1 += '\ + \ + \ + \ + '; + } + }); + t1 += '\ +
SpecificationValue
'+ entry[0] + ':'+ entry[1] + '
\ +
\ + '; + 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); + } + } + +} -- cgit 1.2.3-korg