blueprints/common/eliot-ui/frontend-src/src/app/history/history.component.html

   1 <div class="history-main">
   2     <app-toolbar></app-toolbar>
   3     <div class="description-header">
   4         <h4>{{description}}</h4>
   5     </div>
   6
   7     <div class="status-radio-grp">
   8         <label id="status-radio-group-label">Select Current status / Past status for App deployment history</label>
   9         <mat-radio-group (change)="selectedStatus($event)" aria-labelledby="status-radio-group-label"
  10             class="status-radio-group" [(ngModel)]="statusSelected">
  11             <mat-radio-button class="status-radio-button" *ngFor="let status of statusHistoryArray" [value]="status">
  12                 {{status}}
  13             </mat-radio-button>
  14         </mat-radio-group>
  15     </div>
  16
  17     <div *ngIf="currentStatus==true" class="current-status">
  18         <ng-template matStepLabel>Status of Current DEPLOYMENT</ng-template>
  19
  20         <div class="current-status-deploy">
  21
  22             <div class="current-status-heading">
  23                 <h4>Current Status of Deployment of csar package </h4>
  24             </div>
  25
  26             <div class="mat-elevation-z8 current-history-table">
  27
  28                 <table mat-table [dataSource]="currentDeployDataSource">
  29
  30                     <ng-container matColumnDef="appName">
  31                         <th mat-header-cell *matHeaderCellDef> App Name </th>
  32                         <td mat-cell *matCellDef="let deployCurrent"> {{deployCurrent.appName}} </td>
  33                     </ng-container>
  34
  35                     <ng-container matColumnDef="yamlName">
  36                         <th mat-header-cell *matHeaderCellDef> Yaml Name </th>
  37                         <td mat-cell *matCellDef="let deployCurrent"> {{deployCurrent.yamlName}} </td>
  38                     </ng-container>
  39
  40                     <ng-container matColumnDef="nodeIp">
  41                         <th mat-header-cell *matHeaderCellDef> Node Ip </th>
  42                         <td mat-cell *matCellDef="let deployCurrent"> {{deployCurrent.nodeIp}} </td>
  43                     </ng-container>
  44
  45                     <ng-container matColumnDef="runningStatus">
  46                         <th mat-header-cell *matHeaderCellDef> Running Status </th>
  47                         <td mat-cell *matCellDef="let deployCurrent"> {{deployCurrent.runningStatus}} </td>
  48                     </ng-container>
  49
  50                     <tr mat-header-row *matHeaderRowDef="currentDeployColumns"></tr>
  51                     <tr mat-row *matRowDef="let row; columns: currentDeployColumns;"></tr>
  52                 </table>
  53
  54                 <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  55
  56             </div>
  57         </div>
  58     </div>
  59
  60     <div class="past-status-heading" *ngIf="currentStatus==false">
  61         <h4>Past status of Deployment of csar package </h4>
  62     </div>
  63
  64     <div class="accordian" *ngIf="currentStatus==false">
  65         <mat-accordion>
  66             <div class="past-status-panel" *ngFor="let month of monthDetails">
  67                 <mat-expansion-panel (afterCollapse)="clearMonth(month.value)"
  68                     (afterExpand)="selectedMonth(month.value)">
  69                     <mat-expansion-panel-header>
  70                         <mat-panel-title>
  71                             {{month.monthName}}
  72                         </mat-panel-title>
  73                         <mat-panel-description>
  74                             Please expand to view historical data
  75                         </mat-panel-description>
  76                     </mat-expansion-panel-header>
  77                     <div class="download-yaml-section">
  78                         <button mat-raised-button color="warning" (click)="downloadYaml()">
  79                             <mat-icon>{{month.iconName}}</mat-icon>{{month.displayName}}
  80                         </button>
  81                     </div>
  82                     <div class="historytable mat-elevation-z8">
  83                         <table mat-table [dataSource]="historyDataSource">
  84                             <ng-container matColumnDef="select">
  85                                 <th mat-header-cell *matHeaderCellDef>
  86                                     <mat-checkbox (change)="$event ? masterToggleJan() : null"
  87                                         [checked]="selection.hasValue() && isAllSelectedJan()"
  88                                         [indeterminate]="selection.hasValue() && !isAllSelectedJan()"
  89                                         [aria-label]="checkboxLabelJan()">
  90                                     </mat-checkbox>
  91                                 </th>
  92                                 <td mat-cell *matCellDef="let row">
  93                                     <mat-checkbox (click)="$event.stopPropagation()"
  94                                         (change)="$event ? selection.toggle(row) : null"
  95                                         [checked]="selection.isSelected(row)" [aria-label]="checkboxLabelJan(row)">
  96                                     </mat-checkbox>
  97                                 </td>
  98                             </ng-container>
  99
 100                             <ng-container matColumnDef="date">
 101                                 <th mat-header-cell *matHeaderCellDef> Date </th>
 102                                 <td mat-cell *matCellDef="let eliot"> {{eliot.date}} </td>
 103                             </ng-container>
 104
 105                             <ng-container matColumnDef="csarPackage">
 106                                 <th mat-header-cell *matHeaderCellDef> App Csar Package </th>
 107                                 <td mat-cell *matCellDef="let eliot"> {{eliot.csarPackage}} </td>
 108                             </ng-container>
 109
 110                             <ng-container matColumnDef="yamlFile">
 111                                 <th mat-header-cell *matHeaderCellDef> Yaml File </th>
 112                                 <td mat-cell *matCellDef="let eliot"> {{eliot.yamlFile}} </td>
 113                             </ng-container>
 114
 115                             <ng-container matColumnDef="status">
 116                                 <th mat-header-cell *matHeaderCellDef> Status </th>
 117                                 <td mat-cell *matCellDef="let eliot"> {{eliot.status}} </td>
 118                             </ng-container>
 119
 120                             <tr mat-header-row *matHeaderRowDef="historyColumns"></tr>
 121                             <tr mat-row *matRowDef="let row; columns: historyColumns;"></tr>
 122                         </table>
 123                         <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 124                     </div>
 125                 </mat-expansion-panel>
 126             </div>
 127         </mat-accordion>
 128     </div>
 129 </div>