From b339e7ad48142e5c1d5c29b4cc0a00e9bbbbaa4d Mon Sep 17 00:00:00 2001 From: Lathish Date: Tue, 8 Dec 2020 21:55:51 +0000 Subject: [PATCH 1/1] Mock the backend API calls This allows developer to test the UI without the need of backend Issue-ID: NONRTRIC-355 Change-Id: I38a2d16234a727236ba93ec78ba62b17eeb4dc34 Signed-off-by: Lathish --- webapp-frontend/README.md | 13 ++---- webapp-frontend/angular.json | 11 +++++ webapp-frontend/package.json | 1 + webapp-frontend/src/app/controlpanel.module.ts | 13 +++++- webapp-frontend/src/app/interceptor.mock.ts | 51 ++++++++++++++++++++++ webapp-frontend/src/app/interceptor.ts | 13 ++++++ webapp-frontend/src/app/mock/ei-jobs.json | 12 +++++ webapp-frontend/src/app/mock/ei-producers.json | 9 ++++ .../src/app/mock/policy-instance-edit.json | 9 ++++ webapp-frontend/src/app/mock/policy-instance.json | 18 ++++++++ webapp-frontend/src/app/mock/policytypes.json | 6 +++ .../src/environments/environment.mock.ts | 36 +++++++++++++++ .../src/environments/environment.prod.ts | 3 +- webapp-frontend/src/environments/environment.ts | 3 +- webapp-frontend/tsconfig.json | 1 + 15 files changed, 185 insertions(+), 14 deletions(-) create mode 100644 webapp-frontend/src/app/interceptor.mock.ts create mode 100644 webapp-frontend/src/app/interceptor.ts create mode 100644 webapp-frontend/src/app/mock/ei-jobs.json create mode 100644 webapp-frontend/src/app/mock/ei-producers.json create mode 100644 webapp-frontend/src/app/mock/policy-instance-edit.json create mode 100644 webapp-frontend/src/app/mock/policy-instance.json create mode 100644 webapp-frontend/src/app/mock/policytypes.json create mode 100644 webapp-frontend/src/environments/environment.mock.ts diff --git a/webapp-frontend/README.md b/webapp-frontend/README.md index 1360dd3..68ff85f 100644 --- a/webapp-frontend/README.md +++ b/webapp-frontend/README.md @@ -1,14 +1,11 @@ # Non-RT RIC Control Panel Web Application Frontend -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.3. - ## Development server -Run `./ng serve --proxy-config proxy.conf.json` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding +Run `./ng serve --proxy-config proxy.conf.json` or `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +## Development server with Mock Data +Run `npm run start:mock` for a dev server with mock data. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. This enables the developer to test the UI without the need of backend. ## Build @@ -22,10 +19,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). - ## License Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. diff --git a/webapp-frontend/angular.json b/webapp-frontend/angular.json index be2d429..22246ff 100644 --- a/webapp-frontend/angular.json +++ b/webapp-frontend/angular.json @@ -66,6 +66,14 @@ "maximumError": "5mb" } ] + }, + "mock": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.mock.ts" + } + ] } } }, @@ -77,6 +85,9 @@ "configurations": { "production": { "browserTarget": "controlpanelApp:build:production" + }, + "mock": { + "browserTarget": "controlpanelApp:build:mock" } } }, diff --git a/webapp-frontend/package.json b/webapp-frontend/package.json index a88e1f2..95ff727 100644 --- a/webapp-frontend/package.json +++ b/webapp-frontend/package.json @@ -4,6 +4,7 @@ "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", + "start:mock": "ng serve --configuration=mock", "build": "ng build", "test": "ng test", "lint": "ng lint", diff --git a/webapp-frontend/src/app/controlpanel.module.ts b/webapp-frontend/src/app/controlpanel.module.ts index b20e871..8e958a9 100644 --- a/webapp-frontend/src/app/controlpanel.module.ts +++ b/webapp-frontend/src/app/controlpanel.module.ts @@ -30,7 +30,7 @@ import { MatTabsModule, MatToolbarModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { HttpClientModule } from '@angular/common/http'; +import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { MatRadioModule } from '@angular/material/radio'; import { MatTooltipModule } from '@angular/material/tooltip'; @@ -59,7 +59,11 @@ import { CookieModule } from 'ngx-cookie'; import { NodeModulesComponent } from './node-modules/node-modules.component'; import { EICardComponent } from './ui/ei-card/ei-card.component'; import { EICoordinatorComponent } from './ei-coordinator/ei-coordinator.component'; +import { HttpMockRequestInterceptor } from './interceptor.mock'; +import { environment } from 'src/environments/environment'; +import { HttpRequestInterceptor } from './interceptor'; +export const isMock = environment.mock; @NgModule({ declarations: [ @@ -144,7 +148,12 @@ import { EICoordinatorComponent } from './ei-coordinator/ei-coordinator.componen providers: [ ControlpanelService, ErrorDialogService, - UiService + UiService, + { + provide: HTTP_INTERCEPTORS, + useClass: isMock ? HttpMockRequestInterceptor : HttpRequestInterceptor, + multi: true + } ], bootstrap: [ControlpanelComponent] }) diff --git a/webapp-frontend/src/app/interceptor.mock.ts b/webapp-frontend/src/app/interceptor.mock.ts new file mode 100644 index 0000000..bffeabe --- /dev/null +++ b/webapp-frontend/src/app/interceptor.mock.ts @@ -0,0 +1,51 @@ +import { Injectable, Injector } from '@angular/core'; +import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; +import * as policytypes from './mock/policytypes.json'; +import * as policyinstances from './mock/policy-instance.json'; +import * as policyinstanceedit from './mock/policy-instance-edit.json'; +import * as eijobs from './mock/ei-jobs.json'; +import * as eiproducers from './mock/ei-producers.json'; + +const urls = [ + { + url: 'api/policy/policytypes', + json: policytypes + }, + { + url: 'api/policy/policies?type=1', + json: policyinstances + }, + { + url: 'api/policy/policies/2000?type=1', + json: policyinstanceedit + }, + { + url: 'api/policy/policies/2000?ric=ric1&type=1', + json: '' + }, + { + url: 'api/enrichment/eijobs', + json: eijobs + }, + { + url: 'api/enrichment/eiproducers', + json: eiproducers + } +]; + +@Injectable() +export class HttpMockRequestInterceptor implements HttpInterceptor { + constructor(private injector: Injector) {} + + intercept(request: HttpRequest, next: HttpHandler): Observable> { + for (const element of urls) { + if (request.url === element.url) { + console.log('Loaded from stub json : ' + request.url); + return of(new HttpResponse({ status: 200, body: ((element.json) as any).default })); + } + } + console.log('Loaded from mock http call :' + request.url); + return next.handle(request); + } +} \ No newline at end of file diff --git a/webapp-frontend/src/app/interceptor.ts b/webapp-frontend/src/app/interceptor.ts new file mode 100644 index 0000000..6b46138 --- /dev/null +++ b/webapp-frontend/src/app/interceptor.ts @@ -0,0 +1,13 @@ +import { Injectable, Injector } from '@angular/core'; +import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; + +@Injectable() +export class HttpRequestInterceptor implements HttpInterceptor { + constructor(private injector: Injector) {} + + intercept(request: HttpRequest, next: HttpHandler): Observable> { + console.log('Interceptor Invoked' + request.url); + return next.handle(request); + } +} diff --git a/webapp-frontend/src/app/mock/ei-jobs.json b/webapp-frontend/src/app/mock/ei-jobs.json new file mode 100644 index 0000000..ffe37d7 --- /dev/null +++ b/webapp-frontend/src/app/mock/ei-jobs.json @@ -0,0 +1,12 @@ +[ + { + "ei_job_identity": "job1", + "ei_type_identity": "type1", + "ei_job_data": { + "jobparam2": "value2_job1", + "jobparam3": "value3_job1", + "jobparam1": "value1_job1" + }, + "target_uri": "https://ricsim_g3_1:8185/datadelivery" + } + ] \ No newline at end of file diff --git a/webapp-frontend/src/app/mock/ei-producers.json b/webapp-frontend/src/app/mock/ei-producers.json new file mode 100644 index 0000000..75cedc5 --- /dev/null +++ b/webapp-frontend/src/app/mock/ei-producers.json @@ -0,0 +1,9 @@ +[ + { + "ei_producer_id": "1", + "ei_producer_types": [ + "type1" + ], + "status": "ENABLED" + } + ] \ No newline at end of file diff --git a/webapp-frontend/src/app/mock/policy-instance-edit.json b/webapp-frontend/src/app/mock/policy-instance-edit.json new file mode 100644 index 0000000..d652cf3 --- /dev/null +++ b/webapp-frontend/src/app/mock/policy-instance-edit.json @@ -0,0 +1,9 @@ +{ + "scope": { + "ueId": "ue3100", + "qosId": "qos3100" + }, + "qosObjectives": { + "priorityLevel": 3100 + } + } \ No newline at end of file diff --git a/webapp-frontend/src/app/mock/policy-instance.json b/webapp-frontend/src/app/mock/policy-instance.json new file mode 100644 index 0000000..e29997e --- /dev/null +++ b/webapp-frontend/src/app/mock/policy-instance.json @@ -0,0 +1,18 @@ +[ + { + "id": "2000", + "type": "1", + "ric": "ric1", + "json": { + "scope": { + "ueId": "ue3100", + "qosId": "qos3100" + }, + "qosObjectives": { + "priorityLevel": 3100 + } + }, + "service": "service1", + "lastModified": "2020-12-08T21:12:43.719084Z" + } + ] \ No newline at end of file diff --git a/webapp-frontend/src/app/mock/policytypes.json b/webapp-frontend/src/app/mock/policytypes.json new file mode 100644 index 0000000..14b835a --- /dev/null +++ b/webapp-frontend/src/app/mock/policytypes.json @@ -0,0 +1,6 @@ +[ + { + "name": "1", + "schema": "{\"$schema\":\"http://json-schema.org/draft-07/schema#\",\"description\":\"Type 1 policy type\",\"additionalProperties\":false,\"title\":\"1\",\"type\":\"object\",\"properties\":{\"qosObjectives\":{\"additionalProperties\":false,\"type\":\"object\",\"properties\":{\"priorityLevel\":{\"type\":\"number\"}},\"required\":[\"priorityLevel\"]},\"scope\":{\"additionalProperties\":false,\"type\":\"object\",\"properties\":{\"qosId\":{\"type\":\"string\"},\"ueId\":{\"type\":\"string\"}},\"required\":[\"ueId\",\"qosId\"]}},\"required\":[\"scope\",\"qosObjectives\"]}" + } + ] \ No newline at end of file diff --git a/webapp-frontend/src/environments/environment.mock.ts b/webapp-frontend/src/environments/environment.mock.ts new file mode 100644 index 0000000..34d4101 --- /dev/null +++ b/webapp-frontend/src/environments/environment.mock.ts @@ -0,0 +1,36 @@ +/*- + * ========================LICENSE_START================================= + * O-RAN-SC + * %% + * Copyright (C) 2019 AT&T Intellectual Property + * %% + * 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 + * limitations under the License. + * ========================LICENSE_END=================================== + */ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, + mock: true +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/webapp-frontend/src/environments/environment.prod.ts b/webapp-frontend/src/environments/environment.prod.ts index fb04b9c..d413e00 100644 --- a/webapp-frontend/src/environments/environment.prod.ts +++ b/webapp-frontend/src/environments/environment.prod.ts @@ -18,5 +18,6 @@ * ========================LICENSE_END=================================== */ export const environment = { - production: true + production: true, + mock: false }; diff --git a/webapp-frontend/src/environments/environment.ts b/webapp-frontend/src/environments/environment.ts index 5aca243..51384a8 100644 --- a/webapp-frontend/src/environments/environment.ts +++ b/webapp-frontend/src/environments/environment.ts @@ -22,7 +22,8 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + mock: false }; /* diff --git a/webapp-frontend/tsconfig.json b/webapp-frontend/tsconfig.json index 457bef4..a94b5b6 100644 --- a/webapp-frontend/tsconfig.json +++ b/webapp-frontend/tsconfig.json @@ -11,6 +11,7 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, + "resolveJsonModule": true, "target": "es5", "typeRoots": [ "node_modules/@types" -- 2.16.6