From d67b4b25e73bba60cc72a5c1c68e178d9ad93b3c Mon Sep 17 00:00:00 2001 From: kaixiliu Date: Wed, 15 Jan 2025 14:34:27 +0800 Subject: 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 --- usecaseui-portal/src/app/api/maas.api.ts | 19 ++-- .../build/application-management.component.html | 5 +- .../maas/build/application-management.component.ts | 9 +- .../create-application-management.component.html | 18 +-- .../create-application-management.component.less | 24 ++-- .../create-application-management.component.ts | 124 +++++++++++++++------ .../edit-application.component.html | 18 --- .../edit-application.component.less | 0 .../edit-application.component.spec.ts | 25 ----- .../edit-application/edit-application.component.ts | 109 ------------------ .../create-knowledge-base.component.html | 3 +- .../create-knowledge-base.component.ts | 2 +- .../edit-knowledge-base.component.html | 3 +- .../edit-knowledge-base.component.ts | 2 +- .../knowledge-base-detail.component.html | 32 +++++- .../knowledge-base-detail.component.less | 14 +++ .../knowledge-base-detail.component.ts | 94 +++++++++++++++- .../knowledge-base-management.component.html | 4 +- .../knowledge-base-management.component.ts | 10 +- .../knowledge-base.service.ts | 4 - .../knowledge-base.type.ts | 9 +- usecaseui-portal/src/app/views/maas/maas.module.ts | 2 - usecaseui-portal/src/index.html | 3 + 23 files changed, 280 insertions(+), 253 deletions(-) delete mode 100644 usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html delete mode 100644 usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less delete mode 100644 usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts delete mode 100644 usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts (limited to 'usecaseui-portal') 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(this.url.KnowledgeBaseByMaas + id); } - createApplication(body: Application) { - return this.http.post(this.url.createApplicationUrl, body) + createApplication(url: string, body: Application) { + return this.http.post(url, body) } - updateApplication(body: Application) { - return this.http.post(this.url.updateApplication, body) + uploadFile(body: any) { + return this.http.post(this.url.uploadFile, body) + } + + removeFile(fileId: string): Observable { + return this.http.delete(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 @@ - - - \ No newline at end of file + + \ 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 @@ Application Type - - + @@ -51,8 +51,8 @@ Operator Name - - + MaaS Platform Name - - + - @@ -82,7 +82,7 @@ - + Please select model! @@ -94,7 +94,7 @@ - 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 { + 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 { + 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 @@ - -
- - Application Name - - - Please input application name - - - - Application Description - - - - -
- \ 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 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; - - 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 @@ 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 @@ Knowledge Base Name - - Please input knowledge base name + 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 @@ --> - + {{knowledgeBaseDetail.knowledgeBaseName}} {{knowledgeBaseDetail.operatorName}} @@ -25,11 +25,35 @@ {{knowledgeBaseDetail.updateTime}} - - {{knowledgeBaseService.getFiles(knowledgeBaseDetail)}} - {{knowledgeBaseDetail.knowledgeBaseDescription}} + +
+ + + +
+
+ + + {{file.fileName}} + +
+ +
+
+ + +
+ +
+ \ 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 @@ + (modalOpreation)="knowledgeBaseDetailClose()" [id]="knowledgeBaseId" + > \ 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, operatorId: string, maaSPlatformId: string, - knowledgeBaseId: string + knowledgeBaseId: string, + fileList: Array, +} +export type File = { + fileId: string, + fileName: string } - export type KnowledgeBaseResponse = Response export type KnowledgeBasesResponse = Response> 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 @@ + \ No newline at end of file -- cgit 1.2.3-korg