fix(ui): fixed endless spinner while loading data
While refactoring the my clients page we introduced a bug where endless loading spinners could occur if an error in the request chain happend.
This was fixed by moving the finished flag into the complete callback
MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
</ng-container>
<div
*ngIf="
- (contractsLoaded && ((contracts$ | async) || []).length === 0) ||
- (contractsFiltered && ((contracts$ | async) || []).length === 0)
+ (contractsLoaded && ((clients$ | async) || []).length === 0) ||
+ (contractsFiltered && ((clients$ | async) || []).length === 0)
"
class="dp-center">
<app-no-data

MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
@@ -31,7 +31,6 @@ import { PolicyService } from '../../services/policy/policy.service';
import {
catchError,
debounceTime,
- defaultIfEmpty,
map,
retry,
shareReplay,
@@ -39,7 +38,6 @@ import {
tap
} from 'rxjs/operators';
import { EMPTY, forkJoin, Observable, of, Subject } from 'rxjs';
-import { flatArray } from '../../shared/utility';
import { SpinnerService } from '../../services/spinner/spinner.service';
import { ApiService } from '../../services/api/api.service';
import { ITocLink } from '../../interfaces/ITocLink';
@@ -48,7 +46,7 @@ import { MatDialog } from '@angular/material/dialog';
import { UnregisterClientComponent } from '../dialogs/unregister-client/unregister-client.component';
import { SnackbarService } from '../../services/snackbar/snackbar.service';
import { ConfigService } from '../../services/config/config.service';
-import { IPolicyExt } from '../../interfaces/IPolicy';
+import { IPolicyExt, IPolicyProbe } from '../../interfaces/IPolicy';
import { PermissionsService } from '../../services/permissions/permissions.service';
import { ClientService } from '../../services/client/client.service';
import { IClientVersionExt } from '../../interfaces/IClientVersionSummaryExt';
@@ -129,11 +127,15 @@ export class MyAppsComponent implements OnInit {
return EMPTY;
})
)
- .subscribe(() => {
+ .subscribe({
+ next: () => {
this.fetchPolicyProbes();
- this.copyData();
+ },
+ complete: () => {
this.stopMainRequest();
+ this.copyData();
this.generateTocLinks();
+ }
});
}
@@ -143,32 +145,34 @@ export class MyAppsComponent implements OnInit {
this.contracts$ = this.allContracts$;
}
+ // TODO: Remove nested subscriptions if possible
private fetchPolicyProbes() {
this.allContracts$
.pipe(
switchMap((contracts: IContractExt[]) => {
- return forkJoin(
- flatArray(
- contracts.map((contract: IContractExt) => {
- return contract.policies.map((policy: IPolicyExt) => {
- return this.policyService
+ contracts.forEach((contract: IContractExt) => {
+ contract.policies.forEach((policy: IPolicyExt) => {
+ this.policyService
.getPolicyProbe(contract, policy)
.pipe(
retry(2),
catchError((err) => {
console.warn(err);
return EMPTY;
- }),
- tap((policyProbe) => {
- policy.probe = policyProbe;
+ })
+ )
+ .subscribe({
+ next: (probe: IPolicyProbe) => {
+ policy.probe = probe;
this.policyService.setGaugeDataForPolicy(policy);
+ },
+ complete: () => {
policy.probeRequestFinished = true;
- })
- );
+ }
});
- })
- ) as Observable<IPolicyExt>[]
- ).pipe(defaultIfEmpty([]));
+ });
+ });
+ return EMPTY;
})
)
.subscribe();

MODIFY
src/app/services/client/client.service.ts
src/app/services/client/client.service.ts
*/
import { Injectable } from '@angular/core';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, defaultIfEmpty, map, switchMap } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';
import { EMPTY, forkJoin, iif, Observable, of, throwError } from 'rxjs';
import { BackendService } from '../backend/backend.service';
@@ -95,7 +95,8 @@ export class ClientService {
map((nestedClientSummaries: IClientSummary[][]) => {
const clientSummaries = nestedClientSummaries.flat();
return this.getUniqueClients(clientSummaries);
- })
+ }),
+ defaultIfEmpty([])
);
}
@@ -123,6 +124,7 @@ export class ClientService {
);
})
).pipe(
+ defaultIfEmpty([]),
map((nestedClientVersionSummaries: IClientVersionSummary[][]) => {
return nestedClientVersionSummaries.flat();
})
@@ -145,7 +147,7 @@ export class ClientService {
);
}
)
- );
+ ).pipe(defaultIfEmpty([]));
})
);
}

MODIFY
src/app/services/contract/contract.service.ts
src/app/services/contract/contract.service.ts
@@ -77,7 +77,7 @@ export class ContractService {
contractSummary.contractId
);
})
- );
+ ).pipe(defaultIfEmpty([]));
}
public getExtendedContracts(
@@ -122,7 +122,8 @@ export class ContractService {
.toLowerCase()
.localeCompare(b.api.api.name.toLowerCase());
});
- })
+ }),
+ defaultIfEmpty([])
);
}

fix(ui): fixed endless spinner while loading data
While refactoring the my clients page we introduced a bug where endless loading spinners could occur if an error in the request chain happend.
This was fixed by moving the finished flag into the complete callback