Merge "feat: add intent based service"

14 files changed, 790 insertions, 0 deletions

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