X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fpolicy%2Fpolicy-instance%2Fpolicy-instance.component.html;h=db676a6b4a670c645d300e07a1aa5a61fe7640f2;hb=75f920d496ae90fe09ed16e9d94d0a3c3bb431c0;hp=29f05791d3237ca4c7a3ec86eebcc931c2b99774;hpb=b0ff9d1cf925365ede88198824c5893c04b1c7b9;p=portal%2Fnonrtric-controlpanel.git

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 29f0579..db676a6 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
@@ -18,13 +18,20 @@
   ========================LICENSE_END===================================
   -->
 <div>
-    Number of instances: {{noInstances()}}
+    Number of instances: {{instanceCount()}}
     <button id="createButton" mat-icon-button (click)="createPolicyInstance(policyTypeSchema)">
         <mat-icon id="createIcon" matTooltip="Create instance">add_box</mat-icon>
     </button>
     <button id="refreshButton" mat-icon-button color="primary" (click)="refreshTable()">
         <mat-icon id="refreshIcon">refresh</mat-icon>
     </button>
+    <div class="spinner-container" style="display: flex; justify-content: center; align-items: center;"
+        *ngIf="loading$ | async">
+        <mat-spinner></mat-spinner>
+    </div>
+    <div id="truncated" *ngIf="truncated" class="alert">
+        Too many instances! Only {{slice}} results will be shown.
+    </div>
 </div>
 
 <mat-table class="instances-table mat-elevation-z8" id="policiesTable" [dataSource]="instanceDataSource" matSort
@@ -110,7 +117,11 @@
         <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']">
+    <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']" [ngClass]="{'display-none': !this.hasInstances()}">
     </mat-header-row>
     <mat-row *matRowDef="let instance; columns: ['instanceId', 'ric', 'service', 'lastModified', 'action'];"></mat-row>
-</mat-table>
\ No newline at end of file
+
+    <mat-footer-row *matFooterRowDef="['noRecordsFound']" [ngClass]="{'display-none': this.hasInstances()}">
+    </mat-footer-row>
+
+</mat-table>