Merge "Home page carousel"
[eliot.git] / 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>