Improvements in the GUI

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

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 d1f8cce..30d1777 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
@@ -19,7 +19,7 @@
   -->
 
 <div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-    <div *ngIf="policyInstanceId">{{policyInstanceId}}</div>
+    <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
 </div>
 <div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
     <div class="logo">
@@ -27,7 +27,7 @@
         <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 without type</tspan>
+                <tspan>< No type></tspan>
             </text>
         </svg>
     </div>
@@ -37,12 +37,10 @@
     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-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
-                placeholder="Select Near-RT RIC">
+                placeholder="Target"
+                matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
                 <mat-option *ngFor="let ric of this.allRics" [value]="ric">
                     {{ric}}
                 </mat-option>
@@ -51,26 +49,23 @@
                 style="width: 300px;">
                 <div *ngIf="ricSelector.errors.required">
                     <mat-error role="alert">
-                        A Near-RT RIC must be selected.
+                        This field is required.
                     </mat-error>
                 </div>
             </div>
         </mat-form-field>
-        <div *ngIf="this.policyInstanceId">
-            {{this.ric}}
-        </div>
-
         <h4>
             Properties
         </h4>
         <mat-form-field style="width: 800px;">
             <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
-                cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties">
+                cdkAutosizeMinRows="10" required [(value)]="this.policyJson" placeholder="Policy properties"
+                matTooltip="The properties of the policy instance, in JSON format" matTooltipPosition="before">
             </textarea>
             <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
                 <div *ngIf="policyJsonTextArea.errors.required">
                     <mat-error role="alert">
-                        The policy properties are required.
+                        This field is required.
                     </mat-error>
                 </div>
                 <div *ngIf="policyJsonTextArea.errors.invalidJson">

diff --git a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.scss b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.scss
index 39787cd..accb527 100644 (file)
--- a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.scss
+++ b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.scss
@@ -45,3 +45,29 @@
     /* Green */
     margin-right: 10px;
 }
+
+.header {
+    background: linear-gradient(to bottom, white 0%, grayscale($color: #eeeaea) 100%);
+    font-size: 40px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.header-dark {
+    background: #2B244D;
+}
+
+
+.card {
+    height: 100%;
+    width: 100%;
+    margin-left: 2px;
+    margin-right: 2px;
+    background-color: grayscale($color: #eeeaea);
+}
+
+.card-dark {
+    background-color: #1c1c24;
+}

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 23b46fb..e4b1e38 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
@@ -19,7 +19,7 @@
   -->
 
 <div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-    <div *ngIf="policyInstanceId">{{policyInstanceId}}</div>
+    <div *ngIf="policyInstanceId">[{{this.ric}}] {{policyInstanceId}}</div>
 </div>
 <div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
     <div class="logo">
@@ -40,25 +40,20 @@
     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-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric"
-                placeholder="Select Near-RT RIC">
+                placeholder="Target"
+                matTooltip="Element where the policy instance resides, e.g. a gNodeB or 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 Near-RT RIC must be selected.</mat-error>
+                    <mat-error role="alert">This field is required.</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 f83eba2..1e80d83 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-instance.component.html
@@ -21,25 +21,36 @@
     multiTemplateDataRows [dataSource]="instanceDataSource">
 
     <ng-container matColumnDef="instanceId">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>Instance</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef matTooltip="The ID of the policy instance">
+            Instance
+        </mat-header-cell>
         <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>Near-RT RIC</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef
+            matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
+            Target
+        </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-header-cell mat-sort-header *matHeaderCellDef
+            matTooltip="The service that created the policy instance, and is responsible for its lifecycle">
+            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-header-cell mat-sort-header *matHeaderCellDef
+            matTooltip="The time of the last modification of the policy instance">
+            Last modified
+        </mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
         </mat-cell>
     </ng-container>
@@ -47,10 +58,11 @@
     <ng-container matColumnDef="action">
         <mat-header-cell class="action-cell" *matHeaderCellDef>Action</mat-header-cell>
         <mat-cell class="action-cell" *matCellDef="let instance">
-            <button mat-icon-button (click)="modifyInstance(instance)">
+            <button mat-icon-button (click)="modifyInstance(instance)" matTooltip="Edit the policy instance">
                 <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteInstance(instance)">
+            <button mat-icon-button color="warn" (click)="deleteInstance(instance)"
+                matTooltip="Delete the policy instance">
                 <mat-icon>delete</mat-icon>
             </button>
         </mat-cell>

diff --git a/webapp-frontend/src/app/policy-control/policy-instance.component.ts b/webapp-frontend/src/app/policy-control/policy-instance.component.ts
index 55d9dcb..ab9bfd9 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance.component.ts
+++ b/webapp-frontend/src/app/policy-control/policy-instance.component.ts
@@ -87,11 +87,20 @@ export class PolicyInstanceComponent implements OnInit, AfterViewInit {
                 if (this.isSchemaEmpty()) {
                     this.dialog.open(
                         NoTypePolicyInstanceDialogComponent,
-                        getPolicyDialogProperties(this.policyType, instance, this.darkMode));
+                        getPolicyDialogProperties(this.policyType, instance, this.darkMode)).afterClosed().subscribe(
+                           (_: any) => {
+                                this.instanceDataSource.loadTable();
+                           }
+                        );
                 } else {
                     this.dialog.open(
                         PolicyInstanceDialogComponent,
-                        getPolicyDialogProperties(this.policyType, instance, this.darkMode));
+                        getPolicyDialogProperties(this.policyType, instance, this.darkMode)).afterClosed().subscribe(
+                           (_: any) => {
+                                this.instanceDataSource.loadTable();
+                           }
+                        );
+
                 }
             },
             (httpError: HttpErrorResponse) => {

diff --git a/webapp-frontend/src/app/ui/policy-card/policy-card.component.html b/webapp-frontend/src/app/ui/policy-card/policy-card.component.html
index 2c82628..e14d8c5 100644 (file)
--- a/webapp-frontend/src/app/ui/policy-card/policy-card.component.html
+++ b/webapp-frontend/src/app/ui/policy-card/policy-card.component.html
@@ -26,6 +26,6 @@
 
   </div>
   <div class="body__container">
-    <img src="../../../assets/policy.png" width="250px"/>
+    <img src="../../../assets/oran-logo.png" width="250px"/>
   </div>
 </div>

diff --git a/webapp-frontend/src/assets/policy.png b/webapp-frontend/src/assets/policy.png
deleted file mode 100644 (file)
index 11df15d..0000000
Binary files a/webapp-frontend/src/assets/policy.png and /dev/null differ