webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html

   1 <!--
   2   ========================LICENSE_START=================================
   3   O-RAN-SC
   4   %%
   5   Copyright (C) 2019 Nordix Foundation
   6   %%
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ========================LICENSE_END===================================
  19   -->
  20 <table #table mat-table class="instances-table mat-elevation-z8" [ngClass]="{'table-dark': darkMode}" matSort
  21     multiTemplateDataRows [dataSource]="instanceDataSource">
  22
  23     <ng-container matColumnDef="instanceId">
  24         <mat-header-cell mat-sort-header *matHeaderCellDef matTooltip="The ID of the policy instance">
  25             Instance
  26         </mat-header-cell>
  27         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.policy_id}}
  28         </mat-cell>
  29     </ng-container>
  30
  31     <ng-container matColumnDef="ric">
  32         <mat-header-cell mat-sort-header *matHeaderCellDef
  33             matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
  34             Target
  35         </mat-header-cell>
  36         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric_id}}
  37         </mat-cell>
  38     </ng-container>
  39
  40     <ng-container matColumnDef="service">
  41         <mat-header-cell mat-sort-header *matHeaderCellDef
  42             matTooltip="The service that created the policy instance, and is responsible for its lifecycle">
  43             Owner
  44         </mat-header-cell>
  45         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service_id}}
  46         </mat-cell>
  47     </ng-container>
  48
  49     <ng-container matColumnDef="lastModified">
  50         <mat-header-cell mat-sort-header *matHeaderCellDef
  51             matTooltip="The time of the last modification of the policy instance">
  52             Last modified
  53         </mat-header-cell>
  54         <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
  55         </mat-cell>
  56     </ng-container>
  57
  58     <ng-container matColumnDef="action">
  59         <mat-header-cell class="action-cell" *matHeaderCellDef>Action</mat-header-cell>
  60         <mat-cell class="action-cell" *matCellDef="let instance">
  61             <button mat-icon-button (click)="modifyInstance(instance)" matTooltip="Edit the policy instance">
  62                 <mat-icon>edit</mat-icon>
  63             </button>
  64             <button mat-icon-button color="warn" (click)="deleteInstance(instance)"
  65                 matTooltip="Delete the policy instance">
  66                 <mat-icon>delete</mat-icon>
  67             </button>
  68         </mat-cell>
  69     </ng-container>
  70
  71     <ng-container matColumnDef="noRecordsFound">
  72         <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
  73     </ng-container>
  74
  75     <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']"
  76         [ngClass]="{'display-none': !this.hasInstances()}">
  77     </mat-header-row>
  78     <mat-row *matRowDef="let instance; columns: ['instanceId', 'ric', 'service', 'lastModified', 'action'];"></mat-row>
  79
  80     <mat-footer-row *matFooterRowDef="['noRecordsFound']" [ngClass]="{'display-none': this.hasInstances()}">
  81     </mat-footer-row>
  82
  83 </table>
  84
  85 <div class="spinner-container" *ngIf="instanceDataSource.loading$ | async">
  86     <mat-spinner diameter="50"></mat-spinner>
  87 </div>