From: ychacon Date: Thu, 27 May 2021 08:59:56 +0000 (+0200) Subject: Add functionality to truncate amount of instances X-Git-Tag: 2.2.0~8^2 X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=c67856a7992d1884db7315c7a58ffff5e9c97535;p=portal%2Fnonrtric-controlpanel.git Add functionality to truncate amount of instances Issue-ID: NONRTRIC-511 Signed-off-by: ychacon Change-Id: I9ef3425d306c5d56b46a81982f0dc57400513624 --- diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html index 3203c0d..db676a6 100644 --- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html +++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html @@ -25,6 +25,13 @@ + +
+ Too many instances! Only {{slice}} results will be shown. +
{ }); it("should contain number of instances heading and value, create and refresh buttons, and policies table", async () => { - const instancesHeading = hostFixture.debugElement.nativeElement.querySelector( - "div" - ); + const instancesHeading = + hostFixture.debugElement.nativeElement.querySelector("div"); expect(instancesHeading.innerText).toContain("Number of instances: 2"); const createButton: MatButtonHarness = await loader.getHarness( MatButtonHarness.with({ selector: "#createButton" }) ); expect(createButton).toBeTruthy(); - const createIcon = hostFixture.debugElement.nativeElement.querySelector( - "#createIcon" - ); + const createIcon = + hostFixture.debugElement.nativeElement.querySelector("#createIcon"); expect(createIcon.innerText).toContain("add_box"); const refreshButton: MatButtonHarness = await loader.getHarness( MatButtonHarness.with({ selector: "#refreshButton" }) ); expect(refreshButton).toBeTruthy(); - const refreshIcon = hostFixture.debugElement.nativeElement.querySelector( - "#refreshIcon" - ); + const refreshIcon = + hostFixture.debugElement.nativeElement.querySelector("#refreshIcon"); expect(refreshIcon.innerText).toContain("refresh"); const policiesTable = await loader.getHarness( @@ -309,7 +306,7 @@ describe("PolicyInstanceComponent", () => { const lastModifiedCell = (await firstRow.getCells())[3]; (await lastModifiedCell.host()).click(); - // Totally unnecessary call just to make the bloody framework count the number of calls to the spy correctly! + // Totally unnecessary call just to make the framework count the number of calls to the spy correctly! await policiesTable.getRows(); expect(componentUnderTest.modifyInstance).toHaveBeenCalledTimes(4); @@ -494,24 +491,22 @@ describe("PolicyInstanceComponent", () => { it("should not sort when click in filter inputs", async () => { spyOn(componentUnderTest, "stopSort").and.callThrough(); - const idFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector( - "#idSortStop" - ); + const idFilterInputDiv = + hostFixture.debugElement.nativeElement.querySelector("#idSortStop"); idFilterInputDiv.click(); - const targetFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector( - "#targetSortStop" - ); + const targetFilterInputDiv = + hostFixture.debugElement.nativeElement.querySelector("#targetSortStop"); targetFilterInputDiv.click(); - const ownerFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector( - "#ownerSortStop" - ); + const ownerFilterInputDiv = + hostFixture.debugElement.nativeElement.querySelector("#ownerSortStop"); ownerFilterInputDiv.click(); - const lastModifiedFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector( - "#lastModifiedSortStop" - ); + const lastModifiedFilterInputDiv = + hostFixture.debugElement.nativeElement.querySelector( + "#lastModifiedSortStop" + ); lastModifiedFilterInputDiv.click(); expect(componentUnderTest.stopSort).toHaveBeenCalledTimes(4); @@ -521,6 +516,38 @@ describe("PolicyInstanceComponent", () => { expect(eventSpy.stopPropagation).toHaveBeenCalled(); }); + describe("#truncate data", () => { + fit("should verify that data is correctly truncated when needed", async () => { + policyServiceSpy.getPolicyInstancesByType.and.returnValue( + of(policyInstances) + ); + policyServiceSpy.getPolicyInstance.and.callFake(function ( + policyId: string + ) { + return of(policyIdToInstanceMap[policyId]); + }); + policyServiceSpy.getPolicyStatus.and.callFake(function ( + policyId: string + ) { + return of(policyIdToStatusMap[policyId]); + }); + compileAndGetComponents(); + componentUnderTest.slice = 1; + componentUnderTest.ngOnInit(); + + const policiesTable = await loader.getHarness( + MatTableHarness.with({ selector: "#policiesTable" }) + ); + const policyRows = await policiesTable.getRows(); + expect(policyRows.length).toEqual(1); + policyRows[0].getCellTextByColumnName().then((values) => { + expect(expectedPolicy1Row).toEqual(jasmine.objectContaining(values)); + }); + + expect(componentUnderTest.truncated).toBeTruthy(); + }); + }); + describe("#sorting", () => { it("should verify sort functionality on the table", async () => { const sort = await loader.getHarness(MatSortHarness); diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts index 1649d39..5e29f3a 100644 --- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts +++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts @@ -33,7 +33,7 @@ import { BehaviorSubject, forkJoin } from "rxjs"; import { UiService } from "@services/ui/ui.service"; import { FormControl, FormGroup } from "@angular/forms"; import { MatTableDataSource } from "@angular/material/table"; -import { mergeMap } from "rxjs/operators"; +import { finalize, mergeMap, map } from "rxjs/operators"; @Component({ selector: "nrcp-policy-instance", @@ -41,12 +41,16 @@ import { mergeMap } from "rxjs/operators"; styleUrls: ["./policy-instance.component.scss"], }) export class PolicyInstanceComponent implements OnInit { + public slice: number = 1000; @Input() policyTypeSchema: PolicyTypeSchema; darkMode: boolean; instanceDataSource: MatTableDataSource; policyInstanceForm: FormGroup; private policyInstanceSubject = new BehaviorSubject([]); policyInstances: PolicyInstance[] = []; + private loadingSubject$ = new BehaviorSubject(false); + public loading$ = this.loadingSubject$.asObservable(); + public truncated = false; constructor( private policySvc: PolicyService, @@ -96,9 +100,17 @@ export class PolicyInstanceComponent implements OnInit { getPolicyInstances() { this.policyInstances = [] as PolicyInstance[]; + this.loadingSubject$.next(true); this.policySvc .getPolicyInstancesByType(this.policyTypeSchema.id) .pipe( + map((data) => { + if (data.policy_ids.length > this.slice) { + this.truncated = true; + data.policy_ids = data.policy_ids.slice(0, this.slice); + } + return data; + }), mergeMap((policyIds) => forkJoin( policyIds.policy_ids.map((id) => { @@ -108,7 +120,8 @@ export class PolicyInstanceComponent implements OnInit { ]); }) ) - ) + ), + finalize(() => this.loadingSubject$.next(false)) ) .subscribe((res) => { this.policyInstances = res.map((policy) => { @@ -178,7 +191,7 @@ export class PolicyInstanceComponent implements OnInit { hasInstances(): boolean { return this.instanceCount() > 0; -} + } instanceCount(): number { return this.policyInstances.length; @@ -212,6 +225,7 @@ export class PolicyInstanceComponent implements OnInit { } refreshTable() { + this.truncated = false; this.getPolicyInstances(); } } diff --git a/webapp-frontend/src/app/policy/policy.module.ts b/webapp-frontend/src/app/policy/policy.module.ts index a6a187c..38b9755 100644 --- a/webapp-frontend/src/app/policy/policy.module.ts +++ b/webapp-frontend/src/app/policy/policy.module.ts @@ -43,6 +43,7 @@ import { MatButtonModule } from '@angular/material/button'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatCardModule } from '@angular/material/card'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; const routes:Routes = [ {path: 'policy', component: PolicyControlComponent} @@ -69,6 +70,7 @@ const routes:Routes = [ MatFormFieldModule, MatIconModule, MatInputModule, + MatProgressSpinnerModule, MatSelectModule, MatSortModule, MaterialDesignFrameworkModule,