From c437d5360c75c1af5417c3681235a0f8015a9a85 Mon Sep 17 00:00:00 2001 From: liuwh7 Date: Wed, 15 Sep 2021 09:57:09 +0800 Subject: feat: add intent based service Signed-off-by: liuwh7 Change-Id: If63eb5e61f01751771ad090728f33214077edd6f Issue-ID: USECASEUI-605 --- .../cloud-leased-line-modal.component.html | 86 ++++++++++++++ .../cloud-leased-line-modal.component.less | 40 +++++++ .../cloud-leased-line-modal.component.ts | 105 ++++++++++++++++ .../cloud-leased-line.component.html | 99 ++++++++++++++++ .../cloud-leased-line.component.less | 41 +++++++ .../cloud-leased-line.component.ts | 132 +++++++++++++++++++++ .../services/intent-based-services/constants.ts | 49 ++++++++ .../intent-based-services.component.html | 7 ++ .../intent-based-services.component.less | 0 .../intent-based-services.component.ts | 21 ++++ .../smart-cloud-leased-modal.component.html | 42 +++++++ .../smart-cloud-leased-modal.component.less | 53 +++++++++ .../smart-cloud-leased-modal.component.spec.ts | 25 ++++ .../smart-cloud-leased-modal.component.ts | 90 ++++++++++++++ 14 files changed, 790 insertions(+) create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/constants.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts (limited to 'usecaseui-portal/src/app/views/services/intent-based-services') 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 @@ + +
+
+ + + {{ item.title }} + + +
{{cloud_leased_line_info[item.key]}}
+ + + + + + + +
+
+ {{item.rateName}}: + +
+
+ {{item.nodeName}}: + + + + +
+
+ + +
+
+ + + + + \ 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(); + 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 @@ +
+
+ + +
+
+ + + + No + Communication Service Name + Intent Instance ID + Status + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + + {{i+1}} + {{ data.name }} + {{ data.instanceId }} + {{ statusObj[data.status] }} + + + + + + + + + + +
+ + +
\ 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 @@ + + + + + \ 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 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 @@ + +
+ + + + +
+ + + + {{rulesText[0]}} + + + +
+
+
+ Sound Recording : + + + +
+
+ Audition : + + +
+
+
+ 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; + + 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(); + } +} -- cgit 1.2.3-korg