summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/intent-based-services
diff options
context:
space:
mode:
authorHe Keguang <hekeguang@chinamobile.com>2021-09-16 07:29:40 +0000
committerGerrit Code Review <gerrit@onap.org>2021-09-16 07:29:40 +0000
commitddf7473db8cdd6a526e23b2ec32412a2bf4275c2 (patch)
tree0427b63350a2ae203324afd972d6587ea1ca0727 /usecaseui-portal/src/app/views/services/intent-based-services
parent06d98cb853ae5d47d5cbe3d0a1a585194de5aaf9 (diff)
parentc437d5360c75c1af5417c3681235a0f8015a9a85 (diff)
Merge "feat: add intent based service"
Diffstat (limited to 'usecaseui-portal/src/app/views/services/intent-based-services')
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html86
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less40
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts105
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html99
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less41
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts132
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/constants.ts49
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html7
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less0
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts21
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html42
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less53
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts90
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();
+ }
+}