From: elinuxhenrik <henrik.b.andersson@est.tech>
Date: Tue, 30 Mar 2021 07:58:26 +0000 (+0200)
Subject: Fix PolicyControlComponent
X-Git-Tag: 2.2.0~45^2
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=8145531a9b5d15edcaa49249bef0c0c95723acbb;p=portal%2Fnonrtric-controlpanel.git

Fix PolicyControlComponent

Change-Id: Ia588cca7f031de2eddbf267b7cbf11f59baf3c85
Issue-ID: NONRTRIC-456
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
---

diff --git a/webapp-frontend/.vscode/launch.json b/webapp-frontend/.vscode/launch.json
index 9d1a541..e432bcb 100644
--- a/webapp-frontend/.vscode/launch.json
+++ b/webapp-frontend/.vscode/launch.json
@@ -8,6 +8,13 @@
             "url": "http://localhost:4200",
             "webRoot": "${workspaceFolder}"
         },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against docker",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "chrome",
             "request": "launch",
diff --git a/webapp-frontend/src/app/interceptor.mock.ts b/webapp-frontend/src/app/interceptor.mock.ts
index 749d762..6fc5c14 100644
--- a/webapp-frontend/src/app/interceptor.mock.ts
+++ b/webapp-frontend/src/app/interceptor.mock.ts
@@ -46,10 +46,6 @@ const urls = [
         url: '/a1-policy/v2/policy-types',
         json: policytypesList
     },
