gerrit.onap Code Review - usecase-ui.git/blob

   1 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   2 import { NzMessageService } from "ng-zorro-antd";
   3 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   4 import { MaasService } from '@src/app/core/services/maas.service';
   5
   6 @Component({
   7   selector: 'app-create-application-management',
   8   templateUrl: './create-application-management.component.html',
   9   styleUrls: ['./create-application-management.component.less']
  10 })
  11 export class CreateApplicationManagementComponent implements OnInit {
  12   title = 'Add Application';
  13   validateForm: FormGroup;
  14   @Input() showModal: boolean;
  15   @Output() modalOpreation = new EventEmitter();
  16   operators: any[] = [];
  17   filteredPlatforms: any[] = [];
  18   filteredModels: any[] = [];
  19   knowledgeBases: any[] = [];
  20   temperature = 3;
  21   top_p = 3;
  22
  23   constructor(
  24     private myhttp: MaasService,
  25     private message: NzMessageService,
  26     private fb: FormBuilder
  27   ) { }
  28
  29   ngOnInit() {
  30     this.fetchOperators();
  31     this.initFormData();
  32   }
  33
  34   initFormData() {
  35     this.validateForm = this.fb.group({
  36       name: [null, [Validators.required]],
  37       description: [null],
  38       applicationType: [null, [Validators.required]],
  39       selectedOperator: [null, [Validators.required]],
  40       selectedPlatform: [null, [Validators.required]],
  41       selectedModel: [null, [Validators.required]],
  42       selectKnowledgeBase: [null, [Validators.required]],
  43       prompt: [null],
  44       openingRemarks: [null],
  45       temperature: [3, [Validators.required]],
  46       temperatureSlider: [3],
  47       top_p: [3, [Validators.required]],
  48       top_pSlider: [3]
  49     });
  50   }
  51
  52   fetchOperators(): void {
  53     this.myhttp.getOperators().subscribe(
  54       (response) => {
  55         this.operators = response.result_body;
  56       },
  57       () => {
  58         this.message.error('Failed to fetch operators');
  59       }
  60     );
  61   }
  62
  63   handleOperatorChange(value: any): void {
  64     if (value) {
  65       this.filteredPlatforms = value.maaSPlatformList;
  66     } else {
  67       this.filteredPlatforms = [];
  68     }
  69     this.validateForm.get('selectedPlatform').setValue(null);
  70     this.validateForm.get('selectedModel').setValue(null);
  71     this.validateForm.get('selectKnowledgeBase').setValue(null);
  72   }
  73
  74   handleMaasChange(value: any): void {
  75     if (value) {
  76       this.filteredModels = value.modelList;
  77       this.fetchKnowledgeBase(value);
  78     } else {
  79       this.filteredModels = [];
  80     }
  81     this.validateForm.get('selectedModel').setValue(null);
  82     this.validateForm.get('selectKnowledgeBase').setValue(null);
  83   }
  84
  85   fetchKnowledgeBase(value): void {
  86     this.myhttp.fetchKnowledgeBaseByMaasId(value.maaSPlatformId).subscribe(
  87       (response) => {
  88         this.knowledgeBases = response.result_body;
  89       },
  90       () => {
  91         this.message.error('Failed to fetch knowledge base');
  92       }
  93     );
  94   }
  95
  96   handleCancel(): void {
  97     this.showModal = false;
  98     this.modalOpreation.emit({ "cancel": true });
  99   }
 100
 101   handleOk() {
 102     this.submitForm();
 103     if (this.validateForm.invalid) {
 104       this.showModal = true;
 105       return;
 106     }
 107     this.myhttp.createApplication(this.constructBody()).subscribe(
 108       (response) => {
 109         this.showModal = false;
 110         this.modalOpreation.emit({ "cancel": false });
 111         if (response.result_header.result_code === 200) {
 112           this.message.success('Created successfully');
 113         } else {
 114           this.message.error(response.result_header.result_message);
 115         }
 116       },
 117       () => {
 118         this.showModal = false;
 119         this.message.error('Created failed');
 120       }
 121     )
 122   }
 123   constructBody() {
 124     const requestBody = {
 125       applicationName: this.validateForm.value.name,
 126       applicationDescription: this.validateForm.value.description,
 127       applicationType: this.validateForm.value.applicationType,
 128       operatorName: this.validateForm.value.selectedOperator.operatorName,
 129       operatorId: this.validateForm.value.selectedOperator.operatorId,
 130       maaSPlatformId: this.validateForm.value.selectedPlatform.maaSPlatformId,
 131       maaSPlatformName: this.validateForm.value.selectedPlatform.maaSPlatformName,
 132       knowledgeBaseId: this.validateForm.value.selectKnowledgeBase.knowledgeBaseId,
 133       knowledgeBaseName: this.validateForm.value.selectKnowledgeBase.knowledgeBaseName,
 134       largeModelId: this.validateForm.value.selectedModel.modelId,
 135       largeModelName: this.validateForm.value.selectedModel.modelName,
 136       prompt: this.validateForm.value.prompt,
 137       temperature: this.validateForm.value.temperature,
 138       top_p: this.validateForm.value.top_p,
 139       openingRemarks: this.validateForm.value.openingRemarks
 140   }
 141   return requestBody;
 142 }
 143
 144   submitForm(): void {
 145     for (let i in this.validateForm.controls) {
 146       this.validateForm.controls[i].markAsDirty();
 147       this.validateForm.controls[i].updateValueAndValidity();
 148     }
 149   }
 150
 151   handleTemperatureSliderChange(event: number): void {
 152     this.validateForm.controls.temperature.setValue(event);
 153   }
 154
 155   handleTemperatureInputChange(event: number): void {
 156     this.validateForm.controls.temperatureSlider.setValue(event);
 157   }
 158
 159   handletoppChange(event: number): void {
 160     this.validateForm.controls.top_p.setValue(event);
 161   }
 162
 163   toppSliderChange(event: number): void {
 164     this.validateForm.controls.top_p.setValue(event);
 165   }
 166
 167   toppInputChange(event: number): void {
 168     this.validateForm.controls.top_pSlider.setValue(event);
 169   }
 170 }