refactor: change policy views
MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
<app-my-apps-use-api [contract]="contract"></app-my-apps-use-api>
<h3>Policies</h3>
<!--In this version we will not have more than 2 policies-->
- <div class="policies">
- <app-policy-card></app-policy-card>
+ <div class="policies" *ngIf="policies">
+ <app-policy-card
+ *ngFor="let policy of policies"
+ [policy]="policy"
+ ></app-policy-card>
<app-policy-card></app-policy-card>
</div>
</mat-card-content>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
@@ -6,6 +6,7 @@ import {
IClientSummary,
IContract,
INewContract,
+ IPolicy,
} from '../../interfaces/ICommunication';
import { SnackbarService } from '../../services/snackbar/snackbar.service';
import { ConfigService } from '../../services/config/config.service';
@@ -25,6 +26,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
termsEnabled: boolean;
newContractDetails: ISignUpInfo;
contract: IContract | undefined;
+ policies: IPolicy[] = [];
constructor(
private heroService: HeroService,
@@ -41,8 +43,8 @@ export class MarketplaceSignupStepperComponent implements OnInit {
}
ngOnInit(): void {
- this.setUpHero();
this.checkNavigationAllowed();
+ this.setUpHero();
}
private setUpHero() {
@@ -78,7 +80,12 @@ export class MarketplaceSignupStepperComponent implements OnInit {
}
private checkNavigationAllowed(): void {
- if (!this.newContractDetails) {
+ if (
+ !this.newContractDetails ||
+ !this.newContractDetails.organizationId ||
+ !this.newContractDetails.apiVersion ||
+ !this.newContractDetails.plan
+ ) {
this.snackbar.showErrorSnackBar(
this.translator.instant('WIZARD.REDIRECT')
);
@@ -113,4 +120,12 @@ export class MarketplaceSignupStepperComponent implements OnInit {
finish(): void {
void this.router.navigate(['applications']);
}
+
+ private getPolicies() {
+ // this.policies = this.newContractDetails.apiVersion.plans.filter(
+ // (value) =>
+ // value.planId === 'RateLimitingPolicy' ||
+ // value.planId === 'TransferQuotaPolicy'
+ // );
+ }
}

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.html
src/app/components/my-apps-policies/my-apps-policies.component.html
-<!--In this version we will not have more than 2 policies-->
-<div class="policies">
- <app-policy-card></app-policy-card>
- <app-policy-card></app-policy-card>
+<div class="summary mb-40" *ngFor="let policy of policies">
+ <div class="policies divider-right" *ngIf="policies">
+ <app-policy-card [policy]="policy"></app-policy-card>
+ </div>
+ <div>
+ <p>Hello</p>
+ </div>
</div>

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.scss
src/app/components/my-apps-policies/my-apps-policies.component.scss
+.summary {
+ display: grid;
+ justify-content: space-between;
+ align-items: center;
+ grid-template-columns: 1fr 1fr;
+}
+
+.policies {
+ display: grid;
+ justify-content: space-around;
+ gap: 20px;
+}

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.ts
src/app/components/my-apps-policies/my-apps-policies.component.ts
import { Component, Input, OnInit } from '@angular/core';
+import { IPolicy } from '../../interfaces/ICommunication';
+import { IContractExt } from '../../interfaces/IContractExt';
@Component({
selector: 'app-my-apps-policies',
@@ -6,9 +8,52 @@ import { Component, Input, OnInit } from '@angular/core';
styleUrls: ['./my-apps-policies.component.scss'],
})
export class MyAppsPoliciesComponent implements OnInit {
- @Input() api: any;
+ @Input() contract?: IContractExt;
+ policies: IPolicy[] | undefined;
- constructor() {}
+ ngOnInit(): void {
+ this.getAllPolicies();
+ }
- ngOnInit(): void {}
+ private getAllPolicies() {
+ // TODO
+ const policy: IPolicy = {
+ id: 1632385073748121,
+ type: 'Api',
+ organizationId: 'Petstore',
+ entityId: 'Petstore',
+ entityVersion: '1.0',
+ name: 'Rate Limiting Policy',
+ description: 'Consumers are limited to 2 requests per Client per Second.',
+ configuration:
+ '{"limit":2,"granularity":"Client","period":"Second","headerLimit":"ABC","headerRemaining":"ABCD","headerReset":"ABCDEF"}',
+ createdBy: 'support.is',
+ createdOn: 1632385073687,
+ modifiedBy: 'support.is',
+ modifiedOn: 1632385147692,
+ definition: {
+ id: 'RateLimitingPolicy',
+ policyImpl:
+ 'class:io.apiman.gateway.engine.policies.RateLimitingPolicy',
+ name: 'Rate Limiting Policy',
+ description:
+ "Enforces rate configurable request rate limits on an API. This ensures that consumers can't overload an API with too many requests.",
+ icon: 'sliders',
+ templates: [
+ {
+ language: null,
+ template:
+ 'Consumers are limited to ${limit} requests per ${granularity} per ${period}.',
+ },
+ ],
+ formType: 'Default',
+ deleted: false,
+ },
+ orderIndex: 2,
+ };
+ if (this.contract) {
+ this.policies = this.contract.policies;
+ }
+ this.policies = [policy, policy];
+ }
}

MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
<img class="app-icon" [src]="tmpUrl" alt="app-icon" />
</div>
<div class="content-text">
- <h3 class="primary app-title">{{cliCon.key.replace(':', ' - ')}}</h3>
+ <h3 class="primary app-title">{{ cliCon.key.replace(":", " - ") }}</h3>
{{ cliCon.value[0].client.client.description }}
</div>
</div>
</div>
<div class="app-api-header-title">
<h3 class="primary">
- {{ contract.api.api.name }} {{ contract.api.version }} - {{ contract.plan.plan.name }}
+ {{ contract.api.api.name }} {{ contract.api.version }} -
+ {{ contract.plan.plan.name }}
</h3>
</div>
<div class="app-api-header-labels">
- <span matTooltip="API Status" [style]="'background-color: ' + getColorForLabel(contract.api.status)">
+ <span
+ matTooltip="API Status"
+ [style]="
+ 'background-color: ' + getColorForLabel(contract.api.status)
+ "
+ >
{{ contract.api.status }}
</span>
- <span matTooltip="Client Status"[style]="'background-color: ' + getColorForLabel(contract.client.status)">
+ <span
+ matTooltip="Client Status"
+ [style]="
+ 'background-color: ' + getColorForLabel(contract.client.status)
+ "
+ >
{{ contract.client.status }}
</span>
</div>
></app-my-apps-use-api>
<app-my-apps-policies
*ngIf="contract.section === 'policies'"
- [api]="contract"
+ [contract]="contract"
></app-my-apps-policies>
<app-my-apps-manage-api
*ngIf="contract.section === 'manage-api'"

MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
@@ -3,12 +3,16 @@ import { HeroService } from '../../services/hero/hero.service';
import { TranslateService } from '@ngx-translate/core';
import { BackendService } from '../../services/backend/backend.service';
import { ISection } from '../../interfaces/ISection';
-import {IApiStatus, IClientStatus, statusColorMap } from '../../interfaces/IStatus';
+import {
+ IApiStatus,
+ IClientStatus,
+ statusColorMap,
+} from '../../interfaces/IStatus';
import {
IClientSummaryBean,
IClientVersionSummaryBean,
IContract,
- IContractSummary
+ IContractSummary,
} from '../../interfaces/ICommunication';
import { flatMap } from 'rxjs/internal/operators';
import { IContractExt } from '../../interfaces/IContractExt';
@@ -23,12 +27,13 @@ export class MyAppsComponent implements OnInit {
clientContractsMap = new Map<string, IContractExt[]>();
tmpUrl = 'https://pbs.twimg.com/media/Ez-AaifWYAIiFSQ.jpg';
- tmpUrl2 = 'https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png';
+ tmpUrl2 =
+ 'https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png';
constructor(
private heroService: HeroService,
private translator: TranslateService,
- private backend: BackendService,
+ private backend: BackendService
) {}
ngOnInit(): void {
@@ -37,26 +42,41 @@ export class MyAppsComponent implements OnInit {
}
private fetchContracts() {
- this.backend.getEditableClients().pipe(
+ this.backend
+ .getEditableClients()
+ .pipe(
flatMap((clients: IClientSummaryBean[]) => {
return clients;
}),
flatMap((clientSum: IClientSummaryBean) => {
- return this.backend.getClientVersions(clientSum.organizationId, clientSum.id);
+ return this.backend.getClientVersions(
+ clientSum.organizationId,
+ clientSum.id
+ );
}),
flatMap((versions: IClientVersionSummaryBean[]) => {
return versions;
}),
flatMap((versionSum: IClientVersionSummaryBean) => {
- return this.backend.getContracts(versionSum.organizationId, versionSum.id, versionSum.version);
+ return this.backend.getContracts(
+ versionSum.organizationId,
+ versionSum.id,
+ versionSum.version
+ );
}),
flatMap((contracts: IContractSummary[]) => {
return contracts;
}),
flatMap((contractSum: IContractSummary) => {
- return this.backend.getContract(contractSum.clientOrganizationId, contractSum.clientId, contractSum.clientVersion, contractSum.contractId);
+ return this.backend.getContract(
+ contractSum.clientOrganizationId,
+ contractSum.clientId,
+ contractSum.clientVersion,
+ contractSum.contractId
+ );
})
- ).subscribe((contracts: IContract[]) => {
+ )
+ .subscribe((contracts: IContract[]) => {
const extended = contracts as IContractExt[];
this.extractContracts(extended);
});
@@ -71,25 +91,31 @@ export class MyAppsComponent implements OnInit {
this.contracts = this.contracts.concat(contracts);
this.contracts.forEach((contract: IContractExt) => {
- const clientNameVersionMapped = contract.client.client.name + ':' + contract.client.version;
- const foundContracts = this.clientContractsMap.get(clientNameVersionMapped);
+ const clientNameVersionMapped =
+ contract.client.client.name + ':' + contract.client.version;
+ const foundContracts = this.clientContractsMap.get(
+ clientNameVersionMapped
+ );
this.extendContract(contract);
if (foundContracts) {
const contractIfPartOfArray = foundContracts.find((c: IContractExt) => {
return c.id === contract.id;
- })
+ });
if (contractIfPartOfArray) {
return;
}
- this.clientContractsMap.set(clientNameVersionMapped, foundContracts.concat(contract));
+ this.clientContractsMap.set(
+ clientNameVersionMapped,
+ foundContracts.concat(contract)
+ );
} else {
this.clientContractsMap.set(clientNameVersionMapped, [contract]);
}
- })
+ });
}
/**
@@ -98,7 +124,7 @@ export class MyAppsComponent implements OnInit {
* @private
*/
private extendContract(contract: IContract): IContractExt {
- let contractExt = contract as IContractExt;
+ const contractExt = contract as IContractExt;
contractExt.section = 'summary';
contractExt.policies = this.getPolicies();
return contractExt;
@@ -112,20 +138,7 @@ export class MyAppsComponent implements OnInit {
}
private getPolicies() {
- return [
- {
- name: 'Example Policy 1',
- icon: 'analytics',
- },
- {
- name: 'Example Policy 2',
- icon: 'analytics',
- },
- {
- name: 'Example Policy 3',
- icon: 'analytics',
- },
- ];
+ return [];
}
setSection(api: any, sectionName: ISection) {

MODIFY
src/app/components/policy-card/policy-card.component.ts
src/app/components/policy-card/policy-card.component.ts
@@ -28,7 +28,11 @@ export class PolicyCardComponent implements OnInit {
headerReset: 'X-TransferQuota-Reset',
};
- headers: PolicyHeaders = this.rateLimitPolicyHeaders;
+ headers: PolicyHeaders = {
+ headerLimit: '',
+ headerReset: '',
+ headerRemaining: '',
+ };
icon: string | undefined;
policyIdentifier: string | undefined;
@@ -38,7 +42,8 @@ export class PolicyCardComponent implements OnInit {
};
ngOnInit(): void {
- const config = JSON.parse(<string>this.policy?.configuration);
+ if (this.policy) {
+ const config = JSON.parse(this.policy?.configuration);
const timeUnit = config.period;
let limit = '';
@@ -64,6 +69,7 @@ export class PolicyCardComponent implements OnInit {
timeUnit: timeUnit,
};
}
+ }
private checkHeaders(config: any, defaultHeaders: PolicyHeaders) {
if (config.hasOwnProperty('headerLimit')) {

MODIFY
src/app/interfaces/ICommunication.ts
src/app/interfaces/ICommunication.ts
@@ -273,11 +273,11 @@ export interface IPolicy {
createdBy: string;
/** @format date-time */
- createdOn: string;
+ createdOn: string | number;
modifiedBy: string;
/** @format date-time */
- modifiedOn: string;
+ modifiedOn: string | number;
definition: IPolicyDefinition;
/** @format int32 */
@@ -293,14 +293,14 @@ export interface IPolicyDefinition {
templates: IPolicyDefinitionTemplate[];
/** @format int64 */
- pluginId: number;
+ pluginId?: number;
formType: 'Default' | 'JsonSchema';
- form: string;
+ form?: string;
deleted: boolean;
}
export interface IPolicyDefinitionTemplate {
- language: string;
+ language: string | null;
template: string;
}
@@ -976,22 +976,22 @@ export interface IUpdateUser {
}
export interface IOrganizationBean {
- id: string
- name: string
- description: string
- createdBy: string
- createdOn: string
- modifiedBy: string
- modifiedOn: string
+ id: string;
+ name: string;
+ description: string;
+ createdBy: string;
+ createdOn: string;
+ modifiedBy: string;
+ modifiedOn: string;
}
export interface IClientBean {
- organization: IOrganizationBean
- id: string
- name: string
- description: string
- createdBy: string
- createdOn: string
+ organization: IOrganizationBean;
+ id: string;
+ name: string;
+ description: string;
+ createdBy: string;
+ createdOn: string;
}
export interface IClientVersionSummaryBean {

MODIFY
src/app/interfaces/IContractExt.ts
src/app/interfaces/IContractExt.ts
-import {IContract} from './ICommunication';
+import { IContract, IPolicy } from './ICommunication';
/**
* Extends the Contract interface
@@ -7,8 +7,5 @@ import {IContract} from './ICommunication';
*/
export interface IContractExt extends IContract {
section: 'summary' | 'use-api' | 'policies' | 'manage-api';
- policies: {
- name: string,
- icon: string
- }[];
+ policies: IPolicy[];
}

refactor: change policy views