change for the slice mgmt UI

Issue-ID: USECASEUI-387

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

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);
+      }
+  }
+
+}