+++ /dev/null
-<div class="main" *ngIf="(toolbarService.visible|async)">
- <app-toolbar></app-toolbar>
-
- <div class="example-container">
- <div class="toaster">
- <ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" [autohide]="true"
- [delay]="toast.delay || 5000" (hide)="toastService.remove(toast)" aria-live="polite" aria-atomic="true">
- <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
- <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
- </ng-template>
-
- <ng-template #text>{{ toast.textOrTpl }}</ng-template>
- </ngb-toast>
- </div>
- <div class="stepper-com">
- <mat-horizontal-stepper [linear]="isLinear" #stepper>
- <mat-step>
- <ng-template matStepLabel>Basic Fields required</ng-template>
- <mat-tab-group>
- <mat-tab label="Insert Application Deployment Yaml files">
- <div class="insert-deploy-yaml-card">
- <mat-card>
- <mat-card-header>
- <mat-card-title>ELIOT Application Deployment</mat-card-title>
- </mat-card-header>
- <form [formGroup]="deployForm" (ngSubmit)="onSubmit()">
-
- <div class="app-accordion">
- <mat-accordion>
-
- <mat-expansion-panel (opened)="typePanelOpenState = true"
- (closed)="typePanelOpenState = false">
- <mat-expansion-panel-header>
- <mat-panel-title>
- Custom Application Deployment details
- </mat-panel-title>
- </mat-expansion-panel-header>
- <div class="upload-csar-label">
- <p>Please upload Application csar file contains the deployment yaml
- below...</p>
- <mat-label>Application .csar package
- containing deployment Yaml
- </mat-label>
- <input type="file" formControlname="deployyamlfile"
- (change)="fileProgress($event)" />
- <div class="submit-button text-center">
- <button type="button"
- class="btn btn-outline-info">Submit</button>
- </div>
- </div>
- </mat-expansion-panel>
- </mat-accordion>
- </div>
-
- <div class="image-preview mb-3" *ngIf="previewFile">
- <p> {{this.deployForm.get('deployyamlfile').value}} </p>
- </div>
- </form>
-
- </mat-card>
- </div>
- </mat-tab>
-
- <mat-tab label="View / Edit Application Deployment Yaml files">
- <mat-card>VIEW OF UPLOADED YAML FILE BEFORE DEPLOYMENT
- <div>
- <button mat-button matStepperNext>Next</button>
- </div>
- </mat-card>
- </mat-tab>
-
- </mat-tab-group>
- </mat-step>
-
- <div class="additional-fields-stepper">
- <mat-step>
- <ng-template matStepLabel>Additional Fields required</ng-template>
- <div class="nodes-radio-btn">
- <label id="node-radio-group-label">Select the ELIOT node where you want to deploy the
- application</label>
- <mat-radio-group aria-labelledby="node-radio-group-label" class="node-radio-group"
- [(ngModel)]="nodeSelected">
- <mat-radio-button class="node-radio-button" *ngFor="let node of nodes" [value]="node">
- {{node}}
- </mat-radio-button>
- </mat-radio-group>
- </div>
- <div>Your Selected ELIOT Node is: {{nodeSelected}}</div>
- <div class="node-label-txt">
- <mat-form-field>
- <input matInput placeholder="Please enter the Node Label" [(ngModel)]="nodeLabelMentioned"
- name="nodeLabel">
- </mat-form-field>
- </div>
- <div>
- <button mat-button matStepperPrevious>Back</button>
- <button mat-button matStepperNext (click)="addNodeDetails()">Next</button>
- </div>
- </mat-step>
- </div>
- <div class="finish-stepper">
- <mat-step>
- <ng-template matStepLabel>Finish - DEPLOYMENT</ng-template>
- <div class="deploy-button">
- <button mat-raised-button class="btn btn-outline-secondary" (click)="deploySuccess()">
- DEPLOY
- </button>
- </div>
- <div>
- <button mat-button matStepperPrevious>Back</button>
- <button mat-button matStepperNext>Next</button>
- </div>
- </mat-step>
- </div>
- </mat-horizontal-stepper>
- </div>
-
- </div>
-</div>
\ No newline at end of file