-    {
-        url: '/a1-policy/v2/policy-types/',
-        json: policytypes1
-    },
     {
         url: '/a1-policy/v2/policy-types/1',
         json: policytypes1
diff --git a/webapp-frontend/src/app/policy/policy-control.component.html b/webapp-frontend/src/app/policy/policy-control.component.html
index 63f2dab..b9f4c34 100644
--- a/webapp-frontend/src/app/policy/policy-control.component.html
+++ b/webapp-frontend/src/app/policy/policy-control.component.html
@@ -20,11 +20,6 @@
 
   <div fxLayout="row">
     <div class="nrcp-global-page-title">Policy Control</div>
-    <div class="refresh-button">
-        <button mat-icon-button color="primary" (click)="refreshTables()">
-            <mat-icon>refresh</mat-icon>
-        </button>
-    </div>
 </div>
 
 <nrcp-policy-type *ngFor="let policyTypeId of this.policyTypeIds" [policyTypeId]="policyTypeId"></nrcp-policy-type>
diff --git a/webapp-frontend/src/app/policy/policy-control.component.spec.ts b/webapp-frontend/src/app/policy/policy-control.component.spec.ts
index 198305d..92b3bbc 100644
--- a/webapp-frontend/src/app/policy/policy-control.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-control.component.spec.ts
@@ -19,50 +19,33 @@
  */
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { MatDialog } from "@angular/material/dialog";
 import { MatIconModule } from "@angular/material/icon";
 import { MatTableModule } from "@angular/material/table";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { of } from "rxjs";
 
-import { NotificationService } from "@services/ui/notification.service";
 import { PolicyControlComponent } from "./policy-control.component";
-import { PolicyTypeDataSource } from "@policy/policy-type/policy-type.datasource";
-import { UiService } from "@services/ui/ui.service";
 import { PolicyTypeSchema } from "@interfaces/policy.types";
-import { PolicyService } from '../services/policy/policy.service';
+import { PolicyService } from "@services/policy/policy.service";
 
 describe("PolicyControlComponent", () => {
   let component: PolicyControlComponent;
   let fixture: ComponentFixture<PolicyControlComponent>;
 
   beforeEach(async(() => {
-    const policyTypeDataSourceSpy = jasmine.createSpyObj(
-      "PolicyTypeDataSource",
-      ["connect", "getPolicyTypes", "disconnect"]
-    );
-    const policyServiceSpy = jasmine.createSpyObj('PolicyService', ['getPolicyTypes']);
+    const policyServiceSpy = jasmine.createSpyObj("PolicyService", [
+      "getPolicyTypes",
+    ]);
     var policyTypeSchema = {} as PolicyTypeSchema;
     policyTypeSchema.name = "";
     policyTypeSchema.schemaObject = "";
-    policyTypeDataSourceSpy.connect.and.returnValue(of([policyTypeSchema]));
-    policyTypeDataSourceSpy.disconnect();
     policyServiceSpy.getPolicyTypes.and.returnValue(of(["type1"]));
 
-    let matDialogStub: Partial<MatDialog>;
-    let notificationServiceStub: Partial<NotificationService>;
-
     TestBed.configureTestingModule({
       imports: [MatIconModule, MatTableModule, BrowserAnimationsModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [PolicyControlComponent],
-      providers: [
-        { provide : PolicyService, useValue: policyServiceSpy},
-        { provide: PolicyTypeDataSource, useValue: policyTypeDataSourceSpy },
-        { provide: MatDialog, useValue: matDialogStub },
-        { provide: NotificationService, useValue: notificationServiceStub },
-        UiService,
-      ],
+      providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
     }).compileComponents();
   }));
 
diff --git a/webapp-frontend/src/app/policy/policy-control.component.ts b/webapp-frontend/src/app/policy/policy-control.component.ts
index de3f578..df49c76 100644
--- a/webapp-frontend/src/app/policy/policy-control.component.ts
+++ b/webapp-frontend/src/app/policy/policy-control.component.ts
@@ -17,90 +17,24 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, OnInit } from "@angular/core";
 
-import { BehaviorSubject, Observable } from 'rxjs';
-
-import { PolicyTypes, PolicyTypeSchema } from '@interfaces/policy.types';
-import { PolicyTypeDataSource } from './policy-type/policy-type.datasource';
-import { getPolicyDialogProperties } from './policy-instance-dialog/policy-instance-dialog.component';
-import { PolicyInstanceDialogComponent } from './policy-instance-dialog/policy-instance-dialog.component';
-import { UiService } from '@services/ui/ui.service';
-import { PolicyService } from '@services/policy/policy.service';
-import { PolicyTypeComponent } from './policy-type/policy-type.component';
-
-class PolicyTypeInfo {
-    constructor(public type: PolicyTypeSchema) { }
-
-    isExpanded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-}
+import { PolicyTypes } from "@interfaces/policy.types";
+import { PolicyService } from "@services/policy/policy.service";
 
 @Component({
-    selector: 'nrcp-policy-control',
-    templateUrl: './policy-control.component.html',
-    styleUrls: ['./policy-control.component.scss'],
-    animations: [
-        trigger('detailExpand', [
-            state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
-            state('expanded', style({ height: '*' })),
-            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
-        ]),
-    ],
+  selector: "nrcp-policy-control",
+  templateUrl: "./policy-control.component.html",
+  styleUrls: ["./policy-control.component.scss"]
 })
 export class PolicyControlComponent implements OnInit {
+  policyTypeIds: Array<string>;
 
-    policyTypeInfo = new Map<string, PolicyTypeInfo>();
-    policyTypeIds: Array<string>;
-    policyTypeComponent = new PolicyTypeComponent(this.policyTypesDataSource);
-    darkMode: boolean;
-
-    constructor(
-        public policyTypesDataSource: PolicyTypeDataSource,
-        private dialog: MatDialog,
-        private policyService: PolicyService,
-        private ui: UiService) { }
-
-    ngOnInit() {
-        this.policyTypesDataSource.getPolicyTypes();
-        this.ui.darkModeState.subscribe((isDark) => {
-            this.darkMode = isDark;
-        });
-        this.policyService.getPolicyTypes().subscribe((policyType: PolicyTypes) => {
-            this.policyTypeIds = policyType.policytype_ids;
-            }
-        );
-    }
-
-    toggleListInstances(policyTypeSchema: PolicyTypeSchema): void {
-        const info = this.getPolicyTypeInfo(policyTypeSchema);
-        info.isExpanded.next(!info.isExpanded.getValue());
-    }
-
-    getPolicyTypeInfo(policyTypeSchema: PolicyTypeSchema): PolicyTypeInfo {
-        let info: PolicyTypeInfo = this.policyTypeInfo.get(policyTypeSchema.name);
-        if (!info) {
-            info = new PolicyTypeInfo(policyTypeSchema);
-            this.policyTypeInfo.set(policyTypeSchema.name, info);
-        }
-        return info;
-    }
-
-    getDisplayName(policyTypeSchema: PolicyTypeSchema): string {
-        if (policyTypeSchema.schemaObject.title) {
-            return policyTypeSchema.schemaObject.title;
-        }
-        return '< No type >';
-    }
-
-    getExpandedObserver(policyTypeSchema: PolicyTypeSchema): Observable<boolean> {
-        return this.getPolicyTypeInfo(policyTypeSchema).isExpanded.asObservable();
-    }
+  constructor(private policyService: PolicyService) {}
 
-    refreshTables() {
-        this.policyTypesDataSource.getPolicyTypes();
-        this.policyTypeComponent.setIsVisible(false);
-    }
+  ngOnInit() {
+    this.policyService.getPolicyTypes().subscribe((policyType: PolicyTypes) => {
+      this.policyTypeIds = policyType.policytype_ids;
+    });
+  }
 }
diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
index b609904..6084077 100644
--- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
@@ -50,9 +50,9 @@ import { NotificationService } from "@services/ui/notification.service";
 import * as uuid from "uuid";
 
 describe("PolicyInstanceDialogComponent", () => {
-  const untypedSchema = "{}";
+  const untypedSchema = JSON.parse("{}");
   const typedSchema =
-    '{ "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "priorityLevel": "number" }}';
+    JSON.parse('{ "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "priorityLevel": "number" }}');
 
   let component: PolicyInstanceDialogComponent;
   let fixture: ComponentFixture<PolicyInstanceDialogComponent>;
diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
index 65d61a6..d29aa07 100644
--- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
+++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
@@ -110,7 +110,7 @@ export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit {
   }
 
   typeHasSchema(): boolean {
-    return this.jsonSchemaObject !== "{}";
+    return this.jsonSchemaObject.description ? true : false;
   }
 
   isFormValid(): boolean {
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
index 24a7cc7..700e929 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
@@ -75,11 +75,7 @@ export class PolicyInstanceComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
-        let schemaId = this.policyTypeSchema.id;
-        if(schemaId.includes('<No Type>')){
-            schemaId = '';
-        }
-        this.policyInstanceDataSource = new PolicyInstanceDataSource(this.policySvc, this.sort, this.notificationService, schemaId);
+        this.policyInstanceDataSource = new PolicyInstanceDataSource(this.policySvc, this.sort, this.notificationService, this.policyTypeSchema.id);
         this.expanded.subscribe((isExpanded: boolean) => this.onExpand(isExpanded));
 
         this.policyInstanceDataSource.connect().subscribe((data) => {
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.html b/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
index 6bc273d..a94a3e9 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
@@ -23,10 +23,10 @@
     <mat-icon matTooltip="Properties">{{isVisible.value? 'expand_less' : 'expand_more'}}</mat-icon>
   </div>
   <div>
-    <b><u>Policy type:</u></b> {{policyTypeInfo.type.id}}
+    <b><u>Policy type:</u></b> {{policyType}}
   </div>
   <div>
-    <b><u>Description:</u></b>{{policyTypeInfo.type.schemaObject.description}}
+    <b><u>Description:</u></b> {{policyDescription}}
   </div>
 </div>
 
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
index 4276ad3..d02f1b2 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
@@ -18,28 +18,30 @@
  * ========================LICENSE_END===================================
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { PolicyTypeComponent } from './policy-type.component';
-import { PolicyTypeDataSource } from './policy-type.datasource';
-import { PolicyTypeSchema } from '../../interfaces/policy.types';
+import { PolicyTypeComponent } from "./policy-type.component";
+import { PolicyType } from "@interfaces/policy.types";
+import { PolicyService } from "@services/policy/policy.service";
+import { of } from "rxjs";
 
-describe('PolicyTypeComponent', () => {
+describe("PolicyTypeComponent", () => {
   let component: PolicyTypeComponent;
+  let policyServiceSpy: jasmine.SpyObj<PolicyService>;
   let fixture: ComponentFixture<PolicyTypeComponent>;
 
   beforeEach(async(() => {
-    const policyTypeDataSourceSpy = jasmine.createSpyObj('PolicyTypeDataSource', ['getPolicyType']);
-    const policyTypeSchema = {"schemaObject": {"description": "Type 1 policy type"}} as PolicyTypeSchema;
-    policyTypeDataSourceSpy.getPolicyType.and.returnValue(policyTypeSchema);
+    policyServiceSpy = jasmine.createSpyObj("PolicyService", ["getPolicyType"]);
+    const policyTypeSchema = JSON.parse(
+      '{"schemaObject": {"description": "Type 1 policy type"}}'
+    );
+    const policyType = { policy_schema: policyTypeSchema } as PolicyType;
+    policyServiceSpy.getPolicyType.and.returnValue(of(policyType));
 
     TestBed.configureTestingModule({
-      declarations: [ PolicyTypeComponent ],
-      providers: [
-        { provide: PolicyTypeDataSource, useValue: policyTypeDataSourceSpy }
-       ]
-    })
-    .compileComponents();
+      declarations: [PolicyTypeComponent],
+      providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -48,7 +50,7 @@ describe('PolicyTypeComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
index be5b305..7d82cb4 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
@@ -18,46 +18,68 @@
  * ========================LICENSE_END===================================
  */
 
-import { Component, Input, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { PolicyTypeSchema } from '@interfaces/policy.types';
-import { PolicyService } from '@services/policy/policy.service';
-import { PolicyTypeDataSource } from './policy-type.datasource';
+import { Component, Input, OnInit } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { PolicyType, PolicyTypeSchema } from "@interfaces/policy.types";
+import { PolicyService } from "@app/services/policy/policy.service";
 
 class PolicyTypeInfo {
-  constructor(public type: PolicyTypeSchema) { }
+  constructor(public type: PolicyTypeSchema) {}
 
   isExpanded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 }
 
 @Component({
-  selector: 'nrcp-policy-type',
-  templateUrl: './policy-type.component.html',
-  styleUrls: ['./policy-type.component.scss']
+  selector: "nrcp-policy-type",
+  templateUrl: "./policy-type.component.html",
+  styleUrls: ["./policy-type.component.scss"],
 })
 export class PolicyTypeComponent implements OnInit {
-
   @Input() policyTypeId: string;
 
   isVisible: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   policyTypeInfo: PolicyTypeInfo;
+  policyType: string;
+  policyDescription: string;
 
-  constructor(private policyTypeDataSource: PolicyTypeDataSource) {
-  }
+  constructor(private policyService: PolicyService) {}
 
   ngOnInit(): void {
-    const policyTypeSchema = this.policyTypeDataSource.getPolicyType(this.policyTypeId);
-    this.policyTypeInfo = new PolicyTypeInfo(policyTypeSchema);
-    console.log("this.policyType: ", this.policyTypeInfo);
+    if (this.policyTypeId !== "") {
+      this.policyService
+        .getPolicyType(this.policyTypeId)
+        .subscribe((policyType: PolicyType) => {
+          const policyTypeSchema = this.getSchemaObject(policyType);
+          this.policyTypeInfo = new PolicyTypeInfo(policyTypeSchema);
+          this.policyType = this.policyTypeId;
+          this.policyDescription = policyTypeSchema.schemaObject.description;
+        });
+    } else {
+      const noType = {
+        policy_schema: JSON.parse('{"schemaObject": "{}"}'),
+      } as PolicyType;
+      const noTypeSchema = this.getSchemaObject(noType);
+      this.policyTypeInfo = new PolicyTypeInfo(noTypeSchema);
+      this.policyType = "< No Type >";
+      this.policyDescription = "Type with no schema";
+    }
     this.isVisible.next(false);
   }
 
-  public setIsVisible(status: boolean){
+  private getSchemaObject(policyType: PolicyType) {
+    const policyTypeSchema = {} as PolicyTypeSchema;
+    policyTypeSchema.id = this.policyTypeId;
+    policyTypeSchema.schemaObject = policyType.policy_schema;
+    policyTypeSchema.name = policyType.policy_schema.title;
+    return policyTypeSchema;
+  }
+
+  public setIsVisible(status: boolean) {
     this.isVisible.next(status);
   }
 
   public toggleVisible() {
     this.isVisible.next(!this.isVisible.value);
   }
-}
\ No newline at end of file
+}
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.spec.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.spec.ts
deleted file mode 100644
index 770d6c7..0000000
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.spec.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * O-RAN-SC
- * %%
- * Copyright (C) 2021 Nordix Foundation
- * %%
- * 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===================================
- */
-
-import { TestBed } from '@angular/core/testing';
-import { BehaviorSubject, of } from 'rxjs';
-import { ToastrModule } from 'ngx-toastr';
-import { PolicyTypeDataSource } from './policy-type.datasource';
-import { PolicyService } from '@services/policy/policy.service';
-import { PolicyTypeSchema } from '@interfaces/policy.types';
-
-describe('PolicyTypeDataSource', () => {
-  let policyTypeDataSource: PolicyTypeDataSource;
-  let policyServiceSpy: any;
-
-  let policySchema = {
-    policy_schema: {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "description": "Type 1 policy type",
-      "additionalProperties": false,
-      "title": "1",
-      "type": "object"
-    }
-  };
-
-  beforeEach(() => {
-    policyServiceSpy = jasmine.createSpyObj('PolicyService', ['getPolicyTypes', 'getPolicyType']);
-
-    policyServiceSpy.getPolicyTypes.and.returnValue(of({ policytype_ids: ['1', '2'] }));
-    policyServiceSpy.getPolicyType.and.returnValue(of(policySchema));
-    TestBed.configureTestingModule({
-      imports: [ToastrModule.forRoot()],
-      providers: [
-        { provide: PolicyService, useValue: policyServiceSpy }
-      ]
-    });
-  });
-
-  describe('#getPolicyTypes', () => {
-    let expectedPolicyTypeValue: PolicyTypeSchema[];
-    beforeEach(() => {
-      expectedPolicyTypeValue = [
-        {
-          'id': '1',
-          'name': '1',
-          'schemaObject': policySchema.policy_schema
-        },
-        {
-          'id': '2',
-          'name': '1',
-          'schemaObject': policySchema.policy_schema
-        }
-      ];
-    });
-
-    it('should create', () => {
-      policyTypeDataSource = TestBed.inject(PolicyTypeDataSource);
-      expect(policyTypeDataSource).toBeTruthy();
-    });
-
-    it('should return all policy type with Schema', () => {
-      policyTypeDataSource.getPolicyTypes();
-      const jobsSubject: BehaviorSubject<PolicyTypeSchema[]> = policyTypeDataSource.policyTypeSubject;
-      const value = jobsSubject.getValue();
-      expect(value).toEqual(expectedPolicyTypeValue);
-    });
-  });
-});
\ No newline at end of file
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.ts
deleted file mode 100644
index fe926ee..0000000
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.datasource.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * O-RAN-SC
- * %%
- * Copyright (C) 2019 Nordix Foundation
- * %%
- * 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===================================
- */
-
-import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { of } from 'rxjs/observable/of';
-import { Observable } from 'rxjs/Observable';
-
-import { PolicyType, PolicyTypes, PolicyTypeSchema } from '@interfaces/policy.types';
-import { PolicyService } from '@services/policy/policy.service';
-
-@Injectable({
-    providedIn: 'root'
-})
-
-export class PolicyTypeDataSource extends DataSource<PolicyTypeSchema> {
-
-    policyTypes: PolicyTypeSchema[] = [];
-
-    policyTypeSubject = new BehaviorSubject<PolicyTypeSchema[]>([]);
-
-    public rowCount = 1; // hide footer during intial load
-
-    constructor(public policySvc: PolicyService) {
-        super();
-    }
-
-    public getPolicyTypes() {
-        this.policyTypes = [] as PolicyTypeSchema[];
-        this.policySvc.getPolicyTypes()
-            .subscribe((policyType: PolicyTypes) => {
-                this.rowCount = policyType.policytype_ids.length;
-                if (policyType.policytype_ids.length != 0) {
-                    policyType.policytype_ids.forEach(policyTypeId => {
-                        var policyTypeSchema = {} as PolicyTypeSchema
-                        if (policyTypeId === "") {
-                            policyTypeSchema.id = '';
-                            policyTypeSchema.name = '';
-                            policyTypeSchema.schemaObject = '{}';
-                            this.policyTypes.push(policyTypeSchema);
-                        }
-                        else {
-                            this.policySvc.getPolicyType(policyTypeId)
-                                .subscribe((policyType: PolicyType) => {
-                                    policyTypeSchema.id = policyTypeId;
-                                    policyTypeSchema.schemaObject = policyType.policy_schema;
-                                    policyTypeSchema.name = policyType.policy_schema.title;
-                                    this.policyTypes.push(policyTypeSchema);
-                                })
-                        }
-                        this.policyTypeSubject.next(this.policyTypes);
-                    })
-                }
-            })
-    }
-
-    public getPolicyType(policyTypeId: string): PolicyTypeSchema {
-        var policyTypeSchema = {} as PolicyTypeSchema;
-        this.policySvc.getPolicyType(policyTypeId)
-            .subscribe((policyType: PolicyType) => {
-                policyTypeSchema.id = policyTypeId;
-                policyTypeSchema.schemaObject = policyType.policy_schema;
-                policyTypeSchema.name = policyType.policy_schema.title;
-            })
-            if (policyTypeId === "") {
-                policyTypeSchema.id = '<No Type>';
-            }
-        return policyTypeSchema;
-    }
-
-    connect(collectionViewer: CollectionViewer): Observable<PolicyTypeSchema[]> {
-        return of(this.policyTypeSubject.getValue());
-    }
-
-    disconnect(collectionViewer: CollectionViewer): void {
-        this.policyTypeSubject.complete();
-    }
-}
diff --git a/webapp-frontend/src/app/services/policy/policy.service.spec.ts b/webapp-frontend/src/app/services/policy/policy.service.spec.ts
index 185a8eb..71fd62e 100644
--- a/webapp-frontend/src/app/services/policy/policy.service.spec.ts
+++ b/webapp-frontend/src/app/services/policy/policy.service.spec.ts
@@ -17,29 +17,36 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from "@angular/core/testing";
 
-import { PolicyService } from './policy.service';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
-import { PolicyInstance, PolicyInstances, PolicyTypes } from '@interfaces/policy.types';
+import { PolicyService } from "./policy.service";
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from "@angular/common/http/testing";
+import {
+  PolicyInstance,
+  PolicyInstances,
+  PolicyTypes,
+} from "@interfaces/policy.types";
 
-describe('PolicyService', () => {
-  let apiVersion2 = 'v2'
-  let basePath = '/a1-policy/';
+describe("PolicyService", () => {
+  let apiVersion2 = "v2";
+  let basePath = "/a1-policy/";
   let policyService: PolicyService;
   let httpTestingController: HttpTestingController;
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [HttpClientTestingModule],
-    providers: [
-      PolicyService
-    ],
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [PolicyService],
+    })
+  );
 
   afterEach(() => {
     httpTestingController.verify();
   });
 
-  describe('#getPolicyTypes', () => {
+  describe("#getPolicyTypes", () => {
     let expectedPolicytypes: PolicyTypes;
     let emptyPolicyType: PolicyTypes;
 
@@ -47,80 +54,116 @@ describe('PolicyService', () => {
       policyService = TestBed.inject(PolicyService);
       httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicytypes = {
-        "policytype_ids": [
-          "",
-          "1"
-        ]
+        policytype_ids: ["", "1"],
       } as PolicyTypes;
     });
     //Policy Type Test Case 1:
-    it('should return all policy types', () => {
-      policyService.getPolicyTypes().subscribe(
-        policytypes => expect(policytypes).toEqual(expectedPolicytypes, 'should return expected PolicyTypes'),
-        fail
+    it("should return all policy types", () => {
+      policyService
+        .getPolicyTypes()
+        .subscribe(
+          (policytypes) =>
+            expect(policytypes).toEqual(
+              expectedPolicytypes,
+              "should return expected PolicyTypes"
+            ),
+          fail
+        );
+      const req = httpTestingController.expectOne(
+        basePath + apiVersion2 + "/" + policyService.policyTypesPath
       );
-      const req = httpTestingController.expectOne(basePath + apiVersion2 + '/' + policyService.policyTypesPath);
-      expect(req.request.method).toEqual('GET');
+      expect(req.request.method).toEqual("GET");
 
       req.flush(expectedPolicytypes);
     });
 
     //Policy Type Test Case 2:
     emptyPolicyType = {
-      "policytype_ids": [
-      ]
+      policytype_ids: [],
     } as PolicyTypes;
-    it('should return no policy types', () => {
-      policyService.getPolicyTypes().subscribe(
-        policytypes => expect(policytypes).toEqual(emptyPolicyType, 'should return empty array of Policy Types'),
-        fail
-      );
+    it("should return no policy types", () => {
+      policyService
+        .getPolicyTypes()
+        .subscribe(
+          (policytypes) =>
+            expect(policytypes).toEqual(
+              emptyPolicyType,
+              "should return empty array of Policy Types"
+            ),
+          fail
+        );
 
-      const req = httpTestingController.expectOne(basePath + apiVersion2 + '/' + policyService.policyTypesPath);
+      const req = httpTestingController.expectOne(
+        basePath + apiVersion2 + "/" + policyService.policyTypesPath
+      );
       req.flush(emptyPolicyType); //Return empty data
     });
   });
-  describe('#getPolicyInstances', () => {
+  describe("#getPolicyInstances", () => {
     let expectedPolicyInstances: PolicyInstances;
     let emptyPolicyInstances: PolicyInstances;
-    let policyTypeId = '1';
+    let policyTypeId = "1";
     beforeEach(() => {
       policyService = TestBed.inject(PolicyService);
       httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicyInstances = {
-        "policy_ids": [
-          "2100",
-          "2000"
-        ]
+        policy_ids: ["2100", "2000"],
       } as PolicyInstances;
     });
     //Policy Instances Test Case 1:
-    it('should return all policy instances', () => {
-      policyService.getPolicyInstancesByType(policyTypeId).subscribe(
-        policyinstances => expect(policyinstances).toEqual(expectedPolicyInstances, 'should return expected Policy Instances'),
-        fail
+    it("should return all policy instances", () => {
+      policyService
+        .getPolicyInstancesByType(policyTypeId)
+        .subscribe(
+          (policyinstances) =>
+            expect(policyinstances).toEqual(
+              expectedPolicyInstances,
+              "should return expected Policy Instances"
+            ),
+          fail
+        );
+      const req = httpTestingController.expectOne(
+        basePath +
+          apiVersion2 +
+          "/" +
+          policyService.policyPath +
+          "?" +
+          "policytype_id=" +
+          policyTypeId
       );
-      const req = httpTestingController.expectOne(basePath + apiVersion2 + '/' + policyService.policyPath + '?' + 'policytype_id=' + policyTypeId);
-      expect(req.request.method).toEqual('GET');
+      expect(req.request.method).toEqual("GET");
       req.flush(expectedPolicyInstances);
     });
 
     //Policy Instances Test Case 2:
     emptyPolicyInstances = {
-      "policy_ids": [
-      ]
+      policy_ids: [],
     } as PolicyInstances;
-    it('should return no policy instances', () => {
-      policyService.getPolicyInstancesByType(policyTypeId).subscribe(
-        policyinstances => expect(policyinstances.policy_ids.length).toEqual(0, 'should return empty array of Policy Instances'),
-        fail
+    it("should return no policy instances", () => {
+      policyService
+        .getPolicyInstancesByType(policyTypeId)
+        .subscribe(
+          (policyinstances) =>
+            expect(policyinstances.policy_ids.length).toEqual(
+              0,
+              "should return empty array of Policy Instances"
+            ),
+          fail
+        );
+      const req = httpTestingController.expectOne(
+        basePath +
+          apiVersion2 +
+          "/" +
+          policyService.policyPath +
+          "?" +
+          "policytype_id=" +
+          policyTypeId
       );
-      const req = httpTestingController.expectOne(basePath + apiVersion2 + '/' + policyService.policyPath + '?' + 'policytype_id=' + policyTypeId);
       req.flush(emptyPolicyInstances); //Return empty data
     });
   });
 
-  describe('#getPolicyInstance', () => {
+  describe("#getPolicyInstance", () => {
     let expectedPolicyInstance: PolicyInstance;
     let emptyPolicyInstances: PolicyInstances;
     let policyId = "2000";
@@ -128,22 +171,30 @@ describe('PolicyService', () => {
       policyService = TestBed.inject(PolicyService);
       httpTestingController = TestBed.inject(HttpTestingController);
       expectedPolicyInstance = {
-        "policy_id": "2000",
-        "policytype_id": "1",
-        "ric_id": "ric1",
-        "policy_data": "",
-        "service_id": "service1",
-        "lastModified": ""
+        policy_id: "2000",
+        policytype_id: "1",
+        ric_id: "ric1",
+        policy_data: "",
+        service_id: "service1",
+        lastModified: "",
       } as PolicyInstance;
     });
     //Policy Instances Test Case 1:
-    it('should return one policy instance', () => {
-      policyService.getPolicyInstance(policyId).subscribe(
-        policyinstance => expect(policyinstance).toEqual(expectedPolicyInstance, 'should return expected Policy Instances'),
-        fail
+    it("should return one policy instance", () => {
+      policyService
+        .getPolicyInstance(policyId)
+        .subscribe(
+          (policyinstance) =>
+            expect(policyinstance).toEqual(
+              expectedPolicyInstance,
+              "should return expected Policy Instances"
+            ),
+          fail
+        );
+      const req = httpTestingController.expectOne(
+        basePath + apiVersion2 + "/" + policyService.policyPath + "/" + policyId
       );
-      const req = httpTestingController.expectOne(basePath + apiVersion2 + '/' + policyService.policyPath + '/' + policyId);
-      expect(req.request.method).toEqual('GET');
+      expect(req.request.method).toEqual("GET");
       req.flush(expectedPolicyInstance);
     });
   });
diff --git a/webapp-frontend/src/app/services/policy/policy.service.ts b/webapp-frontend/src/app/services/policy/policy.service.ts
index 354173c..8c6d015 100644
--- a/webapp-frontend/src/app/services/policy/policy.service.ts
+++ b/webapp-frontend/src/app/services/policy/policy.service.ts
@@ -18,97 +18,110 @@
  * ========================LICENSE_END===================================
  */
 
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { CreatePolicyInstance, PolicyInstance, PolicyInstanceAck, PolicyInstances, PolicyStatus, PolicyType, PolicyTypes } from '@interfaces/policy.types';
-import { Rics } from '@interfaces/ric';
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import {
+  CreatePolicyInstance,
+  PolicyInstance,
+  PolicyInstanceAck,
+  PolicyInstances,
+  PolicyStatus,
+  PolicyType,
+  PolicyTypes,
+} from "@interfaces/policy.types";
+import { Rics } from "@interfaces/ric";
 
 /**
  * Services for calling the policy endpoints.
  */
 @Injectable({
-    providedIn: 'root'
+  providedIn: "root",
 })
 export class PolicyService {
+  private apiVersion2 = "/v2";
+  private basePath = "/a1-policy";
+  policyTypesPath = "policy-types";
+  policyPath = "policies";
 
-    private apiVersion2 = '/v2'
-    private basePath = '/a1-policy';
-    policyTypesPath = 'policy-types';
-    policyPath = 'policies';
+  private buildPath(...args: any[]) {
+    let result = this.basePath + this.apiVersion2;
+    args.forEach((part) => {
+      result = result + "/" + part;
+    });
+    return result;
+  }
 
-    private buildPath(...args: any[]) {
-        let result = this.basePath + this.apiVersion2;
-        args.forEach(part => {
-            result = result + '/' + part;
-        });
-        return result;
-    }
+  constructor(private httpClient: HttpClient) {
+    // injects to variable httpClient
+  }
 
-    constructor(private httpClient: HttpClient) {
-        // injects to variable httpClient
-    }
+  getPolicyTypes(): Observable<PolicyTypes> {
+    const url = this.buildPath(this.policyTypesPath);
+    return this.httpClient.get<PolicyTypes>(url);
+  }
 
-    getPolicyTypes(): Observable<PolicyTypes> {
-        const url = this.buildPath(this.policyTypesPath);
-        return this.httpClient.get<PolicyTypes>(url);
-    }
+  getPolicyType(policyTypeId: string): Observable<PolicyType> {
+    const url = this.buildPath(this.policyTypesPath + "/" + policyTypeId);
+    return this.httpClient.get<PolicyType>(url);
+  }
 
-    getPolicyType(policyTypeId: string): Observable<PolicyType> {
-        const url = this.buildPath(this.policyTypesPath + '/' + policyTypeId);
-        return this.httpClient.get<PolicyType>(url);
-    }
+  getPolicyInstancesByType(policyTypeId: string): Observable<PolicyInstances> {
+    const url = this.buildPath(
+      this.policyPath + "?" + "policytype_id=" + policyTypeId
+    );
+    return this.httpClient.get<PolicyInstances>(url);
+  }
 
-    getPolicyInstancesByType(policyTypeId: string): Observable<PolicyInstances> {
-        const url = this.buildPath(this.policyPath + '?' + 'policytype_id=' + policyTypeId);
-        return this.httpClient.get<PolicyInstances>(url);
-    }
+  getPolicyInstance(policyId: string): Observable<PolicyInstance> {
+    const url = this.buildPath(this.policyPath) + "/" + policyId;
+    return this.httpClient.get<PolicyInstance>(url);
+  }
 
-    getPolicyInstance(policyId: string): Observable<PolicyInstance> {
-        const url = this.buildPath(this.policyPath) + '/' + policyId;
-        return this.httpClient.get<PolicyInstance>(url);
-    }
+  getPolicyStatus(policyId: string): Observable<PolicyStatus> {
+    const url = this.buildPath(this.policyPath) + "/" + policyId + "/status";
+    return this.httpClient.get<PolicyStatus>(url);
+  }
 
-    getPolicyStatus(policyId: string): Observable<PolicyStatus> {
-        const url = this.buildPath(this.policyPath) + '/' + policyId + '/status';
-        return this.httpClient.get<PolicyStatus>(url);
-    }
+  /**
+   * Gets policy parameters.
+   * @returns Observable that should yield a policy instance
+   */
+  getPolicy(policyTypeId: string, policyInstanceId: string): Observable<any> {
+    const url =
+      this.buildPath(this.policyPath, policyInstanceId) +
+      "?type=" +
+      policyTypeId;
+    return this.httpClient.get<any>(url);
+  }
 
-    /**
-     * Gets policy parameters.
-     * @returns Observable that should yield a policy instance
-     */
-    getPolicy(policyTypeId: string, policyInstanceId: string): Observable<any> {
-        const url = this.buildPath(this.policyPath, policyInstanceId) + '?type=' + policyTypeId;
-        return this.httpClient.get<any>(url);
-    }
+  /**
+   * Creates or replaces policy instance.
+   * @param policyTypeId ID of the policy type that the instance will have
+   * @param policyInstanceId ID of the instance
+   * @param policyJson Json with the policy content
+   * @returns Observable that should yield a response code, no data
+   */
+  putPolicy(createPolicyInstance: CreatePolicyInstance): Observable<any> {
+    const url = this.buildPath(this.policyPath);
+    return this.httpClient.put<PolicyInstanceAck>(url, createPolicyInstance, {
+      observe: "response",
+    });
+  }
 
-    /**
-     * Creates or replaces policy instance.
-     * @param policyTypeId ID of the policy type that the instance will have
-     * @param policyInstanceId ID of the instance
-     * @param policyJson Json with the policy content
-     * @returns Observable that should yield a response code, no data
-     */
-    putPolicy(createPolicyInstance: CreatePolicyInstance): Observable<any> {
-        const url = this.buildPath(this.policyPath);
-        return this.httpClient.put<PolicyInstanceAck>(url, createPolicyInstance, { observe: 'response' });
-    }
+  /**
+   * Deletes a policy instance.
+   * @param policyTypeId ID of the policy type that the instance belong to
+   * @param policyInstanceId ID of the instance
+   * @returns Observable that should yield a response code, no data
+   */
+  deletePolicy(policyInstanceId: string): Observable<any> {
+    const url = this.buildPath(this.policyPath, policyInstanceId);
+    return this.httpClient.delete(url, { observe: "response" });
+  }
 
-    /**
-     * Deletes a policy instance.
-     * @param policyTypeId ID of the policy type that the instance belong to
-     * @param policyInstanceId ID of the instance
-     * @returns Observable that should yield a response code, no data
-     */
-    deletePolicy(policyInstanceId: string): Observable<any> {
-        const url = this.buildPath(this.policyPath, policyInstanceId);
-        return this.httpClient.delete(url, { observe: 'response' });
-    }
-
-
-    getRics(policyTypeId: string): Observable<Rics> {
-        const url = this.buildPath('rics') + '?policytype_id=' + policyTypeId;
-        return this.httpClient.get<any>(url);
-    }
+  getRics(policyTypeId: string): Observable<Rics> {
+    const url = this.buildPath("rics") + "?policytype_id=" + policyTypeId;
+    return this.httpClient.get<any>(url);
+  }
 }