refactor: introduce new component and change the filter behaviour
This fixes the problem that the policies were not displayed because the chain contained unsupported polices
MODIFY
src/app/app.module.ts
src/app/app.module.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -61,6 +61,7 @@ import { NoDataComponent } from './components/no-data/no-data.component';
import { UnregisterClientComponent } from './components/dialogs/unregister-client/unregister-client.component';
import { ImgOrIconSelectorComponent } from './components/img-or-icon-selector/img-or-icon-selector.component';
import { ApiDocumentationButtonsComponent } from './components/api-documentation-buttons/api-documentation-buttons.component';
+import { RateQuotaPolicyShortLimitComponent } from './components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component';
export function initializeApp(
configService: ConfigService,
@@ -122,7 +123,8 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
NoDataComponent,
UnregisterClientComponent,
ImgOrIconSelectorComponent,
- ApiDocumentationButtonsComponent
+ ApiDocumentationButtonsComponent,
+ RateQuotaPolicyShortLimitComponent
],
imports: [
KeycloakAngularModule,

MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -168,7 +168,7 @@ export class MyAppsComponent implements OnInit {
]).pipe(
map(([planPolicies, endpoint]) => {
planPolicies.forEach((planPolicy) => {
- this.policyService.initPolicy(planPolicy);
+ this.policyService.extendPolicy(planPolicy);
});
return {

MODIFY
src/app/components/plan-card-list/plan-card-list.component.html
src/app/components/plan-card-list/plan-card-list.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
<mat-list-item *ngFor="let policy of plan.planPolicies">
<p>
{{ policy.shortName }}
- <span class="right">{{ policy.shortDescription }}</span>
</p>
+ <app-rate-quota-policy-short-limit
+ [policy]="policy"
+ [bold]="false"></app-rate-quota-policy-short-limit>
</mat-list-item>
</mat-list>
</div>

MODIFY
src/app/components/plan-card-list/plan-card-list.component.ts
src/app/components/plan-card-list/plan-card-list.component.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -52,15 +52,11 @@ export class PlanCardListComponent implements OnInit {
}
onSignUp(plan: IApiPlanSummary): void {
- const policies: IPolicyExt[] = plan.planPolicies;
- policies.forEach((policy: IPolicyExt) =>
- this.policyService.initPolicy(policy)
- );
this.signUpService.setSignUpInfo(
this.orgId,
this.apiVersion,
plan,
- policies,
+ plan.planPolicies,
this.apiVersion.docsAvailable
);
void this.router.navigate(['/api-signup', this.orgId, this.apiId]);
@@ -72,6 +68,10 @@ export class PlanCardListComponent implements OnInit {
.pipe(
map((apiPlanSummaries: IApiPlanSummary[]) => {
apiPlanSummaries.forEach((apiPlanSummary) => {
+ // in v1 only certain policies will be displayed
+ apiPlanSummary.planPolicies = this.policyService.filterPolicies(
+ apiPlanSummary.planPolicies
+ );
apiPlanSummary.planPolicies.forEach((policy: IPolicyExt) => {
this.policyService.extendPolicy(policy);
});

ADD
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.html
+<!--
+ ~ Copyright 2022 Scheer PAS Schweiz AG
+ ~
+ ~ 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
+ ~ imitations under the License.
+ -->
+
+<p
+ [innerHTML]="
+ 'POLICIES.' + policy.definition.id + '.CONDITION_LIGHT'
+ | translate: policy.restrictions
+ "></p>

ADD
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.scss
+/*!
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * 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
+ * imitations under the License.
+ */
+
+p {
+ white-space: nowrap;
+}

ADD
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.spec.ts
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * 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
+ * imitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RateQuotaPolicyShortLimitComponent } from './rate-quota-policy-short-limit.component';
+
+describe('RateQuotaPolicyShortLimitComponent', () => {
+ let component: RateQuotaPolicyShortLimitComponent;
+ let fixture: ComponentFixture<RateQuotaPolicyShortLimitComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [RateQuotaPolicyShortLimitComponent]
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RateQuotaPolicyShortLimitComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.ts
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * 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
+ * imitations under the License.
+ */
+
+import { AfterViewInit, Component, Input } from '@angular/core';
+import { IPolicyExt } from '../../../interfaces/IPolicy';
+import { removeCssClass } from '../../../shared/utility';
+
+@Component({
+ selector: 'app-rate-quota-policy-short-limit',
+ templateUrl: './rate-quota-policy-short-limit.component.html',
+ styleUrls: ['./rate-quota-policy-short-limit.component.scss']
+})
+export class RateQuotaPolicyShortLimitComponent implements AfterViewInit {
+ @Input() policy!: IPolicyExt;
+ @Input() bold = true;
+
+ constructor() {}
+
+ ngAfterViewInit(): void {
+ if (!this.bold) {
+ removeCssClass(
+ 'app-rate-quota-policy-short-limit > p > span.bold',
+ 'bold'
+ );
+ }
+ }
+}

MODIFY
src/app/components/policy-card-light/policy-card-light.component.html
src/app/components/policy-card-light/policy-card-light.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
<ng-template #probe>
<div>
- <p
- [innerHTML]="
- 'POLICIES.' + policy.definition.id + '.CONDITION_LIGHT'
- | translate: policy.restrictions
- "></p>
+ <app-rate-quota-policy-short-limit
+ [policy]="policy"></app-rate-quota-policy-short-limit>
<p>
<b>{{ policy.mainGaugeData?.currentVal }}</b> /
{{ policy.restrictions?.limit }}

MODIFY
src/app/interfaces/IPolicy.ts
src/app/interfaces/IPolicy.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -21,7 +21,6 @@ export interface IPolicyExt extends IPolicy {
planId: string;
planVersion: string;
shortName: string;
- shortDescription: string;
configAsObject: IPolicyConfiguration;
icon: string;
restrictions: {

MODIFY
src/app/services/policy/policy.service.ts
src/app/services/policy/policy.service.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -60,7 +60,7 @@ export class PolicyService {
public readonly policyIds = {
RATE_LIMIT: 'RateLimitingPolicy',
- T_QUOTA: 'TransferQuotaPolicy'
+ TRANSFER_QUOTA: 'TransferQuotaPolicy'
};
constructor(
@@ -86,60 +86,12 @@ export class PolicyService {
}
}),
// in v1 only certain policies will be displayed
- switchMap((extendedPolicies: IPolicyExt[]) => {
+ map((extendedPolicies: IPolicyExt[]) => {
return this.filterPolicies(extendedPolicies);
})
);
}
- public getApiPolicies(
- orgId: string,
- apiId: string,
- apiVersion: string
- ): Observable<IPolicyExt[]> {
- return this.backendService
- .getApiPolicySummaries(orgId, apiId, apiVersion)
- .pipe(
- switchMap((extendedPolicySummaries: IPolicySummaryExt[]) => {
- if (extendedPolicySummaries.length > 0) {
- return forkJoin(
- extendedPolicySummaries.map((extendedPolicySummary) => {
- return this.getExtendedApiPolicy(
- orgId,
- apiId,
- apiVersion,
- extendedPolicySummary.id.toString()
- );
- })
- );
- } else {
- return of([] as IPolicyExt[]);
- }
- }),
- // in v1 only certain policies will be displayed
- switchMap((extendedPolicies: IPolicyExt[]) => {
- return this.filterPolicies(extendedPolicies);
- })
- );
- }
-
- private getExtendedApiPolicy(
- orgId: string,
- apiId: string,
- apiVersion: string,
- apiPolicyId: string
- ) {
- return this.backendService
- .getApiPolicy(orgId, apiId, apiVersion, apiPolicyId)
- .pipe(
- map((policy: IPolicy) => {
- const extendedPolicy: IPolicyExt = policy as IPolicyExt;
- this.extendPolicy(extendedPolicy);
- return extendedPolicy;
- })
- );
- }
-
private getExtendedPlanPolicy(
orgId: string,
policySummary: IPolicySummaryExt
@@ -158,24 +110,28 @@ export class PolicyService {
);
}
- public extendPolicy(extendedPolicy: IPolicyExt): void {
- const perTranslated = this.translator.instant('COMMON.PER') as string;
- const policyConfig = this.getPolicyConfiguration(extendedPolicy);
- const periodTranslated = this.getTranslationForPeriod(policyConfig.period);
+ public extendPolicy(policy: IPolicyExt): void {
+ policy.configAsObject = this.getPolicyConfiguration(policy);
- switch (extendedPolicy.definition.id) {
+ switch (policy.definition.id) {
case this.policyIds.RATE_LIMIT: {
- extendedPolicy.shortName = 'Rate Limit';
- extendedPolicy.shortDescription = `${policyConfig.limit} Request${
- policyConfig.limit > 1 ? 's' : ''
- } ${perTranslated} ${periodTranslated}`;
+ this.checkHeaders(policy, this.rateLimitPolicyHeaders);
+ policy.icon = 'tune';
+ policy.shortName = 'Rate Limit';
+ policy.restrictions = {
+ limit: policy.configAsObject.limit.toString(),
+ timeUnit: this.getTranslationForPeriod(policy.configAsObject.period)
+ };
break;
}
- case this.policyIds.T_QUOTA: {
- extendedPolicy.shortName = 'Transfer Quota';
- extendedPolicy.shortDescription = `${formatBytes(
- policyConfig.limit
- )} ${perTranslated} ${periodTranslated}`;
+ case this.policyIds.TRANSFER_QUOTA: {
+ this.checkHeaders(policy, this.transferQuotaPolicyHeaders);
+ policy.icon = 'import_export';
+ policy.shortName = 'Transfer Quota';
+ policy.restrictions = {
+ limit: formatBytes(policy.configAsObject.limit),
+ timeUnit: this.getTranslationForPeriod(policy.configAsObject.period)
+ };
break;
}
}
@@ -210,47 +166,13 @@ export class PolicyService {
);
}
- private filterPolicies(
- extendedPolicies: IPolicyExt[]
- ): Observable<IPolicyExt[]> {
- const filteredExtendedPolicies: IPolicyExt[] = [];
- extendedPolicies.forEach((extendedPolicy) => {
- if (
- [this.policyIds.RATE_LIMIT, this.policyIds.T_QUOTA].includes(
- extendedPolicy.definition.id
- )
- ) {
- filteredExtendedPolicies.push(extendedPolicy);
- }
+ public filterPolicies(extendedPolicies: IPolicyExt[]): IPolicyExt[] {
+ return extendedPolicies.filter((extendedPolicy: IPolicyExt) => {
+ return [
+ this.policyIds.RATE_LIMIT,
+ this.policyIds.TRANSFER_QUOTA
+ ].includes(extendedPolicy.definition.id);
});
- return of(filteredExtendedPolicies);
- }
-
- public initPolicy(policy: IPolicyExt): IPolicyExt {
- policy.configAsObject = this.getPolicyConfiguration(policy);
-
- switch (policy.definition.id) {
- case this.policyIds.RATE_LIMIT: {
- this.checkHeaders(policy, this.rateLimitPolicyHeaders);
- policy.icon = 'tune';
- policy.restrictions = {
- limit: policy.configAsObject.limit.toString(),
- timeUnit: this.getTranslationForPeriod(policy.configAsObject.period)
- };
- break;
- }
- case this.policyIds.T_QUOTA: {
- this.checkHeaders(policy, this.transferQuotaPolicyHeaders);
- policy.icon = 'import_export';
- policy.restrictions = {
- limit: formatBytes(policy.configAsObject.limit),
- timeUnit: this.getTranslationForPeriod(policy.configAsObject.period)
- };
- break;
- }
- }
-
- return policy;
}
private getPolicyConfiguration(policy: IPolicyExt): IPolicyConfiguration {
@@ -258,13 +180,6 @@ export class PolicyService {
return JSON.parse(policy.configuration) as IPolicyConfiguration;
}
- private getRestrictions(limit: number, timeUnit: string) {
- return {
- limit: limit,
- timeUnit: timeUnit
- };
- }
-
public checkHeaders(
policy: IPolicyExt,
defaultHeaders: IPolicyHeaders
@@ -342,7 +257,7 @@ export class PolicyService {
switch (policy.definition.id) {
case this.policyIds.RATE_LIMIT:
return this.generateDataForRateLimit(policy);
- case this.policyIds.T_QUOTA:
+ case this.policyIds.TRANSFER_QUOTA:
return this.generateDataForQuota(policy);
default:
return;

MODIFY
src/app/shared/utility.ts
src/app/shared/utility.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -50,3 +50,11 @@ export function formatBytesAsObject(
unit: formattedBytes[1]
};
}
+
+export function removeCssClass(selctor: string, className: string): void {
+ // const elements = Array.from(document.getElementsByClassName(className));
+ const elements = Array.from(document.querySelectorAll(selctor));
+ elements.forEach((element: Element) => {
+ element.classList.remove(className);
+ });
+}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"LOGOUT": "Logout",
"VERSION": "Version",
"OF": "of",
- "AGREEMENT": "Agreement",
- "PER": "per"
+ "AGREEMENT": "Agreement"
},
"HOME": {
"TITLE": "API Developer Portal",
"LIMIT": "Rate limit allowance (per time period)",
"REMAINING": "Rate limit allowance remaining",
"RESET": "The time the rate limit will be reset",
- "CONDITION_LIGHT": "<b>{{limit}}</b> requests per <b>{{timeUnit}}</b>"
+ "CONDITION_LIGHT": "<span class='bold'>{{limit}}</span> requests per <span class='bold'>{{timeUnit}}</span>"
},
"TransferQuotaPolicy": {
"TITLE": "Transfer Quota Policy",
"LIMIT": "Quota limit allowance (per time period)",
"REMAINING": "Quota limit allowance remaining",
"RESET": "The time the quota limit will be reset",
- "CONDITION_LIGHT": "<b>{{limit}}</b> data per <b>{{timeUnit}}</b>"
+ "CONDITION_LIGHT": "<span class='bold'>{{limit}}</span> data per <span class='bold'>{{timeUnit}}</span>"
},
"PERIODS": {
"SECOND": "Second",

MODIFY
src/styles.scss
src/styles.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -267,3 +267,7 @@ a {
.mat-simple-snackbar{
color: white;
}
+
+.bold {
+ font-weight: bold;
+}

refactor: introduce new component and change the filter behaviour

This fixes the problem that the policies were not displayed because the chain contained unsupported polices