mod2/ui/src/app/comp-specs/comp-specs.component.html

   1 <!--
   2   # ============LICENSE_START=======================================================
   3   # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4   # ================================================================================
   5   # Licensed under the Apache License, Version 2.0 (the "License");
   6   # you may not use this file except in compliance with the License.
   7   # You may obtain a copy of the License at
   8   #
   9   #      http://www.apache.org/licenses/LICENSE-2.0
  10   #
  11   # Unless required by applicable law or agreed to in writing, software
  12   # distributed under the License is distributed on an "AS IS" BASIS,
  13   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   # See the License for the specific language governing permissions and
  15   # limitations under the License.
  16   # ============LICENSE_END=========================================================
  17  -->
  18
  19 <div style="margin: 0px 50px 10px 20px; border: 1px solid darkslategray; min-width: 980px">
  20     <p-table #dt *ngIf="loadTable" [columns]="cols" [value]="csElements" sortMode="multiple" [paginator]="true"
  21         [rows]="18" [rowsPerPageOptions]="[10,12,14,16,18,20,25,50]" (onFilter)="onTableFiltered(dt.filteredValue)" dataKey="id">
  22         <ng-template pTemplate="caption">
  23
  24             <div style="margin-left: -18%; width: 82%; max-height: 25px; display: inline-flex;">
  25                 <!--CS Table Header-->
  26                 <div style="float: left;">
  27                     <!--Refresh-->
  28                     <i class="fa fa-refresh" (click)="getAllCs()"></i>
  29                     <!--Global Filter-->
  30                     <input type="text" pInputText size="50" placeholder="Global Filter"
  31                         (input)="dt.filterGlobal($event.target.value, 'contains')"
  32                         style="width: 250px; height:25px; font-size: 12px; margin-left: 15px">
  33                     <i class="fa fa-search" style="margin:4px 0px 0 8px"></i>
  34                 </div>
  35
  36                 <h4 style="margin-left: 15%"><b>Component Specs</b></h4>
  37
  38             </div>
  39         </ng-template>
  40
  41         <ng-template pTemplate="header" let-columns>
  42             <tr>
  43                 <th style="width: 3em"></th>
  44                 <th class="ui-state-highlight" *ngFor="let col of columns" [pSortableColumn]="col.field"
  45                     style="font-size: 12px; outline: none; vertical-align: bottom; text-align: center;" [ngStyle]="{'width': col.width}">
  46                     {{col.header}}<br>
  47                     <p-sortIcon [field]="col.field"></p-sortIcon>
  48                 </th>
  49                 <th style="font-size: 13px; width: 8%; vertical-align: top; text-align: center;">
  50                     Actions
  51                 </th>
  52             </tr>
  53
  54             <!--Second header row for individual column filters-->
  55             <tr style="text-align: center;">
  56                 <th style="width: 3em"></th>
  57                 <th *ngFor="let col of columns" [ngSwitch]="col.field">
  58                     <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')"
  59                         style="width: 100%; height: 20px; font-size: 10px;" placeholder="Filter">
  60                 </th>
  61                 <th>
  62
  63                 </th>
  64             </tr>
  65         </ng-template>
  66
  67         <ng-template pTemplate="body" let-rowData let-csElem>
  68             <tr style="font-size: 12px;">
  69                 <!--Column for row expand buttons-->
  70                 <td>
  71                     <a href="#" [pRowToggler]="rowData">
  72                         <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
  73                     </a>
  74                 </td>
  75
  76                 <td *ngFor="let col of cols">
  77                     <div *ngIf="col.field==='status'"
  78                         style="width: fit-content; width: -moz-max-content; padding: 0px 5px 0px 5px; border-radius: 3px; font-weight: 600;"
  79                         [ngClass]="{'greenStatus' : csElem[col.field] === 'ACTIVE', 'greyStatus' : csElem[col.field] === 'INACTIVE'}">
  80                         {{csElem[col.field]}}
  81                     </div>
  82                     <div *ngIf="col.field!=='status'">{{csElem[col.field]}}</div>
  83                 </td>
  84
  85                 <!--Actions Column-->
  86                 <td>
  87                     <div style="text-align: center;">
  88                         <button pButton type="button"
  89                             style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;"
  90                             class="ui-button-secondary" [matMenuTriggerFor]="menu">
  91                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
  92                         </button>
  93                         <mat-menu #menu="matMenu" xPosition="before">
  94
  95                             <div style="background-color: rgba(128, 128, 128, 0.25);">
  96                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-search" style="font-size: 10px;"></i> View</span>
  97                             </div>
  98
  99                             <button mat-menu-item class="table_action_item" (click)="showViewCsDialog(rowData)">Component Spec</button>
 100                             <div matTooltip="Policy not included" [matTooltipDisabled]="rowData.policyJson" matTooltipPosition="left">
 101                                 <button mat-menu-item [disabled]="!rowData.policyJson" class="table_action_item" (click)="showViewPolicyDialog(rowData)">Policy</button>
 102                             </div>
 103                             <!--
 104                             <div *ngIf="rowData.status !== 'ACTIVE'">
 105                                 <div style="background-color: rgba(128, 128, 128, 0.25);">
 106                                     <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-pencil"
 107                                             style="font-size: 10px;"></i> Update</span>
 108                                 </div>
 109
 110                                 <button mat-menu-item class="table_action_item" (click)="toActive(rowData)">To Active</button>
 111                             </div>-->
 112                         </mat-menu>
 113                     </div>
 114                 </td>
 115             </tr>
 116         </ng-template>
 117
 118         <!--Row expand content-->
 119         <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
 120             <tr>
 121                 <td [attr.colspan]="columns.length + 2">
 122                     <div class="row-expand-layout" [@rowExpansionTrigger]="'active'">
 123                         <!-- Audit Fields -->
 124                         <div class="row-expand-card" style="background-color: rgba(95, 158, 160, 0.295)">
 125                             <b>Created By:</b> {{rowData.metadata.createdBy}}<br>
 126                             <b>Created On:</b> {{rowData.metadata.createdOn}}<br>
 127                             <b>Updated By:</b> {{rowData.metadata.updatedBy}}<br>
 128                             <b>Updated On:</b> {{rowData.metadata.updatedOn}}
 129                         </div>
 130                         <!-- Notes -->
 131                         <div class="row-expand-card" style="background-color: rgba(100, 148, 237, 0.219)">
 132                             <b>Notes:</b><br>
 133                             <p-scrollPanel [style]="{width: '100%', height: '62px'}">
 134                                 <div style="font-size: 12px; word-break: normal;">{{rowData.metadata.notes}}</div>
 135                             </p-scrollPanel>
 136                         </div>
 137                         <!-- Labels -->
 138                         <div class="row-expand-card" style="background-color: rgba(76, 65, 225, 0.199)">
 139                             <b style="padding-bottom: 5px;">Labels:</b><br>
 140                             <div *ngFor="let label of rowData['metadata']['labels']"
 141                                 style="display: inline-flex; margin-top: 5px;">
 142                                 <div style="padding: 2px 7px 3px 0px;">
 143                                     <span
 144                                         style="background-color: rgba(80, 80, 80, 0.185); padding: 3px; border-radius: 3px;">{{label}}</span>
 145                                 </div>
 146                             </div>
 147                         </div>
 148                     </div>
 149                 </td>
 150             </tr>
 151         </ng-template>
 152     </p-table>
 153
 154     <!--download buttons for exporting table to either csv or excel file-->
 155     <div *ngIf="loadTable" style="margin-left: 10px; margin-top: -32px; float: left;">
 156         <button pButton type="button" (click)="exportTable('csv')" matTooltip="Export Table to CSV"
 157             matTooltipPosition="above"
 158             style="border-radius: 5px; width: 65px; height: 22px; font-size: 14px; border: none; margin-top: 4px; display: inline-flex;">
 159             <i class="pi pi-file" style="margin-top: 2px; margin-left: 8px;"></i>
 160             <label style="font-weight: 800; vertical-align: middle;">CSV</label>
 161         </button>
 162         <button pButton type="button" (click)="exportTable('excel')" matTooltip="Export Table to XLSX"
 163             matTooltipPosition="above"
 164             style="border-radius: 5px; width: 65px; height: 22px; margin-left: 7px; font-size: 14px; background-color: green; border: none; display: inline-flex;">
 165             <i class="pi pi-file-excel" style="margin-top: 2px; margin-left: 4px;"></i>
 166             <label style="font-weight: 800; vertical-align: middle;">Excel</label>
 167         </button>
 168     </div>
 169 </div>
 170
 171 <!-- * * * * View Spec Content Pop Up * * * * -->
 172 <p-dialog [(visible)]="showViewCs" header="Spec Content" appendTo="body" [maximizable]="true"
 173     [modal]="true" [style]="{width: '80vw'}" [baseZIndex]="10000" [closable]="false">
 174     <pre>{{specContentToView | json}}</pre>
 175     <p-footer>
 176         <button pButton label="Close" (click)="showViewCs=false" type="button"></button>
 177         <button pButton label="Download" (click)="download(specContentToView, 'Component_Spec')" type="button"></button>
 178     </p-footer>
 179 </p-dialog>
 180
 181 <!-- * * * * View Policy JSON Pop Up * * * * -->
 182 <p-dialog [(visible)]="showViewPolicy" header="Policy Json" appendTo="body" [maximizable]="true" [modal]="true"
 183     [style]="{width: '80vw'}" [baseZIndex]="10000" [closable]="false">
 184     <pre>{{policyJsonToView | json}}</pre>
 185     <p-footer>
 186         <button pButton label="Close" (click)="showViewPolicy=false" type="button"></button>
 187         <button pButton label="Download" (click)="download(policyJsonToView, 'Policy_Json')" type="button"></button>
 188     </p-footer>
 189 </p-dialog>