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 <lathishbabu.ganesan@est.tech>
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.
+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.
-## Code scaffolding
-
-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 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 @@
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 { 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 @@
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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+ 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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+ 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"