diff options
Diffstat (limited to 'usecaseui-portal/src')
23 files changed, 280 insertions, 253 deletions
diff --git a/usecaseui-portal/src/app/api/maas.api.ts b/usecaseui-portal/src/app/api/maas.api.ts index f7a558f7..72d65885 100644 --- a/usecaseui-portal/src/app/api/maas.api.ts +++ b/usecaseui-portal/src/app/api/maas.api.ts @@ -14,11 +14,10 @@ limitations under the License. */ import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; -import { of } from 'rxjs/observable/of'; +import { HttpClient } from '@angular/common/http'; import { KnowledgeBaseResponse, KnowledgeBasesResponse, OperatorsResponse, ResponseHeader } from '../views/maas/knowledge-base-management/knowledge-base.type' import { Application, ApplicationResponse, ApplicationsResponse } from '../views/maas/build/application.type'; +import { Observable } from 'rxjs'; @Injectable() export class MaasApi { @@ -30,6 +29,8 @@ export class MaasApi { getKnowledgeBaseById: this.baseUrl + "knowledgeBase/queryById/", updateKnowledgeBaseRecord: this.baseUrl + "knowledgeBase/edit", createKnowledgeBase: this.baseUrl + "knowledgeBase/create", + removeFile: this.baseUrl + "knowledgeBase/file/delete/", + uploadFile: this.baseUrl + "knowledgeBase/file/upload", maasUrl: this.baseUrl + "maas/getAll", getAllApplication: this.baseUrl + "application/query", deleteApplicationById: this.baseUrl + "application/delete/", @@ -80,12 +81,16 @@ export class MaasApi { return this.http.get<KnowledgeBasesResponse>(this.url.KnowledgeBaseByMaas + id); } - createApplication(body: Application) { - return this.http.post<ResponseHeader>(this.url.createApplicationUrl, body) + createApplication(url: string, body: Application) { + return this.http.post<ResponseHeader>(url, body) } - updateApplication(body: Application) { - return this.http.post<ResponseHeader>(this.url.updateApplication, body) + uploadFile(body: any) { + return this.http.post<ResponseHeader>(this.url.uploadFile, body) + } + + removeFile(fileId: string): Observable<ResponseHeader> { + return this.http.delete<ResponseHeader>(this.url.removeFile + fileId) } } 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); - } - ); - } - -} diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html index 78773c0a..1931220f 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html @@ -61,7 +61,8 @@ <nz-form-control [nzSpan]="12"> <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> <button nz-button> - <i class="anticon anticon-upload"></i><span>Select File</span> + <i class="anticon anticon-upload"></i> + <span>Select File</span> </button> </nz-upload> </nz-form-control> diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts index 2757137b..aefe2066 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts @@ -35,7 +35,7 @@ export class CreateKnowledgeBaseComponent implements OnInit { name: [null, [Validators.required]], description: [null], selectedOperator: [null, [Validators.required]], - selectedPlatform: [null, [Validators.required]], + selectedPlatform: [null, [Validators.required]] }); } fetchOperators(): void { diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html index feee9b8f..e181ee5c 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html @@ -4,8 +4,7 @@ <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Knowledge Base Name</nz-form-label> <nz-form-control [nzSpan]="12"> - <input nz-input formControlName="name" placeholder="Please input knowledge base name" /> - <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">Please input knowledge base name</nz-form-explain> + <input nz-input class="disabled-input" formControlName="name" placeholder="Please input knowledge base name"/> </nz-form-control> </nz-form-item> <nz-form-item> diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts index 3a71d800..00b65dfe 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts @@ -23,7 +23,7 @@ export class EditKnowledgeBaseComponent implements OnInit { maaSPlatformName: '', maaSPlatformId: '', updateTime: '', - filesName: [], + fileList: [], operatorId: '' } knowledgeBase: KnowledgeBase = this.defalutKnowledgeBase; diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html index b491df86..419bb6b3 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html @@ -15,7 +15,7 @@ --> <nz-modal [(nzVisible)]="showModal" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" class="intent-management-modal"> - <app-descriptions> + <app-descriptions *ngIf="knowledgeBaseDetail else LoadingTmp"> <app-descriptions-item nzTitle="Knowledge Base Name">{{knowledgeBaseDetail.knowledgeBaseName}} </app-descriptions-item> <app-descriptions-item nzTitle="Operator Name">{{knowledgeBaseDetail.operatorName}} @@ -25,11 +25,35 @@ <app-descriptions-item nzTitle="Update Time"> {{knowledgeBaseDetail.updateTime}} </app-descriptions-item> - <app-descriptions-item nzTitle="Files Name"> - {{knowledgeBaseService.getFiles(knowledgeBaseDetail)}} - </app-descriptions-item> <app-descriptions-item [nzSpan]="3" nzTitle="Knowledge Base Description">{{knowledgeBaseDetail.knowledgeBaseDescription}} </app-descriptions-item> + <app-descriptions-item [nzSpan]="3" nzTitle="Files Name"> + <div class="upload-file"> + <nz-upload [nzAction]="url" [(nzFileList)]="fileList" (nzChange)="handleChange($event)" nzName="files" [nzData]="nzdata"> + <button nz-button> + <i class="anticon anticon-upload"></i> + <span>Select File</span> + </button> + </nz-upload> + <div *ngFor="let file of displayFiles" + class="ant-upload-list-item ant-upload-list-item- ng-trigger ng-trigger-itemState ng-star-inserted" [ngClass]="{'ant-upload-list-item-error': file.status === 'error'}"> + <div class="ant-upload-list-item-info"> + <span class="ng-tns-c15-6 ng-star-inserted"> + <i class="anticon anticon-paper-clip ng-star-inserted"></i> + <span class="ant-upload-list-item-name ng-tns-c15-6 ng-star-inserted" + title="fastgpt_README.md">{{file.fileName}}</span> + </span> + </div> + <i class="anticon anticon-cross ng-tns-c15-6 ng-star-inserted" title="Remove file" + (click)="removedFile(file)"></i> + </div> + </div> + </app-descriptions-item> </app-descriptions> + <ng-template #LoadingTmp> + <div class="loading"> + <nz-spin class="upload-loading" [nzSize]="'large'"></nz-spin> + </div> + </ng-template> </nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less index e69de29b..9447ad74 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less @@ -0,0 +1,14 @@ +.upload-file { + width: 100%; +} + +.upload-loading { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.loading { + position: relative; + height: 37px; +} diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts index 49b9de4a..a9b0adaa 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts @@ -1,21 +1,56 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { KnowledgeBase } from '../knowledge-base.type'; import { KnowledgeBaseService } from '../knowledge-base.service'; +import { MaasApi } from '@src/app/api/maas.api'; +import { NzMessageService } from 'ng-zorro-antd'; +import { forkJoin } from 'rxjs/observable/forkJoin'; +import { of } from 'rxjs/observable/of'; +import { catchError } from 'rxjs/operators'; +import { MaasService } from '../../maas-service.service'; @Component({ selector: 'app-knowledge-base-detail', templateUrl: './knowledge-base-detail.component.html', styleUrls: ['./knowledge-base-detail.component.less'] }) export class KnowledgeBaseDetailComponent implements OnInit { - constructor( - public knowledgeBaseService: KnowledgeBaseService + public knowledgeBaseService: KnowledgeBaseService, + public myhttp: MaasApi, + private maasServie: MaasService, + private message: NzMessageService, ) { } @Input() showModal: boolean; - @Input() knowledgeBaseDetail: KnowledgeBase; + displayFiles = []; + init = true; + data: KnowledgeBase ; + set knowledgeBaseDetail(v: KnowledgeBase) { + if(v) { + this.displayFiles = v.fileList.slice().reverse(); + this.data = v; + } + } + get knowledgeBaseDetail() { + return this.data; + } + @Input() id = ''; + fileList: File[] = []; @Output() modalOpreation = new EventEmitter(); - + removedFiles:string[] = []; + url = `${(window as any).baseUrl}${this.myhttp.url.uploadFile}`; + ngOnInit() { + this.displayKnowledgeDetails(this.id); + } + + displayKnowledgeDetails(id: string) { + this.myhttp.getKnowledgeBaseById(id).subscribe( + (response) => { + this.knowledgeBaseDetail = response.result_body; + }, + () => { + this.message.error('Failed to obtain knowledge base data'); + } + ); } handleCancel(): void { @@ -27,4 +62,55 @@ export class KnowledgeBaseDetailComponent implements OnInit { this.showModal = false; this.modalOpreation.emit(); } + + handleChange({ file}): void { + const status = file.status; + if (status === 'done') { + this.fileList = []; + if (file.response.result_header.result_code === 200) { + this.message.success(`${file.name} upload successfully.`); + this.displayKnowledgeDetails(this.id); + } else { + this.displayFiles.unshift({fileId: this.maasServie.generateUniqueId, fileName: file.name, status: 'error'}); + } + } else if (status === 'error') { + this.fileList = []; + this.displayFiles.unshift({fileId: this.maasServie.generateUniqueId, fileName: file.name, status: 'error'}); + this.message.error(`${file.name} file upload failed.`); + } else if (status === 'removed') { + console.log('file event removed!'); + } + } + + nzdata = () => { + const metaData = JSON.stringify({ + knowledgeBaseId: this.knowledgeBaseDetail.knowledgeBaseId + }); + return {metaData} + } + + removedFile({fileId, status, fileName}) { + if (status === 'error') { + this.displayFiles = this.displayFiles.filter(file => file.fileId !== fileId); + this.message.success(`${fileName} delete successfully.`); + return; + } + this.myhttp.removeFile(fileId).pipe( + ).subscribe( + (response) => { + if (response.result_header.result_code === 200) { + this.displayFiles = this.displayFiles.filter(file => file.fileId !== fileId); + this.message.success(`${fileName} delete successfully.`); + } + }, + () => { + this.message.success(`${fileName} delete failed.`); + } + ) + } + + beforeUpload = (): boolean => { + return true; + } + }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html index eb7c232a..703bc04a 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html @@ -45,8 +45,8 @@ <app-create-knowledge-base *ngIf="createModalShow" [showModal]="createModalShow" (modalOpreation)="createModalClose($event)"></app-create-knowledge-base> <app-knowledge-base-detail *ngIf="knowledgeBaseShow" [showModal]="knowledgeBaseShow" - (modalOpreation)="knowledgeBaseDetailClose()" - [knowledgeBaseDetail]="knowledgeBaseDetail"></app-knowledge-base-detail> + (modalOpreation)="knowledgeBaseDetailClose()" [id]="knowledgeBaseId" + ></app-knowledge-base-detail> <app-edit-knowledge-base *ngIf="editKnowledgeBaseShow" [showModal]="editKnowledgeBaseShow" [knowledgeBaseId]="knowledgeBaseId" (modalOpreation)="editKnowledgeBaseModuleClose($event)"></app-edit-knowledge-base>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts index 843387b3..e6c96189 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts @@ -77,16 +77,8 @@ export class KnowledgeBaseManagementComponent implements OnInit { } displayKnowledgeDetails(data): void { + this.knowledgeBaseId = data.knowledgeBaseId; this.knowledgeBaseShow = true; - this.myhttp.getKnowledgeBaseById(data.knowledgeBaseId) - .subscribe( - (data) => { - this.knowledgeBaseDetail = data.result_body; - }, - () => { - this.message.error('Failed to obtain knowledge base data'); - } - ) } editKnowedgeBase(data: KnowledgeBase) { diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts index f7d91b1c..84f27181 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts @@ -3,9 +3,5 @@ import { KnowledgeBase } from './knowledge-base.type'; @Injectable() export class KnowledgeBaseService { - constructor() { } - getFiles(v: KnowledgeBase) { - return v.filesName ? v.filesName.join(',') : ''; - } } diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts index b9ec432d..ac273a96 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts @@ -4,12 +4,15 @@ export type KnowledgeBase = { operatorName: string, maaSPlatformName: string, updateTime: string, - filesName: Array<string>, operatorId: string, maaSPlatformId: string, - knowledgeBaseId: string + knowledgeBaseId: string, + fileList: Array<File>, +} +export type File = { + fileId: string, + fileName: string } - export type KnowledgeBaseResponse = Response<KnowledgeBase> export type KnowledgeBasesResponse = Response<Array<KnowledgeBase>> diff --git a/usecaseui-portal/src/app/views/maas/maas.module.ts b/usecaseui-portal/src/app/views/maas/maas.module.ts index d7aae679..726ecf11 100644 --- a/usecaseui-portal/src/app/views/maas/maas.module.ts +++ b/usecaseui-portal/src/app/views/maas/maas.module.ts @@ -12,7 +12,6 @@ import { KnowledgeBaseDetailComponent } from './knowledge-base-management/knowle import { SharedModule } from '@src/app/shared/module/sharded.module'; import { MaasApi } from '@src/app/api/maas.api'; import { EditKnowledgeBaseComponent } from './knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component'; -import { EditApplicationComponent } from './build/edit-application/edit-application.component'; import { MaasService } from './maas-service.service'; import { KnowledgeBaseService } from './knowledge-base-management/knowledge-base.service'; import { MarkdownModule } from 'ngx-markdown'; @@ -41,7 +40,6 @@ import { CodeBlockDirective } from './use/code-block.directive'; CreateKnowledgeBaseComponent, KnowledgeBaseDetailComponent, EditKnowledgeBaseComponent, - EditApplicationComponent, CodeBlockDirective ] }) diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html index efc279d1..fe4cda53 100644 --- a/usecaseui-portal/src/index.html +++ b/usecaseui-portal/src/index.html @@ -27,6 +27,9 @@ <body> <app-root></app-root> + <script> + window.baseUrl = window.location.origin; + </script> </body> </html>
\ No newline at end of file |