feat: add intent based service

Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Change-Id: If63eb5e61f01751771ad090728f33214077edd6f
Issue-ID: USECASEUI-605

30 files changed, 1591 insertions, 139 deletions

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index 6a6d414d..7cc97875 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -15,28 +15,30 @@
 */
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
-
-import { HomeComponent } from './views/home/home.component';
-import { ManagementComponent } from './views/management/management.component';
+import { TestComponent } from './test/test.component';
+import { AlarmComponent } from './views/alarm/alarm.component';
 import { FcapsComponent } from './views/fcaps/fcaps.component';
 import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component';
-import { ServicesListComponent } from './views/services/services-list/services-list.component';
-import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
-import { OnboardVnfVmComponent } from './views/onboard-vnf-vm/onboard-vnf-vm.component';
-import { AlarmComponent } from './views/alarm/alarm.component';
-import { PerformanceComponent } from './views/performance/performance.component';
-import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
-import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
+import { MonitorManagementService } from './views/fcaps/monitor-management-service/monitor-management-service.component';
+import { HomeComponent } from './views/home/home.component';
+import { ManagementComponent } from './views/management/management.component';
 import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component';
 import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component';
-import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
-import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
+import { OnboardVnfVmComponent } from './views/onboard-vnf-vm/onboard-vnf-vm.component';
+import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
+import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
+import { PerformanceComponent } from './views/performance/performance.component';
+import { IntentBasedServicesComponent } from './views/services/intent-based-services/intent-based-services.component';
+import { ServicesListComponent } from './views/services/services-list/services-list.component';
+import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
 import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
 import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
+import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
+import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
+
+
 
 
-import { TestComponent } from './test/test.component';
 
 // import { DetailsComponent } from './details/details.component';
 
@@ -52,7 +54,9 @@ const routes: Routes = [
   { path: 'management', component: ManagementComponent },
   { path: 'fcaps', component: FcapsComponent },
   { path: 'fcaps/5gslicing', component: Monitor5gComponent },
+  {path: 'fcaps/monitor_service', component: MonitorManagementService},
   { path: 'services/services-list', component: ServicesListComponent },
+  { path: 'services/intent-based-services', component: IntentBasedServicesComponent },
   { path: 'services/slicing-management', component: SlicingManagementComponent },
   { path: 'services/sotn-management', component: SotnManagementComponent },
   { path: 'services/order-service', component: OrderServiceComponent },
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index c8240a7d..36c5b7ff 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -69,6 +69,10 @@
           <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/slicing-management'}">
             <a routerLink='services/slicing-management'> {{"i18nTextDefine_Mangement_5g" | translate}} </a>
           </li>
+          <!-- Intent-based Services -->
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/intent-based-services'}">
+            <a routerLink='services/intent-based-services'> {{"i18nTextDefine_IntentBasedServices" | translate}} </a>
+          </li>
         </ul>
       </li>
       <hr>
@@ -119,6 +123,9 @@
           <li nz-menu-item [ngClass]="{'activeMenuList': url === 'fcaps/5gslicing'}">
             <a routerLink='fcaps/5gslicing'> {{"i18nTextDefine_Monitor_5g" | translate}} </a>
           </li>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'fcaps/monitor_service'}">
+            <a routerLink='fcaps/monitor_service'> {{"i18nTextDefine_monitorService" | translate}} </a>
+          </li>
         </ul>
 
       </li>
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 16f8bc43..57c188ff 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -13,111 +13,110 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+//Registered language pack
+import { HashLocationStrategy, LocationStrategy, registerLocaleData } from "@angular/common";
+import { HttpClient, HttpClientModule } from "@angular/common/http";
+import en from "@angular/common/locales/en";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { HttpClientModule } from "@angular/common/http";
-import { HttpClient } from "@angular/common/http";
-import { NgZorroAntdModule } from "ng-zorro-antd";
-import { NZ_I18N, en_US } from "ng-zorro-antd";
-import { NgxEchartsModule } from "ngx-echarts";
-
-//Custom Directive
-import { DisableControlDirective } from "./core/Directives/disable-control.directive";
-
-import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
-export function HttpLoaderFactory(httpClient: HttpClient) {
-	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
-}
-
+import { en_US, NgZorroAntdModule, NZ_I18N } from "ng-zorro-antd";
+import { NgxEchartsModule } from "ngx-echarts";
 import { AppRoutingModule } from "./app-routing.module";
-
-//Registered language pack
-import { registerLocaleData } from "@angular/common";
-import en from "@angular/common/locales/en";
-registerLocaleData(en);
-
 //Custom component
 import { AppComponent } from "./app.component";
-import { HomeComponent } from "./views/home/home.component";
-import { ManagementComponent } from "./views/management/management.component";
-import { ServicesListComponent } from "./views/services/services-list/services-list.component";
-import { OnboardVnfVmComponent } from "./views/onboard-vnf-vm/onboard-vnf-vm.component";
-import { AlarmComponent } from "./views/alarm/alarm.component";
-import { PerformanceComponent } from "./views/performance/performance.component";
-import { PerformanceVnfComponent } from "./views/performance/performance-vnf/performance-vnf.component";
-import { PerformanceVmComponent } from "./views/performance/performance-vm/performance-vm.component";
-import { CcvpnNetworkComponent } from "./views/network/ccvpn-network/ccvpn-network.component";
-import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component";
-import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component";
-import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component";
-import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component";
-import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component";
-
-import { DetailsComponent } from "./shared/components/details/details.component";
-import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component";
-import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component";
-
-import { BarComponent } from "./shared/components/charts/bar/bar.component";
-import { LineComponent } from "./shared/components/charts/line/line.component";
-import { PieComponent } from "./shared/components/charts/pie/pie.component";
-
-import {
-	PathLocationStrategy,
-	LocationStrategy,
-	HashLocationStrategy,
-} from "@angular/common";
-// common function util
-import { Util } from "./shared/utils/utils";
-import { Recorder} from './shared/utils/recorder';
-// common function http
-import { Http } from "./shared/utils/http";
-// Custom service
-import { ServiceListService } from "./core/services/serviceList.service";
+//Custom Directive
+import { DisableControlDirective } from "./core/Directives/disable-control.directive";
 import { HomesService } from "./core/services/homes.service";
-import { onboardService } from "./core/services/onboard.service";
+import { intentBaseService } from "./core/services/intentBase.service";
+import { ManagemencsService } from "./core/services/managemencs.service";
 import { networkHttpservice } from "./core/services/networkHttpservice.service";
+import { onboardService } from "./core/services/onboard.service";
+// Custom service
+import { ServiceListService } from "./core/services/serviceList.service";
 // slicingTask service
 import { SlicingTaskServices } from "./core/services/slicingTaskServices";
