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

   1 import { Component, OnInit, TemplateRef } from '@angular/core';
   2 import { EliotserviceService } from '../eliotservice.service';
   3 import { deploymentData, nodeDeploy } from '../datainterface';
   4 import { FormBuilder, FormGroup } from '@angular/forms';
   5 import { ToolbarService } from './../toolbar/toolbar.service';
   6 import {MatTableDataSource} from '@angular/material/table';
   7
   8 import { YAML } from 'yaml';
   9
  10 import { ToastService } from './toast.service';
  11
  12 @Component({
  13   selector: 'app-deployments',
  14   templateUrl: './deployments.component.html',
  15   styleUrls: ['./deployments.component.scss']
  16 })
  17 export class DeploymentsComponent implements OnInit {
  18   host: {'[class.ngb-toasts]': 'true'}
  19   isLinear = false;
  20   fileContent: string = '';
  21   deployParam = false;
  22
  23   isTemplate(toast) { return toast.textOrTpl instanceof TemplateRef; }
  24   fileData: File = null;
  25   previewFile: any = null;
  26   deployData = {} as deploymentData;
  27   uploadForm: FormGroup;
  28   deployForm: FormGroup;
  29   typePanelOpenState = false;
  30
  31   nodeSelected: string;
  32   nodesArray: string[];
  33   nodes: string[] = [];
  34   nodeLabelMentioned: string;
  35
  36   nodeDetails = {} as nodeDeploy;
  37
  38   constructor(
  39     private serviceobj: EliotserviceService,
  40     private formBuilder: FormBuilder,
  41     public toolbarService: ToolbarService,
  42     public toastService: ToastService
  43   ) { }
  44
  45   ngOnInit() {
  46     this.toolbarService.show();
  47     this.typePanelOpenState = false;
  48     this.uploadForm = this.formBuilder.group(
  49       {
  50         yamlfile: [''],
  51         sample: [''],
  52       }
  53     );
  54     this.deployForm = this.formBuilder.group(
  55       {
  56         // sampleone: [''],
  57         // sampletwo: [''],
  58         // samplethree: [''],
  59         // samplefour: [''],
  60         deployyamlfile: ['']
  61       }
  62     );
  63
  64     this.getNodes();
  65
  66   }
  67
  68   fileProgress(event) {
  69     debugger;
  70
  71     if(event.target.files.length > 0 ){
  72       const deployfile = event.target.files[0];
  73       let filee = event.target.files[0];
  74       // this.uploadForm.get('yamlfile').setValue(file);
  75       this.deployForm.get('deployyamlfile').setValue(deployfile);
  76       // this.uploadForm.get('sample');
  77       debugger;
  78       // var reader = new FileReader();
  79       // reader.readAsDataURL(deployfile);
  80       let filecon: string = '';
  81       // reader.onload = (_event) => {
  82       //   // this.previewFile = reader.result;
  83       //   this.previewFile = reader.readAsText.toString;
  84
  85       //   console.log("Preview File");
  86       //   console.log(this.previewFile);
  87       // }
  88
  89       let fileReader: FileReader = new FileReader();
  90
  91       // fileReader.onloadend = function(x) {
  92       //   // fileContent = fileReader.result;
  93       //   fileReader.result;
  94       // }
  95       // fileReader.readAsText(deployfile);
  96       debugger;
  97       console.log(YAML.parse(deployfile));
  98       debugger;
  99
 100       // this.fileContent = fileReader.result.toString;
 101
 102     }
 103
 104
 105     console.log("Inside fileProgress...")
 106     // this.fileData = <File>fileInput.target.files[0];
 107     // console.log(this.fileData);
 108   }
 109
 110   onSubmit() {
 111     console.log("Inside onSubmit() ....")
 112     const formData = new FormData();
 113
 114     // formData.append('file',this.uploadForm.get('yamlfile').value);
 115     // formData.append('sss',this.deployForm.get('sampleone').value);
 116     // formData.append('ssa',this.deployForm.get('sampletwo').value);
 117     // formData.append('ssb',this.deployForm.get('samplethree').value);
 118     // formData.append('ssc',this.deployForm.get('samplefour').value);
 119     formData.append('deployfile',this.deployForm.get('deployyamlfile').value);
 120     // formData.append('sample',this.formBuilder.)
 121     debugger;
 122     // this.deployData.deployFile = formData.get('yamlfile');
 123     // this.deployData.deployFile = formData.get('deployyamlfile');
 124     this.deployData.deployFile = this.deployForm.value.deployyamlfile;
 125     console.log("deploydata...");
 126     console.log(this.deployData);
 127     console.log("formData....");
 128     console.log(formData);
 129     // formData.append('file', this.fileData);
 130     // this.deployData.deployFile = formData.get('yamlfile')
 131     console.log(this.deployForm.value);
 132     debugger;
 133     this.serviceobj.postDeploymentPackage(formData)
 134         .subscribe(data => {
 135           console.log(data);
 136           this.showSuccess();
 137           // console.log(data);
 138         }
 139       ,error => console.log(error)
 140       );
 141     // this.http.post('url/to/your/api', formData)
 142     //   .subscribe(res => {
 143     //     console.log(res);
 144     //     alert('SUCCESS !!');
 145     //   })
 146     // this.showSuccess();
 147   }
 148
 149   showSuccess() {
 150     this.toastService.show('Application ( csar ) package uploaded Successfully', { classname: 'bg-success text-light', delay: 10000 });
 151   }
 152
 153   deploySuccess() {
 154     this.deployParam = true;
 155     this.serviceobj.postDeployRequest(this.deployParam,this.nodeDetails)
 156         .subscribe(data => {
 157           console.log(data);
 158           this.toastService.show('ELIOT IOT Application / Yaml deployed Successfully', { classname: 'bg-success text-light', delay: 10000 });
 159         }
 160       ,error => console.log(error)
 161     );
 162
 163
 164   }
 165
 166   getNodes() {
 167     this.serviceobj.getNodesArray()
 168        .subscribe(data => {
 169         debugger;
 170         console.log(data);
 171         data.nodesArray.forEach(
 172           nodeData => {
 173             debugger;
 174             this.nodes.push(nodeData.value);
 175
 176         });
 177
 178         // this.sessionArr.forEach(data => {
 179         //   if (data.month == m) {
 180         //     this.january.push(data);
 181         //     this.historyDataSource = new MatTableDataSource(this.january);
 182         //   }
 183         // })
 184
 185         console.log(this.nodesArray);
 186         debugger;
 187         // this.nodewise = data;
 188         // this.nodesArray = this.nodewise.nodesArray;
 189        },
 190        error => console.log(error));
 191   }
 192
 193   addNodeDetails() {
 194     this.nodeDetails.deployNodeLabel = this.nodeLabelMentioned;
 195     debugger;
 196     this.nodeDetails.deployNodeName = this.nodeSelected;
 197   }
 198 }