diff options
Diffstat (limited to 'usecaseui-portal/src')
38 files changed, 969 insertions, 704 deletions
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index ad696e9f..5b4ca9e2 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -37,9 +37,6 @@ import { OrderServiceComponent } from './views/services/sotn-management/order-se import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; import { IntentManagementComponent } from './views/intent-management/intent-management.component'; import { RobotComponent } from './views/robot/robot.component'; -import { ApplicationManagementComponent } from './views/maas/build/application-management.component'; -import { UseApplicationComponent } from './views/maas/use/use-application.component'; -import { KnowledgeBaseManagementComponent } from './views/maas/knowledge-base-management/knowledge-base-management.component'; @@ -74,9 +71,7 @@ const routes: Routes = [ { path: 'network/mdons-network', component: MdonsNetworkComponent }, { path: 'intent-management', component:IntentManagementComponent}, { path: 'robot', component: RobotComponent }, - { path: 'maas/build', component: ApplicationManagementComponent }, - { path: 'maas/use', component: UseApplicationComponent }, - { path: 'maas/knowledge-base-management', component: KnowledgeBaseManagementComponent }, + { path: 'maas', loadChildren: './views/maas/maas.module#MaasModule' }, { path: '**', redirectTo: 'home', pathMatch: 'full' } ]; diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 6fd0e5ae..350394cb 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -117,15 +117,6 @@ import { InputIntentConditionComponent } from './views/intent-management/input-i import { IntentReportDetailComponent } from './views/intent-management/intent-report-detail/intent-report-detail.component'; import { AngularDateTimePickerModule } from 'angular2-datetimepicker'; import { RobotComponent } from './views/robot/robot.component'; -import { ApplicationManagementComponent } from './views/maas/build/application-management.component'; -import { InputApplicationManagementComponent } from './views/maas/build/input-application-management/input-application-management.component'; -import { UseApplicationComponent } from './views/maas/use/use-application.component'; -import { KnowledgeBaseManagementComponent } from './views/maas/knowledge-base-management/knowledge-base-management.component'; -import { InputKnowledgeBaseComponent } from './views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component'; -import { KnowledgeBaseDetailComponent } from './views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component'; -import { ApplicationDetailComponent } from './views/maas/build/application-detail/application-detail.component'; -import { DescriptionInfoComponent } from "./shared/components/description-info/description-info.component"; -// import { EditKnowledgeBaseComponent } from "./views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component"; import { KnowledgeBaseService } from "./views/maas/knowledge-base-management/knowledge-base.service"; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json"); @@ -155,7 +146,6 @@ registerLocaleData(en); TextService, SlicingTaskServices, IntentManagementService, - // fakeBackendProvider KnowledgeBaseService ], declarations: [ @@ -232,16 +222,7 @@ registerLocaleData(en); InputIntentStateComponent, InputIntentConditionComponent, IntentReportDetailComponent, - KnowledgeBaseManagementComponent, - InputKnowledgeBaseComponent, - KnowledgeBaseDetailComponent, - DescriptionInfoComponent, RobotComponent, - ApplicationManagementComponent, - InputApplicationManagementComponent, - UseApplicationComponent, - ApplicationDetailComponent, - // EditKnowledgeBaseComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/core/services/intentManagement.service.ts b/usecaseui-portal/src/app/core/services/intentManagement.service.ts index 7fd85b04..dd07f351 100644 --- a/usecaseui-portal/src/app/core/services/intentManagement.service.ts +++ b/usecaseui-portal/src/app/core/services/intentManagement.service.ts @@ -15,10 +15,6 @@ */ 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 { knowledgeBase } from '../../views/maas/knowledge-base-management/knowledge-base.type' -import { application } from '../../views/maas/build/application.type'; @Injectable() export class IntentManagementService { @@ -29,15 +25,7 @@ export class IntentManagementService { deleteIntentManagement: "/api/usecaseui-intent-analysis/v1/intents/", updateIntentManagementData: "/api/usecaseui-intent-analysis/v1/intents/", getIntentReport: "/api/usecaseui-intent-analysis/v1/intentReport/", - getKnowledgeBaseRecord: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/query", - removeKnowledgeBase: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/delete/", - getKnowledgeBaseById: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/queryById/", - updateKnowledgeBaseRecord: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/update", - maasUrl: "/api/usecaseui-llm-adaptation/v1/maas/getAll", - getAllApplication: "/api/usecaseui-llm-adaptation/v1/application/query", - deleteApplicationById: "/api/usecaseui-llm-adaptation/v1/application/delete/", - getApplicationById: "/api/usecaseui-llm-adaptation/v1/application/queryById/" - }; +}; // intentManagement getIntentManagementData() { @@ -55,30 +43,4 @@ export class IntentManagementService { getIntentReportData(intentId) { return this.http.get<any>(this.url.getIntentReport + intentId); } - getKnowledgeBaseRecord() { - return this.http.get<any>(this.url.getKnowledgeBaseRecord); - } - - updateKnowledgeBase(body: any) { - return this.http.post<any>(this.url.updateKnowledgeBaseRecord, body); - } - - deleteKnowledgeBaseData(index) { - return this.http.delete<any>(this.url.removeKnowledgeBase + index); - } - getMaaSPlatform() { - return this.http.get<any>(this.url.maasUrl); - } - getKnowledgeBaseById(index) { - return this.http.get<{result_body: Array<knowledgeBase>}>(this.url.getKnowledgeBaseById + index); - } - getAllApplication() { - return this.http.get<any>(this.url.getAllApplication); - } - deleteApplicationById(index) { - return this.http.delete<any>(this.url.deleteApplicationById + index); - } - getApplicationById(index) { - return this.http.get<any>(this.url.getApplicationById + index); - } } diff --git a/usecaseui-portal/src/app/core/services/maas.service.ts b/usecaseui-portal/src/app/core/services/maas.service.ts new file mode 100644 index 00000000..09a476fb --- /dev/null +++ b/usecaseui-portal/src/app/core/services/maas.service.ts @@ -0,0 +1,80 @@ +/* + Copyright (C) 2022 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + 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 { KnowledgeBase, KnowledgeBaseResponse } from '../../views/maas/knowledge-base-management/knowledge-base.type' +import { Application } from '../../views/maas/build/application.type'; +@Injectable() +export class MaasService { + + constructor(private http: HttpClient) { } + baseUrl = "/api/usecaseui-llm-adaptation/v1/"; + url = { + getKnowledgeBaseRecord: this.baseUrl + "knowledgeBase/query", + removeKnowledgeBase: this.baseUrl + "knowledgeBase/delete/", + getKnowledgeBaseById: this.baseUrl + "knowledgeBase/queryById/", + updateKnowledgeBaseRecord: this.baseUrl + "knowledgeBase/update", + maasUrl: this.baseUrl + "maas/getAll", + getAllApplication: this.baseUrl + "application/query", + deleteApplicationById: this.baseUrl + "application/delete/", + getApplicationById: this.baseUrl + "application/queryById/", + operatorsUrl: this.baseUrl + 'operator/maas/getAll', + KnowledgeBaseByMaas: this.baseUrl + 'knowledgeBase/queryByMaaSId/', + createApplicationUrl: this.baseUrl + "application/create" + }; + + getKnowledgeBaseRecord() { + return this.http.get<any>(this.url.getKnowledgeBaseRecord); + } + + updateKnowledgeBase(body: any) { + return this.http.post<any>(this.url.updateKnowledgeBaseRecord, body); + } + + deleteKnowledgeBaseData(index) { + return this.http.delete<any>(this.url.removeKnowledgeBase + index); + } + getMaaSPlatform() { + return this.http.get<any>(this.url.maasUrl); + } + getKnowledgeBaseById(index) { + return this.http.get<KnowledgeBaseResponse>(this.url.getKnowledgeBaseById + index); + } + getAllApplication() { + return this.http.get<any>(this.url.getAllApplication); + } + deleteApplicationById(index) { + return this.http.delete<any>(this.url.deleteApplicationById + index); + } + getApplicationById(index) { + return this.http.get<any>(this.url.getApplicationById + index); + } + + getOperators() { + return this.http.get<any>(this.url.operatorsUrl); + } + + fetchKnowledgeBaseByMaasId(id: string) { + return this.http.get<any>(this.url.KnowledgeBaseByMaas + id); + } + + createApplication(body: Application) { + return this.http.post<any>(this.url.createApplicationUrl, body) + } + +} diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html deleted file mode 100644 index 9575dca1..00000000 --- a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html +++ /dev/null @@ -1,20 +0,0 @@ -<div *ngFor="let item of data" class="input-wrapper"> - <div class="desc-label"> - <nz-popover> - <div class="text-single-ellipsis text-label" nz-popover> - {{ item.label }} - </div> - <ng-template #nzTemplate> - {{ item.label }} - </ng-template> - </nz-popover> - </div> - <div class="desc-item"> - <nz-popover> - <div class="text-single-ellipsis" nz-popover>{{ item.value }}</div> - <ng-template #nzTemplate> - {{ item.value }} - </ng-template> - </nz-popover> - </div> -</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less deleted file mode 100644 index 51e22485..00000000 --- a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less +++ /dev/null @@ -1,24 +0,0 @@ -.input-wrapper { - display: flex; - margin: 20px 0; -} - -.desc-label { - display: inline-block; - width: 30%; - margin-left: 8px; -} -.text-single-ellipsis { - text-overflow: ellipsis; - overflow: hidden; - word-break: break-all; - white-space: nowrap; -} -.text-label::after { - content: ':' -} - -.desc-item { - display: inline-block; - width: 70%; -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts deleted file mode 100644 index 26148dce..00000000 --- a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, EventEmitter, Input, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-description-info', - templateUrl: './description-info.component.html', - styleUrls: ['./description-info.component.less'] -}) -export class DescriptionInfoComponent implements OnInit { - - constructor( - ) { } - @Input() data: Array<any>; - - ngOnInit() { - console.log('data is :', this.data) - } - -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description/description.component.html b/usecaseui-portal/src/app/shared/components/description/description.component.html new file mode 100644 index 00000000..fb7a188a --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/description/description.component.html @@ -0,0 +1,25 @@ +<div *ngIf="nzTitle" class="descriptions-header"> + <div class="descriptions-title"> + {{ nzTitle }} + </div> +</div> +<div class="descriptions-view"> + <table class="descriptions-table"> + <tbody> + <tr *ngFor="let row of itemMatrix; let i = index" class="descriptions-row"> + <ng-container *ngFor="let item of row; trackBy item; let isLast = last"> + <td class="descriptions-item" [colSpan]="item.span"> + <div class="descriptions-item-container"> + <span class="descriptions-item-label" [class.descriptions-item-no-colon]="!nzColon"> + {{ item.title }} + </span> + <span class="descriptions-item-content"> + <ng-template [ngTemplateOutlet]="item.content"></ng-template> + </span> + </div> + </td> + </ng-container> + </tr> + </tbody> + </table> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description/description.component.less b/usecaseui-portal/src/app/shared/components/description/description.component.less new file mode 100644 index 00000000..168f4a6a --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/description/description.component.less @@ -0,0 +1,68 @@ +.descriptions-header { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.descriptions-title { + flex: auto; + overflow: hidden; + color: #000000d9; + font-weight: 700; + font-size: 16px; + line-height: 1.5715; + white-space: nowrap; + text-overflow: ellipsis; +} + +.descriptions-view { + width: 100%; + border-radius: 2px; +} + +.descriptions-table { + width: 100%; + table-layout: fixed; +} + +.descriptions-row>td { + padding-bottom: 16px; +} +.descriptions-item { + padding-bottom: 0; + vertical-align: top; +} + +.descriptions-item-container { + display: flex; +} + +.descriptions-item-container .descriptions-item-label, .descriptions-item-container .descriptions-item-content { + display: inline-flex; + align-items: baseline; +} + +.descriptions-item-label { + color: #000000d9; + font-weight: 400; + font-size: 14px; + line-height: 1.5715; + text-align: start; +} + +.descriptions-item-content { + display: table-cell; + flex: 1; + color: #000000d9; + font-size: 14px; + line-height: 1.5715; + word-break: break-word; + overflow-wrap: break-word; +} + +.descriptions-item-label::after { + content: ":"; + position: relative; + top: -.5px; + margin: 0 8px 0 2px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description/description.component.ts b/usecaseui-portal/src/app/shared/components/description/description.component.ts new file mode 100644 index 00000000..6f3469d9 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/description/description.component.ts @@ -0,0 +1,79 @@ +import { Component, ContentChildren, EventEmitter, Input, OnDestroy, OnInit, QueryList } from '@angular/core'; +import { Subject } from 'rxjs'; +import { DescriptionItemComponent } from './descriptions-item.component'; +import { DescriptionItemRenderProps } from './description.type'; +@Component({ + selector: 'app-descriptions', + templateUrl: './description.component.html', + styleUrls: ['./description.component.less'], +}) +export class DescriptionComponent implements OnInit, OnDestroy { + @ContentChildren(DescriptionItemComponent) items: QueryList<DescriptionItemComponent>; + + @Input() nzColumn: number = 3; + @Input() nzTitle: string = ''; + @Input() nzColon: boolean = true; + + itemMatrix: DescriptionItemRenderProps[][] = []; + private destroy$ = new Subject<void>(); + constructor() { } + + ngOnInit() { + } + + ngAfterContentInit(): void { + this.prepareMatrix(); + } + + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + + /** + * Prepare the render matrix according to description items' spans. + */ + private prepareMatrix(): void { + if (!this.items) { + return; + } + + let currentRow: DescriptionItemRenderProps[] = []; + let width = 0; + + const column = this.nzColumn; + const items = this.items.toArray(); + const length = items.length; + const matrix: DescriptionItemRenderProps[][] = []; + const flushRow = (): void => { + matrix.push(currentRow); + currentRow = []; + width = 0; + }; + + for (let i = 0; i < length; i++) { + const item = items[i]; + const { nzTitle: title, content, nzSpan: span } = item; + + width += span; + + if (width >= column) { + if (width > column) { + console.warn(`"nzColumn" is ${column} but we have row length ${width}`); + flushRow(); + } + currentRow.push({ title, content, span }); + flushRow(); + } else if (i === length - 1) { + currentRow.push({ title, content, span: column - (width - span) }); + flushRow(); + } else { + currentRow.push({ title, content, span }); + } + } + + this.itemMatrix = matrix; + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description/description.type.ts b/usecaseui-portal/src/app/shared/components/description/description.type.ts new file mode 100644 index 00000000..df707f08 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/description/description.type.ts @@ -0,0 +1,7 @@ +import { TemplateRef } from "@angular/core"; + +export interface DescriptionItemRenderProps { + title: string | TemplateRef<void>; + span: number; + content: TemplateRef<void>; + }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/description/descriptions-item.component.ts b/usecaseui-portal/src/app/shared/components/description/descriptions-item.component.ts new file mode 100644 index 00000000..9f168f02 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/description/descriptions-item.component.ts @@ -0,0 +1,28 @@ + +import { Component, Input, OnInit, TemplateRef, ViewChild, OnDestroy } from '@angular/core'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'app-descriptions-item', + template: ` + <ng-template> + <ng-content></ng-content> + </ng-template> + `, +}) +export class DescriptionItemComponent implements OnDestroy { + @ViewChild(TemplateRef) content: TemplateRef<void>; + @Input() nzSpan: number = 1; + @Input() nzTitle: string = ''; + + readonly inputChange$ = new Subject<void>(); + + ngOnChanges(): void { + this.inputChange$.next(); + } + + ngOnDestroy(): void { + this.inputChange$.complete(); + } + +} diff --git a/usecaseui-portal/src/app/shared/module/sharded.module.ts b/usecaseui-portal/src/app/shared/module/sharded.module.ts new file mode 100644 index 00000000..02fe3849 --- /dev/null +++ b/usecaseui-portal/src/app/shared/module/sharded.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + imports: [ + CommonModule, + TranslateModule, + NgZorroAntdModule, + FormsModule, + ReactiveFormsModule, + HttpClientModule, + ], + declarations: [ + ], + exports: [ + CommonModule, + TranslateModule, + NgZorroAntdModule, + FormsModule, + ReactiveFormsModule, + HttpClientModule, + ] +}) +export class SharedModule { } diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html index 71ef1b40..0827f477 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html +++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html @@ -13,7 +13,38 @@ See the License for the specific language governing permissions and limitations under the License. --> -<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" +<nz-modal [(nzVisible)]="showModal" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" > - <app-description-info [data]="data"></app-description-info> + <app-descriptions> + <app-descriptions-item nzTitle="Application Name">{{applicationDetail.applicationName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Application Type">{{applicationDetail.applicationType}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Operator">{{applicationDetail.operatorName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="MaaS"> + {{applicationDetail.maaSPlatformName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Large Model"> + {{applicationDetail.largeModelName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Knowledge Base"> + {{applicationDetail.knowledgeBaseName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Prompt"> + {{applicationDetail.prompt}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Temperature"> + {{applicationDetail.temperature}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Top_p"> + {{applicationDetail.top_p}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Opening Remarks"> + {{applicationDetail.openingRemarks}} + </app-descriptions-item> + <app-descriptions-item [nzSpan]="3" + nzTitle="Application Description">{{applicationDetail.applicationDescription}} + </app-descriptions-item> +</app-descriptions> </nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts index f9e16435..653ce6a9 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts +++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts @@ -1,4 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Application } from '../application.type'; @Component({ selector: 'app-application-detail', @@ -6,68 +7,20 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; styleUrls: ['./application-detail.component.less'] }) export class ApplicationDetailComponent implements OnInit { - - constructor() { } - - @Input() showModel: boolean; - _applicationDetail; - data: Array<{ label: string, value: string }> = []; - @Input() - set applicationDetail(v: any) { - if (!v) { - return; - } - this.data = [ - { - label: 'Application Name', value: v.applicationName - }, - { - label: 'Application Description', value: v.applicationDescription - }, - { - label: 'Application Type', value: v.applicationType - }, - { - label: 'Operator', value: v.operatorName - }, - { - label: 'MaaS', value: v.maaSPlatformName - }, - { - label: 'Large Model', value: v.largeModelName - }, - { - label: 'Knowledge Base', value: v.knowledgeBaseName - }, - { - label: 'Prompt', value: v.prompt - }, - { - label: 'Temperature', value: v.temperature - }, - { - label: 'Top_p', value: v.top_p - }, - { - label: 'Opening Remarks', value: v.openingRemarks - } - ] - this._applicationDetail = v; - }; - get applicationDetail() { - return this._applicationDetail; - } + @Input() showModal: boolean; + @Input() applicationDetail: Application; @Output() modalOpreation = new EventEmitter(); + constructor() { } ngOnInit() {} handleCancel(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit(); } handleOk(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit(); } 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 64a0823d..6496270a 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 @@ -17,11 +17,11 @@ <div class="content"> <p class="title"> Application List - <button nz-button nzType="primary" class="add" (click)="inputIntentModuleShow()"> + <button nz-button nzType="primary" class="add" (click)="create()"> {{"i18nTextDefine_Create" | translate}} </button> </p> <nz-table - #basicTable [nzData]="listOfData" + #basicTable [nzData]="data" [nzFrontPagination]="false" [nzShowPagination]="false" > @@ -50,12 +50,12 @@ <td>{{data.largeModelName}}</td> <td> <i class="anticon anticon-menu-fold" (click)="displayApplicationDetails(data)"></i> - <i class="anticon anticon-delete" (click)="deleteIntentList(data)"></i> + <i class="anticon anticon-delete" (click)="delete(data)"></i> <i class="anticon anticon-link" (click)="navigateToDetail(data)"></i> </td> </tr> </tbody> </nz-table> </div> -<app-input-application-management *ngIf="intentModuleShow" [showModel]="intentModuleShow" (modalOpreation)="inputIntentModuleClose($event)"></app-input-application-management> -<app-application-detail *ngIf="applicationShow" [showModel]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
\ No newline at end of file +<app-create-application-management *ngIf="createModalShow" [showModal]="createModalShow" (modalOpreation)="createModalClose($event)"></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.less b/usecaseui-portal/src/app/views/maas/build/application-management.component.less index 8e882a27..beefd0f9 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-management.component.less +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.less @@ -19,6 +19,9 @@ margin-right: 10px; cursor: pointer; } + .anticon { + user-select: none; + } } .intent-management-modal{ 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 bc684cc9..61471de4 100644 --- a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts +++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { IntentManagementService } from '../../../core/services/intentManagement.service' -import {NzMessageService} from "ng-zorro-antd"; +import { NzMessageService } from "ng-zorro-antd"; import { Router } from '@angular/router'; +import { MaasService } from '@src/app/core/services/maas.service'; +import { Application } from './application.type'; @Component({ selector: 'app-application-management', @@ -9,82 +10,76 @@ import { Router } from '@angular/router'; styleUrls: ['./application-management.component.less'] }) export class ApplicationManagementComponent implements OnInit { + data: Application[] = []; + createModalShow = false; + applicationShow = false; + applicationDetail: Object = {}; constructor( - private myhttp: IntentManagementService, + private myhttp: MaasService, private message: NzMessageService, private router: Router - ) { } + ) { } ngOnInit() { this.getAllApplicationData() } - listOfData: any[] = []; - - intentModuleShow: boolean = false; - applicationShow: boolean = false; - editIntentTableList: Object={}; - currentIndex: number=-1; - getAllApplicationData():void{ - this.myhttp.getAllApplication() - .subscribe( - (data) => { - this.listOfData=data.result_body - }, - (err) => { - this.message.error('Failed to obtain application data'); - } - ) + getAllApplicationData(): void { + this.myhttp.getAllApplication() + .subscribe( + (data) => { + this.data = data.result_body + }, + () => { + this.message.error('Failed to obtain application data'); + } + ) } - inputIntentModuleShow(): void { - this.intentModuleShow = true; + create(): void { + this.createModalShow = true; } - inputIntentModuleClose($event: any): void { - this.intentModuleShow = false; + createModalClose($event: any): void { + this.createModalShow = false; if ($event.cancel) { - return; + return; } this.getAllApplicationData() } - editIntentList(): void { - this.intentModuleShow = true - } - deleteIntentList(data): void{ + + delete(data): void { this.myhttp.deleteApplicationById(data.applicationId).subscribe((data) => { this.getAllApplicationData() - if(data.result_header.result_code===200){ + if (data.result_header.result_code === 200) { this.message.success('Deleted successfully'); - }else{ + } else { this.message.error(data.result_header.result_message); } - }, (err) => { + }, () => { this.message.error('Deletion failed'); - }); + }); } - navigateToDetail(data):void { + navigateToDetail(data): void { this.router.navigate(['maas/use'], { queryParams: { id: data.applicationId, name: data.applicationName } }); } - applicationDetailClose(): void { + applicationDetailClose(): void { this.applicationShow = false; } - applicationDetail: Object={}; - displayApplicationDetails(data): void { - this.applicationShow = true; - this.myhttp.getApplicationById(data.applicationId) - .subscribe( - (data) => { - this.applicationDetail=data.result_body; - console.log(data.result_body); - }, - (err) => { - this.message.error('Failed to obtain knowledge base data'); - } - ) + displayApplicationDetails(data): void { + this.applicationShow = true; + this.myhttp.getApplicationById(data.applicationId) + .subscribe( + (data) => { + this.applicationDetail = data.result_body; + }, + () => { + this.message.error('Failed to obtain knowledge base data'); + } + ) } }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application.type.ts b/usecaseui-portal/src/app/views/maas/build/application.type.ts index 0b0693b4..e3224e7c 100644 --- a/usecaseui-portal/src/app/views/maas/build/application.type.ts +++ b/usecaseui-portal/src/app/views/maas/build/application.type.ts @@ -1,12 +1,12 @@ -export type application = { - "applicationId": string, +export type Application = { + "applicationId"?: string, "applicationName": string, "applicationDescription": string, "applicationType": string, "operatorId": string, "operatorName": string, - "maasPlatformId": string, - "maasPlatformName": string, + "maaSPlatformId": string, + "maaSPlatformName": string, "knowledgeBaseName": string, "knowledgeBaseId": string, "largeModelName": string, 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 new file mode 100644 index 00000000..c7c9b216 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html @@ -0,0 +1,149 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> + <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Application Name</nz-form-label> + <nz-form-control [nzSpan]="12"> + <input type="text" nz-input formControlName="name"> + <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors"> + Please input application name! + </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" nz-input formControlName="description"></textarea> + </nz-form-control> + </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" + nzPlaceHolder="Select Application Type" formControlName="applicationType"> + <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('applicationType').dirty && validateForm.get('applicationType').errors"> + Please select application type! + </nz-form-explain> + </nz-form-control> + </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" + nzPlaceHolder="Select Operator" formControlName="selectedOperator" + (ngModelChange)="handleOperatorChange($event)"> + <nz-option *ngFor="let operator of operators" [nzValue]="operator" + [nzLabel]="operator.operatorName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectedOperator').dirty && validateForm.get('selectedOperator').errors"> + Please select operator! + </nz-form-explain> + </nz-form-control> + </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" + nzPlaceHolder="Select Platform" formControlName="selectedPlatform" + (ngModelChange)="handleMaasChange($event)"> + <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform" + [nzLabel]="platform.maaSPlatformName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectedPlatform').dirty && validateForm.get('selectedPlatform').errors"> + Please select maas platform! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectedModel" nzRequired>Model</nz-form-label> + <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-select> + <nz-form-explain *ngIf="validateForm.get('selectedModel').dirty && validateForm.get('selectedModel').errors"> + Please select model! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="selectKnowledgeBase" nzRequired>KnowLedge Base</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-select name="selectKnowledgeBase" + nzPlaceHolder="Select KnowLedge Base" formControlName="selectKnowledgeBase"> + <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase" + [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option> + </nz-select> + <nz-form-explain *ngIf="validateForm.get('selectKnowledgeBase').dirty && validateForm.get('selectKnowledgeBase').errors"> + Please select knowLedge base! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="prompt">Prompt</nz-form-label> + <nz-form-control [nzSpan]="12"> + <textarea rows="2" nz-input formControlName="prompt"></textarea> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="openingRemarks">Opening Remarks</nz-form-label> + <nz-form-control [nzSpan]="12"> + <textarea rows="2" nz-input formControlName="openingRemarks"></textarea> + </nz-form-control> + </nz-form-item> + + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="temperature" nzRequired>temperature</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" (nzOnAfterChange)="handleTemperatureSliderChange($event)" formControlName="temperatureSlider" [nzDefaultValue]="temperature"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" + formControlName="temperature" + (ngModelChange)="handleTemperatureInputChange($event)" + ></nz-input-number> + </div> + </nz-row> + <nz-form-explain *ngIf="validateForm.get('temperature').dirty && validateForm.get('temperature').errors"> + Please input temperature! + </nz-form-explain> + </nz-form-control> + </nz-form-item> + <nz-form-item> + <nz-form-label [nzSpan]="8" nzFor="top_p" nzRequired>top_p</nz-form-label> + <nz-form-control [nzSpan]="12"> + <nz-row class="slider-input-container"> + <nz-col nzSpan="10"> + <nz-slider [nzMin]="0" [nzMax]="10" (nzOnAfterChange)="toppSliderChange($event)" [nzStep]="1" formControlName="top_pSlider" [nzDefaultValue]="top_p"></nz-slider> + </nz-col> + <div nz-col nzSpan="4"> + <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" formControlName="top_p" (ngModelChange)="toppInputChange($event)"></nz-input-number> + </div> + </nz-row> + <nz-form-explain *ngIf="validateForm.get('top_p').dirty && validateForm.get('top_p').errors"> + Please input top_p! + </nz-form-explain> + </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/input-application-management/input-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less index e8e3fca4..e8e3fca4 100644 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less 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 new file mode 100644 index 00000000..1bbef527 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts @@ -0,0 +1,170 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from "ng-zorro-antd"; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MaasService } from '@src/app/core/services/maas.service'; + +@Component({ + selector: 'app-create-application-management', + templateUrl: './create-application-management.component.html', + styleUrls: ['./create-application-management.component.less'] +}) +export class CreateApplicationManagementComponent implements OnInit { + title = 'Add Application'; + validateForm: FormGroup; + @Input() showModal: boolean; + @Output() modalOpreation = new EventEmitter(); + operators: any[] = []; + filteredPlatforms: any[] = []; + filteredModels: any[] = []; + knowledgeBases: any[] = []; + temperature = 3; + top_p = 3; + + constructor( + private myhttp: MaasService, + private message: NzMessageService, + private fb: FormBuilder + ) { } + + ngOnInit() { + this.fetchOperators(); + this.initFormData(); + } + + initFormData() { + this.validateForm = this.fb.group({ + name: [null, [Validators.required]], + description: [null], + applicationType: [null, [Validators.required]], + selectedOperator: [null, [Validators.required]], + selectedPlatform: [null, [Validators.required]], + selectedModel: [null, [Validators.required]], + selectKnowledgeBase: [null, [Validators.required]], + prompt: [null], + openingRemarks: [null], + temperature: [3, [Validators.required]], + temperatureSlider: [3], + top_p: [3, [Validators.required]], + top_pSlider: [3] + }); + } + + fetchOperators(): void { + this.myhttp.getOperators().subscribe( + (response) => { + this.operators = response.result_body; + }, + () => { + this.message.error('Failed to fetch operators'); + } + ); + } + + handleOperatorChange(value: any): void { + if (value) { + this.filteredPlatforms = value.maaSPlatformList; + } else { + this.filteredPlatforms = []; + } + this.validateForm.get('selectedPlatform').setValue(null); + this.validateForm.get('selectedModel').setValue(null); + this.validateForm.get('selectKnowledgeBase').setValue(null); + } + + handleMaasChange(value: any): void { + if (value) { + this.filteredModels = value.modelList; + this.fetchKnowledgeBase(value); + } else { + this.filteredModels = []; + } + this.validateForm.get('selectedModel').setValue(null); + this.validateForm.get('selectKnowledgeBase').setValue(null); + } + + fetchKnowledgeBase(value): void { + this.myhttp.fetchKnowledgeBaseByMaasId(value.maaSPlatformId).subscribe( + (response) => { + this.knowledgeBases = response.result_body; + }, + () => { + this.message.error('Failed to fetch knowledge base'); + } + ); + } + + handleCancel(): void { + this.showModal = false; + this.modalOpreation.emit({ "cancel": true }); + } + + handleOk() { + this.submitForm(); + if (this.validateForm.invalid) { + this.showModal = true; + return; + } + this.myhttp.createApplication(this.constructBody()).subscribe( + (response) => { + this.showModal = false; + this.modalOpreation.emit({ "cancel": false }); + if (response.result_header.result_code === 200) { + this.message.success('Created successfully'); + } else { + this.message.error(response.result_header.result_message); + } + }, + () => { + this.showModal = false; + this.message.error('Created failed'); + } + ) + } + constructBody() { + 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, + prompt: this.validateForm.value.prompt, + temperature: this.validateForm.value.temperature, + top_p: this.validateForm.value.top_p, + openingRemarks: this.validateForm.value.openingRemarks + } + return requestBody; +} + + submitForm(): void { + for (let i in this.validateForm.controls) { + this.validateForm.controls[i].markAsDirty(); + this.validateForm.controls[i].updateValueAndValidity(); + } + } + + handleTemperatureSliderChange(event: number): void { + this.validateForm.controls.temperature.setValue(event); + } + + handleTemperatureInputChange(event: number): void { + this.validateForm.controls.temperatureSlider.setValue(event); + } + + handletoppChange(event: number): void { + this.validateForm.controls.top_p.setValue(event); + } + + toppSliderChange(event: number): void { + this.validateForm.controls.top_p.setValue(event); + } + + toppInputChange(event: number): void { + this.validateForm.controls.top_pSlider.setValue(event); + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html deleted file mode 100644 index 286dc1dc..00000000 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html +++ /dev/null @@ -1,124 +0,0 @@ -<!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. ---> - -<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> - <div> - <div class="form-item"> - <label class="item-label"> Application Name:</label> - <div class="item"> - <input nz-input [(ngModel)]="applicationName"> - </div> - </div> - <div class="form-item"> - <label class="item-label"> Application Description:</label> - <div class="item"> - <textarea nz-input [(ngModel)]="applicationDescription"></textarea> - </div> - </div> - <div class="form-item"> - <label class="item-label"> Application Type:</label> - <div class="item"> - <nz-select class="nz-select-container" [(ngModel)]="applicationType"> - <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option> - </nz-select> - </div> - </div> - <div class="form-item"> - <label class="item-label"> Operator Name:</label> - <div class="item"> - <nz-select class="nz-select-container" nzPlaceHolder="Select Operator" - [(ngModel)]="selectedOperator" (ngModelChange)="handleOperatorChange($event)"> - <nz-option *ngFor="let operator of operators" [nzValue]="operator" - [nzLabel]="operator.operatorName"></nz-option> - </nz-select> - </div> - - </div> - <div class="form-item"> - <label class="item-label"> MaaS Platform Name:</label> - <div class="item"> - <nz-select class="nz-select-container" nzPlaceHolder="Select MaaS" - [(ngModel)]="selectedPlatform" (ngModelChange)="handleMaasChange($event)"> - <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform" - [nzLabel]="platform.maaSPlatformName"></nz-option> - </nz-select> - </div> - - </div> - <div class="form-item"> - <label class="item-label"> Model:</label> - <div class="item"> - <nz-select class="nz-select-container" nzPlaceHolder="Select Model" - [(ngModel)]="selectedModel"> - <nz-option *ngFor="let model of filteredModels" [nzValue]="model" - [nzLabel]="model.modelName"></nz-option> - </nz-select> - </div> - - </div> - <div class="form-item"> - <label class="item-label"> KnowLedge Base:</label> - <div class="item"> - <nz-select class="nz-select-container" nzPlaceHolder="Select Knowledge Base" - [(ngModel)]="selectKnowledgeBase"> - <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase" - [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option> - </nz-select> - </div> - </div> - <div class="form-item"> - <label class="item-label"> Prompt:</label> - <div class="item"> - <textarea nz-input [(ngModel)]=prompt></textarea> - </div> - </div> - <div class="form-item"> - <label class="item-label"> Opening Remarks:</label> - <div class="item"> - <textarea nz-input [(ngModel)]=openingRemarks></textarea> - </div> - </div> - <div class="form-item"> - <label class="item-label">temperature:</label> - <div class="item"> - <nz-row class="slider-input-container"> - <nz-col nzSpan="10"> - <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="temperature"></nz-slider> - </nz-col> - <div nz-col nzSpan="4"> - <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" - [(ngModel)]="temperature"></nz-input-number> - </div> - </nz-row> - </div> - </div> - <div class="form-item"> - <label class="item-label">top_p:</label> - <div class="item"> - <nz-row class="slider-input-container"> - <nz-col nzSpan="10"> - <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="top_p"></nz-slider> - </nz-col> - <div nz-col nzSpan="4"> - <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10" - [(ngModel)]="top_p"></nz-input-number> - </div> - </nz-row> - </div> - </div> - </div> -</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts deleted file mode 100644 index 71688d4e..00000000 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { Util } from '../../../../shared/utils/utils'; -import {NzMessageService} from "ng-zorro-antd"; -import { HttpClient,HttpHeaders } from '@angular/common/http'; - -@Component({ - selector: 'app-input-application-management', - templateUrl: './input-application-management.component.html', - styleUrls: ['./input-application-management.component.less'] -}) -export class InputApplicationManagementComponent implements OnInit { - title = 'Add Application'; - constructor( - private Util: Util, - private message: NzMessageService, - private http: HttpClient - ) { } - - @Input() showModel: boolean; - @Output() modalOpreation = new EventEmitter(); - - maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll'; - knowBaseUrl = "/api/usecaseui-llm-adaptation/v1/knowledgeBase/queryByMaaSId/"; - createApplicationUrl = "/api/usecaseui-llm-adaptation/v1/application/create"; - - applicationName = ""; - applicationDescription = ""; - applicationType = "Knowledge Assistant"; - operators: any[] = []; - selectedOperator: any = null; - filteredPlatforms: any[] = []; - selectedPlatform: any = null; - filteredModels: any[] = []; - selectedModel: any = null; - knowledgeBases: any[] =[]; - selectKnowledgeBase: any = null; - modelDefaultValue = ""; - temperature = 3; - top_p = 3; - prompt =""; - openingRemarks = ""; - ngOnInit() { - this.fetchOperators(); - } - - fetchOperators(): void { - this.http.get<any>(this.maasUrl).subscribe( - (response) => { - this.operators = response.result_body; - }, - () => { - this.message.error('Failed to fetch operators'); - } - ); - } - - handleOperatorChange(value: any): void { - if (value) { - this.filteredPlatforms = value.maaSPlatformList; - } else { - this.filteredPlatforms = []; - } - this.selectedPlatform = null; - this.selectedModel = null; - this.selectKnowledgeBase = null; - } - - handleMaasChange(value: any): void { - if (value) { - this.filteredModels = value.modelList; - console.log(this.filteredModels); - this.fetchKnowledgeBase(value); - } else { - this.filteredModels = []; - } - this.selectedModel = null; - this.selectKnowledgeBase = null; - } - - fetchKnowledgeBase(value): void { - this.http.get<any>(this.knowBaseUrl+value.maaSPlatformId).subscribe( - (response) => { - this.knowledgeBases = response.result_body; - }, - (error) => { - this.message.error('Failed to fetch knowledge base'); - } - ); - } - - handleCancel(): void { - this.showModel = false; - this.modalOpreation.emit({ "cancel": true }); - } - handleOk(): void { - this.createApplication(); - } - - createApplication(){ - const requestBody = { - applicationName: this.applicationName, - applicationDescription: this.applicationDescription, - applicationType: this.applicationType, - operatorName: this.selectedOperator.operatorName, - operatorId: this.selectedOperator.operatorId, - maaSPlatformId: this.selectedPlatform.maaSPlatformId, - maaSPlatformName: this.selectedPlatform.maaSPlatformName, - knowledgeBaseId: this.selectKnowledgeBase.knowledgeBaseId, - knowledgeBaseName: this.selectKnowledgeBase.knowledgeBaseName, - largeModelId: this.selectedModel.modelId, - largeModelName: this.selectedModel.modelName, - prompt: this.prompt, - temperature: this.temperature, - top_p: this.top_p, - openingRemarks: this.openingRemarks - }; - console.log(requestBody); - this.http.post<any>(this.createApplicationUrl, requestBody).subscribe( - (response) => { - this.showModel = false; - this.modalOpreation.emit({ "cancel": false }); - const resultHeader = {}; - if(response.result_header.result_code===200){ - this.message.success('Created successfully'); - }else{ - this.message.error(response.result_header.result_message); - } - }, - (err) => { - this.showModel = false; - this.message.error('Created failed'); - } - ) - } -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html index de2e6450..78773c0a 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html @@ -13,13 +13,16 @@ See the License for the specific language governing permissions and limitations under the License. --> -<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" +<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> <nz-form-item> - <nz-form-label [nzSpan]="8" nzFor="name">Knowledge Base Name</nz-form-label> + <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Knowledge Base Name</nz-form-label> <nz-form-control [nzSpan]="12"> - <input type="text" nz-input formControlName="name"> + <input type="text" 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> </nz-form-control> </nz-form-item> <nz-form-item> @@ -29,26 +32,32 @@ </nz-form-control> </nz-form-item> <nz-form-item> - <nz-form-label [nzSpan]="8" nzFor="selectedOperator">Operator Name</nz-form-label> + <nz-form-label [nzSpan]="8" nzFor="selectedOperator" nzRequired>Operator Name</nz-form-label> <nz-form-control [nzSpan]="12"> <nz-select name="selectedOperator" nzPlaceHolder="Select Operator" formControlName="selectedOperator" (ngModelChange)="handleOperatorChange($event)"> <nz-option *ngFor="let operator of operators" [nzValue]="operator" [nzLabel]="operator.operatorName"></nz-option> </nz-select> + <nz-form-explain + *ngIf="validateForm.get('selectedOperator').dirty && validateForm.get('selectedOperator').errors">Please + select operator!</nz-form-explain> </nz-form-control> </nz-form-item> <nz-form-item> - <nz-form-label [nzSpan]="8" nzFor="selectedPlatform">MaaS Platform Name</nz-form-label> + <nz-form-label [nzSpan]="8" nzFor="selectedPlatform" nzRequired>MaaS Platform Name</nz-form-label> <nz-form-control [nzSpan]="12"> <nz-select nzPlaceHolder="Select MaaS" formControlName="selectedPlatform"> <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform" [nzLabel]="platform.maaSPlatformName"></nz-option> </nz-select> + <nz-form-explain + *ngIf="validateForm.get('selectedPlatform').dirty && validateForm.get('selectedPlatform').errors">Please + select maas platform!</nz-form-explain> </nz-form-control> </nz-form-item> <nz-form-item> - <nz-form-label [nzSpan]="8" nzFor="fileList">File Upload</nz-form-label> + <nz-form-label [nzSpan]="8" nzFor="fileList" nzRequired>File Upload</nz-form-label> <nz-form-control [nzSpan]="12"> <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> <button nz-button> diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less index e69de29b..e69de29b 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts index 9984f664..891fb9bd 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts @@ -1,73 +1,60 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { IntentManagementService } from '../../../../core/services/intentManagement.service'; import { Util } from '../../../../shared/utils/utils'; import { NzMessageService, UploadFile } from 'ng-zorro-antd'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MaasService } from '@src/app/core/services/maas.service'; @Component({ - selector: 'app-input-knowledge-base', - templateUrl: './input-knowledge-base.component.html', - styleUrls: ['./input-knowledge-base.component.less'] + selector: 'app-create-knowledge-base', + templateUrl: './create-knowledge-base.component.html', + styleUrls: ['./create-knowledge-base.component.less'] }) -export class InputKnowledgeBaseComponent implements OnInit { +export class CreateKnowledgeBaseComponent implements OnInit { title = 'Add Knowledge Base'; - constructor( - private myhttp: IntentManagementService, - private Util: Util, - private message: NzMessageService, - private http: HttpClient, - private fb: FormBuilder - ) { } - - @Input() showModel: boolean; + @Input() showModal: boolean; @Output() modalOpreation = new EventEmitter(); apiUrl = '/api/usecaseui-llm-adaptation/v1/knowledgeBase/create'; - apiUrl1 = '/api/usecaseui-intent-analysis/v1/intents/upload'; maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll' - url = "http://172.22.16.126:3000/api/core/dataset/create"; - knowledgeBase = { - name: '', - description: '' - }; fileList: UploadFile[] = []; operators: any[] = []; - selectedOperator: any = null; filteredPlatforms: any[] = []; - allPlatforms: any[] = []; - selectedPlatform: any = null; validateForm: FormGroup; + constructor( + private myhttp: MaasService, + private Util: Util, + private message: NzMessageService, + private http: HttpClient, + private fb: FormBuilder + ) { } + ngOnInit() { this.fetchOperators(); this.validateForm = this.fb.group({ - name: [null], + name: [null, [Validators.required]], description: [null], - selectedOperator: [null], - selectedPlatform: [null], + selectedOperator: [null, [Validators.required]], + selectedPlatform: [null, [Validators.required]], }); } - fetchOperators(): void { this.http.get<any>(this.maasUrl).subscribe( (response) => { - console.log(response); this.operators = response.result_body; }, - (error) => { + () => { this.message.error('Failed to fetch operators'); } ); } - submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } } - handleOperatorChange(value: any): void { if (value) { this.filteredPlatforms = value.maaSPlatformList; @@ -76,52 +63,49 @@ export class InputKnowledgeBaseComponent implements OnInit { } this.validateForm.get('selectedPlatform').setValue(null); } - - beforeUpload = (file: UploadFile): boolean => { this.fileList.push(file); return false; } - handleCancel(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit({ "cancel": true }); } - handleOk(): void { + + constructBody() { const formData = new FormData(); const metaData = { - knowledgeBaseName: this.validateForm.controls.name.value, - knowledgeBaseDescription: this.validateForm.controls.description.value, - operatorId: this.validateForm.controls.selectedOperator.value.operatorId, - operatorName: this.validateForm.controls.selectedOperator.value.operatorName, - maaSPlatformId: this.validateForm.controls.selectedPlatform.value.maaSPlatformId, - maaSPlatformName: this.validateForm.controls.selectedPlatform.value.maaSPlatformName + knowledgeBaseName: this.validateForm.value.name, + knowledgeBaseDescription: this.validateForm.value.description, + operatorId: this.validateForm.value.selectedOperator.operatorId, + operatorName: this.validateForm.value.selectedOperator.operatorName, + maaSPlatformId: this.validateForm.value.selectedPlatform.maaSPlatformId, + maaSPlatformName: this.validateForm.value.selectedPlatform.maaSPlatformName }; const metaDataJson = JSON.stringify(metaData); formData.append('metaData', metaDataJson); this.fileList.forEach((file: any) => { formData.append('files', file); }); - this.http.post<any>(this.apiUrl, formData).subscribe( + return formData + } + + handleOk(): void { + this.submitForm(); + if (this.validateForm.invalid) { + this.showModal = true; + return; + } + this.http.post<any>(this.apiUrl, this.constructBody()).subscribe( (response) => { if (response.result_header.result_code === 200) { this.message.success('Created successfully'); } else { this.message.error(response.result_header.result_message); } - this.knowledgeBase = { - name: '', - description: '' - }; - this.fileList = []; this.modalOpreation.emit({ "cancel": false }); }, (error) => { - this.knowledgeBase = { - name: '', - description: '' - }; - this.fileList = []; console.log('Upload failed', error); } ); 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 9653f29f..b491df86 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 @@ -13,9 +13,23 @@ See the License for the specific language governing permissions and limitations under the License. --> -<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" +<nz-modal [(nzVisible)]="showModal" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" class="intent-management-modal"> - <div> - <app-description-info [data]="data"></app-description-info> - </div> + <app-descriptions> + <app-descriptions-item nzTitle="Knowledge Base Name">{{knowledgeBaseDetail.knowledgeBaseName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="Operator Name">{{knowledgeBaseDetail.operatorName}} + </app-descriptions-item> + <app-descriptions-item nzTitle="MaaS Platform Name">{{knowledgeBaseDetail.maaSPlatformName}} + </app-descriptions-item> + <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> </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.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts index 172e9d1d..3bcc1455 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,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { knowledgeBase } from '../knowledge-base.type'; +import { KnowledgeBase } from '../knowledge-base.type'; import { KnowledgeBaseService } from '../knowledge-base.service'; @Component({ selector: 'app-knowledge-base-detail', @@ -9,56 +9,22 @@ import { KnowledgeBaseService } from '../knowledge-base.service'; export class KnowledgeBaseDetailComponent implements OnInit { constructor( - private knowledgeBaseService: KnowledgeBaseService + public knowledgeBaseService: KnowledgeBaseService ) { } - @Input() showModel: boolean; - _knowledgeBase: knowledgeBase; - data: Array<{ label: string, value: string }> = []; - @Input() - - set knowledgeBaseDetail(v: any) { - if (!v) { - return; - } - this.data = [ - { - label: 'Knowledge Base Name', value: v.knowledgeBaseName - }, - { - label: 'Knowledge Base Description', value: v.knowledgeBaseDescription - }, - { - label: 'Operator Name', value: v.operatorName - }, - { - label: 'MaaS Platform Name', value: v.maaSPlatformName - }, - { - label: 'Update Time', value: v.updateTime - }, - { - label: 'Files Name', value: this.knowledgeBaseService.getFiles(v) - } - ] - this._knowledgeBase = v; - } - - get knowledgeBaseDetail() { - return this._knowledgeBase; - }; + @Input() showModal: boolean; + @Input() knowledgeBaseDetail: KnowledgeBase; @Output() modalOpreation = new EventEmitter(); - files = ''; ngOnInit() { } handleCancel(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit({ "cancel": true }); } handleOk(): void { - this.showModel = false; + this.showModal = false; this.modalOpreation.emit({ "cancel": 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 eba272c2..6186ef2f 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 @@ -16,10 +16,10 @@ <div class="content"> <p class="title"> {{ "i18nTextDefine_KnowledgeBaseList" | translate }} - <button nz-button nzType="primary" class="add" (click)="inputKnowledgeBaseModuleShow()"> + <button nz-button nzType="primary" class="add" (click)="create()"> {{"i18nTextDefine_Create" | translate}} </button> </p> - <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" [nzShowPagination]="false"> + <nz-table #basicTable [nzData]="data" [nzFrontPagination]="false" [nzShowPagination]="false"> <thead> <tr> <th nzWidth="25%" style="font-size: 20px;">{{"i18nTextDefine_NO" | translate}}</th> @@ -29,23 +29,24 @@ </tr> </thead> <tbody> - <tr *ngFor="let data of basicTable.data; let i = index"> - <td>{{ i+1 }}</td> - <td>{{ data.knowledgeBaseName }}</td> - <td>{{ data.knowledgeBaseDescription }}</td> - <td> - <i class="anticon anticon-menu-fold" (click)="displayKnowledgeDetails(data)"></i> - <!-- <i class="anticon anticon-edit" (click)="editKnowedgeBase(data)"></i> --> - <i class="anticon anticon-delete" (click)="deleteKnowledgeBase(data)"></i> - </td> - </tr> + <tr *ngFor="let data of basicTable.data; let i = index"> + <td>{{ i+1 }}</td> + <td>{{ data.knowledgeBaseName }}</td> + <td>{{ data.knowledgeBaseDescription }}</td> + <td> + <i class="anticon anticon-menu-fold" (click)="displayKnowledgeDetails(data)"></i> + <!-- <i class="anticon anticon-edit" (click)="editKnowedgeBase(data)"></i> --> + <i class="anticon anticon-delete" (click)="deleteKnowledgeBase(data)"></i> + </td> + </tr> </tbody> </nz-table> </div> -<app-input-knowledge-base *ngIf="intentModuleShow" [showModel]="intentModuleShow" - (modalOpreation)="inputKnowledgeBaseModuleClose($event)"></app-input-knowledge-base> -<app-knowledge-base-detail *ngIf="knowledgeBaseShow" [showModel]="knowledgeBaseShow" (modalOpreation)="knowledgeBaseDetailClose($event)" +<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($event)" [knowledgeBaseDetail]="knowledgeBaseDetail"></app-knowledge-base-detail> -<!-- <app-edit-knowledge-base *ngIf="editKnowledgeBaseShow" [showModel]="editKnowledgeBaseShow" [knowledgeBaseId]="editKnowledgeBaseId" +<!-- <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.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less index 0b44f752..b4aeaecc 100644 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less @@ -19,6 +19,9 @@ margin-right: 10px; cursor: pointer; } + .anticon { + user-select: none; + } } .column-size { 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 e54f1e23..bad5808c 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 @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { IntentManagementService } from '../../../core/services/intentManagement.service' import { NzMessageService } from "ng-zorro-antd"; -import { Router } from '@angular/router'; +import { MaasService } from '@src/app/core/services/maas.service'; +import { KnowledgeBase } from './knowledge-base.type'; @Component({ selector: 'app-knowledge-base-management', @@ -10,28 +10,26 @@ import { Router } from '@angular/router'; }) export class KnowledgeBaseManagementComponent implements OnInit { editKnowledgeBaseShow = false; - editKnowledgeBaseId = ''; + knowledgeBaseId = ''; + data: KnowledgeBase[] = []; + createModalShow: boolean = false; + knowledgeBaseShow: boolean = false; + knowledgeBaseDetail: Object = {}; + constructor( - private myhttp: IntentManagementService, - private message: NzMessageService, - private router: Router + private myhttp: MaasService, + private message: NzMessageService ) { } ngOnInit() { this.getKnowledgeBaseData() } - listOfData: any[] = []; - - intentModuleShow: boolean = false; - knowledgeBaseShow: boolean = false; - editIntentTableList: Object = {}; - currentIndex: number = -1; getKnowledgeBaseData(): void { this.myhttp.getKnowledgeBaseRecord() .subscribe( (data) => { - this.listOfData = data.result_body + this.data = data.result_body }, () => { this.message.error('Failed to obtain knowledgeBase data'); @@ -39,12 +37,11 @@ export class KnowledgeBaseManagementComponent implements OnInit { ) } - inputKnowledgeBaseModuleShow(): void { - this.intentModuleShow = true; + create(): void { + this.createModalShow = true; } - inputKnowledgeBaseModuleClose($event: any): void { - console.log($event); - this.intentModuleShow = false; + createModalClose($event: any): void { + this.createModalShow = false; if ($event.cancel) { return; } @@ -71,12 +68,11 @@ export class KnowledgeBaseManagementComponent implements OnInit { } else { this.message.error(data.result_header.result_message); } - }, (err) => { + }, () => { this.message.error('Deletion failed'); }); } - knowledgeBaseDetail: Object = {}; displayKnowledgeDetails(data): void { this.knowledgeBaseShow = true; this.myhttp.getKnowledgeBaseById(data.knowledgeBaseId) @@ -84,14 +80,14 @@ export class KnowledgeBaseManagementComponent implements OnInit { (data) => { this.knowledgeBaseDetail = data.result_body; }, - (err) => { + () => { this.message.error('Failed to obtain knowledge base data'); } ) } editKnowedgeBase(data) { - this.editKnowledgeBaseId = data.knowledgeBaseId; + this.knowledgeBaseId = data.knowledgeBaseId; this.editKnowledgeBaseShow = true; } 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 4af8c292..f7d91b1c 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 @@ -1,11 +1,11 @@ import { Injectable } from '@angular/core'; -import { knowledgeBase } from './knowledge-base.type'; +import { KnowledgeBase } from './knowledge-base.type'; @Injectable() export class KnowledgeBaseService { constructor() { } - getFiles(v: knowledgeBase) { + 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 ec9c7daa..e6004ff1 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 @@ -1,4 +1,4 @@ -export type knowledgeBase = { +export type KnowledgeBase = { knowledgeBaseName: string, knowledgeBaseDescription: string, operatorName: string, @@ -10,3 +10,11 @@ export type knowledgeBase = { knowledgeBaseId: string } +export type KnowledgeBaseResponse = { + result_body: KnowledgeBase, + result_header: { + result_code :number, + result_message: string + } +} + diff --git a/usecaseui-portal/src/app/views/maas/maas-routing.module.ts b/usecaseui-portal/src/app/views/maas/maas-routing.module.ts new file mode 100644 index 00000000..d71e6896 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/maas-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { ApplicationManagementComponent } from './build/application-management.component'; +import { UseApplicationComponent } from './use/use-application.component'; +import { KnowledgeBaseManagementComponent } from './knowledge-base-management/knowledge-base-management.component'; + +const routes: Routes = [ + { path: 'build', component: ApplicationManagementComponent }, + { path: 'use', component: UseApplicationComponent }, + { path: 'knowledge-base-management', component: KnowledgeBaseManagementComponent }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MaasRoutingModule { } diff --git a/usecaseui-portal/src/app/views/maas/maas.module.ts b/usecaseui-portal/src/app/views/maas/maas.module.ts new file mode 100644 index 00000000..814cd635 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/maas.module.ts @@ -0,0 +1,37 @@ +import { NgModule } from '@angular/core'; +import { MaasRoutingModule } from './maas-routing.module'; +import { ApplicationManagementComponent } from './build/application-management.component'; +import { CreateApplicationManagementComponent } from './build/create-application-management/create-application-management.component'; +import { UseApplicationComponent } from './use/use-application.component'; +import { ApplicationDetailComponent } from './build/application-detail/application-detail.component'; +import { DescriptionComponent } from '@src/app/shared/components/description/description.component'; +import { DescriptionItemComponent } from '@src/app/shared/components/description/descriptions-item.component'; +import { KnowledgeBaseManagementComponent } from './knowledge-base-management/knowledge-base-management.component'; +import { CreateKnowledgeBaseComponent } from './knowledge-base-management/create-knowledge-base/create-knowledge-base.component'; +import { KnowledgeBaseDetailComponent } from './knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component'; +import { SharedModule } from '@src/app/shared/module/sharded.module'; +import { MaasService } from '@src/app/core/services/maas.service'; +// import { EditKnowledgeBaseComponent } from './knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component'; + +@NgModule({ + providers: [ + MaasService + ], + imports: [ + SharedModule, + MaasRoutingModule, + ], + declarations: [ + ApplicationManagementComponent, + CreateApplicationManagementComponent, + UseApplicationComponent, + ApplicationDetailComponent, + DescriptionComponent, + DescriptionItemComponent, + KnowledgeBaseManagementComponent, + CreateKnowledgeBaseComponent, + KnowledgeBaseDetailComponent, + // EditKnowledgeBaseComponent + ] +}) +export class MaasModule { } diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.html b/usecaseui-portal/src/app/views/maas/use/use-application.component.html index c0a8fe78..52322960 100644 --- a/usecaseui-portal/src/app/views/maas/use/use-application.component.html +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.html @@ -14,30 +14,31 @@ limitations under the License. --> <div class="container"> -<div class="fixed-select-wrapper"> - <nz-select nzPlaceHolder="Select Application" style="width: 200px;" [(ngModel)]="selectedName"> - <nz-option *ngFor="let option of options" [nzValue]="option.nzValue" [nzLabel]="option.nzLabel"></nz-option> - </nz-select> -</div> -<div class="chat-container"> - <div *ngFor="let chat of chatHistory"> - <div class="question"> - <img src="assets/images/user.png"> - <span>{{ chat.question }}</span> - </div> - <br> - <div class="answer"> - <img src="assets/images/answer.png"> - <span>{{ chat.answer }}</span> + <div class="fixed-select-wrapper"> + <nz-select nzPlaceHolder="Select Application" style="width: 200px;" [(ngModel)]="selectedName"> + <nz-option *ngFor="let option of options" [nzValue]="option.nzValue" [nzLabel]="option.nzLabel"></nz-option> + </nz-select> + </div> + <div class="chat-container"> + <div *ngFor="let chat of chatHistory"> + <div class="question"> + <img src="assets/images/user.png"> + <span>{{ chat.question }}</span> + </div> + <br> + <div class="answer"> + <img src="assets/images/answer.png"> + <span>{{ chat.answer }}</span> + </div> + <br> </div> - <br> </div> -</div> -<div class="input-wrapper"> - <textarea nz-tooltip nz-input [nzAutosize]="{ minRows: 2, maxRows: 2 }" [(ngModel)]="question" class="text-input"></textarea> - <i class="icon" (click)="submitQuestion()"> - <img src="assets/images/send.png"> - </i> -</div> + <div class="input-wrapper"> + <textarea nz-tooltip nz-input [nzAutosize]="{ minRows: 2, maxRows: 2 }" [(ngModel)]="question" + class="text-input"></textarea> + <i class="icon" (click)="submitQuestion()"> + <img src="assets/images/send.png"> + </i> + </div> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts index f2b147c5..96b17fd0 100644 --- a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts @@ -3,8 +3,7 @@ import { NzMessageService } from 'ng-zorro-antd'; import { HttpClient } from '@angular/common/http'; import { SSE } from "sse.js"; import { ActivatedRoute } from '@angular/router'; -import { IntentManagementService } from '../../../core/services/intentManagement.service' - +import { MaasService } from '@src/app/core/services/maas.service'; @Component({ selector: 'app-use-application', @@ -22,53 +21,50 @@ export class UseApplicationComponent implements OnInit { options: any[] = []; constructor( - private http: HttpClient, - private message: NzMessageService, - private route: ActivatedRoute, - private myhttp: IntentManagementService, + private http: HttpClient, + private message: NzMessageService, + private route: ActivatedRoute, + private myhttp: MaasService, ) { } + ngOnInit() { - this.getIntentManagementData(); - this.route.queryParams.subscribe(params => { + this.fetchAllApplication(); + this.route.queryParams.subscribe(params => { this.queryParams = params; - console.log(params.id); - this.selectedName = this.queryParams.id ; + this.selectedName = this.queryParams.id; }); } submitQuestion() { const chatParam = { - applicationId: this.queryParams.id, - question: this.question - }; - var source = new SSE(this.apiUrl,{headers: {'Content-Type': 'application/json'},payload: JSON.stringify(chatParam),method:'POST'}); - var lin = this.question; - const length = this.chatHistory.length; - source.addEventListener('message',(event)=>{ - const existingEntryIndex = this.chatHistory.findIndex(entry => entry.question === lin); - console.log(event.data); - if (existingEntryIndex !== -1) { - this.chatHistory[existingEntryIndex].answer += event.data.replace(/__SPACE__/g, ' '); - } else { - this.chatHistory.push({ question: lin, answer: event.data }); - } - }); - this.question = ''; - } + applicationId: this.selectedName, + question: this.question + }; + const source = new SSE(this.apiUrl, { headers: { 'Content-Type': 'application/json' }, payload: JSON.stringify(chatParam), method: 'POST' }); + const lin = this.question; + source.addEventListener('message', (event) => { + const existingEntryIndex = this.chatHistory.findIndex(entry => entry.question === lin); + if (existingEntryIndex !== -1) { + this.chatHistory[existingEntryIndex].answer += event.data.replace(/__SPACE__/g, ' '); + } else { + this.chatHistory.push({ question: lin, answer: event.data }); + } + }); + this.question = ''; + } - getIntentManagementData():void{ + fetchAllApplication(): void { this.myhttp.getAllApplication() - .subscribe( - (data) => { - this.options = data.result_body.map(item => ({ - nzValue: item.applicationId, - nzLabel: item.applicationName - })); - - }, - () => { - this.message.error('Failed to obtain intent data'); - } - ) + .subscribe( + (data) => { + this.options = data.result_body.map(item => ({ + nzValue: item.applicationId, + nzLabel: item.applicationName + })); + }, + () => { + this.message.error('Failed to obtain intent data'); + } + ) } } |