mod2/ui/src/app/blueprints/blueprints.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 <ng4-loading-spinner [timeout]="1000000"></ng4-loading-spinner>
  20 <div class="table_div" [style.visibility]="visible">
  21     <!-- * * * * Table of Blueprints * * * * -->
  22     <p-table #dt [columns]="cols" [(selection)]="selectedBPs" [value]="bpElements" sortMode="multiple" [paginator]="true"
  23         [rows]="18" [rowsPerPageOptions]="[10,12,14,16,18,20,25,50]" (onFilter)="onTableFiltered(dt.filteredValue, $event)" dataKey="id" editMode="row">
  24
  25         <!-- * * * * Top caption row * * * * -->
  26         <ng-template pTemplate="caption">
  27
  28             <div class="table_caption_header">
  29                 <!--Blueprints Table Header-->
  30                 <div>
  31                     <!-- * * * * Refresh * * * * -->
  32                     <i class="fa fa-refresh" (click)="getAllBPs()"></i>
  33                     <!-- * * * * Global filter * * * * -->
  34                     <input class="table_global_filter" type="text" pInputText size="50" placeholder="Global Filter"
  35                         (input)="dt.filterGlobal($event.target.value, 'contains')">
  36                     <i class="fa fa-search" style="margin:4px 0 0 8px"></i>
  37                 </div>
  38
  39                 <h4 class="table_title"><b>Deployment Artifacts</b></h4>
  40
  41             </div>
  42         </ng-template>
  43
  44         <!-- * * * * Header row with dynamic column names. Columns include microservice Name, Release, Tag, Type, Version and Status  * * * * -->
  45         <ng-template pTemplate="header" let-columns>
  46             <tr style="text-align: center; vertical-align: bottom;">
  47                 <th style="width: 3em"></th>
  48                 <th class="ui-state-highlight" *ngFor="let col of columns" style="outline: none;" [pSortableColumn]="col.field" style="font-size: 12px; outline: none;"
  49                     [ngStyle]="{'width': col.width}">
  50                     {{col.header}}<br>
  51                     <p-sortIcon [field]="col.field"></p-sortIcon>
  52                 </th>
  53                 <th style="width: 7%; vertical-align: middle;">
  54                     Actions
  55                 </th>
  56             </tr>
  57
  58             <!-- * * * * Second header row for individual column filters * * * * -->
  59             <tr>
  60                 <th style="width: 3em"></th>
  61                 <!-- * * * * column filters * * * * -->
  62                 <th *ngFor="let col of columns" style="text-align: center;" [ngSwitch]="col.field">
  63                     <input *ngSwitchCase="'instanceName'" [(ngModel)]="filteredName" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  64                     <input *ngSwitchCase="'instanceRelease'" [(ngModel)]="filteredRelease" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  65                     <input *ngSwitchCase="'tag'" [(ngModel)]="filteredTag" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  66                     <input *ngSwitchCase="'type'" [(ngModel)]="filteredType" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  67                     <input *ngSwitchCase="'version'" [(ngModel)]="filteredVersion" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  68                     <input *ngSwitchCase="'status'" [(ngModel)]="filteredStatus" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  69                 </th>
  70                 <th>
  71                     <div style="text-align: center;">
  72                         <p-tableHeaderCheckbox style="padding-right: 5px;"></p-tableHeaderCheckbox>
  73                         <button pButton type="button" class="ui-button-secondary" (click)="enableButtonCheck()" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger"
  74                             style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;">
  75                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
  76                         </button>
  77                         <mat-menu #menu="matMenu" xPosition="before">
  78                             <!--<div (mouseleave)="menuTrigger.closeMenu()">-->
  79
  80                                 <div style="background-color: rgba(128, 128, 128, 0.25);">
  81                                     <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-download"></i> Download</span>
  82                                 </div>
  83
  84                                 <!-- * * * * Download Blueprints * * * * -->
  85                                 <div matTooltip="No Blueprints Selected" [matTooltipDisabled]="canDownload" matTooltipPosition="left">
  86                                     <button mat-menu-item class="table_action_item" (click)="downloadSelectedBps()" [disabled]="!canDownload">Download Selected Blueprints</button>
  87                                 </div>
  88
  89                                 <div style="background-color: rgba(128, 128, 128, 0.25);">
  90                                     <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-times"></i> Delete</span>
  91                                 </div>
  92
  93                                 <!-- * * * * Delete Selected Blueprints * * * -->
  94                                 <div [matTooltip]="deleteTooltip" [matTooltipDisabled]="canDelete" matTooltipPosition="left">
  95                                     <button mat-menu-item  (click)="warnDeleteBlueprint(null)" class="table_action_item" [disabled]="!canDelete">Delete Selected Blueprints</button>
  96                                 </div>
  97
  98                                 <div style="background-color: rgba(128, 128, 128, 0.25);">
  99                                     <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-pencil"></i> Update</span>
 100                                 </div>
 101
 102                                 <!-- * * * * State Changes * * * * -->
 103                                 <div matTooltip="No Blueprints Selected" [matTooltipDisabled]="canUpdate" matTooltipPosition="left">
 104                                     <button *ngFor="let state of states" mat-menu-item class="table_action_item" (click)="updateSelectedStatusesCheck(state)" [disabled]="!canUpdate">{{state.label}}</button>
 105                                 </div>
 106
 107                             <!--</div>-->
 108                         </mat-menu>
 109                     </div>
 110                 </th>
 111             </tr>
 112         </ng-template>
 113
 114         <!-- * * * * dynamic rows generated from columns object and msElems object * * * * -->
 115         <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-bpElem>
 116             <tr>
 117                 <!-- * * * * Column for row expand buttons * * * * -->
 118                 <td>
 119                     <a href="#" [pRowToggler]="rowData">
 120                         <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
 121                     </a>
 122                 </td>
 123
 124                 <td *ngFor="let col of cols">
 125                     <div *ngIf="col.field==='status'" style="width: -moz-max-content; width: fit-content; padding: 0px 5px 0px 5px; border-radius: 3px; font-weight: 600;"
 126                         [ngClass]="{
 127                             'greenStatus' : bpElem[col.field] === 'DEV_COMPLETE' || bpElem[col.field] === 'PST_CERTIFIED' || bpElem[col.field] === 'ETE_CERTIFIED' || bpElem[col.field] === 'IN_PROD',
 128                             'redStatus' : bpElem[col.field] === 'PST_FAILED' || bpElem[col.field] === 'ETE_FAILED' || bpElem[col.field] === 'PROD_FAILED',
 129                             'blueStatus' : bpElem[col.field] === 'IN_DEV' || bpElem[col.field] === 'IN_PST' || bpElem[col.field] === 'IN_ETE',
 130                             'greyStatus' : bpElem[col.field] === 'NOT_NEEDED'}">
 131                         {{bpElem[col.field]}}
 132                     </div>
 133                     <div *ngIf="col.field!=='status'">{{bpElem[col.field]}}</div>
 134                 </td>
 135
 136                 <!-- * * * * Actions Column * * * * -->
 137                 <td>
 138                     <div style="text-align: center;">
 139                         <p-tableCheckbox [value]="rowData" style="padding-right: 5px;"></p-tableCheckbox>
 140                         <!-- * * * * Actions Button * * * * -->
 141                         <button #actionButton pButton type="button" #menuTrigger="matMenuTrigger" class="ui-button-secondary" style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;" [matMenuTriggerFor]="menu">
 142                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
 143                         </button>
 144                         <!-- * * * * Actions Menu Items * * * * -->
 145                         <mat-menu #menu="matMenu">
 146                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 147                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i style="font-size: 12px;" class="pi pi-search"></i> View</span>
 148                             </div>
 149
 150                             <button mat-menu-item class="table_action_item" (click)="viewBpContent(rowData)">View BP Content</button>
 151
 152                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 153                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-times"></i> Delete</span>
 154                             </div>
 155
 156                             <div matTooltip='Only blueprints that are in a status of "In Dev", "Not Needed" or "Dev Complete" can be deleted' [matTooltipDisabled]="rowData.status === 'IN_DEV' || rowData.status === 'NOT_NEEDED' || rowData.status === 'DEV_COMPLETE'" matTooltipPosition="left">
 157                                 <button mat-menu-item class="table_action_item" (click)="warnDeleteBlueprint(rowData)" [disabled]="rowData.status !== 'IN_DEV' && rowData.status !== 'NOT_NEEDED' && rowData.status !== 'DEV_COMPLETE'">Delete Blueprint</button>
 158                             </div>
 159
 160                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 161                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-pencil"></i> Update</span>
 162                             </div>
 163
 164                             <div>
 165                                 <div *ngFor="let state of states">
 166                                     <button *ngIf="rowData.status !== state.field" mat-menu-item class="table_action_item" (click)="updateState(state, rowData, false)">{{state.label}}</button>
 167                                 </div>
 168                             </div>
 169                         </mat-menu>
 170                     </div>
 171                 </td>
 172             </tr>
 173         </ng-template>
 174
 175
 176         <!-- * * * * Row expand content * * * * -->
 177         <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
 178             <tr>
 179                 <td [attr.colspan]="columns.length + 2">
 180                     <div class="row-expand-layout" [@rowExpansionTrigger]="'active'">
 181                         <!-- * * * * Audit Fields * * * * -->
 182                         <div class="row-expand-card" style="background-color: rgba(95, 158, 160, 0.295);">
 183                             <b>Created By:</b> {{rowData.metadata.createdBy}}<br>
 184                             <b>Created On:</b> {{rowData.metadata.createdOn}}<br>
 185                             <b>Updated By:</b> {{rowData.metadata.updatedBy}}<br>
 186                             <b>Updated On:</b> {{rowData.metadata.updatedOn}}<br>
 187                         </div>
 188                         <!-- * * * * Notes * * * * -->
 189                         <div class="row-expand-card" style="background-color: rgba(100, 148, 237, 0.295); white-space: pre-line;">
 190                             <b>Notes:</b><br>
 191                             <p-scrollPanel [style]="{width: '100%', height: '75px'}">
 192                                 <div style="font-size: 12px; word-break: normal;">{{rowData.metadata.notes}}</div>
 193                             </p-scrollPanel>
 194                         </div>
 195                         <!-- * * * * Labels * * * * -->
 196                         <div class="row-expand-card" style="background-color: rgba(76, 65, 225, 0.295)">
 197                             <b style="padding-bottom: 5px;">Labels:</b><br>
 198                             <div *ngFor="let label of rowData['metadata']['labels']"
 199                                 style="display: inline-flex; margin-top: 5px;">
 200                                 <div style="padding: 2px 7px 3px 0px;">
 201                                     <span style="background-color: rgba(80, 80, 80, 0.185); padding: 3px; border-radius: 3px;">{{label}}</span>
 202                                 </div>
 203                             </div>
 204                         </div>
 205                         <!-- * * * * Failure Reason * * * * -->
 206                         <div class="row-expand-card" style="background-color: rgba(225, 65, 65, 0.295)">
 207                             <b>Failure Reason:</b><br>
 208                             <p-scrollPanel [style]="{width: '100%', height: '75px'}">
 209                                 <div style="font-size: 12px; word-break: normal;">{{rowData.metadata.failureReason}}</div>
 210                             </p-scrollPanel>
 211                         </div>
 212
 213                     </div>
 214                 </td>
 215             </tr>
 216         </ng-template>
 217     </p-table>
 218
 219     <!-- * * * * download buttons for exporting table to either csv or excel file * * * * -->
 220     <div class="table_export_buttons_alignment">
 221         <button pButton type="button" (click)="exportTable('csv')" matTooltip="Export Table to CSV" matTooltipPosition="above" class="table_export_button" style="width: 55px;">
 222             <i class="pi pi-file" style="margin-top: 3px; margin-left: 4px;"></i>
 223             <label style="font-weight: 800; margin-top: 1px;">CSV</label>
 224         </button>
 225         <button pButton type="button" (click)="exportTable('excel')" matTooltip="Export Table to XLSX" class="table_export_button" matTooltipPosition="above" style="width: 65px; background-color: green;">
 226             <i class="pi pi-file-excel" style="margin-top: 3px; margin-left: 4px;"></i>
 227             <label style="font-weight: 800; margin-top: 1px">Excel</label>
 228         </button>
 229     </div>
 230 </div>
 231
 232 <p-toast key="statusUpdate" class="ui-toast-detail" [style]="{width: '500px'}">
 233     <ng-template let-message pTemplate="message">
 234         <p><b>{{message.summary}}</b></p>
 235         <p style="font-size: 12px;">{{message.detail}}</p>
 236     </ng-template>
 237 </p-toast>
 238 <p-toast key="multipleBpReleasesSelected"></p-toast>
 239
 240 <p-toast key="bpDeleteResponse"></p-toast>
 241
 242
 243 <!-- * * * * Confirm multiple statuses/releases update toast * * * * -->
 244 <p-toast position="center" key="confirmToast" (onClose)="onReject()" [baseZIndex]="5000" [style]="{width: '300px'}">
 245     <ng-template let-message pTemplate="message">
 246         <div style="text-align: center">
 247             <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
 248             <h3>{{message.summary}}</h3>
 249             <p>{{message.detail}}</p>
 250         </div>
 251         <div style="width: 100%; text-align: center;">
 252             <button type="button" pButton (click)="onConfirm()" label="Confirm" class="ui-button-success"></button>
 253             <button type="button" pButton (click)="onReject()" label="Cancel" class="ui-button-secondary" style="margin-left: 20px;"></button>
 254         </div>
 255     </ng-template>
 256 </p-toast>
 257
 258 <!-- * * * * Confirm delete blueprint * * * * -->
 259 <p-toast position="center" key="confirmDeleteToast" class="ui-toast-detail" (onClose)="onReject()" [baseZIndex]="5000" [style]="{width: '300px'}">
 260     <ng-template let-message pTemplate="message">
 261         <div style="text-align: center">
 262             <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
 263             <h3>{{message.summary}}</h3>
 264             Confirm to delete blueprint(s):<br><br>
 265             <p style="text-align: left; margin-left: 10%;">{{message.detail}}</p><br>
 266         </div>
 267         <div style="width: 100%; text-align: center;">
 268             <button type="button" pButton (click)="onConfirmDelete()" label="Confirm" class="ui-button-success"></button>
 269             <button type="button" pButton (click)="onRejectDelete()" label="Cancel" class="ui-button-secondary"
 270                 style="margin-left: 20px;"></button>
 271         </div>
 272     </ng-template>
 273 </p-toast>
 274
 275 <!-- * * * * View BP Content Pop Up * * * * -->
 276 <p-dialog [(visible)]="showBpContentDialog" header="Blueprint Content" appendTo="body" [maximizable]="true" [modal]="true" [style]="{width: '80vw'}" [baseZIndex]="10000"
 277     [closable]="false">
 278     <pre>{{BpContentToView}}</pre>
 279     <p-footer>
 280         <button pButton label="Close" (click)="showBpContentDialog=false" type="button"></button>
 281         <button pButton label="Download" (click)="download()" type="button"></button>
 282     </p-footer>
 283 </p-dialog>