Optimize your code and add editing capabilities for your knowledge base and apps.

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

11 files changed, 279 insertions, 31 deletions

diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html
index 0827f477..e01cea5d 100644
--- a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html
+++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html
@@ -13,7 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<nz-modal [(nzVisible)]="showModal" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()"
+<nz-modal [(nzVisible)]="showModal" nzTitle="Application Detail" (nzOnCancel)="handleCancel()"
    (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" >
    <app-descriptions>
     <app-descriptions-item nzTitle="Application Name">{{applicationDetail.applicationName}}
diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.html b/usecaseui-portal/src/app/views/maas/build/application-management.component.html
index 6496270a..53e112be 100644
--- a/usecaseui-portal/src/app/views/maas/build/application-management.component.html
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.html
@@ -50,12 +50,14 @@
           <td>{{data.largeModelName}}</td>
           <td>
              <i class="anticon anticon-menu-fold" (click)="displayApplicationDetails(data)"></i>
-             <i class="anticon anticon-delete" (click)="delete(data)"></i>
+             <i class="anticon anticon-edit" (click)="edit(data)"></i>
+             <i class="anticon anticon-delete" (click)="showDeleteConfirm(data)"></i>
              <i class="anticon anticon-link" (click)="navigateToDetail(data)"></i>
           </td>
         </tr>
     </tbody>
   </nz-table>
 </div>
-<app-create-application-management *ngIf="createModalShow" [showModal]="createModalShow" (modalOpreation)="createModalClose($event)"></app-create-application-management>
-<app-application-detail *ngIf="applicationShow" [showModal]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
\ No newline at end of file
+<app-create-application-management *ngIf="createModalShow" [showModal]="createModalShow" (modalOpreation)="createModalClose($event)" [existedNames]="existedNames"></app-create-application-management>
+<app-application-detail *ngIf="applicationShow" [showModal]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
+<app-edit-application *ngIf="editModalShow" [showModal]="editModalShow" (modalOpreation)="editModalClose($event)" [applicationId]="applicationId"></app-edit-application>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
index 61471de4..00c0c405 100644
--- a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { NzMessageService } from "ng-zorro-antd";
+import { NzMessageService, NzModalService } from "ng-zorro-antd";
 import { Router } from '@angular/router';
-import { MaasService } from '@src/app/core/services/maas.service';
+import { MaasApi } from '@src/app/api/maas.api';
 import { Application } from './application.type';
+import { modalClose } from '../knowledge-base-management/knowledge-base.type';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-application-management',
@@ -14,11 +16,16 @@ export class ApplicationManagementComponent implements OnInit {
   createModalShow = false;
   applicationShow = false;
   applicationDetail: Object = {};
+  editModalShow = false;
+  applicationId = '';
+  existedNames = [];
 
   constructor(
-    private myhttp: MaasService,
+    private myhttp: MaasApi,
     private message: NzMessageService,
-    private router: Router
+    private router: Router,
+    private modalService: NzModalService,
+    private translate: TranslateService
   ) { }
 
   ngOnInit() {
@@ -30,6 +37,7 @@ export class ApplicationManagementComponent implements OnInit {
       .subscribe(
         (data) => {
           this.data = data.result_body
+          this.existedNames = this.data.map(item => item.applicationName);
         },
         () => {
           this.message.error('Failed to obtain application data');
@@ -41,7 +49,7 @@ export class ApplicationManagementComponent implements OnInit {
     this.createModalShow = true;
   }
 
-  createModalClose($event: any): void {
+  createModalClose($event: modalClose): void {
     this.createModalShow = false;
     if ($event.cancel) {
       return;
@@ -49,7 +57,7 @@ export class ApplicationManagementComponent implements OnInit {
     this.getAllApplicationData()
   }
 
-  delete(data): void {
+  delete(data: Application): void {
     this.myhttp.deleteApplicationById(data.applicationId).subscribe((data) => {
       this.getAllApplicationData()
       if (data.result_header.result_code === 200) {
@@ -62,7 +70,7 @@ export class ApplicationManagementComponent implements OnInit {
     });
   }
 
-  navigateToDetail(data): void {
+  navigateToDetail(data: Application): void {
     this.router.navigate(['maas/use'], { queryParams: { id: data.applicationId, name: data.applicationName } });
   }
 
@@ -70,7 +78,7 @@ export class ApplicationManagementComponent implements OnInit {
     this.applicationShow = false;
   }
 
-  displayApplicationDetails(data): void {
+  displayApplicationDetails(data: Application): void {
     this.applicationShow = true;
     this.myhttp.getApplicationById(data.applicationId)
       .subscribe(
@@ -82,4 +90,30 @@ export class ApplicationManagementComponent implements OnInit {
         }
       )
   }
+
+  edit(data: Application) {
+    this.applicationId = data.applicationId;
+    this.editModalShow = true;
+  }
+
+  showDeleteConfirm(data: Application): void {
+    this.modalService.error({
+      nzTitle: this.translate.instant('maas.deleteTitle'),
+      nzContent: this.translate.instant('maas.application.deleteApplicationContent'),
+      nzOkText: 'Yes',
+      nzOkType: 'danger',
+      nzOnOk: () => this.delete(data),
+      nzCancelText: 'No',
+      nzIconType: 'warning',
+    });
+  }
+
+  editModalClose($event: modalClose): void {
+    this.editModalShow = false;
+    if ($event.cancel) {
+      return;
+    }
+    this.getAllApplicationData()
+  }
+
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application.type.ts b/usecaseui-portal/src/app/views/maas/build/application.type.ts
index e3224e7c..a0348d7b 100644
--- a/usecaseui-portal/src/app/views/maas/build/application.type.ts
+++ b/usecaseui-portal/src/app/views/maas/build/application.type.ts
@@ -1,3 +1,4 @@
+import { Response } from '../knowledge-base-management/knowledge-base.type';
 export type Application = {
   "applicationId"?: string,
   "applicationName": string,
@@ -14,6 +15,12 @@ export type Application = {
   "prompt": string,
   "temperature": number,
   "top_p": number,
-  "openingRemarks": string
+  "openingRemarks": string,
 }
 
+export type ApplicationsResponse = Response<Application[]>;
+
+export type ApplicationResponse = Response<Application>;
+
+
+
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 c7c9b216..5a5bb445 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
@@ -22,7 +22,12 @@
          <nz-form-control [nzSpan]="12">
            <input type="text" nz-input formControlName="name">
            <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">
-            Please input application name!
+            <ng-container *ngIf="validateForm.get('name').hasError('required')">
+              Please input application name
+            </ng-container>
+            <ng-container *ngIf="validateForm.get('name').hasError('duplicated')">
+              {{ 'maas.nameDuplicateTip' | translate}}
+            </ng-container>
           </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
@@ -98,15 +103,22 @@
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
-         <nz-form-label [nzSpan]="8" nzFor="prompt">Prompt</nz-form-label>
+         <nz-form-label [nzSpan]="8" nzFor="prompt" nzRequired>Prompt</nz-form-label>
          <nz-form-control [nzSpan]="12">
-           <textarea rows="2" nz-input formControlName="prompt"></textarea>
+           <textarea #myTextarea id="myTextarea" rows="2" nz-input formControlName="prompt" [placeholder]="'maas.application.promptTip' | translate" maxlength="1000" minlength="20" (input)="updateCharCount()"></textarea>
+           <div #charCount id="charCount">0/1000</div>
+           <nz-form-explain *ngIf="validateForm.get('prompt').dirty && validateForm.get('prompt').errors">
+            {{ 'maas.application.promptTip' | translate}}
+          </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
-         <nz-form-label [nzSpan]="8" nzFor="openingRemarks">Opening Remarks</nz-form-label>
+         <nz-form-label [nzSpan]="8" nzFor="openingRemarks" nzRequired>Opening Remarks</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <textarea rows="2" nz-input formControlName="openingRemarks"></textarea>
+           <nz-form-explain *ngIf="validateForm.get('openingRemarks').dirty && validateForm.get('openingRemarks').errors">
+            Please input opening remarks!
+          </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        
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 e8e3fca4..9156f1f9 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
@@ -41,4 +41,15 @@
 
 .nz-select-container {
   width: 300px;
+}
+
+:host ::ng-deep #myTextarea {
+  position: relative;
+}
+
+#charCount {
+  position: absolute;
+  top: 9px;
+  right: 15px;
+  line-height: 20px;
 }
\ 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 1bbef527..a4dba970 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
@@ -1,7 +1,10 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { NzMessageService } from "ng-zorro-antd";
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MaasService } from '@src/app/core/services/maas.service';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+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';
 
 @Component({
   selector: 'app-create-application-management',
@@ -13,15 +16,19 @@ export class CreateApplicationManagementComponent implements OnInit {
   validateForm: FormGroup;
   @Input() showModal: boolean;
   @Output() modalOpreation = new EventEmitter();
-  operators: any[] = [];
-  filteredPlatforms: any[] = [];
-  filteredModels: any[] = [];
-  knowledgeBases: any[] = [];
+  operators: Operators[] = [];
+  filteredPlatforms: MaaSPlatform[] = [];
+  filteredModels: ModelInformation[] = [];
+  knowledgeBases: KnowledgeBase[] = [];
   temperature = 3;
   top_p = 3;
+  private submitSubject = new Subject<void>();
+  @ViewChild('myTextarea') myTextarea: ElementRef;
+  @ViewChild('charCount') charCount: ElementRef;
+  @Input() existedNames: string[] = [];
 
   constructor(
-    private myhttp: MaasService,
+    private myhttp: MaasApi,
     private message: NzMessageService,
     private fb: FormBuilder
   ) { }
@@ -29,19 +36,28 @@ export class CreateApplicationManagementComponent implements OnInit {
   ngOnInit() {
     this.fetchOperators();
     this.initFormData();
+    this.submitSubject.pipe(debounceTime(6000)).subscribe(() => this.executeSubmit());
+  }
+
+  nameDuplicateValidator = (control: FormControl): { [s: string]: boolean } => {
+    if (!control.value) {
+      return { required: true };
+    } else if (this.existedNames.includes(control.value)) {
+      return { duplicated: true, error: true };
+    }
   }
 
   initFormData() {
     this.validateForm = this.fb.group({
-      name: [null, [Validators.required]],
+      name: [null, [Validators.required, this.nameDuplicateValidator]],
       description: [null],
       applicationType: [null, [Validators.required]],
       selectedOperator: [null, [Validators.required]],
       selectedPlatform: [null, [Validators.required]],
       selectedModel: [null, [Validators.required]],
       selectKnowledgeBase: [null, [Validators.required]],
-      prompt: [null],
-      openingRemarks: [null],
+      prompt: [null, [Validators.required, Validators.minLength(20), Validators.maxLength(1000)]],
+      openingRemarks: [null, [Validators.required]],
       temperature: [3, [Validators.required]],
       temperatureSlider: [3],
       top_p: [3, [Validators.required]],
@@ -60,7 +76,7 @@ export class CreateApplicationManagementComponent implements OnInit {
     );
   }
 
-  handleOperatorChange(value: any): void {
+  handleOperatorChange(value: Operators): void {
     if (value) {
       this.filteredPlatforms = value.maaSPlatformList;
     } else {
@@ -71,7 +87,7 @@ export class CreateApplicationManagementComponent implements OnInit {
     this.validateForm.get('selectKnowledgeBase').setValue(null);
   }
 
-  handleMaasChange(value: any): void {
+  handleMaasChange(value: MaaSPlatform): void {
     if (value) {
       this.filteredModels = value.modelList;
       this.fetchKnowledgeBase(value);
@@ -99,11 +115,16 @@ export class CreateApplicationManagementComponent implements OnInit {
   }
 
   handleOk() {
+    this.submitSubject.next();
+  }
+
+  private executeSubmit() {
     this.submitForm();
     if (this.validateForm.invalid) {
       this.showModal = true;
       return;
     }
+    
     this.myhttp.createApplication(this.constructBody()).subscribe(
       (response) => {
         this.showModal = false;
@@ -120,6 +141,7 @@ export class CreateApplicationManagementComponent implements OnInit {
       }
     )
   }
+
   constructBody() {
     const requestBody = {
       applicationName: this.validateForm.value.name,
@@ -167,4 +189,12 @@ export class CreateApplicationManagementComponent implements OnInit {
   toppInputChange(event: number): void {
     this.validateForm.controls.top_pSlider.setValue(event);
   }
-}
\ No newline at end of file
+
+  updateCharCount() {
+    const textarea = this.myTextarea.nativeElement as HTMLTextAreaElement;
+    const charCount = textarea.value.length;
+    const maxLength = textarea.getAttribute('maxlength');
+    this.charCount.nativeElement.innerText = charCount + '/' + maxLength;
+  }
+}
+
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html
new file mode 100644
index 00000000..d2fb553b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html
@@ -0,0 +1,18 @@
+<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()"
+  (nzOnOk)="submitForm()" nzWidth="648px" nzHeight="800px">
+  <form nz-form [formGroup]="validateForm" (ngSubmit)="checkForm()">
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Application Name</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input nz-input formControlName="name" placeholder="Please input application name" />
+        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">Please input application name</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="description">Application Description</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <textarea rows="2" formControlName="description" nz-input></textarea>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts
new file mode 100644
index 00000000..40fc6bd5
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditApplicationComponent } from './edit-application.component';
+
+describe('EditApplicationComponent', () => {
+  let component: EditApplicationComponent;
+  let fixture: ComponentFixture<EditApplicationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditApplicationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditApplicationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts
new file mode 100644
index 00000000..380cd5ff
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts
@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MaasApi } from '@src/app/api/maas.api';
+import { NzMessageService } from 'ng-zorro-antd';
+import { Application } from '../application.type';
+
+@Component({
+  selector: 'app-edit-application',
+  templateUrl: './edit-application.component.html',
+  styleUrls: ['./edit-application.component.less']
+})
+export class EditApplicationComponent implements OnInit {
+  title = 'Edit Application';
+  @Input() showModal: boolean;
+  @Input() applicationId: string;
+  @Output() modalOpreation = new EventEmitter();
+  validateForm: FormGroup;
+  defalutApplication: Application = {
+  'applicationId': '',
+  'applicationName': '',
+  'applicationDescription': '',
+  'applicationType': '',
+  'operatorId': '',
+  'operatorName': '',
+  'maaSPlatformId': '',
+  'maaSPlatformName': '',
+  'knowledgeBaseName': '',
+  'knowledgeBaseId': '',
+  'largeModelName': '',
+  'largeModelId': '',
+  'prompt': '',
+  'temperature': 3,
+  'top_p': 3,
+  'openingRemarks': '',
+  }
+  application: Application = this.defalutApplication;
+  constructor(
+    private myhttp: MaasApi,
+    private message: NzMessageService,
+    private fb: FormBuilder,
+  ) { }
+
+  ngOnInit() {
+    this.validateForm = this.fb.group({
+      name: [this.application.applicationName, [Validators.required]],
+      description: [this.application.applicationDescription],
+    });
+    this.fetchApplication();
+  }
+
+  checkForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+  }
+
+  submitForm(): void {
+    this.checkForm();
+    this.create();
+  }
+
+  fetchApplication(): void {
+    this.myhttp.getApplicationById(this.applicationId)
+      .subscribe(
+        (response) => {
+          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
+          });
+        },
+        () => {
+          this.message.error('Failed to obtain knowledge base data');
+        }
+      )
+  }
+
+  handleCancel(): void {
+    this.showModal = false;
+    this.modalOpreation.emit({ 'cancel': true });
+  }
+
+  create() {
+    const metaData = {
+      ...this.application,
+      applicationName: this.validateForm.get('name').value,
+      applicationDescription: this.validateForm.get('description').value,
+    };
+    this.myhttp.updateApplication(metaData).subscribe(
+      (response) => {
+        if (response.result_header.result_code === 200) {
+          this.message.success('update knowledge base successfully');
+        } else {
+          this.message.error(response.result_header.result_message);
+        }
+        this.modalOpreation.emit({ 'cancel': false });
+      },
+      (error) => {
+        console.log('Upload failed', error);
+      }
+    );
+  }
+
+}