diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/build')
9 files changed, 119 insertions, 213 deletions
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 f67d169f..cd4c13de 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 @@ -58,6 +58,5 @@ </tbody> </nz-table> </div> -<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 +<app-create-application-management *ngIf="createModalShow || editModalShow" [showModal]="createModalShow || editModalShow" (modalOpreation)="createModalClose($event)" [existedNames]="existedNames" [isEdit]="editModalShow" [applicationId]="applicationId"></app-create-application-management> +<app-application-detail *ngIf="applicationShow" [showModal]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
\ 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 0fb862ac..e00e91f3 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 @@ -51,6 +51,7 @@ export class ApplicationManagementComponent implements OnInit { createModalClose($event: modalClose): void { this.createModalShow = false; + this.editModalShow = false; if ($event.cancel) { return; } @@ -108,12 +109,4 @@ export class ApplicationManagementComponent implements OnInit { }); } - 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/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) { 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 deleted file mode 100644 index d2fb553b..00000000 --- a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html +++ /dev/null @@ -1,18 +0,0 @@ -<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 deleted file mode 100644 index e69de29b..00000000 --- a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less +++ /dev/null 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 deleted file mode 100644 index 40fc6bd5..00000000 --- a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 380cd5ff..00000000 --- a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts +++ /dev/null @@ -1,109 +0,0 @@ -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); - } - ); - } - -} |