fix(ui): fix endless loading spinner in policy-card-light.component.html
Because the error handling while fetching policy probes, an endless loading spinner was shown if an error occured.
Therefore a retry ability is added to the probe request and if it fails an error msg is displayed.
Fixes:
MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
@@ -34,7 +34,14 @@ import {
} from '../../interfaces/ICommunication';
import { IContractExt } from '../../interfaces/IContractExt';
import { PolicyService } from '../../services/policy/policy.service';
-import { catchError, debounceTime, map, switchMap, tap } from 'rxjs/operators';
+import {
+ catchError,
+ debounceTime,
+ map,
+ retry,
+ switchMap,
+ tap
+} from 'rxjs/operators';
import { EMPTY, forkJoin, Observable, of, Subject } from 'rxjs';
import { flatArray } from '../../shared/utility';
import { SpinnerService } from '../../services/spinner/spinner.service';
@@ -230,14 +237,20 @@ export class MyAppsComponent implements OnInit {
this.policyService
.getPolicyProbe(contract, policy)
.pipe(
+ retry(2),
catchError((err) => {
console.warn(err);
return EMPTY;
})
)
- .subscribe((probes: IPolicyProbe[]) => {
+ .subscribe({
+ next: (probes: IPolicyProbe[]) => {
policy.probe = probes[0];
this.policyService.setGaugeDataForPolicy(policy);
+ },
+ complete: () => {
+ policy.probeRequestFinished = true;
+ }
});
});
});

MODIFY
src/app/components/policy-card-light/policy-card-light.component.html
src/app/components/policy-card-light/policy-card-light.component.html
}}</mat-card-title>
</mat-card-header>
<mat-card-content>
- <div class="limit-flex">
- <ng-container *ngIf="!policy.probe; else probe">
- <div id="spinner" style="display: flex; justify-content: center">
+ <ng-container *ngIf="!policy.probeRequestFinished; else probe">
+ <div id="spinner">
<mat-spinner strokeWidth="3" diameter="40"></mat-spinner>
</div>
</ng-container>
<ng-template #probe>
+ <ng-container *ngIf="policy.probe; else probeError">
+ <div id="short-summary">
<div>
<app-rate-quota-policy-short-limit
[policy]="policy"></app-rate-quota-policy-short-limit>
{{ policy.restrictions?.limit }}
</p>
</div>
- <div class="second">
+ <div id="info-button-box">
<button
(click)="setSectionToPolicies()"
mat-icon-button
<mat-icon>info</mat-icon>
</button>
</div>
- </ng-template>
</div>
+ </ng-container>
+ <ng-template #probeError>
+ <app-no-data
+ [textClass]="'text-big1 dp-center'"
+ [text]="'CLIENTS.NO_PROBES' | translate"></app-no-data>
+ </ng-template>
+ </ng-template>
</mat-card-content>
</mat-card>

MODIFY
src/app/components/policy-card-light/policy-card-light.component.scss
src/app/components/policy-card-light/policy-card-light.component.scss
* imitations under the License.
*/
-.limit-flex {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
-
- .second {
- top: 12px;
- position: relative;
- }
+mat-card {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ height: 100%;
+ box-sizing: border-box;
}
.mat-card-avatar {
width: 28px;
}
-mat-card {
+app-no-data,
+#spinner {
+ display: grid;
+ place-items: center;
height: 100%;
- box-sizing: border-box;
+}
+
+#short-summary {
+ display: grid;
+}
+
+#info-button-box {
+ display: grid;
+ justify-content: end;
}

MODIFY
src/app/interfaces/IPolicy.ts
src/app/interfaces/IPolicy.ts
@@ -31,6 +31,7 @@ export interface IPolicyExt extends IPolicy {
mainGaugeData: IGaugeChartData;
timeGaugeData: IGaugeChartData;
probe: IPolicyProbe;
+ probeRequestFinished: boolean;
}
export interface IPolicyHeaders {

fix(ui): fix endless loading spinner in policy-card-light.component.html

Because the error handling while fetching policy probes, an endless loading spinner was shown if an error occured.
Therefore a retry ability is added to the probe request and if it fails an error msg is displayed.

Fixes: PAS-3536