Dashboard using policy agent NBI
Change-Id: I21081d49a1ce3704a4e88e009ae92003efa96d18
Issue-ID: NONRTRIC-84
Signed-off-by: PatrikBuhr <patrik.buhr@est.tech>
diff --git a/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts b/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts
index e694bb6..b6ecce6 100644
--- a/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts
+++ b/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts
@@ -21,15 +21,17 @@
// Models of data used by the Policy Control
export interface PolicyType {
- policy_type_id: number;
name: string;
schema: string;
schemaObject: any;
}
export interface PolicyInstance {
- instanceId: string;
- instance: string;
+ id: string;
+ json: string;
+ ric: string;
+ service: string;
+ lastModified: string;
}
export interface PolicyInstanceAck {
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
index d69400d..5b5cc00 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
@@ -80,7 +80,6 @@
public policyInstanceId: string;
public policyTypeName: string;
darkMode: boolean;
- private policyTypeId: number;
constructor(
@@ -93,7 +92,6 @@
this.formActive = false;
this.policyInstanceId = data.instanceId;
this.policyTypeName = data.name;
- this.policyTypeId = data.policyTypeId;
this.jsonSchemaObject = data.createSchema;
this.jsonObject = this.parseJson(data.instanceJson);
}
@@ -115,7 +113,7 @@
}
const policyJson: string = this.prettyLiveFormData;
const self: PolicyInstanceDialogComponent = this;
- this.dataService.putPolicy(this.policyTypeId, this.policyInstanceId, policyJson).subscribe(
+ this.dataService.putPolicy(this.policyTypeName, this.policyInstanceId, policyJson).subscribe(
{
next(value) {
self.notificationService.success('Policy ' + self.policyTypeName + ':' + self.policyInstanceId + ' submitted');
@@ -194,10 +192,9 @@
}
export function getPolicyDialogProperties(policyType: PolicyType, instance: PolicyInstance, darkMode: boolean): MatDialogConfig {
- const policyTypeId = policyType.policy_type_id;
const createSchema = policyType.schemaObject;
- const instanceId = instance ? instance.instanceId : null;
- const instanceJson = instance ? instance.instance : null;
+ const instanceId = instance ? instance.id : null;
+ const instanceJson = instance ? instance.json : null;
const name = policyType.name;
return {
maxWidth: '1200px',
@@ -207,7 +204,6 @@
disableClose: false,
panelClass: darkMode ? 'dark-theme' : '',
data: {
- policyTypeId,
createSchema,
instanceId,
instanceJson,
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.html b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.html
index e1a67dd..8c305e4 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.html
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.html
@@ -22,7 +22,25 @@
<ng-container matColumnDef="instanceId">
<mat-header-cell mat-sort-header *matHeaderCellDef>Instance</mat-header-cell>
- <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.instanceId}}
+ <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.id}}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="ric">
+ <mat-header-cell mat-sort-header *matHeaderCellDef>Ric</mat-header-cell>
+ <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric}}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="service">
+ <mat-header-cell mat-sort-header *matHeaderCellDef>Owner</mat-header-cell>
+ <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service}}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="lastModified">
+ <mat-header-cell mat-sort-header *matHeaderCellDef>Last modified</mat-header-cell>
+ <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
</mat-cell>
</ng-container>
@@ -42,9 +60,10 @@
<mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
</ng-container>
- <mat-header-row *matHeaderRowDef="['instanceId', 'action']" [ngClass]="{'display-none': !this.hasInstances()}">
+ <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']"
+ [ngClass]="{'display-none': !this.hasInstances()}">
</mat-header-row>
- <mat-row *matRowDef="let instance; columns: ['instanceId', 'action'];"></mat-row>
+ <mat-row *matRowDef="let instance; columns: ['instanceId', 'ric', 'service', 'lastModified', 'action'];"></mat-row>
<mat-footer-row *matFooterRowDef="['noRecordsFound']" [ngClass]="{'display-none': this.hasInstances()}">
</mat-footer-row>
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss
index b6a29a4..6a18c34 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss
@@ -19,13 +19,21 @@
*/
.instances-table {
- width: 60%;
- min-width: 600px;
+ width: 90%;
+ min-width: 1200px;
margin-top: 10px;
margin-bottom: 10px;
background-color: grayscale($color: #eeeaea);
}
+.mat-column-instanceId {
+ word-wrap: break-word;
+ white-space: unset;
+ flex: 0 0 28%;
+ width: 28%;
+}
+
+
.table-dark {
background-color: #2d2d3d;
}
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.ts
index b62deb4..ecf6f36 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.ts
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.ts
@@ -76,9 +76,9 @@
}
modifyInstance(instance: PolicyInstance): void {
- this.policySvc.getPolicy(this.policyType.policy_type_id, instance.instanceId).subscribe(
+ this.policySvc.getPolicy(this.policyType.name, instance.id).subscribe(
(refreshedJson: any) => {
- instance.instance = JSON.stringify(refreshedJson);
+ instance.json = JSON.stringify(refreshedJson);
this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(this.policyType, instance, this.darkMode));
},
(httpError: HttpErrorResponse) => {
@@ -92,13 +92,20 @@
return this.instanceDataSource.rowCount > 0;
}
+ toLocalTime(utcTime: string): string {
+ const date = new Date(utcTime);
+ const toutc = date.toUTCString();
+ return new Date(toutc + " UTC").toLocaleString();
+
+ }
+
deleteInstance(instance: PolicyInstance): void {
this.confirmDialogService
.openConfirmDialog('Are you sure you want to delete this policy instance?')
.afterClosed().subscribe(
(res: any) => {
if (res) {
- this.policySvc.deletePolicy(this.policyType.policy_type_id, instance.instanceId)
+ this.policySvc.deletePolicy(this.policyType.name, instance.id)
.subscribe(
(response: HttpResponse<Object>) => {
switch (response.status) {
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
index 53a6239..b82ee75 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
@@ -51,7 +51,7 @@
loadTable() {
this.loadingSubject.next(true);
- this.policySvc.getPolicyInstances(this.policyType.policy_type_id)
+ this.policySvc.getPolicyInstances(this.policyType.name)
.pipe(
catchError((her: HttpErrorResponse) => {
this.notificationService.error('Failed to get policy instances: ' + her.message);
@@ -88,7 +88,10 @@
return data.sort((a, b) => {
const isAsc = this.sort.direction === 'asc';
switch (this.sort.active) {
- case 'instanceId': return compare(a.instanceId, b.instanceId, isAsc);
+ case 'instanceId': return compare(a.id, b.id, isAsc);
+ case 'ric': return compare(a.ric, b.ric, isAsc);
+ case 'service': return compare(a.service, b.service, isAsc);
+ case 'lastModified': return compare(a.lastModified, b.lastModified, isAsc)
default: return 0;
}
});
diff --git a/dashboard/webapp-frontend/src/app/rd-routing.module.ts b/dashboard/webapp-frontend/src/app/rd-routing.module.ts
index 520f9a5..57b9d57 100644
--- a/dashboard/webapp-frontend/src/app/rd-routing.module.ts
+++ b/dashboard/webapp-frontend/src/app/rd-routing.module.ts
@@ -22,20 +22,20 @@
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
-import { PolicyControlComponent} from './policy-control/policy-control.component';
+import { PolicyControlComponent } from './policy-control/policy-control.component';
const routes: Routes = [
- {path: '', component: MainComponent},
- {path: 'policy', component: PolicyControlComponent}
+ { path: '', component: MainComponent },
+ { path: 'policy', component: PolicyControlComponent }
];
@NgModule({
- imports: [
- CommonModule,
- RouterModule.forRoot(routes)],
- exports: [
- RouterModule
+ imports: [
+ CommonModule,
+ RouterModule.forRoot(routes)],
+ exports: [
+ RouterModule
],
declarations: []
})
diff --git a/dashboard/webapp-frontend/src/app/services/policy/policy.service.ts b/dashboard/webapp-frontend/src/app/services/policy/policy.service.ts
index 1c87081..fc0f306 100644
--- a/dashboard/webapp-frontend/src/app/services/policy/policy.service.ts
+++ b/dashboard/webapp-frontend/src/app/services/policy/policy.service.ts
@@ -66,7 +66,7 @@
return this.httpClient.get<PolicyType[]>(url);
}
- getPolicyInstances(policyTypeId: number): Observable<PolicyInstance[]> {
+ getPolicyInstances(policyTypeId: string): Observable<PolicyInstance[]> {
const url = this.buildPath(this.policyTypePath, policyTypeId, this.policyPath);
return this.httpClient.get<PolicyInstance[]>(url);
}
@@ -75,7 +75,7 @@
* Gets policy parameters.
* @returns Observable that should yield a policy instance
*/
- getPolicy(policyTypeId: number, policyInstanceId: string): Observable<any> {
+ getPolicy(policyTypeId: string, policyInstanceId: string): Observable<any> {
const url = this.buildPath(this.policyTypePath, policyTypeId, this.policyPath, policyInstanceId);
return this.httpClient.get<any>(url);
}
@@ -87,7 +87,7 @@
* @param policyJson Json with the policy content
* @returns Observable that should yield a response code, no data
*/
- putPolicy(policyTypeId: number, policyInstanceId: string, policyJson: string): Observable<any> {
+ putPolicy(policyTypeId: string, policyInstanceId: string, policyJson: string): Observable<any> {
const url = this.buildPath(this.policyTypePath, policyTypeId, this.policyPath, policyInstanceId);
return this.httpClient.put<PolicyInstanceAck>(url, policyJson, { observe: 'response' });
}
@@ -97,7 +97,7 @@
* @param policyTypeId
* @returns Observable that should yield a response code, no data
*/
- deletePolicy(policyTypeId: number, policyInstanceId: string): Observable<any> {
+ deletePolicy(policyTypeId: string, policyInstanceId: string): Observable<any> {
const url = this.buildPath(this.policyTypePath, policyTypeId, this.policyPath, policyInstanceId);
return this.httpClient.delete(url, { observe: 'response' });
}