From b71bd34b5baa8e3dfedf83f777d62c988c6b9c97 Mon Sep 17 00:00:00 2001 From: kaixiliu Date: Wed, 4 Dec 2024 15:10:45 +0800 Subject: Optimize the code and fix bug 1. Create a new descripition component code 2. Optimize the code to extract a MaaS feature module and a common module. 3. Optimize the service code and create a new maasService. 4.Click the Q&A Assistant menu, the front-end interface does not deliver an application ID. Issue-ID: USECASEUI-844 Change-Id: If57938f9c57b186691798eb0fb2cdd2fd64ed58a Signed-off-by: kaixiliu --- usecaseui-portal/src/app/app-routing.module.ts | 7 +- usecaseui-portal/src/app/app.module.ts | 19 --- .../app/core/services/intentManagement.service.ts | 40 +---- .../src/app/core/services/maas.service.ts | 80 ++++++++++ .../description-info.component.html | 20 --- .../description-info.component.less | 24 --- .../description-info/description-info.component.ts | 18 --- .../description/description.component.html | 25 +++ .../description/description.component.less | 68 +++++++++ .../description/description.component.ts | 79 ++++++++++ .../components/description/description.type.ts | 7 + .../description/descriptions-item.component.ts | 28 ++++ .../src/app/shared/module/sharded.module.ts | 28 ++++ .../application-detail.component.html | 35 ++++- .../application-detail.component.ts | 59 +------ .../build/application-management.component.html | 10 +- .../build/application-management.component.less | 3 + .../maas/build/application-management.component.ts | 91 ++++++----- .../src/app/views/maas/build/application.type.ts | 8 +- .../create-application-management.component.html | 149 ++++++++++++++++++ .../create-application-management.component.less | 44 ++++++ .../create-application-management.component.ts | 170 +++++++++++++++++++++ .../input-application-management.component.html | 124 --------------- .../input-application-management.component.less | 44 ------ .../input-application-management.component.ts | 135 ---------------- .../create-knowledge-base.component.html | 70 +++++++++ .../create-knowledge-base.component.less | 0 .../create-knowledge-base.component.ts | 113 ++++++++++++++ .../input-knowledge-base.component.html | 61 -------- .../input-knowledge-base.component.less | 0 .../input-knowledge-base.component.ts | 129 ---------------- .../knowledge-base-detail.component.html | 22 ++- .../knowledge-base-detail.component.ts | 46 +----- .../knowledge-base-management.component.html | 33 ++-- .../knowledge-base-management.component.less | 3 + .../knowledge-base-management.component.ts | 40 +++-- .../knowledge-base.service.ts | 4 +- .../knowledge-base.type.ts | 10 +- .../src/app/views/maas/maas-routing.module.ts | 17 +++ usecaseui-portal/src/app/views/maas/maas.module.ts | 37 +++++ .../views/maas/use/use-application.component.html | 47 +++--- .../views/maas/use/use-application.component.ts | 76 +++++---- 42 files changed, 1144 insertions(+), 879 deletions(-) create mode 100644 usecaseui-portal/src/app/core/services/maas.service.ts delete mode 100644 usecaseui-portal/src/app/shared/components/description-info/description-info.component.html delete mode 100644 usecaseui-portal/src/app/shared/components/description-info/description-info.component.less delete mode 100644 usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/description/description.component.html create mode 100644 usecaseui-portal/src/app/shared/components/description/description.component.less create mode 100644 usecaseui-portal/src/app/shared/components/description/description.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/description/description.type.ts create mode 100644 usecaseui-portal/src/app/shared/components/description/descriptions-item.component.ts create mode 100644 usecaseui-portal/src/app/shared/module/sharded.module.ts create mode 100644 usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html create mode 100644 usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less create mode 100644 usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts delete mode 100644 usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html delete mode 100644 usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less delete mode 100644 usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts create mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html create mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less create mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts delete mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html delete mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less delete mode 100644 usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts create mode 100644 usecaseui-portal/src/app/views/maas/maas-routing.module.ts create mode 100644 usecaseui-portal/src/app/views/maas/maas.module.ts (limited to 'usecaseui-portal/src/app') 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(this.url.getIntentReport + intentId); } - getKnowledgeBaseRecord() { - return this.http.get(this.url.getKnowledgeBaseRecord); - } - - updateKnowledgeBase(body: any) { - return this.http.post(this.url.updateKnowledgeBaseRecord, body); - } - - deleteKnowledgeBaseData(index) { - return this.http.delete(this.url.removeKnowledgeBase + index); - } - getMaaSPlatform() { - return this.http.get(this.url.maasUrl); - } - getKnowledgeBaseById(index) { - return this.http.get<{result_body: Array}>(this.url.getKnowledgeBaseById + index); - } - getAllApplication() { - return this.http.get(this.url.getAllApplication); - } - deleteApplicationById(index) { - return this.http.delete(this.url.deleteApplicationById + index); - } - getApplicationById(index) { - return this.http.get(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(this.url.getKnowledgeBaseRecord); + } + + updateKnowledgeBase(body: any) { + return this.http.post(this.url.updateKnowledgeBaseRecord, body); + } + + deleteKnowledgeBaseData(index) { + return this.http.delete(this.url.removeKnowledgeBase + index); + } + getMaaSPlatform() { + return this.http.get(this.url.maasUrl); + } + getKnowledgeBaseById(index) { + return this.http.get(this.url.getKnowledgeBaseById + index); + } + getAllApplication() { + return this.http.get(this.url.getAllApplication); + } + deleteApplicationById(index) { + return this.http.delete(this.url.deleteApplicationById + index); + } + getApplicationById(index) { + return this.http.get(this.url.getApplicationById + index); + } + + getOperators() { + return this.http.get(this.url.operatorsUrl); + } + + fetchKnowledgeBaseByMaasId(id: string) { + return this.http.get(this.url.KnowledgeBaseByMaas + id); + } + + createApplication(body: Application) { + return this.http.post(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 @@ -
-
- -
- {{ item.label }} -
- - {{ item.label }} - - -
-
- -
{{ item.value }}
- - {{ item.value }} - - -
-
\ 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; - - 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 @@ +
+
+ {{ nzTitle }} +
+
+
+ + + + + + + + +
+
+ + {{ item.title }} + + + + +
+
+
\ 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; + + @Input() nzColumn: number = 3; + @Input() nzTitle: string = ''; + @Input() nzColon: boolean = true; + + itemMatrix: DescriptionItemRenderProps[][] = []; + private destroy$ = new Subject(); + 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; + span: number; + content: TemplateRef; + } \ 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: ` + + + + `, +}) +export class DescriptionItemComponent implements OnDestroy { + @ViewChild(TemplateRef) content: TemplateRef; + @Input() nzSpan: number = 1; + @Input() nzTitle: string = ''; + + readonly inputChange$ = new Subject(); + + 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. --> - - + + {{applicationDetail.applicationName}} + + {{applicationDetail.applicationType}} + + {{applicationDetail.operatorName}} + + + {{applicationDetail.maaSPlatformName}} + + + {{applicationDetail.largeModelName}} + + + {{applicationDetail.knowledgeBaseName}} + + + {{applicationDetail.prompt}} + + + {{applicationDetail.temperature}} + + + {{applicationDetail.top_p}} + + + {{applicationDetail.openingRemarks}} + + {{applicationDetail.applicationDescription}} + + \ 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 @@

Application List -

@@ -50,12 +50,12 @@ {{data.largeModelName}} - +
- - \ No newline at end of file + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.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 @@ + + + +
+ + Application Name + + + + Please input application name! + + + + + Application Description + + + + + + Application Type + + + + + + Please select application type! + + + + + Operator Name + + + + + + Please select operator! + + + + + MaaS Platform Name + + + + + + Please select maas platform! + + + + + Model + + + + + + Please select model! + + + + + KnowLedge Base + + + + + + Please select knowLedge base! + + + + + Prompt + + + + + + Opening Remarks + + + + + + + temperature + + + + + +
+ +
+ + + Please input temperature! + + + + + top_p + + + + + +
+ +
+ + + Please input top_p! + + + +
+ \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less new file mode 100644 index 00000000..e8e3fca4 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less @@ -0,0 +1,44 @@ +// .ant-select { +// width: 200px; +// } + +// .ant-input { +// width: 300px; +// } + +.input-wrapper { + display: flex; + align-items: center; + gap: 50px; +} + +.item-label { + display: inline-block; + width: 30%; + margin-right: 8px; + line-height: 36px; +} + +.item { + display: flex; + width: 70%; +} + +.form-item { + display: flex; + width: 100%; + margin-bottom: 16px; +} + +.slider-input-container { + width: 100%; +} + +.nz-input-number-container { + margin-left: 16px; + width: 120px; +} + +.nz-select-container { + width: 300px; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts 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 @@ - - - -
-
- -
- -
-
-
- -
- -
-
-
- -
- - - -
-
-
- -
- - - -
- -
-
- -
- - - -
- -
-
- -
- - - -
- -
-
- -
- - - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - - - -
- -
- -
-
-
- -
- - - - -
- -
- -
-
-
- \ 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/input-application-management/input-application-management.component.less deleted file mode 100644 index e8e3fca4..00000000 --- a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less +++ /dev/null @@ -1,44 +0,0 @@ -// .ant-select { -// width: 200px; -// } - -// .ant-input { -// width: 300px; -// } - -.input-wrapper { - display: flex; - align-items: center; - gap: 50px; -} - -.item-label { - display: inline-block; - width: 30%; - margin-right: 8px; - line-height: 36px; -} - -.item { - display: flex; - width: 70%; -} - -.form-item { - display: flex; - width: 100%; - margin-bottom: 16px; -} - -.slider-input-container { - width: 100%; -} - -.nz-input-number-container { - margin-left: 16px; - width: 120px; -} - -.nz-select-container { - width: 300px; -} \ 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(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(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(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/create-knowledge-base/create-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html new file mode 100644 index 00000000..78773c0a --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html @@ -0,0 +1,70 @@ + + +
+ + Knowledge Base Name + + + + Please input knowledge base name! + + + + + Knowledge Base Description + + + + + + Operator Name + + + + + Please + select operator! + + + + MaaS Platform Name + + + + + Please + select maas platform! + + + + File Upload + + + + + + +
+ \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts new file mode 100644 index 00000000..891fb9bd --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts @@ -0,0 +1,113 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +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-create-knowledge-base', + templateUrl: './create-knowledge-base.component.html', + styleUrls: ['./create-knowledge-base.component.less'] +}) +export class CreateKnowledgeBaseComponent implements OnInit { + title = 'Add Knowledge Base'; + @Input() showModal: boolean; + @Output() modalOpreation = new EventEmitter(); + + apiUrl = '/api/usecaseui-llm-adaptation/v1/knowledgeBase/create'; + maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll' + fileList: UploadFile[] = []; + operators: any[] = []; + filteredPlatforms: any[] = []; + 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, [Validators.required]], + description: [null], + selectedOperator: [null, [Validators.required]], + selectedPlatform: [null, [Validators.required]], + }); + } + fetchOperators(): void { + this.http.get(this.maasUrl).subscribe( + (response) => { + this.operators = response.result_body; + }, + () => { + 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; + } else { + this.filteredPlatforms = []; + } + this.validateForm.get('selectedPlatform').setValue(null); + } + beforeUpload = (file: UploadFile): boolean => { + this.fileList.push(file); + return false; + } + handleCancel(): void { + this.showModal = false; + this.modalOpreation.emit({ "cancel": true }); + } + + constructBody() { + const formData = new FormData(); + const metaData = { + 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); + }); + return formData + } + + handleOk(): void { + this.submitForm(); + if (this.validateForm.invalid) { + this.showModal = true; + return; + } + this.http.post(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.modalOpreation.emit({ "cancel": false }); + }, + (error) => { + console.log('Upload failed', error); + } + ); + } +} \ 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/input-knowledge-base/input-knowledge-base.component.html deleted file mode 100644 index de2e6450..00000000 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html +++ /dev/null @@ -1,61 +0,0 @@ - - -
- - Knowledge Base Name - - - - - - Knowledge Base Description - - - - - - Operator Name - - - - - - - - MaaS Platform Name - - - - - - - - File Upload - - - - - - -
- \ 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.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less deleted file mode 100644 index e69de29b..00000000 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/input-knowledge-base/input-knowledge-base.component.ts deleted file mode 100644 index 9984f664..00000000 --- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts +++ /dev/null @@ -1,129 +0,0 @@ -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'; - -@Component({ - selector: 'app-input-knowledge-base', - templateUrl: './input-knowledge-base.component.html', - styleUrls: ['./input-knowledge-base.component.less'] -}) -export class InputKnowledgeBaseComponent 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; - @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; - - ngOnInit() { - this.fetchOperators(); - this.validateForm = this.fb.group({ - name: [null], - description: [null], - selectedOperator: [null], - selectedPlatform: [null], - }); - } - - fetchOperators(): void { - this.http.get(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; - } else { - this.filteredPlatforms = []; - } - this.validateForm.get('selectedPlatform').setValue(null); - } - - - beforeUpload = (file: UploadFile): boolean => { - this.fileList.push(file); - return false; - } - - handleCancel(): void { - this.showModel = false; - this.modalOpreation.emit({ "cancel": true }); - } - handleOk(): void { - 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 - }; - const metaDataJson = JSON.stringify(metaData); - formData.append('metaData', metaDataJson); - this.fileList.forEach((file: any) => { - formData.append('files', file); - }); - this.http.post(this.apiUrl, formData).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); - } - ); - } -} \ 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.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. --> - -
- -
+ + {{knowledgeBaseDetail.knowledgeBaseName}} + + {{knowledgeBaseDetail.operatorName}} + + {{knowledgeBaseDetail.maaSPlatformName}} + + + {{knowledgeBaseDetail.updateTime}} + + + {{knowledgeBaseService.getFiles(knowledgeBaseDetail)}} + + {{knowledgeBaseDetail.knowledgeBaseDescription}} + + \ 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 @@

{{ "i18nTextDefine_KnowledgeBaseList" | translate }} -

- + {{"i18nTextDefine_NO" | translate}} @@ -29,23 +29,24 @@ - - {{ i+1 }} - {{ data.knowledgeBaseName }} - {{ data.knowledgeBaseDescription }} - - - - - - + + {{ i+1 }} + {{ data.knowledgeBaseName }} + {{ data.knowledgeBaseDescription }} + + + + + +
- - + - \ 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. -->
-
- - - -
-
-
-
- - {{ chat.question }} -
-
-
- - {{ chat.answer }} +
+ + + +
+
+
+
+ + {{ chat.question }} +
+
+
+ + {{ chat.answer }} +
+
-
-
-
- - - - -
+
+ + + + +
\ 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'); + } + ) } } -- cgit 1.2.3-korg