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

   1 <div class="main" *ngIf="(toolbarService.visible|async)">
   2     <app-toolbar></app-toolbar>
   3
   4     <div class="example-container">
   5         <div class="toaster">
   6             <ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" [autohide]="true"
   7                 [delay]="toast.delay || 5000" (hide)="toastService.remove(toast)" aria-live="polite" aria-atomic="true">
   8                 <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
   9                     <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
  10                 </ng-template>
  11
  12                 <ng-template #text>{{ toast.textOrTpl }}</ng-template>
  13             </ngb-toast>
  14         </div>
  15         <div class="stepper-com">
  16             <mat-horizontal-stepper [linear]="isLinear" #stepper>
  17                 <mat-step>
  18                     <ng-template matStepLabel>Basic Fields required</ng-template>
  19                     <mat-tab-group>
  20                         <mat-tab label="Insert Application Deployment Yaml files">
  21                             <div class="insert-deploy-yaml-card">
  22                             <mat-card>
  23                                 <mat-card-header>
  24                                     <mat-card-title>ELIOT Application Deployment</mat-card-title>
  25                                 </mat-card-header>
  26                                 <form [formGroup]="deployForm" (ngSubmit)="onSubmit()">
  27
  28                                     <div class="app-accordion">
  29                                         <mat-accordion>
  30
  31                                             <mat-expansion-panel (opened)="typePanelOpenState = true"
  32                                                 (closed)="typePanelOpenState = false">
  33                                                 <mat-expansion-panel-header>
  34                                                     <mat-panel-title>
  35                                                         Custom Application Deployment details
  36                                                     </mat-panel-title>
  37                                                 </mat-expansion-panel-header>
  38                                                 <div class="upload-csar-label">
  39                                                     <p>Please upload Application csar file contains the deployment yaml
  40                                                         below...</p>
  41                                                     <mat-label>Application .csar package
  42                                                         containing deployment Yaml
  43                                                     </mat-label>
  44                                                     <input type="file" formControlname="deployyamlfile"
  45                                                         (change)="fileProgress($event)" />
  46                                                     <div class="submit-button text-center">
  47                                                         <button type="button"
  48                                                             class="btn btn-outline-info">Submit</button>
  49                                                     </div>
  50                                                 </div>
  51                                             </mat-expansion-panel>
  52                                         </mat-accordion>
  53                                     </div>
  54
  55                                     <div class="image-preview mb-3" *ngIf="previewFile">
  56                                         <p> {{this.deployForm.get('deployyamlfile').value}} </p>
  57                                     </div>
  58                                 </form>
  59
  60                             </mat-card>
  61                             </div>
  62                         </mat-tab>
  63
  64                         <mat-tab label="View / Edit Application Deployment Yaml files">
  65                             <mat-card>VIEW OF UPLOADED YAML FILE BEFORE DEPLOYMENT
  66                                 <div>
  67                                     <button mat-button matStepperNext>Next</button>
  68                                 </div>
  69                             </mat-card>
  70                         </mat-tab>
  71
  72                     </mat-tab-group>
  73                 </mat-step>
  74
  75                 <div class="additional-fields-stepper">
  76                     <mat-step>
  77                         <ng-template matStepLabel>Additional Fields required</ng-template>
  78                         <div class="nodes-radio-btn">
  79                             <label id="node-radio-group-label">Select the ELIOT node where you want to deploy the
  80                                 application</label>
  81                             <mat-radio-group aria-labelledby="node-radio-group-label" class="node-radio-group"
  82                                 [(ngModel)]="nodeSelected">
  83                                 <mat-radio-button class="node-radio-button" *ngFor="let node of nodes" [value]="node">
  84                                     {{node}}
  85                                 </mat-radio-button>
  86                             </mat-radio-group>
  87                         </div>
  88                         <div>Your Selected ELIOT Node is: {{nodeSelected}}</div>
  89                         <div class="node-label-txt">
  90                             <mat-form-field>
  91                                 <input matInput placeholder="Please enter the Node Label" [(ngModel)]="nodeLabelMentioned"
  92                                     name="nodeLabel">
  93                             </mat-form-field>
  94                         </div>
  95                         <div>
  96                             <button mat-button matStepperPrevious>Back</button>
  97                             <button mat-button matStepperNext (click)="addNodeDetails()">Next</button>
  98                         </div>
  99                     </mat-step>
 100                 </div>
 101                 <div class="finish-stepper">
 102                     <mat-step>
 103                         <ng-template matStepLabel>Finish - DEPLOYMENT</ng-template>
 104                         <div class="deploy-button">
 105                             <button mat-raised-button class="btn btn-outline-secondary" (click)="deploySuccess()">
 106                                 DEPLOY
 107                             </button>
 108                         </div>
 109                         <div>
 110                             <button mat-button matStepperPrevious>Back</button>
 111                             <button mat-button matStepperNext>Next</button>
 112                         </div>
 113                     </mat-step>
 114                 </div>
 115             </mat-horizontal-stepper>
 116         </div>
 117
 118     </div>
 119 </div>