add plans and policies to sign-up stepper and my-apps pages
MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
<h4>Policies</h4>
<!--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>
+ <ng-container *ngFor="let policy of newContractDetails.policies">
+ <app-policy-card [policy]="policy"></app-policy-card>
+ </ng-container>
</div>
</mat-card-content>
<mat-divider></mat-divider>
<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" *ngIf="policies">
+ <div class="policies" *ngIf="newContractDetails.policies">
<app-policy-card
- *ngFor="let policy of policies"
+ *ngFor="let policy of newContractDetails.policies"
[policy]="policy"
></app-policy-card>
- <app-policy-card></app-policy-card>
</div>
</mat-card-content>
<mat-divider></mat-divider>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
@@ -50,9 +50,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
private setUpHero() {
this.heroService.setUpHero({
title: this.newContractDetails.apiVersion.api.name,
- // subtitle:
- // this.infos.plan.name + ' ' + this.translator.instant('COMMON.SIGNUP'),
- subtitle: 'Test ' + this.translator.instant('COMMON.SIGNUP'),
+ subtitle: this.newContractDetails.plan.planName + ' ' + this.translator.instant('COMMON.SIGNUP'),
});
}
@@ -100,7 +98,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
apiOrgId: this.newContractDetails.organizationId,
apiId: this.newContractDetails.apiVersion.api.id,
apiVersion: this.newContractDetails.apiVersion.version,
- planId: this.newContractDetails.plan.id,
+ planId: this.newContractDetails.plan.planId,
};
this.backend
@@ -120,12 +118,4 @@ 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.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';
import { IGaugeChartData } from '../../interfaces/IGaugeChartData';
+import {IPolicyExt} from "../../interfaces/IPolicyExt";
@Component({
selector: 'app-my-apps-policies',
@@ -10,7 +10,7 @@ import { IGaugeChartData } from '../../interfaces/IGaugeChartData';
})
export class MyAppsPoliciesComponent implements OnInit {
@Input() contract?: IContractExt;
- policies: IPolicy[] | undefined;
+ policies: IPolicyExt[] | undefined;
gaugeData: IGaugeChartData | undefined;
ngOnInit(): void {
@@ -18,45 +18,10 @@ export class MyAppsPoliciesComponent implements OnInit {
}
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];
this.gaugeData = {
name: 'Rate Limit Usage',
limit: 500,

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.html
src/app/components/my-apps-summary/my-apps-summary.component.html
</div>
<div>
<mat-form-field>
- <input matInput readonly value="https://localhost:4200/endpoint" />
+ <input matInput readonly value="{{managedEndpoint}}" />
<button
[cdkCopyToClipboard]="'test'"
mat-icon-button
</div>
<div>
<mat-form-field>
- <input matInput readonly value="hig&/(5$hdwheow" />
+ <input matInput readonly value="{{contract ? contract.client.apikey : ''}}" />
<button
[cdkCopyToClipboard]="''"
mat-icon-button

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.ts
src/app/components/my-apps-summary/my-apps-summary.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {IContractExt} from '../../interfaces/IContractExt';
+import {IApiVersionEndpointSummary} from "../../interfaces/ICommunication";
+import {BackendService} from "../../services/backend/backend.service";
+import {SnackbarService} from "../../services/snackbar/snackbar.service";
@Component({
selector: 'app-my-apps-summary',
@@ -8,8 +11,24 @@ import {IContractExt} from '../../interfaces/IContractExt';
})
export class MyAppsSummaryComponent implements OnInit {
@Input() contract?: IContractExt;
+ managedEndpoint: string = '';
+ constructor(private backendService: BackendService,
+ private snackbarService: SnackbarService) {}
- constructor() {}
-
- ngOnInit(): void {}
+ ngOnInit(): void {
+ if (this.contract) {
+ this.backendService
+ .getManagedApiEndpoint(
+ this.contract.api.api.organization.id,
+ this.contract.api.api.id,
+ this.contract.api.version
+ )
+ .subscribe(
+ (endpoint: IApiVersionEndpointSummary) => {
+ this.managedEndpoint = endpoint.managedEndpoint;
+ },
+ (error) => this.snackbarService.showErrorSnackBar(error.message, error)
+ );
+ }
+ }
}

MODIFY
src/app/components/my-apps-use-api/my-apps-use-api.component.html
src/app/components/my-apps-use-api/my-apps-use-api.component.html
<p>{{ mockText }}</p>
</div>
<div id="try-it-now-btn">
- <button mat-raised-button color="primary" [disabled]="disableButtons">
+ <ng-container *ngIf="contract">
+ <button mat-raised-button color="primary" [disabled]="disableButtons" [routerLink]="[
+ '/swagger',
+ contract.client.client.organization.id,
+ contract.api.id,
+ contract.api.version
+ ]">
{{ "APPS.VIEW_AND_TRY_NOW" | translate }}
</button>
+ </ng-container>
+ <ng-container *ngIf="!contract">
+ <button mat-raised-button color="primary" [routerLink]="[
+ '/swagger',
+ newContractDetails.organizationId,
+ newContractDetails.apiVersion.id,
+ newContractDetails.apiVersion.version
+ ]">
+ {{ "APPS.VIEW_AND_TRY_NOW" | translate }}
+ </button>
+ </ng-container>
</div>
</div>

