Admin-View to manage Developers
ADD
src/app/admin/admin.component.html
+<p>admin works!</p>

ADD
src/app/admin/admin.component.scss
src/app/admin/admin.component.scss
ADD
src/app/admin/admin.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+ let component: AdminComponent;
+ let fixture: ComponentFixture<AdminComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AdminComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AdminComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/admin/admin.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-admin',
+ templateUrl: './admin.component.html',
+ styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}

MODIFY
src/app/api-data.service.ts
src/app/api-data.service.ts
@@ -106,6 +106,31 @@ export interface Contract {
createdOn: string;
}
+export interface ClientMapping {
+ clientId: string;
+ organizationId: string;
+}
+
+export interface Developer {
+ id: string;
+ name: string;
+ clients: Array<ClientMapping>;
+}
+
+export interface ClientBean {
+ name: string;
+ id: string;
+ description: string;
+ createdOn: string;
+ organizationName: string;
+ organizationId: string;
+}
+
+export interface ClientSearchResult {
+ beans: Array<ClientBean>;
+ totalSize: number;
+}
+
/**
* Gateway Details
*/
@@ -183,4 +208,51 @@ export class ApiDataService {
return this.http.get(url) as Observable<GatewayEndpoint>;
}
+ /**
+ * Get all available developers
+ */
+ public getAllDevelopers() {
+ const url = this.apimanUiRestUrl + '/developers';
+ return this.http.get(url) as Observable<Array<Developer>>;
+ }
+
+ /**
+ * Create new developer
+ * @param developer the developer to create
+ */
+ public createNewDeveloper(developer: Developer) {
+ const url = this.apimanUiRestUrl + '/developers';
+ return this.http.post(url, developer);
+ }
+
+ /**
+ * Update a developer
+ * @param developer the developer to update
+ */
+ public updateDeveloper(developer: Developer) {
+ const url = this.apimanUiRestUrl + '/developers';
+ return this.http.put(url, developer);
+ }
+
+ /**
+ * Get all available clients
+ */
+ public getAllClients() {
+ const url = this.apimanUiRestUrl + '/search/clients';
+ const searchQuery = {
+ filters: [{
+ name: 'name',
+ value: '*',
+ operator: 'like'
+ }],
+
+ paging: {
+ page: '1',
+ pageSize: '10000'
+ }
+ };
+ return (this.http.post(url, searchQuery) as Observable<ClientSearchResult>)
+ .pipe(mergeMap( searchResult => searchResult.beans));
+ }
+
}

MODIFY
src/app/app-routing.module.ts
src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+import { AdminComponent } from './admin/admin.component';
+import {DeveloperComponent} from './developer/developer.component';
-
-const routes: Routes = [];
+const routes: Routes = [
+ { path: '', component: DeveloperComponent },
+ { path: 'admin', component: AdminComponent }
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],

MODIFY
src/app/app.component.html
src/app/app.component.html
<app-pas-header></app-pas-header>
-<div *ngFor="let developerId of developers">
- <h2 *ngIf="developers.length > 1">{{developerId}}</h2>
- <api-list [developerId]="developerId"></api-list>
-</div>
-
-<div id="noData" *ngIf="developers.length === 0">
- <p>No developers defined for this user.</p>
-</div>
-
<router-outlet></router-outlet>

MODIFY
src/app/app.component.scss
src/app/app.component.scss
-
-h2 {
- padding-left: 10px;
- font-weight: normal;
-}
-
-p {
- text-align: center;
- vertical-align: bottom;
-}

MODIFY
src/app/app.component.ts
src/app/app.component.ts
import { Component } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
@Component({
selector: 'app-root',
@@ -7,14 +6,4 @@ import { KeycloakService } from 'keycloak-angular';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
-
- public developers: Array<string> = [];
-
- constructor(private keycloak: KeycloakService) {
- // get keycloak client roles of devportal
- const resourceAccess = this.keycloak.getKeycloakInstance().tokenParsed.resource_access['apiman-devportal'];
- if (resourceAccess && resourceAccess.roles) {
- this.developers = resourceAccess.roles;
- }
- }
}

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -16,13 +16,17 @@ import { HttpClientModule } from '@angular/common/http';
import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
import { initializer } from './app-init';
import {environment} from '../environments/environment';
+import { AdminComponent } from './admin/admin.component';
+import { DeveloperComponent } from './developer/developer.component';
@NgModule({
declarations: [
AppComponent,
PasHeaderComponent,
- ApiListComponent
+ ApiListComponent,
+ AdminComponent,
+ DeveloperComponent
],
imports: [
BrowserModule,

ADD
src/app/developer/developer.component.html
+<div *ngFor="let developerId of developers">
+ <h2 *ngIf="developers.length > 1">{{developerId}}</h2>
+ <api-list [developerId]="developerId"></api-list>
+</div>
+
+<div id="noData" *ngIf="developers.length === 0">
+ <p>No developers defined for this user.</p>
+</div>

ADD
src/app/developer/developer.component.scss
+
+h2 {
+ padding-left: 10px;
+ font-weight: normal;
+}
+
+p {
+ text-align: center;
+ vertical-align: bottom;
+}

ADD
src/app/developer/developer.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeveloperComponent } from './developer.component';
+
+describe('DeveloperComponent', () => {
+ let component: DeveloperComponent;
+ let fixture: ComponentFixture<DeveloperComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DeveloperComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DeveloperComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/developer/developer.component.ts
+import { Component, OnInit } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
+
+@Component({
+ selector: 'app-developer',
+ templateUrl: './developer.component.html',
+ styleUrls: ['./developer.component.scss']
+})
+
+export class DeveloperComponent {
+
+ public developers: Array<string> = [];
+
+ constructor(private keycloak: KeycloakService) {
+ // get keycloak client roles of devportal
+ const resourceAccess = this.keycloak.getKeycloakInstance().tokenParsed.resource_access['apiman-devportal'];
+ if (resourceAccess && resourceAccess.roles) {
+ this.developers = resourceAccess.roles;
+ }
+ }
+}

GW-263: Admin-View to manage Developers