-<p>Development under Progress...</p>
+<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