Optimize the code and fix bugHEADmaster

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 <liukaixi@chinamobile.com>

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');
+        }
+      )
   }
 }