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

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