Home page carousel

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

diff --git a/blueprints/common/eliot-ui/frontend-src/src/app/deployments/deployments.component.html b/blueprints/common/eliot-ui/frontend-src/src/app/deployments/deployments.component.html
index b13efcb..029df3c 100644 (file)
--- a/blueprints/common/eliot-ui/frontend-src/src/app/deployments/deployments.component.html
+++ b/blueprints/common/eliot-ui/frontend-src/src/app/deployments/deployments.component.html
@@ -1 +1,119 @@
-<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