-
+import { TextService } from "./core/services/text.service";
+import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component";
+import { BarComponent } from "./shared/components/charts/bar/bar.component";
+import { LineComponent } from "./shared/components/charts/line/line.component";
+import { PieComponent } from "./shared/components/charts/pie/pie.component";
+import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component";
+import { DetailsComponent } from "./shared/components/details/details.component";
+import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component";
+import { NotificationComponent } from "./shared/components/notification/notification.component";
 import { PerformanceDetailsComponent } from "./shared/components/performance-details/performance-details.component";
-import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component";
-import { CustomerComponent } from "./views/management/customer/customer.component";
-import { ManagemencsService } from "./core/services/managemencs.service";
-import { FcapsComponent } from "./views/fcaps/fcaps.component";
+// common function http
+import { Http } from "./shared/utils/http";
+import { Recorder } from './shared/utils/recorder';
+// common function util
+import { Util } from "./shared/utils/utils";
 import { TestComponent } from "./test/test.component";
-import { TextService } from "./core/services/text.service";
-import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component";
+import { AlarmComponent } from "./views/alarm/alarm.component";
+import { FcapsComponent } from "./views/fcaps/fcaps.component";
+import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component";
+import { MonitorFacpsServiceComponent } from "./views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component";
+import { MonitorManagementService } from "./views/fcaps/monitor-management-service/monitor-management-service.component";
+import { HomeComponent } from "./views/home/home.component";
+import { CustomerComponent } from "./views/management/customer/customer.component";
+import { ManagementComponent } from "./views/management/management.component";
+import { CcvpnNetworkComponent } from "./views/network/ccvpn-network/ccvpn-network.component";
+import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component";
+import { NlpUploadDialogComponent } from "./views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component";
+import { OnboardVnfVmComponent } from "./views/onboard-vnf-vm/onboard-vnf-vm.component";
+import { PerformanceVmComponent } from "./views/performance/performance-vm/performance-vm.component";
+import { PerformanceVnfComponent } from "./views/performance/performance-vnf/performance-vnf.component";
+import { PerformanceComponent } from "./views/performance/performance.component";
+import { CloudLeasedLineModalComponent } from './views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component';
+import { CloudLeasedLineComponent } from './views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component';
+import { IntentBasedServicesComponent } from './views/services/intent-based-services/intent-based-services.component';
+import { SmartCloudLeasedModalComponent } from './views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component';
+import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component";
+import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component";
 import { CreateModelComponent } from "./views/services/services-list/create-model/create-model.component";
 import { DeleteModelComponent } from "./views/services/services-list/delete-model/delete-model.component";
-import { NotificationComponent } from "./shared/components/notification/notification.component";
-import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component";
+import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component";
+import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component";
 import { HealModelComponent } from "./views/services/services-list/heal-model/heal-model.component";
