Mock the backend API calls 83/5283/2
authorLathish <lathishbabu.ganesan@est.tech>
Tue, 8 Dec 2020 21:55:51 +0000 (21:55 +0000)
committerLathish <lathishbabu.ganesan@est.tech>
Fri, 11 Dec 2020 15:23:41 +0000 (15:23 +0000)
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>
15 files changed:
webapp-frontend/README.md
webapp-frontend/angular.json
webapp-frontend/package.json
webapp-frontend/src/app/controlpanel.module.ts
webapp-frontend/src/app/interceptor.mock.ts [new file with mode: 0644]
webapp-frontend/src/app/interceptor.ts [new file with mode: 0644]
webapp-frontend/src/app/mock/ei-jobs.json [new file with mode: 0644]
webapp-frontend/src/app/mock/ei-producers.json [new file with mode: 0644]
webapp-frontend/src/app/mock/policy-instance-edit.json [new file with mode: 0644]
webapp-frontend/src/app/mock/policy-instance.json [new file with mode: 0644]
webapp-frontend/src/app/mock/policytypes.json [new file with mode: 0644]
webapp-frontend/src/environments/environment.mock.ts [new file with mode: 0644]
webapp-frontend/src/environments/environment.prod.ts
webapp-frontend/src/environments/environment.ts
webapp-frontend/tsconfig.json

index 1360dd3..68ff85f 100644 (file)
@@ -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.
index be2d429..22246ff 100644 (file)
                   "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"
             }
           }
         },
index a88e1f2..95ff727 100644 (file)
@@ -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",
index b20e871..8e958a9 100644 (file)
@@ -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 (file)
index 0000000..bffeabe
--- /dev/null
@@ -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 (file)
index 0000000..6b46138
--- /dev/null
@@ -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 (file)
index 0000000..ffe37d7
--- /dev/null
@@ -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 (file)
index 0000000..75cedc5
--- /dev/null
@@ -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 (file)
index 0000000..d652cf3
--- /dev/null
@@ -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 (file)
index 0000000..e29997e
--- /dev/null
@@ -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 (file)
index 0000000..14b835a
--- /dev/null
@@ -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 (file)
index 0000000..34d4101
--- /dev/null
@@ -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.
index fb04b9c..d413e00 100644 (file)
@@ -18,5 +18,6 @@
  * ========================LICENSE_END===================================
  */
 export const environment = {
-  production: true
+  production: true,
+  mock: false
 };
index 5aca243..51384a8 100644 (file)
@@ -22,7 +22,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  mock: false
 };
 
 /*
index 457bef4..a94b5b6 100644 (file)
@@ -11,6 +11,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "resolveJsonModule": true,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"