List API status
MODIFY
src/app/components/developer/api-list/api-list.component.html
src/app/components/developer/api-list/api-list.component.html
<table *ngIf="sortedApiData.length > 0" matSort matSortStart="desc" (matSortChange)="sortData($event)" mat-table [dataSource]="sortedApiData" multiTemplateDataRows>
<ng-container matColumnDef="api">
<th mat-header-cell mat-sort-header="api" *matHeaderCellDef>API</th>
- <td mat-cell *matCellDef="let element" (click)="expandedElement = expandedElement === element ? null : element" class="clickable"> {{element.apiOrganization}} / <b>{{element.apiName}}</b> </td>
+ <td mat-cell *matCellDef="let element" (click)="expandedElement = expandedElement === element ? null : element" class="clickable">
+ <mat-icon class="status" [ngClass]="element.status" matTooltip="{{this.computeStatusText(element.status)}}">brightness_1</mat-icon>
+ {{element.apiOrganization}} / <b>{{element.apiName}}</b>
+ </td>
</ng-container>
<ng-container matColumnDef="apiVersion">
<th mat-header-cell mat-sort-header="version" *matHeaderCellDef>API Version</th>
</ng-container>
<ng-container matColumnDef="tryApi">
<th mat-header-cell *matHeaderCellDef>Try API</th>
- <td mat-cell *matCellDef="let element"> <mat-icon class="button" *ngIf="element.swaggerDefinitionType !== null && element.swaggerDefinitionType !== 'None'" (click)="this.openSwaggerView(element)" matTooltip="Try the API">play_arrow</mat-icon> </td>
+ <td mat-cell *matCellDef="let element">
+ <mat-icon class="button" *ngIf="element.status === status.active && element.swaggerDefinitionType !== null && element.swaggerDefinitionType !== 'None'" (click)="this.openSwaggerView(element)" matTooltip="Try the API">play_arrow</mat-icon>
+ <mat-icon class="button" *ngIf="element.status === status.inactive && element.swaggerDefinitionType !== null && element.swaggerDefinitionType !== 'None'" (click)="this.openSwaggerView(element)" matTooltip="View the API">remove_red_eye</mat-icon>
+ </td>
</ng-container>
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef>Options</th>

MODIFY
src/app/components/developer/api-list/api-list.component.scss
src/app/components/developer/api-list/api-list.component.scss
@@ -57,3 +57,20 @@ tr.api-detail-row {
background-color: inherit;
color: inherit;
}
+
+.status {
+ font-size: 12px;
+ padding-top: 9px;
+}
+
+.Retired {
+ color: var(--branding-status-retired);
+}
+
+.Inactive {
+ color: var(--branding-status-inactive);
+}
+
+.Active {
+ color: var(--branding-status-active);
+}

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
@@ -13,6 +13,7 @@ export interface ApiListElement {
apiName: string;
apiOrganization: string;
apiVersion: string;
+ status: string;
clientOrganization: string;
clientName: string;
clientVersion: string;
@@ -43,6 +44,12 @@ export class ApiListComponent implements OnChanges {
apiData: Array<ApiListElement> = [];
sortedApiData: Array<ApiListElement>;
+ status = class ApiStatus {
+ static retired = 'Retired';
+ static active = 'Active';
+ static inactive = 'Inactive';
+ };
+
@Input('developerId') developerId;
constructor(private router: Router,
@@ -118,6 +125,7 @@ export class ApiListComponent implements OnChanges {
clientOrganization: contract.clientOrganizationName,
clientName: contract.clientName,
clientVersion: contract.clientVersion,
+ status: this.computeStatus(clientVersion.status, apiVersionDetails.status),
endpoint: this.buildApiEndpoint(gateway.endpoint, contract.apiOrganizationId, contract.apiId, contract.apiVersion, clientVersion.apiKey),
apikey: clientVersion.apiKey,
swaggerDefinitionType: apiVersionDetails.definitionType,
@@ -158,7 +166,8 @@ export class ApiListComponent implements OnChanges {
this.router.navigate([entry.swaggerURL], {
state: {
data: {
- apikey: entry.apikey
+ apikey: entry.apikey,
+ apiStatus: entry.status
}
}
});
@@ -186,6 +195,37 @@ export class ApiListComponent implements OnChanges {
});
}
+ /**
+ * Compute combined status from API and Client Status
+ */
+ private computeStatus(clientStatus, apiStatus): string {
+ const registered = 'Registered';
+ const published = 'Published';
+ const retired = 'Retired';
+
+ if (clientStatus === retired || apiStatus === retired) {
+ return this.status.retired;
+ }
+ if (clientStatus === registered && apiStatus === published) {
+ return this.status.active;
+ }
+ return this.status.inactive;
+ }
+
+ /**
+ * Compute tooltip status text
+ * @param status the computed status
+ */
+ public computeStatusText(apiStatus) {
+ if (apiStatus === this.status.active) {
+ return 'API is active';
+ }
+ if (apiStatus === this.status.inactive) {
+ return 'API coming soon';
+ }
+ return 'API is retired';
+ }
+
/**
* Compares two values
* @param a value

MODIFY
src/app/components/swagger/swagger.component.ts
src/app/components/swagger/swagger.component.ts
@@ -22,6 +22,7 @@ export class SwaggerComponent implements OnInit {
const version = this.route.snapshot.paramMap.get('version');
let apiKey = history.state.data ? history.state.data.apikey : null;
+ const apiStatus = history.state.data ? history.state.data.apiStatus : null;
if (apiKey) {
// save key for reloading page
@@ -36,6 +37,19 @@ export class SwaggerComponent implements OnInit {
+ '/apis/' + apiId + '/versions/'
+ version + '/definition';
+ const CheckAllowTryItOutPlugin = () => {
+ return {
+ statePlugins: {
+ spec: {
+ wrapSelectors: {
+ // Enable TryOut Button only for active APIs
+ allowTryItOutFor: () => () => apiStatus === 'Active'
+ }
+ }
+ }
+ };
+ };
+
const swaggerUI = SwaggerUIBundle({
dom_id: '#swagger-editor',
layout: 'BaseLayout',
@@ -43,6 +57,9 @@ export class SwaggerComponent implements OnInit {
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
+ plugins: [
+ CheckAllowTryItOutPlugin
+ ],
url: swaggerURL,
docExpansion: 'none',
operationsSorter: 'alpha',

MODIFY
src/styles/styles.scss
src/styles/styles.scss
--alert-color-hover: #ac1e1c;
--scheer-grey-color-fill: #bab6b9;
+ --scheer-color-green: #0F9D58;
--scheer-lightorange: #ffa500;
+ --scheer-color-red: #CF303A;
- --branding-message-error: #CF303A;
+ --branding-message-error: var(--scheer-color-red);
--branding-message-warn: var(--scheer-lightorange);
- --branding-message-success: #0F9D58;
+ --branding-message-success: var(--scheer-color-green);
--branding-message-info: var(--scheer-grey-color-fill);
+ --branding-status-active: var(--scheer-color-green);
+ --branding-status-inactive: var(--scheer-lightorange);
+ --branding-status-retired: var(--scheer-grey-color-fill);
}
body {

GW-303: List API status