Additional KPIs in the slicing monitor screen

Issue-ID: USECASEUI-715
Change-Id: I3e18f661d1b80c3bbd6d4872a787cb7b83f75441
Signed-off-by: deepikasatheesh <deepika.s84@wipro.com>

2 files changed, 135 insertions, 7 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
index ea68cd92..4843665a 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -1,7 +1,7 @@
 <div class="monitor-content">
     <h1>Slicing business Monitor</h1>
     <div nz-row>
-        <div nz-col nzSpan="12" class="monitorDate">
+        <div nz-col nzSpan="10" class="monitorDate">
             <nz-date-picker
                     nzShowTime
                     [nzShowToday]="false"
@@ -14,29 +14,53 @@
                     (nzOnOpenChange)="onOpenChange($event)"
             ></nz-date-picker>
         </div>
+        <div nz-col nzSpan="3" class="charts">
+        <h3><nz-form-label class= "colm-s-1 lblCls">Supported KPIs</nz-form-label></h3>
+        </div>
+        <div nz-col nzSpan="8" class="charts">
+            <div class="drop-container">
+                <ng-multiselect-dropdown
+                [placeholder]="'Select KPIs'"
+                [settings]="dropdownSettings"
+                [data]="dropdownList"
+                (onSelect)="onItemSelect($event)"
+                (onDeSelect)="onItemDeSelect()"
+                [(ngModel)]="selectedItems">
+                </ng-multiselect-dropdown>
+            </div>
+        </div>
     </div>
-    <div nz-row nzType="flex" class="charts">
-        <div nz-col nzSpan="6" class="gutter-row col-boxshadow">
+    <div nz-row>
+    <div nz-col nzType="flex" class="charts" *ngFor="let data of selectedItems" [ngSwitch]="data.item_text">
+        <div nz-col nzSpan="6" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingUseTraffic'">
             <nz-spin [nzSpinning]="isSpinningTraffic">
                 <h4>Slicing Use Traffic</h4>
                 <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
                 <div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div>
             </nz-spin>
         </div>
-        <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
+        <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'NumberOfOnlineUsers'">
             <nz-spin [nzSpinning]="isSpinningOnlineuser">
                 <h4>Number Of Online Users</h4>
                 <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
                 <div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div>
             </nz-spin>
         </div>
-        <div nz-col nzSpan="8" class="gutter-row col-boxshadow">
+        <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'SlicingTotalBandwidth'">
             <nz-spin [nzSpinning]="isSpinningBandwidth">
                 <h4>Slicing Total Bandwidth</h4>
                 <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
                 <div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div>
             </nz-spin>
         </div>
+        <div nz-col nzSpan="7" class="gutter-row col-boxshadow" *ngSwitchCase="'PDUSessionEstSR'">
+            <nz-spin [nzSpinning]="isSpinningPDUSessionEstSR">
+                <h4>PDUSessionEstSR</h4>
+                <app-line [initData]="pDUSessionEstSRChartInit" [chartData]="pDUSessionEstSRChartData"></app-line>
+                <div *ngIf="!isSpinningPDUSessionEstSR && pDUSessionEstSRData.length === 0" class="nodata">NO Data</div>
+            </nz-spin>
+        </div>
+    </div>
     </div>
     <div class="slicing-resource-table">
         <div class="slicing-resource-table-list">
@@ -78,4 +102,4 @@
             </nz-table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index 2c763909..04516e52 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -3,6 +3,7 @@ import { SlicingTaskServices } from '.././../../core/services/slicingTaskService
 import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
 import *as moment from 'moment';
 import * as differenceInDays from 'date-fns/difference_in_days';
