Add functionality

1. Added upload and delete files on the knowledge base details page.
2. The knowledge base editing page can only edit the description, not the name.
3. Add some editable items to the app editing page.

Issue-ID: USECASEUI-844
Change-Id: I24b9c84021092fc866c029994b21c2e0f8d2a6be
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>

3 files changed, 116 insertions, 50 deletions

diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html
index 5a5bb445..5824f706 100644
--- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html
+++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html
@@ -39,8 +39,8 @@
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="applicationType" nzRequired>Application Type</nz-form-label>
-         <nz-form-control [nzSpan]="12">
-           <nz-select name="applicationType" 
+         <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}">
+           <nz-select name="applicationType" [ngClass]="{'disabled-input': isEdit}"
            nzPlaceHolder="Select Application Type" formControlName="applicationType">
              <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option>
            </nz-select>
@@ -51,8 +51,8 @@
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="selectedOperator" nzRequired>Operator Name</nz-form-label>
-         <nz-form-control [nzSpan]="12">
-           <nz-select name="selectedOperator"
+         <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}">
+           <nz-select name="selectedOperator" [ngClass]="{'disabled-input': isEdit}"
            nzPlaceHolder="Select Operator" formControlName="selectedOperator"
            (ngModelChange)="handleOperatorChange($event)">
             <nz-option *ngFor="let operator of operators" [nzValue]="operator"
@@ -65,11 +65,11 @@
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="selectedPlatform" nzRequired>MaaS Platform Name</nz-form-label>
-         <nz-form-control [nzSpan]="12">
-           <nz-select name="selectedPlatform"
+         <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}">
+           <nz-select name="selectedPlatform" [ngClass]="{'disabled-input': isEdit}"
            nzPlaceHolder="Select Platform" formControlName="selectedPlatform"
            (ngModelChange)="handleMaasChange($event)">
-           <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform"
+           <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform.maaSPlatformId"
            [nzLabel]="platform.maaSPlatformName"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('selectedPlatform').dirty && validateForm.get('selectedPlatform').errors">
@@ -82,7 +82,7 @@
          <nz-form-control [nzSpan]="12">
            <nz-select name="selectedModel"
            nzPlaceHolder="Select Model" formControlName="selectedModel">
-           <nz-option *ngFor="let model of filteredModels" [nzValue]="model" [nzLabel]="model.modelName"></nz-option>
+           <nz-option *ngFor="let model of filteredModels" [nzValue]="model.modelId" [nzLabel]="model.modelName"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('selectedModel').dirty && validateForm.get('selectedModel').errors">
             Please select model!
@@ -94,7 +94,7 @@
          <nz-form-control [nzSpan]="12">
            <nz-select name="selectKnowledgeBase"
            nzPlaceHolder="Select KnowLedge Base" formControlName="selectKnowledgeBase">
-           <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase"
+           <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase.knowledgeBaseId"
                   [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('selectKnowledgeBase').dirty && validateForm.get('selectKnowledgeBase').errors">
diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less
index 9156f1f9..f8fea30c 100644
--- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less
+++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less
@@ -1,11 +1,3 @@
-// .ant-select {
-//   width: 200px;
-// }
-
-// .ant-input {
-//   width: 300px;
-// }
-
 .input-wrapper {
   display: flex;
   align-items: center;
@@ -47,9 +39,25 @@
   position: relative;
 }
 
+.disabled-input ::ng-deep  .ant-select-selection{
+  color: #00000040;
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+  box-shadow: none;
+  opacity: 1;
+}
+
 #charCount {
   position: absolute;
   top: 9px;
   right: 15px;
   line-height: 20px;
+}
+
+.disabled-input {
+  pointer-events: none;
+}
+
+.disabled-item {
+  cursor: not-allowed;
 }
\ No newline at end of file
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) {