Add test coverage of PolicyInstanceCompnent

[portal/nonrtric-controlpanel.git] / webapp-frontend / src / app / policy / policy-instance / policy-instance.component.html

diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
index eca57ab..e6d483f 100644 (file)
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
@@ -17,12 +17,29 @@
   limitations under the License.
   ========================LICENSE_END===================================
   -->
-<table #table mat-table class="instances-table mat-elevation-z8" [ngClass]="{'table-dark': darkMode}" matSort
+<div>
+    Number of instances: {{this.nbInstances()}}
+    <button mat-icon-button (click)="createPolicyInstance(policyTypeSchema)">
+        <mat-icon matTooltip="Create instance">add_box</mat-icon>
+    </button>
+    <button mat-icon-button color="primary" (click)="refreshTable()">
+        <mat-icon>refresh</mat-icon>
+    </button>
+</div>
+
+<table #table mat-table class="instances-table mat-elevation-z8" [ngClass]="{'table-dark': darkMode}" matSort (matSortChange)="getSortedData($event)"
     multiTemplateDataRows [dataSource]="instanceDataSource">
 
     <ng-container matColumnDef="instanceId">
         <mat-header-cell mat-sort-header *matHeaderCellDef matTooltip="The ID of the policy instance">
-            Instance
+            <div (click)="stopSort($event)">
+                <form style="display: flex" [formGroup]="policyInstanceForm">
+                    <mat-form-field>
+                        <input id="policyInstanceIdFilter" matInput formControlName="id">
+                        <mat-placeholder>Instance</mat-placeholder>
+                    </mat-form-field>
+                </form>
+            </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.policy_id}}
         </mat-cell>
@@ -31,7 +48,14 @@
     <ng-container matColumnDef="ric">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
-            Target
+            <div (click)="stopSort($event)">
+                <form style="display: flex" [formGroup]="policyInstanceForm">
+                    <mat-form-field>
+                        <input id="policyInstanceTargetFilter" matInput formControlName="target">
+                        <mat-placeholder>Target</mat-placeholder>
+                    </mat-form-field>
+                </form>
+            </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric_id}}
         </mat-cell>
@@ -40,7 +64,14 @@
     <ng-container matColumnDef="service">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="The service that created the policy instance, and is responsible for its lifecycle">
-            Owner
+            <div (click)="stopSort($event)">
+                <form style="display: flex" [formGroup]="policyInstanceForm">
+                    <mat-form-field>
+                        <input id="policyInstanceOwnerFilter" matInput formControlName="owner">
+                        <mat-placeholder>Owner</mat-placeholder>
+                    </mat-form-field>
+                </form>
+            </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service_id}}
         </mat-cell>
@@ -49,7 +80,14 @@
     <ng-container matColumnDef="lastModified">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="The time of the last modification of the policy instance">
-            Last modified
+            <div (click)="stopSort($event)">
+                <form style="display: flex" [formGroup]="policyInstanceForm">
+                    <mat-form-field>
+                        <input id="policyInstanceLastModifiedFilter" matInput formControlName="lastModified">
+                        <mat-placeholder>Last modified</mat-placeholder>
+                    </mat-form-field>
+                </form>
+            </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
         </mat-cell>
@@ -72,16 +110,7 @@
         <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']"
-        [ngClass]="{'display-none': !this.hasInstances()}">
+    <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']">
     </mat-header-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>
-
-</table>
-
-<div class="spinner-container" *ngIf="instanceDataSource.loading$ | async">
-    <mat-spinner diameter="50"></mat-spinner>
-</div>
\ No newline at end of file
+</table>
\ No newline at end of file