mod2/ui/src/app/msInstances/msInstances.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">
  21     <p-table #dt *ngIf="loadTable" [columns]="cols" [value]="msInstances" sortMode="multiple" [paginator]="true"
  22     [rows]="18" [rowsPerPageOptions]="[10,12,14,16,18,20,25,50]" selectionMode="multiple"
  23     [(selection)]="selectedMsInstances" (onFilter)="onTableFiltered(dt.filteredValue)" dataKey="id">
  24         <ng-template pTemplate="caption">
  25
  26             <div class="table_caption_header">
  27                 <!--Microservices Table Header-->
  28                 <div style="float: left;">
  29                     <!--Refresh-->
  30                     <i class="fa fa-refresh" (click)="getAllInstances()"></i>
  31                     <!--Global Filter-->
  32                     <input type="text" pInputText size="50" placeholder="Global Filter"
  33                            (input)="dt.filterGlobal($event.target.value, 'contains')"
  34                            class="table_global_filter">
  35                     <i class="fa fa-search" style="margin:4px 0 0 8px"></i>
  36                 </div>
  37
  38                 <div class="table_title">
  39                     <h4><b>Microservice Instances</b></h4>
  40                 </div>
  41             </div>
  42
  43          </ng-template>
  44
  45         <!--column headers-->
  46         <ng-template pTemplate="header" let-columns>
  47             <tr>
  48                 <th style="width: 3em"></th>
  49                 <th class="ui-state-highlight" *ngFor="let col of columns" style="outline: none; vertical-align: bottom; text-align: center;" [pSortableColumn]="col.field" [ngStyle]="{'width': col.width}">
  50                     {{col.header}}<br>
  51                     <p-sortIcon [field]="col.field" style="font-size: 8px;"></p-sortIcon>
  52                 </th>
  53                 <!--actions column-->
  54                 <th style="width: 7%;">
  55                     Actions
  56                 </th>
  57             </tr>
  58             <!--Second header row for individual column filters-->
  59             <tr>
  60                 <th style="width: 3em"></th>
  61                 <th *ngFor="let col of columns" [ngSwitch]="col.field">
  62                     <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" class="table_column_filter" placeholder="Filter">
  63                 </th>
  64                 <th>
  65                     <div style="text-align: center;">
  66                         <p-tableHeaderCheckbox style="padding-right: 5px;"></p-tableHeaderCheckbox>
  67                         <button pButton type="button" class="ui-button-secondary" (click)="checkCanGenerateBp()" [matMenuTriggerFor]="menu"
  68                             style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;">
  69                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
  70                         </button>
  71                         <mat-menu #menu="matMenu" xPosition="before">
  72
  73                             <div style="background-color: rgba(128, 128, 128, 0.25);">
  74                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-plus"
  75                                         style="font-size: 10px;"></i> Add</span>
  76                             </div>
  77
  78                             <div matTooltip="{{generateSelectedBPsTooltip}}" [matTooltipDisabled]="canGenerateSelectedBPs" matTooltipPosition="left">
  79                                 <button mat-menu-item (click)="generateSelectedBlueprints()" class="table_action_item" [disabled]="!canGenerateSelectedBPs" style="margin-top: 5px;">Generate Selected Blueprints</button>
  80                             </div>
  81                         </mat-menu>
  82                     </div>
  83                 </th>
  84             </tr>
  85         </ng-template>
  86
  87         <!--row data-->
  88         <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-msElem>
  89             <tr>
  90                 <!--Column for row expand buttons-->
  91                 <td>
  92                     <a href="#" [pRowToggler]="rowData">
  93                         <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
  94                     </a>
  95                 </td>
  96
  97                 <td *ngFor="let col of cols">
  98                     <div *ngIf="col.field==='status'"
  99                         style="width: fit-content; width: -moz-max-content; padding: 0px 5px 0px 5px; border-radius: 3px; font-weight: 600;" [ngClass]="{
 100                                                 'greenStatus' : msElem[col.field] === 'DEV_COMPLETE' || msElem[col.field] === 'CERTIFIED' || msElem[col.field] === 'PROD_DEPLOYED',
 101                                                 'blueStatus' : msElem[col.field] === 'NEW' || msElem[col.field] === 'IN_DEV' || msElem[col.field] === 'IN_TEST'}">
 102                         {{msElem[col.field]}}
 103                     </div>
 104                     <div *ngIf="col.field!=='status'">{{msElem[col.field]}}</div>
 105                 </td>
 106
 107                 <td>
 108                     <div style="text-align: center">
 109                         <p-tableCheckbox [value]="rowData" style="padding-right: 5px;"></p-tableCheckbox>
 110                         <button pButton type="button" class="ui-button-secondary" [matMenuTriggerFor]="menu"
 111                             style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;">
 112                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
 113                         </button>
 114                         <mat-menu #menu="matMenu" xPosition="before">
 115
 116                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 117                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-plus" style="font-size: 10px;"></i> Add</span>
 118                             </div>
 119                             <!-- * * * * Add component spec * * * * -->
 120                             <button mat-menu-item class="table_action_item" (click)="showAddCSDialog(rowData)">Component Spec...</button>
 121                             <!-- * * * * Generate Blueprint * * * * -->
 122                             <div matTooltip="No Active Component Spec" [matTooltipDisabled]="rowData.activeSpec!==null" matTooltipPosition="left">
 123                                 <button mat-menu-item class="table_action_item" (click)="generateBlueprints(rowData)" [disabled]="rowData.activeSpec===null">Generate Blueprint</button>
 124                             </div>
 125
 126                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 127                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-search" style="font-size: 10px;"></i>  View</span>
 128                             </div>
 129                             <!-- * * * * Go to spec files table * * * * -->
 130                             <div matTooltip="No Component Specs" [matTooltipDisabled]="rowData.activeSpec!==null" matTooltipPosition="left">
 131                                 <button mat-menu-item class="table_action_item" (click)="viewCompSpecs(rowData)" [disabled]="rowData.activeSpec===null">Component Specs</button>
 132                             </div>
 133                             <!-- * * * * Go to blueprints table * * * * -->
 134                             <button mat-menu-item class="table_action_item" (click)="viewBlueprints(rowData)" [disabled]="rowData.activeSpec===null">Blueprints</button>
 135
 136                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 137                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-pencil"></i> Update</span>
 138                             </div>
 139                             <!-- * * * * Update ms instance record * * * * -->
 140                             <button mat-menu-item class="table_action_item" (click)="showAddChangeDialog(rowData)">Update MS Instance...</button>
 141                         </mat-menu>
 142                     </div>
 143                 </td>
 144             </tr>
 145         </ng-template>
 146
 147         <!--Row expand content-->
 148         <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
 149             <tr>
 150                 <td [attr.colspan]="columns.length + 2">
 151                     <div class="row-expand-layout" [@rowExpansionTrigger]="'active'">
 152                         <!-- Audit Fields -->
 153                         <div class="row-expand-card" style="background-color: rgba(95, 158, 160, 0.295);">
 154                             <b>Created By:</b> {{rowData.metadata.createdBy}}<br>
 155                             <b>Created On:</b> {{rowData.metadata.createdOn}}<br>
 156                             <b>Updated By:</b> {{rowData.metadata.updatedBy}}<br>
 157                             <b>Updated On:</b> {{rowData.metadata.updatedOn}}
 158                         </div>
 159                         <!-- People -->
 160                         <div class="row-expand-card" style="background-color: rgba(160, 159, 95, 0.295)">
 161                             <b>Scrum Lead: </b>{{rowData.metadata.scrumLead}}
 162                                 <span *ngIf="rowData.metadata.scrumLeadId"> ({{rowData.metadata.scrumLeadId}})</span><br/>
 163                             <b>Systems Engineer: </b>{{rowData.metadata.systemsEngineer}}
 164                                 <span *ngIf="rowData.metadata.systemsEngineerId"> ({{rowData.metadata.systemsEngineerId}})</span><br/>
 165                             <b>Developer: </b>{{rowData.metadata.developer}}
 166                                 <span *ngIf="rowData.metadata.developerId"> ({{rowData.metadata.developerId}})</span>
 167                         </div>
 168                         <!-- Notes -->
 169                         <div class="row-expand-card" style="background-color: rgba(100, 148, 237, 0.295); white-space: pre-line;">
 170                             <b>Notes:</b><br>
 171                             <p-scrollPanel [style]="{width: '100%', height: '62px'}">
 172                                 <div style="font-size: 12px; word-break: normal;">{{rowData.metadata.notes}}</div>
 173                             </p-scrollPanel>
 174                         </div>
 175                         <!-- Labels -->
 176                         <div class="row-expand-card" style="background-color: rgba(76, 65, 225, 0.295)">
 177                             <b style="padding-bottom: 5px;">Labels:</b><br>
 178                             <div *ngFor="let label of rowData['metadata']['labels']"
 179                                 style="display: inline-flex; margin-top: 5px;">
 180                                 <div style="padding: 2px 7px 3px 0px;">
 181                                     <span style="background-color: rgba(80, 80, 80, 0.185); padding: 5px; border-radius: 3px;">{{label}}</span>
 182                                 </div>
 183                             </div>
 184                         </div>
 185                     </div>
 186                 </td>
 187             </tr>
 188         </ng-template>
 189
 190     </p-table>
 191
 192     <!--download buttons for exporting table to either csv or excel file-->
 193     <div *ngIf="loadTable" class="table_export_buttons_alignment">
 194         <button pButton type="button" class="table_export_button" (click)="exportTable('csv')" matTooltip="Export Table to CSV" matTooltipPosition="above" style="width: 55px;">
 195             <i class="pi pi-file" style="margin-top: 3px; margin-left: 4px;"></i>
 196             <label style="font-weight: 800; margin-top: 1px;">CSV</label>
 197         </button>
 198         <button pButton type="button" class="table_export_button" (click)="exportTable('excel')" matTooltip="Export Table to XLSX" matTooltipPosition="above" style="width: 65px; background-color: green;">
 199             <i class="pi pi-file-excel" style="margin-top: 3px; margin-left: 4px;"></i>
 200             <label style="font-weight: 800; margin-top: 1px">Excel</label>
 201         </button>
 202     </div>
 203
 204     <!-- Dialog to Change an MS Instance -->
 205     <app-ms-instance-add *ngIf="showAddChangeMsInstance" [visible]="showAddChangeMsInstance" [msName]="msName" [msInstanceChange]="msInstanceChange" [currentRow]="currentRow" (handler)="addChangeMsInstance($event)"></app-ms-instance-add>
 206
 207     <!-- Dialog to Add a Component Spec -->
 208     <app-comp-spec-add *ngIf="showCsAddDialog" [visible]="showCsAddDialog" (handler)="addNewCs($event)"></app-comp-spec-add>
 209
 210     <!--Pop-up for "Success" changing MS Instance-->
 211     <p-toast key="changeSuccess"></p-toast>
 212     <!--Pop-up for "Success" adding Component Spec-->
 213     <p-toast key="compSpecAdded" [style]="{width: '400px'}"></p-toast>
 214     <!--Pop-up for "Error" adding Component Spec-->
 215     <p-toast class="toast-newline" key="errorOnCsAdd" [style]="{width: '700px'}"></p-toast>
 216
 217     <p-toast class="toast-newline" key="csViewError" [style]="{width: '700px'}"></p-toast>
 218
 219     <p-toast key="bpGenMessage" [style]="{width: '450px'}"></p-toast>
 220
 221 </div>