Updated displaying of policy types

[nonrtric.git] / dashboard / webapp-frontend / src / app / policy-control / policy-control.component.html

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 04d440c..e71fd8a 100644 (file)
--- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
+++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
@@ -18,65 +18,63 @@
   ========================LICENSE_END===================================
   -->
 
-<div>
-    <h3 class="rd-global-page-title">Policy Control</h3>
+<h3 class="rd-global-page-title">Policy Control</h3>
 
-    <table mat-table [dataSource]="policyTypesDataSource" matSort multiTemplateDataRows
-        class="policy-type-table mat-elevation-z8">
+<table mat-table [dataSource]="policyTypesDataSource" matSort multiTemplateDataRows
+    class="policy-type-table mat-elevation-z8">
 
-        <ng-container matColumnDef="name">
-            <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>
-                 {{getPolicyTypeName(policyType)}}
-            </mat-cell>
-        </ng-container>
+    <ng-container matColumnDef="name">
+        <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>
+            {{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>
-        </ng-container>
+    <ng-container matColumnDef="description">
+        <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
+        <mat-cell *matCellDef="let policyType"> {{this.getDescription(policyType)}}
+        </mat-cell>
+    </ng-container>
 
-        <ng-container matColumnDef="action">
-            <mat-header-cell class="action-cell" *matHeaderCellDef>Action </mat-header-cell>
-            <mat-cell class="action-cell" *matCellDef="let policyType" (click)="$event.stopPropagation()">               
-                <button mat-icon-button (click)="createPolicyInstance(policyType)">
-                    <mat-icon matTooltip="Create instance">add_box</mat-icon>
-                </button>
-            </mat-cell>
-        </ng-container>
+    <ng-container matColumnDef="action">
+        <mat-header-cell class="action-cell" *matHeaderCellDef>Action </mat-header-cell>
+        <mat-cell class="action-cell" *matCellDef="let policyType" (click)="$event.stopPropagation()">
+            <button mat-icon-button (click)="createPolicyInstance(policyType)">
+                <mat-icon matTooltip="Create instance">add_box</mat-icon>
+            </button>
+        </mat-cell>
+    </ng-container>
 
-        <!-- =================== Policy instances for one type ======================== -->
-        <ng-container matColumnDef="instanceTableContainer">
-            <mat-cell *matCellDef="let policyType">
-                <rd-policy-instance 
-                [policyType]=policyType 
-                [expanded]=getObservable(policyType)>
+    <!-- =================== Policy instances for one type ======================== -->
+    <ng-container matColumnDef="instanceTableContainer">
+        <mat-cell *matCellDef="let policyType">
+            <rd-policy-instance [policyType]=policyType [expanded]=this.getExpandedObserver(policyType)>
             </rd-policy-instance>
-            </mat-cell>
-        </ng-container>
-        <!-- ======= -->
+        </mat-cell>
+    </ng-container>
+    <!-- ======= -->
 
-        <ng-container matColumnDef="noRecordsFound">
-            <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
-        </ng-container>
+    <ng-container matColumnDef="noRecordsFound">
+        <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
+    </ng-container>
 
-        <mat-header-row *matHeaderRowDef="['name', 'description', 'action']"></mat-header-row>
-        <mat-row *matRowDef="let policyType; columns: ['name', 'description', 'action']"
-            (click)="toggleListInstances(policyType)">
-        </mat-row>
+    <mat-header-row *matHeaderRowDef="['name', 'description', 'action']"></mat-header-row>
+    <mat-row *matRowDef="let policyType; columns: ['name', 'description', 'action']"
+        (click)="toggleListInstances(policyType)">
+    </mat-row>
 
-        <mat-row *matRowDef="let policyType; columns: ['instanceTableContainer'];"
-            [@detailExpand]="isInstancesShown(policyType) ? 'expanded' : 'collapsed'" style="overflow: hidden">
-        </mat-row>
+    <mat-row *matRowDef="let policyType; columns: ['instanceTableContainer'];"
+        [@detailExpand]="isInstancesShown(policyType) ? 'expanded' : 'collapsed'" style="overflow: hidden">
+    </mat-row>
 
-        <mat-footer-row *matFooterRowDef="['noRecordsFound']"
-            [ngClass]="{'display-none': policyTypesDataSource.rowCount > 0}">
-        </mat-footer-row>
+    <mat-footer-row *matFooterRowDef="['noRecordsFound']"
+        [ngClass]="{'display-none': policyTypesDataSource.rowCount > 0}">
+    </mat-footer-row>
 
-    </table>
+</table>
 
-    <div class="spinner-container" *ngIf="policyTypesDataSource.loading$ | async">
-        <mat-spinner diameter="50"></mat-spinner>
-    </div>
+<div class="spinner-container" *ngIf="policyTypesDataSource.loading$ | async">
+    <mat-spinner diameter="50"></mat-spinner>
 </div>
\ No newline at end of file