From: Andrei_Barcovschi Date: Fri, 8 Feb 2019 03:13:29 +0000 (+0000) Subject: Add Pagination and sorting X-Git-Tag: 1.4.1~305^2 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=375d173bf4fbd62349e67e7b09a6541d1184b0a6;p=so.git Add Pagination and sorting Change-Id: I1374472395a5a2af712c5f06c756c013de08bd27 Issue-ID: SO-1406 Signed-off-by: Andrei_Barcovschi --- diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts index 3d736edb95..23308639b6 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts @@ -1,79 +1,75 @@ -/** -============LICENSE_START======================================================= - Copyright (C) 2018 Ericsson. 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. - -SPDX-License-Identifier: Apache-2.0 -============LICENSE_END========================================================= - -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com -*/ - -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { SidebarComponent } from './sidebar/sidebar.component'; -import { TopbarComponent } from './topbar/topbar.component'; -import { HomeComponent } from './home/home.component'; -import { HttpClientModule } from '@angular/common/http'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatTableModule } from '@angular/material'; -import { DetailsComponent } from './details/details.component'; -import { ToastrNotificationService } from './toastr-notification-service.service'; -import { MatTabsModule } from '@angular/material/tabs'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatSelectModule } from '@angular/material/select'; -import { MatFormFieldModule, MatInputModule } from '@angular/material'; -import { MatDatepickerModule } from '@angular/material/datepicker'; -import { MatNativeDateModule } from '@angular/material'; -import { MatCardModule } from '@angular/material/card'; -import { NgxSpinnerModule } from 'ngx-spinner'; -import { RouterModule, Routes } from '@angular/router'; -import { APP_BASE_HREF } from '@angular/common'; - -@NgModule({ - declarations: [ - AppComponent, - SidebarComponent, - TopbarComponent, - HomeComponent, - DetailsComponent - ], - imports: [ - BrowserModule, - AppRoutingModule, - HttpClientModule, - FormsModule, - MatTableModule, - MatTabsModule, - BrowserAnimationsModule, - MatSelectModule, - MatFormFieldModule, - MatInputModule, - MatDatepickerModule, - MatNativeDateModule, - MatCardModule, - NgxSpinnerModule, - RouterModule, - RouterModule.forRoot([]) - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ], - providers: [ToastrNotificationService], - bootstrap: [AppComponent] -}) -export class AppModule { } +/** +============LICENSE_START======================================================= + Copyright (C) 2018 Ericsson. 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. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +*/ + +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { SidebarComponent } from './sidebar/sidebar.component'; +import { TopbarComponent } from './topbar/topbar.component'; +import { HomeComponent } from './home/home.component'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { DetailsComponent } from './details/details.component'; +import { ToastrNotificationService } from './toastr-notification-service.service'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule } from '@angular/material'; +import { NgxSpinnerModule } from 'ngx-spinner'; +import { RouterModule, Routes } from '@angular/router'; +import { APP_BASE_HREF } from '@angular/common'; + +@NgModule({ + declarations: [ + AppComponent, + SidebarComponent, + TopbarComponent, + HomeComponent, + DetailsComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + FormsModule, + MatTableModule, + MatTabsModule, + BrowserAnimationsModule, + MatSelectModule, + MatFormFieldModule, + MatInputModule, + MatDatepickerModule, + MatNativeDateModule, + MatCardModule, + NgxSpinnerModule, + RouterModule, + MatPaginatorModule, + MatSortModule, + RouterModule.forRoot([]) + ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ], + providers: [ToastrNotificationService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts index 834b8c34ea..0438aa3419 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts @@ -1,110 +1,110 @@ -/** -============LICENSE_START======================================================= - Copyright (C) 2018 Ericsson. 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. - -SPDX-License-Identifier: Apache-2.0 -============LICENSE_END========================================================= - -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com -*/ - -import { TestBed, inject } from '@angular/core/testing'; - -import { DataService } from './data.service'; -import { HttpClient } from '@angular/common/http'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { async } from '@angular/core/testing'; -import { HttpClientModule } from '@angular/common/http'; -import { ToastrNotificationService } from './toastr-notification-service.service'; -import { environment } from '../environments/environment'; - -class StubbedToastrNotificationService extends ToastrNotificationService { - toastrSettings() { - } -} - -describe('DataService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DataService, { provide: ToastrNotificationService, useClass: StubbedToastrNotificationService }], - imports: [HttpClientTestingModule] - }); - }); - - // Ensure creation of DataService component - it('component should be created', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - expect(service).toBeTruthy(); - }))); - - // Test retrieveInstance function making POST call - it('test retrieveInstance POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.retrieveInstance({}, 1, 2).subscribe(data => { }); - var url = environment.soMonitoringBackendURL + 'v1/search?from=1&to=2'; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('POST'); - mockReq.flush({}); - }))); - - // Test getProcessInstanceId function making GET request to retrieve processInstanceID - it('test getProcessInstanceId GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.getProcessInstanceId("").subscribe(data => { }); - var url = environment.soMonitoringBackendURL + 'process-instance-id/' + ""; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('GET'); - mockReq.flush({}); - }))); - - // Test getActivityInstance function making GET request to retrieve activityInstance - it('test getActivityInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.getActivityInstance("").subscribe(data => { }); - var url = environment.soMonitoringBackendURL + 'activity-instance/' + ""; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('GET'); - mockReq.flush({}); - }))); - - // Test getProcessInstance function making GET request to retrieve processInstance - it('test getProcessInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.getProcessInstance(""); - var url = environment.soMonitoringBackendURL + 'process-instance/' + ""; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('GET'); - }))); - - // Test getProcessDefinition function making GET request to retrieve processDefinition - it('test getProcessDefinition GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.getProcessDefinition("").subscribe(data => { }); - var url = environment.soMonitoringBackendURL + 'process-definition/' + ""; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('GET'); - mockReq.flush({}); - }))); - - // Test getVariableInstance function making GET request to retrieve variableInstance - it('test getVariableInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], - (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { - service.getVariableInstance("").subscribe(data => { }); - var url = environment.soMonitoringBackendURL + 'variable-instance/' + ""; - const mockReq = httpClient.expectOne(url); - expect(mockReq.request.method).toEqual('GET'); - mockReq.flush({}); - }))); -}); +/** +============LICENSE_START======================================================= + Copyright (C) 2018 Ericsson. 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. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +*/ + +import { TestBed, inject } from '@angular/core/testing'; + +import { DataService } from './data.service'; +import { HttpClient } from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { async } from '@angular/core/testing'; +import { HttpClientModule } from '@angular/common/http'; +import { ToastrNotificationService } from './toastr-notification-service.service'; +import { environment } from '../environments/environment'; + +class StubbedToastrNotificationService extends ToastrNotificationService { + toastrSettings() { + } +} + +describe('DataService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DataService, { provide: ToastrNotificationService, useClass: StubbedToastrNotificationService }], + imports: [HttpClientTestingModule] + }); + }); + + // Ensure creation of DataService component + it('component should be created', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + expect(service).toBeTruthy(); + }))); + + // Test retrieveInstance function making POST call + it('test retrieveInstance POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.retrieveInstance({}, 1, 2).subscribe(data => { }); + var url = environment.soMonitoringBackendURL + 'v1/search?from=1&to=2'; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('POST'); + mockReq.flush({}); + }))); + + // Test getProcessInstanceId function making GET request to retrieve processInstanceID + it('test getProcessInstanceId GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.getProcessInstanceId("").subscribe(data => { }); + var url = environment.soMonitoringBackendURL + 'process-instance-id/' + ""; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('GET'); + mockReq.flush({}); + }))); + + // Test getActivityInstance function making GET request to retrieve activityInstance + it('test getActivityInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.getActivityInstance("").then(data => { }); + var url = environment.soMonitoringBackendURL + 'activity-instance/' + ""; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('GET'); + mockReq.flush({}); + }))); + + // Test getProcessInstance function making GET request to retrieve processInstance + it('test getProcessInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.getProcessInstance(""); + var url = environment.soMonitoringBackendURL + 'process-instance/' + ""; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('GET'); + }))); + + // Test getProcessDefinition function making GET request to retrieve processDefinition + it('test getProcessDefinition GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.getProcessDefinition("").subscribe(data => { }); + var url = environment.soMonitoringBackendURL + 'process-definition/' + ""; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('GET'); + mockReq.flush({}); + }))); + + // Test getVariableInstance function making GET request to retrieve variableInstance + it('test getVariableInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService], + (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => { + service.getVariableInstance("").subscribe(data => { }); + var url = environment.soMonitoringBackendURL + 'variable-instance/' + ""; + const mockReq = httpClient.expectOne(url); + expect(mockReq.request.method).toEqual('GET'); + mockReq.flush({}); + }))); +}); diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss index 52ace2f328..2789723964 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss @@ -1,68 +1,72 @@ -/** -============LICENSE_START======================================================= - Copyright (C) 2018 Ericsson. 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. - -SPDX-License-Identifier: Apache-2.0 -============LICENSE_END========================================================= - -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com -*/ - -#canvas { - background: white; - padding: 0; - margin: 0; - width: 70%; - height: 470px; - margin-top: 0; - box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); -} - -#besideCanvas { - background: white; - padding-left: 20px; - margin: 0; - width: 28%; - height: 470px; - margin-top: 0; - box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); - font-family: 'Montserrat', sans-serif; - font-size: 17px; -} - -.topCanvas { - display: flex; - justify-content: space-between; -} - -.mat-column-durationInMillis { - flex: 0 0 8%; -} - -.mat-column-name { - flex: 0 0 40%; -} - -.mat-column-type { - flex: 0 0 8%; -} - -.mat-column-value { - flex: 0 0 52%; -} - -.highlight:not(.djs-connection) .djs-visual > :nth-child(1) { - fill: cyan !important; /* color elements as green */ - } +/** +============LICENSE_START======================================================= + Copyright (C) 2018 Ericsson. 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. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +*/ +#canvas { + background: white; + padding: 0; + margin: 0; + width: 70%; + height: 470px; + margin-top: 0; + box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); +} + +#besideCanvas { + background: white; + padding-left: 20px; + margin: 0; + width: 28%; + height: 470px; + margin-top: 0; + box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); + font-family: 'Montserrat', sans-serif; + font-size: 17px; +} + +.topCanvas { + display: flex; + justify-content: space-between; +} + +.mat-column-durationInMillis { + flex: 0 0 8%; +} + +.mat-column-name { + flex: 0 0 40%; +} + +.mat-column-type { + flex: 0 0 8%; +} + +.mat-column-value { + flex: 0 0 52%; +} + +.highlight:not(.djs-connection) .djs-visual > :nth-child(1) { + fill: cyan !important; + /* color elements as green */ +} + +.tab-group { + word-break: break-all; +} diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html index e4556ca840..0c0e1c04c3 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html @@ -17,7 +17,7 @@ limitations under the License. SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com, andrei.barcovschi@ericsson.com --> @@ -50,26 +50,26 @@ SPDX-License-Identifier: Apache-2.0 - - - - - - - - - - - {{option}} - - - - - - - {{option}} - - + + + + + + + + + + + {{option}} + + + + + + + {{option}} + + @@ -83,26 +83,26 @@ SPDX-License-Identifier: Apache-2.0 - - - - - - - - - - - {{option}} - - - - - - - {{option}} - - + + + + + + + + + + + {{option}} + + + + + + + {{option}} + + @@ -125,42 +125,44 @@ SPDX-License-Identifier: Apache-2.0
- + - Request Id + Request Id {{ process.requestId }} - Instance Id + Instance Id {{ process.serviceInstanceId }} - Instance Name + Instance Name {{ process.serviceIstanceName }} - Network Id + Network Id {{ process.networkId }} - Request Status + Request Status {{ process.requestStatus }} - Service Type + Service Type {{ process.serviceType }} - Start Time + Start Time {{ (process.startTime | date:'yyyy-MM-dd HH:mm:sss Z') }} - End Time + End Time {{ (process.endTime | date:'yyyy-MM-dd HH:mm:sss Z') }} + + diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts index b8fac61adf..25b75d707d 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts @@ -17,27 +17,23 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com, andrei.barcovschi@ericsson.com */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core'; import { DataService } from '../data.service'; import { ActivatedRoute, Router } from "@angular/router"; import { Process } from '../model/process.model'; - import { ProcessInstanceId } from '../model/processInstanceId.model'; import { ToastrNotificationService } from '../toastr-notification-service.service'; import { MatSelectModule } from '@angular/material/select'; -import { ViewEncapsulation } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { MatFormFieldModule, MatInputModule } from '@angular/material'; +import { FormsModule, FormControl } from '@angular/forms'; import { SearchData } from '../model/searchData.model'; import { MatDatepickerModule } from '@angular/material/datepicker'; -import { FormControl } from '@angular/forms'; import { SearchRequest } from '../model/SearchRequest.model'; -import { ElementRef } from '@angular/core'; -import { Input } from '@angular/core'; import { NgxSpinnerService } from 'ngx-spinner'; +import { MatFormFieldModule, MatInputModule, MatPaginator, MatSort, MatTableDataSource } from '@angular/material'; +import { Constants } from './home.constant'; @Component({ selector: 'app-home', @@ -60,24 +56,19 @@ export class HomeComponent implements OnInit { percentagePending = 0; percentageUnlocked = 0; - options = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }]; - statusOptions = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" }, - { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }]; - - hourOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", - "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]; + options = Constants.OPTIONS; + statusOptions = Constants.STATUS_OPTIONS; + hourOptions = Constants.HOUR_OPTIONS; + minuteOptions = Constants.MINUTE_OPTIONS; + displayedColumns = Constants.DISPLAYED_COLUMNS; + pageSizeOptions = Constants.DEFAULT_PAGE_SIZE_OPTIONS; - minuteOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", - "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", - "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", - "56", "57", "58", "59"]; - - processData: Process[]; searchData: SearchData; - startingDate: Date; + processData: MatTableDataSource; - displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime']; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; constructor(private route: ActivatedRoute, private data: DataService, private router: Router, private popup: ToastrNotificationService, @@ -93,16 +84,21 @@ export class HomeComponent implements OnInit { this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds()) .subscribe((data: Process[]) => { this.spinner.hide(); - this.processData = data; + var processData: Process[] = data; + this.processData = new MatTableDataSource(processData); + this.processData.sort = this.sort; + this.processData.paginator = this.paginator; + this.processData.paginator.firstPage(); + this.popup.info("Number of records found: " + data.length) // Calculate Statistics for Service Statistics tab - this.completeVal = this.processData.filter(i => i.requestStatus === "COMPLETE").length; - this.inProgressVal = this.processData.filter(i => i.requestStatus === "IN_PROGRESS").length; - this.failedVal = this.processData.filter(i => i.requestStatus === "FAILED").length; - this.pendingVal = this.processData.filter(i => i.requestStatus === "PENDING").length; - this.unlockedVal = this.processData.filter(i => i.requestStatus === "UNLOCKED").length; - this.totalVal = this.processData.length; + this.completeVal = processData.filter(i => i.requestStatus === "COMPLETE").length; + this.inProgressVal = processData.filter(i => i.requestStatus === "IN_PROGRESS").length; + this.failedVal = processData.filter(i => i.requestStatus === "FAILED").length; + this.pendingVal = processData.filter(i => i.requestStatus === "PENDING").length; + this.unlockedVal = processData.filter(i => i.requestStatus === "UNLOCKED").length; + this.totalVal = processData.length; // Calculate percentages to 2 decimal places and compare to 0 to avoid NaN error if (this.totalVal != 0) { @@ -142,7 +138,5 @@ export class HomeComponent implements OnInit { }); } - ngOnInit() { - - } + ngOnInit() { } } diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts new file mode 100644 index 0000000000..23ef63ff1e --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts @@ -0,0 +1,41 @@ + +/** +============LICENSE_START======================================================= + Copyright (C) 2019 Ericsson. 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. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: andrei.barcovschi@ericsson.com, waqas.ikram@ericsson.com +*/ + +export class Constants { + public static OPTIONS = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }]; + + public static STATUS_OPTIONS = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" }, + { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }]; + + public static HOUR_OPTIONS = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", + "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]; + + public static MINUTE_OPTIONS = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", + "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", + "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", + "56", "57", "58", "59"]; + + public static DISPLAYED_COLUMNS = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime']; + + public static DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]; +}