1 files changed, 91 insertions, 33 deletions
diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts
index a4dba970..0ee40d7b 100644
--- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts
+++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts
@@ -5,6 +5,7 @@ import { MaasApi } from '@src/app/api/maas.api';
 import { KnowledgeBase, MaaSPlatform, ModelInformation, Operators } from '../../knowledge-base-management/knowledge-base.type';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { Application } from '../application.type';
 
 @Component({
   selector: 'app-create-application-management',
@@ -12,7 +13,22 @@ import { debounceTime } from 'rxjs/operators';
   styleUrls: ['./create-application-management.component.less']
 })
 export class CreateApplicationManagementComponent implements OnInit {
+  @Input() applicationId: string;
   title = 'Add Application';
+  isEdit_ = false;
+  @Input()
+  set isEdit(v: boolean) {
+    if (v) {
+      this.title = 'Edit Application';
+    } else {
+      this.title = 'Add Application';
+    }
+    this.isEdit_ = v;
+  }
+
+  get isEdit() {
+    return this.isEdit_;
+  }
   validateForm: FormGroup;
   @Input() showModal: boolean;
   @Output() modalOpreation = new EventEmitter();
@@ -26,6 +42,7 @@ export class CreateApplicationManagementComponent implements OnInit {
   @ViewChild('myTextarea') myTextarea: ElementRef;
   @ViewChild('charCount') charCount: ElementRef;
   @Input() existedNames: string[] = [];
+  application: Application;
 
   constructor(
     private myhttp: MaasApi,
@@ -33,10 +50,42 @@ export class CreateApplicationManagementComponent implements OnInit {
     private fb: FormBuilder
   ) { }
 
-  ngOnInit() {
-    this.fetchOperators();
+  async ngOnInit() {
     this.initFormData();
-    this.submitSubject.pipe(debounceTime(6000)).subscribe(() => this.executeSubmit());
+    await this.fetchOperators();
+    if (this.isEdit) {
+      await this.fetchApplication();
+    }
+    this.submitSubject.pipe(debounceTime(3000)).subscribe(() => this.executeSubmit());
+  }
+
+  async fetchApplication(): Promise<void> {
+    try {
+      const response = await this.myhttp.getApplicationById(this.applicationId).toPromise();
+      if (response.result_header.result_code !== 200) {
+        this.message.error('get application error');
+        return;
+      }
+      this.application = response.result_body;
+
+      this.validateForm.patchValue({
+        name: this.application.applicationName,
+        description: this.application.applicationDescription,
+        applicationType: this.application.applicationType,
+        selectedOperator: this.operators.find(i => i.operatorId === this.application.operatorId),
+        selectedPlatform: this.application.maaSPlatformId,
+        selectedModel: this.application.largeModelId,
+        selectKnowledgeBase: this.application.knowledgeBaseId,
+        prompt: this.application.prompt,
+        openingRemarks: this.application.openingRemarks,
+        temperature: this.application.temperature,
+        top_p: this.application.top_p,
+        temperatureSlider: this.application.temperature,
+        top_pSlider: this.application.top_p
+      });
+    } catch (error) {
+      this.message.error('Failed to obtain knowledge base data');
+    }
   }
 
   nameDuplicateValidator = (control: FormControl): { [s: string]: boolean } => {
@@ -49,7 +98,7 @@ export class CreateApplicationManagementComponent implements OnInit {
 
   initFormData() {
     this.validateForm = this.fb.group({
-      name: [null, [Validators.required, this.nameDuplicateValidator]],
+      name: this.isEdit ? [null, [Validators.required]] : [null, [Validators.required, this.nameDuplicateValidator]],
       description: [null],
       applicationType: [null, [Validators.required]],
       selectedOperator: [null, [Validators.required]],
@@ -65,15 +114,13 @@ export class CreateApplicationManagementComponent implements OnInit {
     });
   }
 
-  fetchOperators(): void {
-    this.myhttp.getOperators().subscribe(
-      (response) => {
-        this.operators = response.result_body;
-      },
-      () => {
-        this.message.error('Failed to fetch operators');
-      }
-    );
+  async fetchOperators(): Promise<void> {
+    try {
+      const response = await this.myhttp.getOperators().toPromise();
+      this.operators = response.result_body;
+    } catch (error) {
+      this.message.error('Failed to fetch operators');
+    }
   }
 
   handleOperatorChange(value: Operators): void {
@@ -87,10 +134,11 @@ export class CreateApplicationManagementComponent implements OnInit {
     this.validateForm.get('selectKnowledgeBase').setValue(null);
   }
 
-  handleMaasChange(value: MaaSPlatform): void {
-    if (value) {
-      this.filteredModels = value.modelList;
-      this.fetchKnowledgeBase(value);
+  handleMaasChange(maaSPlatformId: string): void {
+    if (maaSPlatformId) {
+      const filteredPlatformsByMaas = this.filteredPlatforms.find(i => i.maaSPlatformId === maaSPlatformId)
+      this.filteredModels = filteredPlatformsByMaas ? filteredPlatformsByMaas.modelList : [];
+      this.fetchKnowledgeBase(maaSPlatformId);
     } else {
       this.filteredModels = [];
     }
@@ -98,8 +146,8 @@ export class CreateApplicationManagementComponent implements OnInit {
     this.validateForm.get('selectKnowledgeBase').setValue(null);
   }
 
-  fetchKnowledgeBase(value): void {
-    this.myhttp.fetchKnowledgeBaseByMaasId(value.maaSPlatformId).subscribe(
+  fetchKnowledgeBase(maaSPlatformId: string): void {
+    this.myhttp.fetchKnowledgeBaseByMaasId(maaSPlatformId).subscribe(
       (response) => {
         this.knowledgeBases = response.result_body;
       },
@@ -124,44 +172,54 @@ export class CreateApplicationManagementComponent implements OnInit {
       this.showModal = true;
       return;
     }
-    
-    this.myhttp.createApplication(this.constructBody()).subscribe(
+    const url = this.isEdit ? this.myhttp.url.updateApplication : this.myhttp.url.createApplicationUrl;
+    this.myhttp.createApplication(url, this.constructBody()).subscribe(
       (response) => {
-        this.showModal = false;
-        this.modalOpreation.emit({ "cancel": false });
         if (response.result_header.result_code === 200) {
-          this.message.success('Created successfully');
+          this.showModal = false;
+          this.modalOpreation.emit({ "cancel": false });
+          this.message.success('Operate successfully');
         } else {
           this.message.error(response.result_header.result_message);
         }
       },
       () => {
         this.showModal = false;
-        this.message.error('Created failed');
+        this.message.error('Operate failed');
       }
     )
   }
 
   constructBody() {
+    const filteredPlatformById = this.filteredPlatforms.find(i => i.maaSPlatformId === this.validateForm.value.selectedPlatform);
+    const maaSPlatformName = filteredPlatformById ? filteredPlatformById.maaSPlatformName : '';
+    const filteredModelById = this.filteredModels.find(i => i.modelId === this.validateForm.value.selectedModel);
+    const largeModelName = filteredModelById ? filteredModelById.modelName : '';
+    const filteredKnowledgebaseById = this.knowledgeBases.find(i => i.knowledgeBaseId === this.validateForm.value.selectKnowledgeBase);
+    const knowledgeBaseName = filteredKnowledgebaseById ? filteredKnowledgebaseById.knowledgeBaseName : '';
+
     const requestBody = {
       applicationName: this.validateForm.value.name,
       applicationDescription: this.validateForm.value.description,
       applicationType: this.validateForm.value.applicationType,
       operatorName: this.validateForm.value.selectedOperator.operatorName,
       operatorId: this.validateForm.value.selectedOperator.operatorId,
-      maaSPlatformId: this.validateForm.value.selectedPlatform.maaSPlatformId,
-      maaSPlatformName: this.validateForm.value.selectedPlatform.maaSPlatformName,
-      knowledgeBaseId: this.validateForm.value.selectKnowledgeBase.knowledgeBaseId,
-      knowledgeBaseName: this.validateForm.value.selectKnowledgeBase.knowledgeBaseName,
-      largeModelId: this.validateForm.value.selectedModel.modelId,
-      largeModelName: this.validateForm.value.selectedModel.modelName,
+      maaSPlatformId: this.validateForm.value.selectedPlatform,
+      maaSPlatformName,
+      knowledgeBaseId: this.validateForm.value.selectKnowledgeBase,
+      knowledgeBaseName,
+      largeModelId: this.validateForm.value.selectedModel,
+      largeModelName,
       prompt: this.validateForm.value.prompt,
       temperature: this.validateForm.value.temperature,
       top_p: this.validateForm.value.top_p,
       openingRemarks: this.validateForm.value.openingRemarks
+    }
+    if (this.isEdit) {
+      requestBody['applicationId'] = this.applicationId;
+    } 
+    return requestBody;
   }
-  return requestBody;
-}
 
   submitForm(): void {
     for (let i in this.validateForm.controls) {