-import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component";
+import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component";
+import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component";
+import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component";
+import { ServicesListComponent } from "./views/services/services-list/services-list.component";
+import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component";
+import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component";
+import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component";
+import { InputBusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component';
 import { SlicingManagementComponent } from "./views/services/slicing-management/slicing-management.component";
-import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component";
-import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component";
-import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component";
-import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component";
-import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component";
-import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component";
-import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component";
+import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component";
 import { NsiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component";
+import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component";
 import { NssiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component";
 import { SlicingBusinessModelComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component";
-import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component";
-import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component";
-import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component";
-import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component";
-import { InputBusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component';
-import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component";
-import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component";
+import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component";
+import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component";
+import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component";
+import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component";
+import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component";
+import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component";
 import { ManageServiceComponent } from "./views/services/sotn-management/manage-service/manage-service.component";
 import { MonitorServiceComponent } from "./views/services/sotn-management/monitor-service/monitor-service.component";
-import { fakeBackendProvider } from "../../testBE/FakeBackendInterceptor";
-import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component";
+import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component";
+import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component";
+
+export function HttpLoaderFactory(httpClient: HttpClient) {
+	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
+}
+
+
+registerLocaleData(en);
+
+
+
+
+
 
 @NgModule({
 	providers: [
@@ -129,6 +128,7 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select
 		ServiceListService,
 		HomesService,
 		onboardService,
+    intentBaseService,
 		networkHttpservice,
 		ManagemencsService,
 		TextService,
@@ -141,6 +141,7 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select
 		ManagementComponent,
 		ServicesListComponent,
 		OnboardVnfVmComponent,
+    NlpUploadDialogComponent,
 
 		AlarmComponent,
 
@@ -169,6 +170,12 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select
 		ScaleModelComponent,
 		HealModelComponent,
 		Monitor5gComponent,
+    MonitorManagementService,
+    MonitorFacpsServiceComponent,
+    IntentBasedServicesComponent,
+    CloudLeasedLineComponent,
+    CloudLeasedLineModalComponent,
+    SmartCloudLeasedModalComponent,
 		SlicingManagementComponent,
 		SlicingTaskManagementComponent,
 		SlicingResourceManagementComponent,
diff --git a/usecaseui-portal/src/app/core/services/intentBase.service.ts b/usecaseui-portal/src/app/core/services/intentBase.service.ts
new file mode 100644
index 00000000..b8ead336
--- /dev/null
+++ b/usecaseui-portal/src/app/core/services/intentBase.service.ts
@@ -0,0 +1,81 @@
+/*
+    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.
+*/
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { baseUrl } from '../models/dataInterface';
+
+@Injectable()
+export class intentBaseService {
+    constructor(private http: HttpClient) { }
+
+    baseUrl = baseUrl.baseUrl;
+    url = {
+      getInstanceId: this.baseUrl + "/intent/getInstanceId",
+      createIntentInstance: this.baseUrl + "/intent/createIntentInstance",
+      getInstanceList: this.baseUrl + "/intent/getInstanceList",
+      queryInstancePerformanceData: this.baseUrl + "/intent/queryInstancePerformanceData",
+      getFinishedInstanceInfo: this.baseUrl + "/intent/getFinishedInstanceInfo",
+      deleteIntentInstance: this.baseUrl + "/intent/deleteIntentInstance",
+      activeIntentInstance: this.baseUrl + "/intent/activeIntentInstance",
+      invalidIntentInstance: this.baseUrl + "/intent/invalidIntentInstance",
+      queryAccessNodeInfo: this.baseUrl + "/intent/queryAccessNodeInfo",
+      intentInstancePredict: this.baseUrl + "/intent/intentInstancePredict"
+    };
+
+    //The following APIs function are optimizable------------------------
+
+    /* Query data list */
+    getInstanceId() {
+        return this.http.get<any>(this.url["getInstanceId"]);
+    }
+    
+    createIntentInstance(requestBody) {
+      return this.http.post<any>(this.url["createIntentInstance"], requestBody);
+    }
+
+    getInstanceList(requestBody) {
+      return this.http.post<any>(this.url["getInstanceList"], requestBody);
+    }
+    
+    queryInstancePerformanceData(requestBody) {
+        return this.http.post<any>(this.url["queryInstancePerformanceData"], requestBody);
+    }
+    
+    getFinishedInstanceInfo() {
+      return this.http.get<any>(this.url["getFinishedInstanceInfo"]);
+    }
+    
+    deleteIntentInstance(instanceId) {
+        let params = new HttpParams({ fromObject: { "instanceId": instanceId } });
+        return this.http.delete<any>(this.url.deleteIntentInstance, { params });
+    }
+    
+    activeIntentInstance(requestBody) {
+      return this.http.post<any>(this.url["activeIntentInstance"], requestBody);
+    }
+
+    invalidIntentInstance(requestBody) {
+      return this.http.post<any>(this.url["invalidIntentInstance"], requestBody);
+    }
+
+    queryAccessNodeInfo() {
+      return this.http.get<any>(this.url["queryAccessNodeInfo"]);
+    }
+
+    intentInstancePredict(requestBody) {
+      return this.http.post<any>(this.url["intentInstancePredict"], requestBody);
+    }
+}
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html
new file mode 100644
index 00000000..a07f948c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html
@@ -0,0 +1,39 @@
+<div class="main">
+  <div class="divCls">
+    <table>
+      <tr>
+        <td>
+            <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">FinishedInstance</nz-form-label>
+        </td>
+        <td>
+          <nz-select
+            id="subscriptionType"
+            class= "colm-s-2"
+            [(ngModel)]="instanceId"
+            (ngModelChange)="queryInstancePerformance($event)"
+            nzAllowClear
+          >
+            <nz-option
+              *ngFor="let option of instanceLists"
+              [nzValue]="option.instanceId"
+              [nzLabel]="option.name"
+            ></nz-option>
+          </nz-select>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div class="flexDiv">
+    <div class="topocontainer">
+      <div
+        id="chartLine"
+        echarts 
+        [initOpts]="initOpts"
+        [options]="lineOption" 
+        [merge]="updateOption"
+        (chartInit)="chartInit($event)">
+          Line Chart
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less
new file mode 100644
index 00000000..f7db5523
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less
@@ -0,0 +1,99 @@
+#mynetwork {
+  width: 100%;
+  height: calc(~"100vh - 300px");
+  border: 1px solid lightgray;
+  margin-right: 40px;
+  // background-color: #333333;
+}
+
+
+:host ::ng-deep .ant-form-item-label label {
+  color:  var(--on-primary) ;
+  background-color:var(--primary);
+}
+
+:host ::ng-deep .ant-select-dropdown-menu-item{
+  color: var(--on-primary) ;
+  background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection__rendered {
+  background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection--single {
+  background-color:var(--primary);
+
+}
+
+:host ::ng-deep .ant-select-selection-selected-value {
+
+  color: var(--on-primary) !important ;
+
+}
+
+@media only screen and (min-width: 600px) {    
+.flexDiv {
+  display: flex!important; 
+}
+}
+@media only screen and (min-width: 768px) {    
+.flexDiv {
+  display: flex!important; 
+}  
+}
+
+.font-size{
+  font-size: 17px;
+}
+.font-weight{
+  font-weight:bold;
+}
+
+.refreshBtn{
+  right: 580px;
+  position: absolute;
+  top: 35px;
+  z-index: 1
+}
+
+:host ::ng-deep .ant-form-item-label label {
+  color:  var(--on-primary) ;
+}
+
+:host ::ng-deep .ant-select-selection__placeholder
+{
+  color: var(--on-primary);
+}
+
+:host ::ng-deep .ant-select-arrow {
+
+
+  color:  var(--on-primary);
+  font-size: 12px;
+}
+
+
+.popup-table-row
+{
+  color: aqua;
+}
+
+.divCls{
+  display: inline-block;
+  width: 100%;
+  padding-bottom: 10px;
+   color : var(--on-lables) ; 
+ }
+
+ .main {
+    //  padding-left:80px
+ }
+ .ant-col-sm-6 {
+     width:100%;
+ }
+
+ #subscriptionType, #serviceInstance {
+     width: 250px;
+ }
+
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts
new file mode 100644
index 00000000..8da138bf
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts
@@ -0,0 +1,199 @@
+import { HttpClient } from "@angular/common/http";
+import { Component, OnInit } from "@angular/core";
+import { NzMessageService } from "ng-zorro-antd";
+import { intentBaseService } from "../../../../core/services/intentBase.service";
+
+@Component({
+	selector: "app-monitor-facps-service",
+	templateUrl: "./monitor-facps-service.component.html",
+	styleUrls: ["./monitor-facps-service.component.less"],
+})
+export class MonitorFacpsServiceComponent implements OnInit {
+
+  constructor(
+    private nzMessage: NzMessageService,
+    private myHttp: intentBaseService,
+    private http: HttpClient
+  ) {}
+  
+	selectedSubscriptionType: string = "";
+	selectedServiceInstance: string = "";
+	selectedTopology: string = "";
+        instanceId: string = "";
+  chartData: any = {
+    xAxis: {
+      data: [
+        "2018-09-10 ",
+        "2018-09-11",
+        "2018-09-12",
+        "2018-09-13",
+        "2018-09-14",
+        "2018-09-15",
+        "2018-09-16",
+        "2018-09-17",
+        "2018-09-18",
+        "2018-09-19",
+        "2018-09-20",
+        "2018-09-21",
+        "2018-09-22"
+      ]
+    },
+    series: [
+      {
+        data: [
+          30,
+          45,
+          34,
+          35,
+          43,
+          56,
+          36,
+          53,
+          42,
+          45,
+          44,
+          35,
+          32
+        ] 
+      },
+      {
+        data: [
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60
+        ]
+      }
+    ]
+  };
+	initData: any = {
+		height: 320,
+		option: {
+			legend: { bottom: "0px", data: ["RATE", "MAXRATE"] },
+			xAxis: { data: [] },
+			series: [
+				{
+					name: "RATE",
+					type: "line",
+					itemStyle: { color: "#70ACEC" },
+					data: [],
+				},
+        {
+          name: 'MAXRATE',
+          type: 'line',
+          step: 'end',
+          itemStyle: {
+            color: "#3BCD79"
+          },
+          data: []
+        }
+			],
+		},
+	};
+  
+	initOpts: any;
+	lineOption: any;
+	chartIntance: any;
+	updateOption: any;
+
+	instanceLists: any[] = [];
+
+  ngOnInit() {
+    this.getFinishedInstanceInfo();
+		this.initOpts = {
+			renderer: "canvas",
+			height: this.initData.height,
+			width: this.initData.width,
+		};
+		this.lineOption = {
+			tooltip: this.initData.option.tooltip,
+			icon: "circle",
+			legend: this.initData.option.legend,
+			dataZoom: this.initData.option.dataZoom,
+			grid: {
+				left: "0%",
+				right: "3%",
+				top: "10%",
+				bottom: "18%",
+				containLabel: true,
+			},
+			xAxis: {
+				axisTick: {
+					show: false,
+				},
+				axisLine: {
+					show: false,
+				},
+				axisLabel: {
+					color: "#3C4F8C",
+				},
+				data: this.initData.option.xAxis.data,
+			},
+			yAxis: {
+				axisTick: {
+					show: false,
+				},
+				axisLine: {
+					show: false,
+				},
+				axisLabel: {
+					color: "#3C4F8C",
+				},
+				splitLine: {
+					lineStyle: {
+						type: "dashed",
+					},
+				},
+			},
+			series: this.initData.option.series,
+		};
+	}
+
+	chartInit(chart) {
+		this.chartIntance = chart;
+	}
+
+  getFinishedInstanceInfo() {
+    this.myHttp.getFinishedInstanceInfo().subscribe(
+      (response) => {
+        const { code, message, data } = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        this.instanceLists = [...data];
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+	queryInstancePerformance(instanceId) {
+    this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
+      (response) => {
+        const { code, message, data } = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        if(this.chartIntance){
+          this.updateOption = data;
+        }
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html
new file mode 100644
index 00000000..554d8887
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html
@@ -0,0 +1,5 @@
+<nz-tabset class="slicing">
+  <nz-tab [nzTitle]="'i18nTextDefine_monitorService' | translate">
+    <app-monitor-facps-service></app-monitor-facps-service>
+  </nz-tab>
+</nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts
new file mode 100644
index 00000000..39fd95e8
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts
@@ -0,0 +1,18 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+
+@Component({
+  selector: 'app-monitor-management-service',
+  templateUrl: './monitor-management-service.component.html',
+  styleUrls: ['./monitor-management-service.component.less'],
+  animations: [slideToRight]
+})
+export class MonitorManagementService implements OnInit {
+
+  @HostBinding('@routerAnimate') routerAnimateState;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html
new file mode 100644
index 00000000..9e7f669b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html
@@ -0,0 +1,30 @@
+<nz-modal
+  [(nzVisible)]="isShowFlag"
+  nzTitle="NLP Model Type"
+  (nzOnCancel)="handleCancel()"
+  (nzOnOk)="handleOk()"
+  nzWidth="450px"
+  nzHeight="600px"
+>
+  <div class="subnet_params_container">
+    <form nz-form class='text-form-class'>
+      <nz-form-item>
+        <nz-form-label
+          [nzSpan]="7"
+          [nzFor]="nlpType"
+        >
+          Type
+        </nz-form-label>
+        <nz-form-control [nzSpan]="10">
+          <nz-select
+            [name]="nlpType"
+            [(ngModel)]="nlpType"
+          >
+            <nz-option nzValue="nlp" nzLabel="nlp"></nz-option>
+            <nz-option nzValue="intent" nzLabel="intent"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  </div>
+</nz-modal>
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less
new file mode 100644
index 00000000..0cf44fad
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less
@@ -0,0 +1,56 @@
+.subnet_params_container{
+  padding-left: 3%;
+  .text-form-class{
+    margin-bottom: 20px;
+  }
+  .subnet_params_area{
+    margin-right: 5px;
+  }
+  .ant-btn-icon-only{
+    padding: 0 5px !important;
+  }
+  .subnet_params_button{
+    margin-top: 7px;
+    margin-left: 10px;
+  }
+  .subnet_params_icon{
+    font-size: 14px;
+  }
+  .audio_class{
+    height: 130px;
+    .recode_class{
+      margin-top: 30px;
+      position: relative;
+      span{
+        font-size: 17px;
+      }
+      .audioBtn{
+        font-size: 20px;
+        position: absolute;
+        top: 5px;
+        left: 142px;
+      }
+      .anticon-pause-circle-o{
+        color: red;
+      }
+    }
+    .play_class{
+      font-size: 17px;
+      margin-top: 20px;
+      button {
+        margin-left: 2px;
+      }
+    }
+  }
+}
+.ant-form-item {
+  margin-top: 20px;
+  margin-bottom: -5px;
+}
+
+.validateRules{
+  color: red;
+}
+.error-input-border{
+  border-color: red!important;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts
new file mode 100644
index 00000000..ffdd130f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+  let component: InputBusinessOrderComponent;
+  let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputBusinessOrderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputBusinessOrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts
new file mode 100644
index 00000000..64b1973a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts
@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { Recorder } from '../../../shared/utils/recorder';
+import { Util } from '../../../shared/utils/utils';
+
+@Component({
+  selector: 'app-nlp-upload-dialog',
+  templateUrl: './nlp-upload-dialog.component.html',
+  styleUrls: ['./nlp-upload-dialog.component.less']
+})
+export class NlpUploadDialogComponent implements OnInit {
+
+  constructor(
+    private Util: Util,
+    private Recorder: Recorder,
+    private msg: NzMessageService
+  ) { }
+
+  @Input() isShowFlag: boolean;
+  @Output() returnNlpType = new EventEmitter();
+  nlpType: String = "nlp";
+  
+  ngOnInit() {}
+
+  ngOnChange() {}
+
+  handleCancel(): void {
+    this.isShowFlag = false;
+    this.returnNlpType.emit({ "cancel": true });
+  }
+
+  handleOk(): void {
+    this.isShowFlag = false;
+    this.returnNlpType.emit({ "cancel": false, nlpType: this.nlpType });
+  }
+  
+}
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
index 34e78e60..2c7b11a5 100644
--- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -89,11 +89,12 @@
           </thead>
           <thead *ngIf="currentTab === 'NLP Model Reource'">
             <tr class="theadColor">
-                <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th>
+                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Size" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Status" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Type" | translate}} </th>
                 <th nzWidth="20%"> {{"i18nTextDefine_Operation" | translate}} </th>
             </tr>
           </thead>
@@ -150,6 +151,7 @@
                 <td>{{item.size}}</td>
                 <td>{{item.createTime}}</td>
                 <td>{{item.active ? 'Active' : 'Inactive'}}</td>
+                <td>{{item.type || '--'}}</td>
                 <td>
                     <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)">
                         Delete
@@ -163,4 +165,8 @@
       </nz-table>
   </nz-spin>
 </div>
+<app-nlp-upload-dialog
+  [isShowFlag]="nlpDialogFlag"
+  (returnNlpType)="receiveNlpType($event)"
+></app-nlp-upload-dialog>
 <app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
index b9d74c19..ccdebc3b 100644
--- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -14,11 +14,11 @@
     limitations under the License.
 */
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Component, OnInit, HostBinding, ViewChild } from '@angular/core';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd';
+import { filter } from 'rxjs/operators';
 import { onboardService } from '../../core/services/onboard.service';
 import { slideToRight } from '../../shared/utils/animates';
-import { NzMessageService, UploadFile, NzModalService } from 'ng-zorro-antd';
-import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -38,6 +38,10 @@ export class OnboardVnfVmComponent implements OnInit {
   infoId: string;
   display: string = 'block';
 
+  // nlp dialog
+  nlpDialogFlag: boolean = false;
+  nlpType: string = '';
+
   // table
   isSpinning: boolean = false;
   nsTableData: any[];
@@ -60,6 +64,20 @@ export class OnboardVnfVmComponent implements OnInit {
     model: '/api/usecaseui-server/v1/intent/uploadModel'
   };
 
+  tabMap = {
+    NS: 'ns',
+    VNF: 'vnf',
+    PNF: 'pnf',
+    'NLP Model Reource': 'model',
+  }
+
+  currentTabApi = {
+    NS: 'createNetworkServiceData',
+    VNF: 'createVnfData',
+    PNF: 'createPnfData',
+    'NLP Model Reource': '',
+  }
+
   file: {
     name: string,
     uid: string,
@@ -113,31 +131,51 @@ export class OnboardVnfVmComponent implements OnInit {
 
   beforeUpload = (file: UploadFile): boolean => {
     this.fileList.splice(0, 1, file);
-    let API: string;
-    if (this.currentTab === 'NS') {
-      API = 'createNetworkServiceData';
-    } else if (this.currentTab === 'VNF') {
-      API = 'createVnfData';
-    } else if (this.currentTab === 'PNF') {
-      API = 'createPnfData';
-    } else {
+    let API: string = this.currentTabApi[this.currentTab];
+    
+    if (!API) {
       return false;
     }
-    this.myhttp.getCreatensData(API, this.requestBody)//on-line
+    
+    this.myhttp.getCreatensData(API, this.requestBody)
       .subscribe((data) => {
         this.infoId = data["id"];
       }, (err) => {
         console.log(err);
-      })
+      });
+    
     return false;
   }
 
+  onClick() {
+    if (this.currentTab === 'NLP Model Reource') {
+      this.nlpDialogFlag = true;
+      return;
+    }
+    this.startUploadFile();
+  }
+
+  receiveNlpType(data) {
+    this.nlpDialogFlag = false;
+    if (data.cancel) {
+      return;
+    }
+    this.nlpType = data.nlpType;
+    this.startUploadFile();
+  }
+
   // Drag and drop and click the upload button
-  onClick(): void {
+  startUploadFile(): void {
     this.display = 'none';
-    let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : (this.currentTab === 'PNF' ? 'pnf' : 'model'));
-    let url = tab === "model" ? this.url[tab] : this.url[tab].replace("*_*", this.infoId);
-    tab === "model" ? this.handleUploadModel(url) : this.handleUpload(url);
+    let tab = this.tabMap[this.currentTab];
+    let url;
+    if (tab === "model") {
+      url = this.url[tab];
+      this.handleUploadModel(url);
+      return;
+    }
+    url = this.url[tab].replace("*_*", this.infoId);
+    this.handleUpload(url);
   }
 
   handleUploadModel(url: string): void {
@@ -243,24 +281,36 @@ export class OnboardVnfVmComponent implements OnInit {
     this.isSpinning = true;
     //ns vfc lists 
     this.myhttp.getOnboardTableData()
-      .subscribe((data) => {
-        this.nsTableData = data;
-        //ns sdc list
-        this.myhttp.getSDC_NSTableData()
-          .subscribe((data) => {
-            this.isSpinning = false; //loading hide
-            let nsData = data;
-            // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
-            let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
-            this.nsTableData = this.nsTableData.concat(sameData);
-          }, (err) => {
-            this.msg.error(err);
-            this.isSpinning = false;
-          })
-      }, (err) => {
-        this.msg.error(err);
-        this.isSpinning = false;
-      })
+      .subscribe(
+        (data) => {
+          this.nsTableData = data;
+          //ns sdc list
+          this.myhttp.getSDC_NSTableData()
+            .subscribe(
+              (data) => {
+                this.isSpinning = false; //loading hide
+                if (!data) {
+                  return;
+                }
+                let nsData = data;
+                let sameData = nsData.filter((nssdc) => {
+                  return !this.nsTableData.find((nsvfc) => {
+                    return nsvfc.id == nssdc.uuid
+                  })
+                });
+                this.nsTableData = this.nsTableData.concat(sameData);
+              },
+              (err) => {
+                this.msg.error(err);
+                this.isSpinning = false;
+              }
+            )
+        },
+        (err) => {
+          this.msg.error(err);
+          this.isSpinning = false;
+        }
+      )
   }
 
   // Get the vnf list
@@ -443,7 +493,6 @@ export class OnboardVnfVmComponent implements OnInit {
 
   // Actived Model Resource
   activedModelFile(data) {
-    console.log('actived model');
     let url = `/api/usecaseui-server/v1/intent/activeModel?modelId=${data.id}`;
     this.myhttp.getOnboardTableActiveModelData(url)
       .subscribe((data) => {
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
new file mode 100644
index 00000000..9bb9ffa4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
@@ -0,0 +1,86 @@
+<nz-modal
+  [(nzVisible)]="cloudLeasedLineShowFlag"
+  nzTitle="Create Cloud Leased Line"
+  (nzOnCancel)="cancel()"
+  nzWidth="70%"
+  [nzFooter]="modalFooter"
+>
+  <div class="subnet_params_container">
+    <form nz-form>
+        <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
+            <nz-form-label
+              [nzSpan]="7"
+              [nzRequired]="item.required"
+              [nzFor]=" item.key"
+            >
+                {{ item.title }}
+            </nz-form-label>
+            <nz-form-control [nzSpan]="10">
+              <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
+              <nz-tooltip
+                [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
+                [nzPlacement]="'right'"
+                [nzTrigger]="'focus'"
+              >
+                <input
+                  nz-input
+                  nz-tooltip
+                  [id]="item.key"
+                  [name]="item.key"
+                  *ngIf="item.type === 'input'"
+                  [(ngModel)]="cloud_leased_line_info[item.key]"
+                  [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+                  [placeholder]="item.placeholder ? item.placeholder : ''"
+                  (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+                />
+              </nz-tooltip>
+              <nz-select
+                [name]="item.key"
+                [(ngModel)]="cloud_leased_line_info[item.key]"
+                *ngIf="item.type === 'select'"
+              >
+                <nz-option
+                  [nzValue]="option.key"
+                  [nzLabel]="option.title"
+                  *ngFor="let option of cloudPointOptions"
+                >
+                </nz-option>
+              </nz-select>
+              <div *ngIf="item.type === 'node_select_one'">
+                <div>
+                  <span>{{item.rateName}}:</span>
+                  <input
+                    nz-input
+                    nz-tooltip
+                    [id]="item.key"
+                    [name]="item.key"
+                    [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
+                    [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+                    [placeholder]="item.placeholder ? item.placeholder : ''"
+                    (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+                  />
+                </div>
+                <div>
+                  <span>{{item.nodeName}}:</span>
+                  <nz-select
+                    [name]="item.key"
+                    [(ngModel)]="cloud_leased_line_info[item.key].name"
+                  >
+                    <nz-option
+                      [nzValue]="option.key"
+                      [nzLabel]="option.title"
+                      *ngFor="let option of nodeLists"
+                    >
+                    </nz-option>
+                  </nz-select>
+                </div>
+              </div>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+  </div>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="cancel()">Cancel</button>
+    <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
+  </ng-template>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less
new file mode 100644
index 00000000..09a0a168
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less
@@ -0,0 +1,40 @@
+.radio_txt {
+  p {
+    margin-bottom: 0px;
+    &:last-child {
+      margin-top: -18px;
+    }
+  }
+}
+.button_submit {
+  text-align: right;
+  padding-right: 306px;
+  .cancelBtn {
+    margin-right: 15px;
+  }
+}
+::ng-deep .ant-form-item-label {
+  text-align: left;
+  padding-left: 50px;
+}
+::ng-deep .ant-radio-button-wrapper {
+  padding: 0 45px;
+}
+::ng-deep .ant-radio-button-wrapper:hover {
+  color: #54657e;
+  border-color: none;
+}
+::ng-deep .ant-radio-button-wrapper-checked {
+  -webkit-box-shadow: -1px 0 0 0 #40a9ff;
+  background: #40a9ff;
+  border-color: #40a9ff;
+  color: #fff;
+}
+::ng-deep .ant-radio-button-wrapper-checked:hover {
+  -webkit-box-shadow: -1px 0 0 0 #40a9ff;
+  border-color: #40a9ff;
+  color: #fff;
+}
+::ng-deep .ant-radio-button-wrapper-checked:first-child {
+  border-color: #40a9ff;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
new file mode 100644
index 00000000..0f0afc79
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
@@ -0,0 +1,105 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { NzMessageService } from "ng-zorro-antd";
+import { intentBaseService } from "../../../../core/services/intentBase.service";
+import { Util } from "../../../../shared/utils/utils";
+import { COMMUNICATION_FORM_ITEMS } from "../constants";
+
+@Component({
+  selector: 'app-cloud-leased-line-modal',
+  templateUrl: './cloud-leased-line-modal.component.html',
+  styleUrls: ['./cloud-leased-line-modal.component.less']
+})
+export class CloudLeasedLineModalComponent implements OnInit {
+
+  constructor(
+    private myHttp: intentBaseService,
+		private nzMessage: NzMessageService,
+		private Util: Util
+	) {}
+
+  @Input() modelParams: any;
+  @Input() cloudLeasedLineShowFlag: boolean;
+  @Output() cancelEmitter = new EventEmitter<boolean>();
+  comunicationFormItems = COMMUNICATION_FORM_ITEMS;
+  validateRulesShow: any[] = [];
+  isLoadingOne = false;
+  nodeLists: any[] = [];
+  cloudPointOptions: any[] = [];
+  cloud_leased_line_info = {
+		name: '',
+		instanceId: '',
+		accessPointOne: {
+      name: '',
+      bandwidth: ''
+    },
+		cloudPointName: '',
+	};
+
+  ngOnInit(): void {}
+  
+  ngOnChanges() {
+    if (this.cloudLeasedLineShowFlag) {
+      if (this.modelParams) {
+        this.cloud_leased_line_info = { ...this.modelParams };
+      } else {
+        this.getInstanceId();
+      }
+      this.queryAccessNodeInfo();
+    }
+	}
+  
+  queryAccessNodeInfo() {
+    this.myHttp.queryAccessNodeInfo().subscribe(
+      (response) => {
+        console.log(response);
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  getInstanceId() {
+    this.myHttp.getInstanceId().subscribe(
+      (response) => {
+        const { code, message, data} = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        this.cloud_leased_line_info.instanceId = data && data.instanceId;
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  submit(): void {
+    this.myHttp.createIntentInstance({
+      ...this.cloud_leased_line_info
+    }).subscribe(
+      (data) => {
+        console.log(data);
+        this.cancel();
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  cancel(): void {
+    this.cloudLeasedLineShowFlag = false
+    this.cloud_leased_line_info = {
+      name: '',
+      instanceId: '',
+      accessPointOne: {
+        name: '',
+        bandwidth: ''
+      },
+      cloudPointName: '',
+    };
+    this.cancelEmitter.emit();
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html
new file mode 100644
index 00000000..331eb7b0
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html
@@ -0,0 +1,99 @@
+<div>
+  <div nz-row>
+    <button
+      nz-button
+      nzType="primary"
+      class="buy-button"
+      (click)="cloudLeasedLineShow()"
+    >
+      Create
+    </button>
+    <button
+      nz-button
+      nzType="primary"
+      class="buy-button"
+      (click)="smartCloudLeasedLineShow()"
+    >
+      Smart Create
+    </button>
+  </div>
+  <div class="slicing-resource-table-list">
+    <nz-table
+      #basicTable [nzData]="listOfData"
+      [nzFrontPagination]="false"
+      nzShowSizeChanger
+      [nzPageSizeOptions]="[5,10,15,20]"
+      [nzTotal]='total'
+      [(nzPageSize)]="pageSize"
+      [(nzPageIndex)]='pageIndex'
+      [nzLoading]="loading"
+      (nzPageIndexChange)="searchData()"
+      (nzPageSizeChange)="searchData()"
+    >
+      <thead>
+        <tr>
+          <th nzWidth="6%">No</th>
+          <th nzWidth="15%">Communication Service Name</th>
+          <th nzWidth="10%">Intent Instance ID</th>
+          <th nzWidth="6%">Status</th>
+          <th nzWidth="20%">{{"i18nTextDefine_Operationbutton" | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
+          <tr>
+            <td>{{i+1}}</td>
+            <td>{{ data.name }}</td>
+            <td>{{ data.instanceId }}</td>
+            <td>{{ statusObj[data.status] }}</td>
+            <td>
+              <button
+                nz-button
+                nzType="primary"
+                class="buy-button"
+                (click)="goMonitorService()"
+              >
+                Intent Monitor
+              </button>
+              <button
+                *ngIf="data.status === '3'"
+                nz-button
+                nzType="primary"
+                class="buy-button"
+                (click)="activeCloudLeasedLine(data)"
+              >
+                Active
+              </button>
+              <button
+                *ngIf="data.status === '1'"
+                nz-button
+                nzType="primary"
+                class="buy-button"
+                (click)="inactiveCloudLeasedLine(data)"
+              >
+                Inactive
+              </button>
+              <button
+                nz-button
+                nzType="primary"
+                class="buy-button"
+                (click)="deleteCloudLeasedLine(data)"
+              >
+                Delete
+              </button>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </nz-table>
+  </div>
+  <app-smart-cloud-leased-modal
+    [samrtCloudLeasedLineShowFlag]="smartCloudLeasedLineShowFlag"
+    (resolveEmitter)="smartCloudLeasedLineClose($event)"
+  ></app-smart-cloud-leased-modal>
+  <app-cloud-leased-line-modal
+    [modelParams]="resolveResult"
+    [cloudLeasedLineShowFlag]="cloudLeasedLineShowFlag"
+    (cancelEmitter)="cloudLeasedLineClose()"
+  ></app-cloud-leased-line-modal>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less
new file mode 100644
index 00000000..df2a899e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less
@@ -0,0 +1,41 @@
+nz-select {
+  width: 200px;
+}
+
+.task_status {
+  margin-bottom: 20px;
+
+  span {
+    margin-right: 5%;
+  }
+}
+
+.action-icon {
+  display: inline-block;
+  vertical-align: top;
+}
+
+i.anticon {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px 15px;
+  vertical-align: inherit !important;
+
+  &:hover {
+    color: #147dc2;
+  }
+}
+
+.cannotclick {
+  pointer-events: none;
+  color: #aaa;
+  opacity: 0.6;
+}
+
+.buy-button {
+  float: right;
+  margin-right: 2%;
+}
+::ng-deep .ant-table-row .buy-button {
+  float: left;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts
new file mode 100644
index 00000000..bf046545
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts
@@ -0,0 +1,132 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { NzMessageService } from "ng-zorro-antd";
+import { intentBaseService } from "../../../../core/services/intentBase.service";
+
+@Component({
+  selector: 'app-cloud-leased-line',
+  templateUrl: './cloud-leased-line.component.html',
+  styleUrls: ['./cloud-leased-line.component.less']
+})
+export class CloudLeasedLineComponent implements OnInit {
+
+  constructor(
+    private router:Router,
+    private myHttp: intentBaseService,
+    private nzMessage: NzMessageService 
+  ) {}
+
+	ngOnChanges() {}
+
+	ngOnInit() {
+    this.pageIndex = 1;
+    this.pageSize = 10;
+    this.getCloudLeasedLineList();
+  }
+
+	ngOnDestroy() {}
+
+  statusObj: any = {
+    0: 'Incomplete',
+    1: 'Completed',
+    2: 'Deleted',
+    3: 'Inactive'
+  }
+  // 列表数据源
+	listOfData: any[] = [];
+  // 分页信息及总数
+	pageIndex: number = 1;
+	pageSize: number = 10;
+	total: number = 0;
+	loading = false;
+  // 控制弹窗展示变量
+  cloudLeasedLineShowFlag: boolean = false;
+  smartCloudLeasedLineShowFlag: boolean = false;
+  // 初始化查询数据源
+	getCloudLeasedLineList(): void {
+    this.myHttp.getInstanceList({
+      currentPage: this.pageIndex,
+      pageSize: this.pageSize
+    }).subscribe((response) => {
+      const { code, message, data } = response;
+      if (code !== 200) {
+        this.nzMessage.error(message);
+				return;
+      }
+      this.total = data.totalRecords;
+      this.listOfData = [...data.list];
+    }, (err) => {
+      console.log(err);
+    });
+  }
+  // 分页信息变更查询数据
+  searchData(): void {
+    this.getCloudLeasedLineList();
+  }
+  // 解析结果传递到create弹窗
+  resolveResult: any;
+  // 弹窗加载
+	cloudLeasedLineShow(): void {
+	  this.cloudLeasedLineShowFlag = true;
+	}
+  // 弹窗关闭
+	cloudLeasedLineClose(): void {
+    this.cloudLeasedLineShowFlag = false;
+    this.pageIndex = 1;
+    this.pageSize = 10;
+    this.getCloudLeasedLineList();
+  }
+  // smart 弹窗加载
+	smartCloudLeasedLineShow(): void {
+	  this.smartCloudLeasedLineShowFlag = true;
+	}
+  // smart 弹窗关闭
+	smartCloudLeasedLineClose(data): void {
+    this.smartCloudLeasedLineShowFlag = false;
+    if (data.cancel) {
+      return;
+    }
+    this.cloudLeasedLineShowFlag = true;
+    this.resolveResult = {
+      name: 'test',
+      instanceId: '123456',
+      accessPointOne: {
+        name: 'aaa',
+        bandwidth: '20'
+      },
+      cloudPointName: 'aaa',
+    };
+  }
+  // 跳转监控管理页面
+  goMonitorService(): void {
+    this.router.navigateByUrl('/fcaps/monitor_service');
+  }
+
+  activeCloudLeasedLine(row): void {
+    this.myHttp.activeIntentInstance({
+      instanceId: row.instanceId
+    }).subscribe((data) => {
+      console.log(data);
+    }, (err) => {
+      console.log(err);
+    });
+  }
+
+  inactiveCloudLeasedLine(row): void {
+    this.myHttp.invalidIntentInstance({
+      instanceId: row.instanceId
+    }).subscribe((data) => {
+      console.log(data);
+    }, (err) => {
+      console.log(err);
+    });
+  }
+
+  deleteCloudLeasedLine(row): void {
+    this.myHttp.deleteIntentInstance(row.instanceId).subscribe((data) => {
+      console.log(data);
+    }, (err) => {
+      console.log(err);
+    });
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts
new file mode 100644
index 00000000..9a54a49a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts
@@ -0,0 +1,49 @@
+export const STATUS_LIST = {
+  Active: 'Active',
+  Inactive: 'Inactive'
+};
+
+export const COMMUNICATION_FORM_ITEMS = [
+	/*******
+        title /MUST/: MARK THE ITEM NAME,
+        key /MUST/:  MARK THE ITEM KEY,
+        type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
+        required /MUST/: IF REQUIRED, 
+        scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
+        scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST
+        placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
+        options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
+    ********/
+	{
+		title: "Communication Service Name",
+		key: "name",
+		type: "input",
+		required: true,
+	},
+	{
+		title: "Intent Instance ID",
+		key: "instanceId",
+		type: "text",
+		required: true,
+	},
+	{
+		title: "Access Point 1",
+    nodeName: 'Name',
+    rateName: 'Bandwidth',
+		key: "accessPointOne",
+		type: "node_select_one",
+		required: true,
+	},
+	{
+		title: "Cloud Point Name",
+		key: "cloudPointName",
+		type: "select",
+		required: true,
+		options: [
+			{
+				title: "tranprotEp_ID_ROOT",
+				key: "tranprotEp_ID_ROOT",
+			}
+		],
+	},
+];
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html
new file mode 100644
index 00000000..cd7e0fa7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html
@@ -0,0 +1,7 @@
+<nz-tabset [nzSelectedIndex]="selectedIndex" (nzSelectChange)="handleTabChange($event)" class="slicing">
+  <nz-tab [nzTitle]="'i18nTextDefine_cloudLeasedLine' | translate">
+    <app-cloud-leased-line
+      *ngIf="selectedIndex === 0"
+    ></app-cloud-leased-line>
+  </nz-tab>
+</nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts
new file mode 100644
index 00000000..2d6f59d2
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts
@@ -0,0 +1,21 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+
+@Component({
+  selector: 'app-intent-based-services',
+  templateUrl: './intent-based-services.component.html',
+  styleUrls: ['./intent-based-services.component.less'],
+  animations: [slideToRight]
+})
+export class IntentBasedServicesComponent implements OnInit {
+
+  @HostBinding('@routerAnimate') routerAnimateState;
+  selectedIndex:number = 0;
+  constructor() { }
+
+  ngOnInit() {
+  }
+  handleTabChange($event): void {
+    this.selectedIndex = $event.index;
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html
new file mode 100644
index 00000000..2ad1cea2
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html
@@ -0,0 +1,42 @@
+<nz-modal
+  [(nzVisible)]="samrtCloudLeasedLineShowFlag"
+  nzTitle="Create Cloud Leased Line"
+  (nzOnCancel)="handleCancel(true)"
+  (nzOnOk)="handleOk()"
+  nzWidth="450px"
+  nzHeight="600px"
+>
+  <div class="subnet_params_container">
+    <nz-radio-group [(ngModel)]="radioValue">
+      <label nz-radio nzValue="text">Text Input</label>
+      <label nz-radio nzValue="audio">Audio Input</label>
+    </nz-radio-group>
+    <form nz-form *ngIf='radioValue === "text"' class='text-form-class'>
+      <nz-form-item>
+        <nz-form-control [nzSpan]="24">
+          <textarea [id]="communicationMessage" nz-tooltip
+            [ngClass]="{'error-input-border':validateRulesShow[0] === true}" nz-input
+            placeholder="Please input communicationMessage" [nzAutosize]="{ minRows: 6, maxRows: 6 }"
+            [(ngModel)]="communicationMessage" name="communicationMessage"
+            (blur)="this.Util.validator('communicationMessage','communicationMessage',communicationMessage,0,rulesText,validateRulesShow)">
+          </textarea>
+          <nz-form-explain *ngIf="validateRulesShow[0]" class="validateRules">{{rulesText[0]}}
+          </nz-form-explain>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+    <div *ngIf='radioValue === "audio"' class="audio_class">
+      <div class="recode_class">
+        <span>Sound Recording : </span>
+        <i *ngIf='!isPlay' class="anticon anticon-play-circle-o audioBtn" (click)="startAudio()"></i>
+        <i *ngIf='isPlay' class="anticon anticon-pause-circle-o audioBtn" (click)="stopAudio()"></i>
+        
+      </div>
+      <div class="play_class">
+        <span>Audition : </span>
+        <button nz-button nzType="default" [disabled]='isDisable' (click)="playAudio()">Click To Play</button>
+        <audio class="audio-node" id="audio_id" autoplay></audio>
+      </div>
+    </div>
+  </div>
+</nz-modal>
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less
new file mode 100644
index 00000000..50d3af28
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less
@@ -0,0 +1,53 @@
+.subnet_params_container{
+  padding-left: 3%;
+  .subnet_params_area{
+    margin-right: 5px;
+  }
+  .ant-btn-icon-only{
+    padding: 0 5px !important;
+  }
+  .subnet_params_button{
+    margin-top: 7px;
+    margin-left: 10px;
+  }
+  .subnet_params_icon{
+    font-size: 14px;
+  }
+  .audio_class{
+    height: 130px;
+    .recode_class{
+      margin-top: 30px;
+      position: relative;
+      span{
+        font-size: 17px;
+      }
+      .audioBtn{
+        font-size: 20px;
+        position: absolute;
+        top: 5px;
+        left: 142px;
+      }
+      .anticon-pause-circle-o{
+        color: red;
+      }
+    }
+    .play_class{
+      font-size: 17px;
+      margin-top: 20px;
+      button {
+        margin-left: 2px;
+      }
+    }
+  }
+}
+.ant-form-item {
+  margin-top: 20px;
+  margin-bottom: -5px;
+}
+
+.validateRules{
+  color: red;
+}
+.error-input-border{
+  border-color: red!important;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts
new file mode 100644
index 00000000..ffdd130f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+  let component: InputBusinessOrderComponent;
+  let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputBusinessOrderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputBusinessOrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts
new file mode 100644
index 00000000..014a1c4c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts
@@ -0,0 +1,90 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { intentBaseService } from '../../../../core/services/intentBase.service';
+import { Recorder } from '../../../../shared/utils/recorder';
+import { Util } from '../../../../shared/utils/utils';
+
+@Component({
+  selector: 'app-smart-cloud-leased-modal',
+  templateUrl: './smart-cloud-leased-modal.component.html',
+  styleUrls: ['./smart-cloud-leased-modal.component.less']
+})
+export class SmartCloudLeasedModalComponent implements OnInit {
+
+  constructor(
+    private Util: Util,
+    private Recorder: Recorder,
+    private myhttp: intentBaseService,
+    private msg: NzMessageService
+  ) {}
+  
+  @Input() samrtCloudLeasedLineShowFlag: boolean;
+  @Output() resolveEmitter = new EventEmitter();
+
+  communicationMessage: String = "";
+  validateRulesShow: any[] = [];
+  rulesText: any[] = [];
+  radioValue: String = 'text';
+  isPlay: boolean = false;
+  clickRepeat: boolean = false;
+  isDisable: boolean = true;
+  
+  ngOnInit() {
+    this.validateRulesShow = [];
+    this.rulesText = [];
+    this.communicationMessage = '';
+  }
+
+  ngOnChange() {}
+
+  handleCancel(flag): void {
+    this.samrtCloudLeasedLineShowFlag = false;
+    this.communicationMessage = "";
+    this.resolveEmitter.emit({ "cancel": flag });
+  }
+
+  handleOk(): void {
+    if (this.radioValue === 'text') {
+      this.submitFormMessage();
+      return;
+    }
+    
+  }
+
+  submitFormAudio() {
+    this.handleCancel(false);
+  }
+
+  submitFormMessage(): void {
+    let params = {
+      "title": "predict",
+      "text": this.communicationMessage
+    };
+    this.myhttp.intentInstancePredict(params).subscribe(
+      (response) => {
+        console.log(response);
+        this.handleCancel(false);
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  startAudio(): void {
+    this.isPlay = true;
+    this.isDisable = true;
+    this.Recorder.beforeStartRecord();
+  }
+
+  stopAudio(): void {
+    this.isPlay = false;
+    this.isDisable = false;
+    this.Recorder.stopRecord();
+  }
+
+  playAudio(): void {
+    let audio = document.querySelector('audio');
+    audio["src"] = this.Recorder.playRecord();
+  }
+}