+import { NzMessageService } from 'ng-zorro-antd';
 @Component({
     selector: 'app-monitor-5g',
     templateUrl: './monitor-5g.component.html',
@@ -11,7 +12,8 @@ import * as differenceInDays from 'date-fns/difference_in_days';
 export class Monitor5gComponent implements OnInit {
 
     constructor(
-        private myhttp: SlicingTaskServices
+        private myhttp: SlicingTaskServices,
+        private msg: NzMessageService
     ) {
     }
     today = new Date();
@@ -25,6 +27,7 @@ export class Monitor5gComponent implements OnInit {
     isSpinningTraffic: boolean =true;
     isSpinningOnlineuser: boolean =true;
     isSpinningBandwidth: boolean =true;
+    isSpinningPDUSessionEstSR: boolean =true;
 
     trafficData: any[] = [];
     trafficLegend: any[] = [];
@@ -42,10 +45,65 @@ export class Monitor5gComponent implements OnInit {
     bandwidthLegend: any[] = [];
     bandwidthChartInit: Object = lineChartconfig;
     bandwidthChartData: Object;
+
+    pDUSessionEstSRData: any[] = [];
+    pDUSessionEstSRXAxis: any[] = [];
+    pDUSessionEstSRLegend: any[] = [];
+    pDUSessionEstSRChartInit: Object = lineChartconfig;
+    pDUSessionEstSRChartData: Object;
+
+    dropdownList;
+    dropdownSettings;
+    selectedItems = [];
     ngOnInit() {
         this.getBusinessList()
+
+        this.dropdownList = this.getData();
+
+        this.dropdownSettings = {
+          singleSelection: false,
+          idField: 'item_id',
+          textField: 'item_text',
+          selectAllText: 'Select All',
+          unSelectAllText: 'UnSelect All',
+          enableCheckAll: false
+        };
     }
 
+    onItemSelect($event){
+        let data = this.getData();
+        let selectedItem = data.filter(item => item.item_id == $event.item_id);
+        this.dropdownList = data.map(item => {
+          if(this.selectedItems.length >= 3){
+            item.isDisabled = true;
+          } else {
+            item.isDisabled = false;
+          }
+          return item;
+        })
+        if(this.selectedItems.length >= 3){
+          this.msg.warning(`More than 3 KPIs cannot be selected at a time`);
+        }
+      }
+
+      onItemDeSelect(){
+        if(this.selectedItems && this.selectedItems.length < 3){
+          this.dropdownList = this.dropdownList.map(item => {
+            item.isDisabled = false;
+            return item;
+          })
+        }
+      }
+
+      getData() : Array<any>{
+        return [
+          { item_id: 1, item_text: 'SlicingUseTraffic' },
+          { item_id: 2, item_text: 'NumberOfOnlineUsers'},
+          { item_id: 3, item_text: 'SlicingTotalBandwidth'},
+          { item_id: 4, item_text: 'PDUSessionEstSR' }
+        ];
+      }
+
     getBusinessList(): void {
         this.loading = true;
         let paramsObj = {
@@ -109,6 +167,7 @@ export class Monitor5gComponent implements OnInit {
         this.fetchTrafficData(requestBody, time);
         this.fetchOnlineusersData(requestBody, time);
         this.fetchBandwidthData(requestBody, time);
+        this.fetchPDUSessionEstSRData(requestBody, time);
     }
     fetchTrafficData(service_list, time) {
         let getFetchTrafficFailedCallback  = () => {
@@ -186,6 +245,44 @@ export class Monitor5gComponent implements OnInit {
             };
         })
     }
+    fetchPDUSessionEstSRData(service_list, time) {
+        let getFetchPDUSessionEstSRFailedCallback  = () => {
+            this.isSpinningPDUSessionEstSR = false;
+        }
+        this.myhttp.getFetchPDUSessionEstSR(service_list, time, getFetchPDUSessionEstSRFailedCallback).then(res => {
+            this.isSpinningPDUSessionEstSR = false;
+            const { result_body: { slicing_pDUSessionEstSR_list } } = res;
+            this.pDUSessionEstSRXAxis = [];
+            this.pDUSessionEstSRData = [];
+            this.pDUSessionEstSRLegend = [];
+            let filterList = [];
+            filterList = this.filterData(slicing_pDUSessionEstSR_list);
+            console.log(filterList,"filterList----slicing_pDUSessionEstSR");
+            filterList[0].pdusessionEstSRInfoList.map((key) => {
+                let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+                this.pDUSessionEstSRXAxis.push(date)
+            });
+            filterList.forEach((item) => {
+                this.pDUSessionEstSRLegend.push(item.service_id);
+                this.pDUSessionEstSRData.push({
+                    name: item.service_id,
+                    type: 'line',
+                    data: this.getPDUSessionEstSRSeriesData(item)
+                })
+            });
+            this.pDUSessionEstSRChartData = {
+                legend: {
+                    bottom: '0px',
+                    type: 'scroll',
+                    data: this.pDUSessionEstSRLegend
+                },
+                xAxis: {
+                    data: this.pDUSessionEstSRXAxis
+                },
+                series: this.pDUSessionEstSRData
+            };
+        })
+    }
     fetchBandwidthData(service_list, time) {
         let getFetchBandwidthFailedCallback  = () => {
             this.isSpinningBandwidth = false;
@@ -238,6 +335,13 @@ export class Monitor5gComponent implements OnInit {
         })
         return datas
     }
+    getPDUSessionEstSRSeriesData(item) {
+        let datas = [];
+        item.pdusessionEstSRInfoList.forEach((keys) => {
+            datas.push(keys.pduSessionEstSR)
+        })
+        return datas
+    }
     filterData(data){
         let filter = [];
         data.map((item,index) => {