1. Added upload and delete files on the knowledge base details page.
2. The knowledge base editing page can only edit the description, not the name.
3. Add some editable items to the app editing page.
Issue-ID: USECASEUI-844
Change-Id: I24b9c84021092fc866c029994b21c2e0f8d2a6be
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>
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 {
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/",
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)
}
}
</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
createModalClose($event: modalClose): void {
this.createModalShow = false;
+ this.editModalShow = false;
if ($event.cancel) {
return;
}
});
}
- editModalClose($event: modalClose): void {
- this.editModalShow = false;
- if ($event.cancel) {
- return;
- }
- this.getAllApplicationData()
- }
-
}
\ No newline at end of file
</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>
</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"
</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">
<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!
<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">
-// .ant-select {
-// width: 200px;
-// }
-
-// .ant-input {
-// width: 300px;
-// }
-
.input-wrapper {
display: flex;
align-items: center;
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
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',
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();
@ViewChild('myTextarea') myTextarea: ElementRef;
@ViewChild('charCount') charCount: ElementRef;
@Input() existedNames: string[] = [];
+ application: Application;
constructor(
private myhttp: MaasApi,
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 } => {
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]],
});
}
- 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 {
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 = [];
}
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;
},
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) {
+++ /dev/null
-<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
+++ /dev/null
-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();
- });
-});
+++ /dev/null
-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);
- }
- );
- }
-
-}
<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>
name: [null, [Validators.required]],
description: [null],
selectedOperator: [null, [Validators.required]],
- selectedPlatform: [null, [Validators.required]],
+ selectedPlatform: [null, [Validators.required]]
});
}
fetchOperators(): void {
<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>
maaSPlatformName: '',
maaSPlatformId: '',
updateTime: '',
- filesName: [],
+ fileList: [],
operatorId: ''
}
knowledgeBase: KnowledgeBase = this.defalutKnowledgeBase;
-->
<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}}
<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
+.upload-file {
+ width: 100%;
+}
+
+.upload-loading {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.loading {
+ position: relative;
+ height: 37px;
+}
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 {
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
<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
}
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) {
@Injectable()
export class KnowledgeBaseService {
-
constructor() { }
- getFiles(v: KnowledgeBase) {
- return v.filesName ? v.filesName.join(',') : '';
- }
}
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>>
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';
CreateKnowledgeBaseComponent,
KnowledgeBaseDetailComponent,
EditKnowledgeBaseComponent,
- EditApplicationComponent,
CodeBlockDirective
]
})
<body>
<app-root></app-root>
+ <script>
+ window.baseUrl = window.location.origin;
+ </script>
</body>
</html>
\ No newline at end of file
Code Review / usecase-ui.git / commitdiff