Add heading for Ric in instance dialogs

Show Ric for existing policy in dialogs.

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

diff --git a/webapp-backend/src/test/resources/demo-policy-schema-3.json b/webapp-backend/src/test/resources/demo-policy-schema-3.json
index 695514c..18bce36 100644 (file)
--- a/webapp-backend/src/test/resources/demo-policy-schema-3.json
+++ b/webapp-backend/src/test/resources/demo-policy-schema-3.json
@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "Example_TrafficSteeringPreference_1.0.0",
-  "description": "Example QoE Target policy type",
+  "description": "Example Traffic Steering Preference policy type",
   "type": "object",
   "properties": {
     "scope": {

diff --git a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
index 71c63be..d1f8cce 100644 (file)
--- a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
@@ -27,21 +27,22 @@
         <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 with no type</tspan>
+                <tspan>Policy without type</tspan>
             </text>
         </svg>
     </div>
 </div>
-<br />
-<div class="text-muted">Enter policy statements (JSON).</div>
 
 <div [formGroup]="instanceForm" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column"
     fxLayoutAlign.lt-sm="flex-start center">
 
     <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
+        <h4>
+            Near-RT RIC
+        </h4>
         <mat-form-field *ngIf="!this.policyInstanceId">
-            <mat-label>Select RIC</mat-label>
-            <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric">
+            <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
+                placeholder="Select Near-RT RIC">
                 <mat-option *ngFor="let ric of this.allRics" [value]="ric">
                     {{ric}}
                 </mat-option>
@@ -50,26 +51,31 @@
                 style="width: 300px;">
                 <div *ngIf="ricSelector.errors.required">
                     <mat-error role="alert">
-                        A Ric must be selected.
+                        A Near-RT RIC must be selected.
                     </mat-error>
                 </div>
             </div>
         </mat-form-field>
+        <div *ngIf="this.policyInstanceId">
+            {{this.ric}}
+        </div>
 
+        <h4>
+            Properties
+        </h4>
         <mat-form-field style="width: 800px;">
-            <mat-label>Policy content</mat-label>
             <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
-                cdkAutosizeMinRows="10" required [(value)]="this.policyJson">
+                cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties">
             </textarea>
             <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
                 <div *ngIf="policyJsonTextArea.errors.required">
                     <mat-error role="alert">
-                        The policy body is required.
+                        The policy properties are required.
                     </mat-error>
                 </div>
                 <div *ngIf="policyJsonTextArea.errors.invalidJson">
                     <mat-error role="alert">
-                        The policy body must be a valid JSON.
+                        The policy properties must be a valid JSON.
                     </mat-error>
                 </div>
             </div>

diff --git a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
index 1e4145f..23b46fb 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
@@ -39,22 +39,26 @@
 <div [formGroup]="instanceForm" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column"
     fxLayoutAlign.lt-sm="flex-start center">
 
-
     <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
-
+        <h4>
+            Near-RT RIC
+        </h4>
         <mat-form-field *ngIf="!this.policyInstanceId">
-            <mat-label>Select RIC</mat-label>
-            <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric">
+            <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
+                placeholder="Select Near-RT RIC">
                 <mat-option *ngFor="let ric of this.allRics" [value]="ric">
                     {{ric}}
                 </mat-option>
             </mat-select>
             <div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)">
                 <div *ngIf="ricSelector.errors.required">
-                    <mat-error role="alert">A Ric must be selected.</mat-error>
+                    <mat-error role="alert">A Near-RT RIC must be selected.</mat-error>
                 </div>
             </div>
         </mat-form-field>
+        <div *ngIf="this.policyInstanceId">
+            {{this.ric}}
+        </div>
 
         <h4 class="default-cursor" (click)="toggleVisible('form')">
             <mat-icon matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>

diff --git a/webapp-frontend/src/app/policy-control/policy-instance.component.html b/webapp-frontend/src/app/policy-control/policy-instance.component.html
index 8c305e4..f83eba2 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-instance.component.html
@@ -27,7 +27,7 @@
     </ng-container>
 
     <ng-container matColumnDef="ric">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>Ric</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>Near-RT RIC</mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric}}
         </mat-cell>
     </ng-container>