MODIFY
src/app/components/my-apps-use-api/my-apps-use-api.component.ts
src/app/components/my-apps-use-api/my-apps-use-api.component.ts
@@ -5,6 +5,8 @@ import {
} from '../../interfaces/ICommunication';
import { BackendService } from '../../services/backend/backend.service';
import { SnackbarService } from '../../services/snackbar/snackbar.service';
+import {ISignUpInfo} from "../../interfaces/ISignUpInfo";
+import {SignUpService} from "../../services/sign-up/sign-up.service";
@Component({
selector: 'app-my-apps-use-api',
@@ -13,6 +15,8 @@ import { SnackbarService } from '../../services/snackbar/snackbar.service';
})
export class MyAppsUseApiComponent implements OnInit, OnChanges {
@Input() contract?: IContract;
+ newContractDetails: ISignUpInfo;
+
mockText =
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et';
@@ -32,8 +36,11 @@ export class MyAppsUseApiComponent implements OnInit, OnChanges {
constructor(
private backend: BackendService,
- private snackbar: SnackbarService
- ) {}
+ private snackbar: SnackbarService,
+ private signUpService: SignUpService,
+ ) {
+ this.newContractDetails = this.signUpService.getSignUpInfo();
+ }
ngOnChanges(): void {
this.initProperties();
@@ -46,7 +53,7 @@ export class MyAppsUseApiComponent implements OnInit, OnChanges {
private initProperties() {
if (this.contract) {
this.disableButtons = false;
- this.apiKey = this.contract.client.apikey;
+ this.apiKey = this.contract!.client.apikey;
this.backend
.getManagedApiEndpoint(
this.contract.api.api.organization.id,

MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
@@ -16,6 +16,8 @@ import {
} from '../../interfaces/ICommunication';
import { flatMap } from 'rxjs/internal/operators';
import { IContractExt } from '../../interfaces/IContractExt';
+import {PolicyService} from "../../services/policy/policy.service";
+import {IPolicyExt} from "../../interfaces/IPolicyExt";
@Component({
selector: 'app-my-apps',
@@ -33,7 +35,8 @@ export class MyAppsComponent implements OnInit {
constructor(
private heroService: HeroService,
private translator: TranslateService,
- private backend: BackendService
+ private backend: BackendService,
+ private policyService: PolicyService,
) {}
ngOnInit(): void {
@@ -114,10 +117,13 @@ export class MyAppsComponent implements OnInit {
);
} else {
this.clientContractsMap.set(clientNameVersionMapped, [contract]);
+ console.log('test')
}
});
}
+
+
/**
* Extends the ContractBean object with additional values
* @param contract
@@ -126,7 +132,7 @@ export class MyAppsComponent implements OnInit {
private extendContract(contract: IContract): IContractExt {
const contractExt = contract as IContractExt;
contractExt.section = 'summary';
- contractExt.policies = this.getPolicies();
+ contractExt.policies = this.getPolicies(contractExt);
return contractExt;
}
@@ -137,8 +143,19 @@ export class MyAppsComponent implements OnInit {
});
}
- private getPolicies() {
- return [];
+ private getPolicies(extendedContract: IContractExt): IPolicyExt[] {
+ const policies: IPolicyExt[] = [];
+ this.policyService.getPlanPolicies(extendedContract.plan.plan.organization.id,
+ extendedContract.plan.plan.id,
+ extendedContract.plan.version).subscribe((extendedPolicy: IPolicyExt) => {
+ policies.push(extendedPolicy);
+ });
+ this.policyService.getApiPolicies(extendedContract.api.api.organization.id,
+ extendedContract.api.api.id,
+ extendedContract.api.version).subscribe((extendedPolicy: IPolicyExt) => {
+ policies.push(extendedPolicy);
+ })
+ return policies;
}
setSection(api: any, sectionName: ISection) {

MODIFY
src/app/components/policy-card/policy-card.component.ts
src/app/components/policy-card/policy-card.component.ts
import { Component, Input, OnInit } from '@angular/core';
-import { IPolicy } from '../../interfaces/ICommunication';
+import {IPolicyExt} from "../../interfaces/IPolicyExt";
export interface PolicyHeaders {
headerLimit: string;
@@ -13,7 +13,7 @@ export interface PolicyHeaders {
styleUrls: ['./policy-card.component.scss'],
})
export class PolicyCardComponent implements OnInit {
- @Input() policy?: IPolicy;
+ @Input() policy?: IPolicyExt;
// Default Headers
private rateLimitPolicyHeaders: PolicyHeaders = {

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

add plans and policies to sign-up stepper and my-apps pages