mod2/ui/src/app/microservices/microservices.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 style="margin: 0px 0px 10px 20px; width: 97%; min-width: 900px; border: 1px solid darkslategray">
  21     <!--Table of base microservices-->
  22     <p-table #dt *ngIf="loadTable" [columns]="cols" [value]="msElements" sortMode="multiple" [paginator]="true"
  23         [rows]="18" [rowsPerPageOptions]="[10,12,14,16,18,20,25,50]" (onFilter)="onTableFiltered(dt.filteredValue)" dataKey="id">
  24
  25         <!--Top caption row-->
  26         <ng-template pTemplate="caption">
  27
  28             <div style="margin-left: -5%; width: 90%; max-height: 25px; display: inline-flex;">
  29                 <!--Microservices Table Header-->
  30                 <div style="float: left;">
  31                     <!--Refresh-->
  32                     <i class="fa fa-refresh" (click)="getAllMs()"></i>
  33                     <!--Global Filter-->
  34                     <input type="text" pInputText size="50" placeholder="Global Filter"
  35                            (input)="dt.filterGlobal($event.target.value, 'contains')"
  36                            style="width: 250px; height:25px; font-size: 12px; margin-left: 15px">
  37                     <i class="fa fa-search" style="margin:4px 0px 0 8px"></i>
  38                 </div>
  39
  40                 <h4 style="margin-left: 15%"><b>Microservices</b></h4>
  41
  42             </div>
  43
  44             <div style="float: right;">
  45                 <button pButton type="button" (click)="showAddChangeDialog()" matTooltip="Add Microservice" matTooltipPosition="above"
  46                     style="border-radius: 5px; width: 65px; height: 27px; font-size: 14px; border: none; display: inline-flex;">
  47                     <i class="pi pi-plus" style="margin-top: 5px; margin-left: 10px;"></i>
  48                     <label style="font-weight: 800; margin-top: 3px">MS</label>
  49                 </button>
  50             </div>
  51
  52         </ng-template>
  53
  54         <!--Header row with dynamic column names. Columns include microservice Name, Type, Location and Namespace-->
  55         <ng-template pTemplate="header" let-columns>
  56             <tr style="text-align: center">
  57                 <th style="width: 3em"></th>
  58                 <th class="ui-state-highlight" *ngFor="let col of columns" [pSortableColumn]="col.field" style="font-size: 12px; outline: none; vertical-align: bottom;" [ngStyle]="{'width': col.width}">
  59                     {{col.header}}<br>
  60                     <p-sortIcon [field]="col.field"></p-sortIcon>
  61                 </th>
  62                 <th style="font-size: 13px; width: 6.5%; vertical-align: top;">
  63                     Actions
  64                 </th>
  65             </tr>
  66
  67             <!--Second header row for individual column filters-->
  68             <tr style="text-align: center;">
  69                 <th style="width: 3em"></th>
  70                 <th *ngFor="let col of columns" [ngSwitch]="col.field">
  71                     <input pInputText type="text"
  72                         (input)="dt.filter($event.target.value, col.field, 'contains')" style="width: 100%; height: 20px; font-size: 10px;"
  73                         placeholder="Filter">
  74                 </th>
  75                 <th></th>
  76             </tr>
  77         </ng-template>
  78
  79         <!--dynamic rows generated from columns object and msElems object-->
  80         <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-msElem>
  81             <tr style="font-size: 12px;">
  82                 <!--Column for row expand buttons-->
  83                 <td>
  84                     <a href="#" [pRowToggler]="rowData">
  85                         <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
  86                     </a>
  87                 </td>
  88
  89                 <td *ngFor="let col of cols">
  90                     <div *ngIf="col.field==='status'"
  91                         style="width: fit-content; width: -moz-max-content; padding: 0px 5px 0px 5px; border-radius: 3px; font-weight: 600;"
  92                         [ngClass]="{'greenStatus' : msElem[col.field] === 'ACTIVE',
  93                                     'greyStatus' : msElem[col.field] === 'INACTIVE'}">
  94                         {{msElem[col.field]}}
  95                     </div>
  96                     <div *ngIf="col.field!=='status'">{{msElem[col.field]}}</div>
  97                 </td>
  98
  99                 <!--Actions Column-->
 100                 <td>
 101                     <div style="text-align: center;">
 102                         <button pButton type="button" style="background-color: transparent; border: none; width: 20px; height: 20px; vertical-align: middle;" class="ui-button-secondary" [matMenuTriggerFor]="menu">
 103                             <i class="pi pi-ellipsis-h" style="color: grey;"></i>
 104                         </button>
 105                         <mat-menu #menu="matMenu" xPosition="before">
 106
 107                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 108                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-plus"
 109                                         style="font-size: 10px;"></i> Add</span>
 110                             </div>
 111
 112                             <button mat-menu-item class="table_action_item" (click)="showAddChangeMsInstanceDialog(rowData)">Add MS
 113                                 Instance...</button>
 114
 115                             <div style="background-color: rgba(128, 128, 128, 0.25);">
 116                                 <span style="font-size: 12px; margin-left: 10px; font-weight: 500;"><i class="pi pi-pencil"></i> Update</span>
 117                             </div>
 118
 119                             <button mat-menu-item class="table_action_item" (click)="showAddChangeDialog(rowData)">Update Microservice...</button>
 120                         </mat-menu>
 121                     </div>
 122                 </td>
 123             </tr>
 124         </ng-template>
 125
 126         <!--Row expand content-->
 127         <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
 128             <tr>
 129                 <td [attr.colspan]="columns.length + 2">
 130                     <div class="row-expand-layout" [@rowExpansionTrigger]="'active'">
 131                         <!-- Audit Fields -->
 132                         <div class="row-expand-card" style="background-color: rgba(95, 158, 160, 0.295)">
 133                             <b>Created By:</b> {{rowData.metadata.createdBy}}<br>
 134                             <b>Created On:</b> {{rowData.metadata.createdOn}}<br>
 135                             <b>Updated By:</b> {{rowData.metadata.updatedBy}}<br>
 136                             <b>Updated On:</b> {{rowData.metadata.updatedOn}}
 137                         </div>
 138                         <!-- Notes -->
 139                         <div class="row-expand-card" style="background-color: rgba(100, 148, 237, 0.219)">
 140                             <b>Notes:</b><br>
 141                             <p-scrollPanel [style]="{width: '100%', height: '62px'}">
 142                                 <div style="font-size: 12px; word-break: normal;">{{rowData.metadata.notes}}</div>
 143                             </p-scrollPanel>
 144                         </div>
 145                         <!-- Labels -->
 146                         <div class="row-expand-card" style="background-color: rgba(76, 65, 225, 0.199)">
 147                             <b style="padding-bottom: 5px;">Labels:</b><br>
 148                             <div *ngFor="let label of rowData['metadata']['labels']" style="display: inline-flex; margin-top: 5px;">
 149                                 <div style="padding: 2px 7px 3px 0px;">
 150                                     <span style="background-color: rgba(80, 80, 80, 0.185); padding: 3px; border-radius: 3px;">{{label}}</span>
 151                                 </div>
 152                             </div>
 153                         </div>
 154                     </div>
 155                 </td>
 156             </tr>
 157         </ng-template>
 158     </p-table>
 159
 160     <!--download buttons for exporting table to either csv or excel file-->
 161     <div *ngIf="loadTable" style="margin-left: 10px; margin-top: -32px; float: left;">
 162         <button pButton type="button" (click)="exportTable('csv')"
 163             matTooltip="Export Table to CSV" matTooltipPosition="above"
 164             style="border-radius: 5px; width: 65px; height: 22px; font-size: 14px; border: none; margin-top: 4px; display: inline-flex;">
 165             <i class="pi pi-file" style="margin-top: 2px; margin-left: 8px;"></i>
 166             <label style="font-weight: 800; vertical-align: middle;">CSV</label>
 167         </button>
 168         <button pButton type="button" (click)="exportTable('excel')"
 169             matTooltip="Export Table to XLSX" matTooltipPosition="above"
 170             style="border-radius: 5px; width: 65px; height: 22px; margin-left: 7px; font-size: 14px; background-color: green; border: none; display: inline-flex;">
 171             <i class="pi pi-file-excel" style="margin-top: 2px; margin-left: 4px;"></i>
 172             <label style="font-weight: 800; vertical-align: middle;">Excel</label>
 173         </button>
 174     </div>
 175
 176     <!-- Dialog to Add or Change a MS -->
 177     <app-ms-add-change *ngIf="showMsAddChangeDialog" [visible]="showMsAddChangeDialog" [currentRow]="currentRow" (handler)="addOrChangeMs($event)"></app-ms-add-change>
 178
 179     <!-- Dialog to Add (or Change) a MS Instance -->
 180     <app-ms-instance-add *ngIf="showAddChangeMsInstance" [visible]="showAddChangeMsInstance" [msName]="addInstanceTo" [currentRow]="currentRow" (handler)="addMsInstance($event)"></app-ms-instance-add>
 181
 182     <!-- Shared success message -->
 183     <p-toast key="addChangeSuccess"></p-toast>
 184
 185 </div>