Updated displaying of policy types
Getting the policy type name from the title of the schema if possible.
Example types from file
Change-Id: I812c2360586ddec59fdfb60ce396bd1b6a075ac9
Issue-ID: NONRTRIC-61
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 bc94af9..ee0c447 100644
--- a/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts
+++ b/dashboard/webapp-frontend/src/app/interfaces/policy.types.ts
@@ -23,8 +23,7 @@
export interface PolicyType {
policy_type_id: number;
name: string;
- description: string;
- create_schema: string;
+ schema: string;
}
export interface PolicyInstance {
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
index 1eef5c5..e71fd8a 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
@@ -24,17 +24,18 @@
class="policy-type-table mat-elevation-z8">
<ng-container matColumnDef="name">
- <mat-header-cell *matHeaderCellDef>Policy Type</mat-header-cell>
+ <mat-header-cell *matHeaderCellDef mat-sort-header>Policy Type</mat-header-cell>
<mat-cell *matCellDef="let policyType">
<mat-icon matTooltip="Properties">{{isInstancesShown(policyType) ? 'expand_less' : 'expand_more'}}
</mat-icon>
- {{policyType.name}}
+ {{this.getName(policyType)}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
- <mat-cell *matCellDef="let policyType"> {{policyType.description}} </mat-cell>
+ <mat-cell *matCellDef="let policyType"> {{this.getDescription(policyType)}}
+ </mat-cell>
</ng-container>
<ng-container matColumnDef="action">
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts
index 019a637..d57019f 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts
@@ -107,6 +107,16 @@
return info;
}
+ getDescription(policyType: PolicyType): string {
+ return JSON.parse(policyType.schema).description;
+ }
+
+ getName(policyType: PolicyType): string {
+ const title = JSON.parse(policyType.schema).title;
+ if (title) { return title; }
+ return policyType.name;
+ }
+
isInstancesShown(policyType: PolicyType): boolean {
return this.getPolicyTypeInfo(policyType).isExpanded.getValue();
}
diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html b/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
index e9b6ff0..776d503 100644
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
@@ -26,7 +26,6 @@
<svg class="logo__icon" viewBox="150.3 22.2 1000 50">
<text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
letter-spacing=".1em" transform="translate(149 56)">
- <tspan>Policy editor</tspan>
<tspan *ngIf="jsonSchemaObject.title"> {{this.jsonSchemaObject.title}}</tspan>
<tspan *ngIf="!jsonSchemaObject.title"> {{this.policyTypeName}}</tspan>
</text>
@@ -34,7 +33,7 @@
</div>
</div>
-<!--<div class="text-muted" *ngIf="jsonSchemaObject.description">{{jsonSchemaObject.description}}</div>-->
+<div class="text-muted" *ngIf="jsonSchemaObject.description">{{jsonSchemaObject.description}}</div>
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">
<mat-card class="card" [ngClass]="{'card-dark': darkMode}">
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 b635418..f929342 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
@@ -91,9 +91,9 @@
private dialogRef: MatDialogRef<PolicyInstanceDialogComponent>,
private ui: UiService) {
this.formActive = false;
- this.policyInstanceId = this.data.instanceId;
- this.policyTypeName = this.data.name;
- this.policyTypeId = this.data.policyTypeId;
+ this.policyInstanceId = data.instanceId;
+ this.policyTypeName = data.name;
+ this.policyTypeId = data.policyTypeId;
this.parseJson(data.createSchema, data.instanceJson);
}
@@ -130,8 +130,8 @@
this.dialogRef.close();
}
- public onChanges(data: any) {
- this.liveFormData = data;
+ public onChanges(formData: any) {
+ this.liveFormData = formData;
}
get prettyLiveFormData() {
@@ -150,8 +150,8 @@
this.formIsValid = isValid;
}
- validationErrors(data: any): void {
- this.formValidationErrors = data;
+ validationErrors(validationErrors: any): void {
+ this.formValidationErrors = validationErrors;
}
get prettyValidationErrors() {
@@ -177,7 +177,7 @@
private parseJson(createSchema: string, instanceJson: string): void {
try {
this.jsonSchemaObject = JSON.parse(createSchema);
- if (this.data.instanceJson != null) {
+ if (instanceJson != null) {
this.jsonObject = JSON.parse(instanceJson);
}
} catch (jsonError) {
@@ -195,7 +195,7 @@
export function getPolicyDialogProperties(policyType: PolicyType, instance: PolicyInstance, darkMode: boolean): MatDialogConfig {
const policyTypeId = policyType.policy_type_id;
- const createSchema = policyType.create_schema;
+ const createSchema = policyType.schema;
const instanceId = instance ? instance.instanceId : null;
const instanceJson = instance ? instance.instance : null;
const name = policyType.name;
diff --git a/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss b/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss
index 5ecd585..30a3dfa 100644
--- a/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss
+++ b/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss
@@ -35,7 +35,7 @@
}
.add__card-dark {
- background: linear-gradient(rgb(78, 78, 129), rgb(45, 44, 61));
+ background: linear-gradient(to bottom, rgb(78, 78, 129), rgb(45, 44, 61));
color: white;
}