From fe0373c48edc239b3c69a923be17d1d4dc34143f Mon Sep 17 00:00:00 2001 From: liuwh7 Date: Mon, 8 Mar 2021 18:34:19 +0800 Subject: feat:commit UUI front end code Change-Id: I4cf28e3b9e6f3ea44b52f028f5dfd70fbf650853 Signed-off-by: liuwh7 Issue-ID: USECASEUI-525 --- .../onboard-vnf-vm/onboard-vnf-vm.component.html | 245 ++++++++++++--------- .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 118 +++++++++- .../business-order/business-order.component.ts | 26 ++- ...csmf-slicing-business-management.component.html | 4 +- .../csmf-slicing-business-management.component.ts | 24 +- .../input-business-order.component.html | 38 ++++ .../input-business-order.component.less | 50 +++++ .../input-business-order.component.spec.ts | 25 +++ .../input-business-order.component.ts | 101 +++++++++ 9 files changed, 504 insertions(+), 127 deletions(-) create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts (limited to 'usecaseui-portal/src/app/views') 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 c48d68f9..34e78e60 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 @@ -16,108 +16,151 @@ - +
- -
-
- -

- -

-

{{"i18nTextDefine_Click_CSAR_File" | translate}}

-

- - -
-
-
-
{{"i18nTextDefine_Uploaded_files" | translate}}
-
{{"i18nTextDefine_Nofileuploading" | translate}}
-
- -
{{file.name}}
-
- -
-
- {{"i18nTextDefine_File_upload_completed" | translate}} - {{"i18nTextDefine_File_upload_failed" | translate}} -
-
- - -
-
-
-
- - -
- - - - {{"i18nTextDefine_NO" | translate}} - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_Version" | translate}} - {{"i18nTextDefine_OnboardingState" | translate}} - {{"i18nTextDefine_OperationalState" | translate}} - {{"i18nTextDefine_UsageState" | translate}} - {{"i18nTextDefine_Operationbutton" | translate}} - - - - - {{i+1}} - {{item.nsdName || item.name }} - {{item.nsdVersion || item.version}} - {{item.nsdOnboardingState ? item.nsdOnboardingState : status}} - {{item.nsdOperationalState}} - {{item.nsdUsageState}} - - - - - - - - - {{i+1}} - {{item.vnfProductName || item.name }} - {{item.vnfdVersion || item.version}} - {{item.onboardingState}} - {{item.operationalState}} - {{item.usageState}} - - - - - - - - - {{i+1}} - {{item.pnfdName}} - {{item.pnfdVersion}} - {{item.pnfdOnboardingState}} - {{item.pnfdUsageState}} - - - - - - - + +
+
+ +

+ +

+

{{"i18nTextDefine_Click_CSAR_File" | translate}}

+

+ + +
+
+
+
{{"i18nTextDefine_Uploaded_files" | translate}}
+
{{"i18nTextDefine_Nofileuploading" | translate}}
+
+ +
{{file.name}}
+
+ +
+
+ {{"i18nTextDefine_File_upload_completed" | translate}} + {{"i18nTextDefine_File_upload_failed" | translate}} +
+
+ + +
+
+
+
+ + +
+ + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Version" | translate}} + {{"i18nTextDefine_OnboardingState" | translate}} + {{"i18nTextDefine_OperationalState" | translate}} + {{"i18nTextDefine_UsageState" | translate}} + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Size" | translate}} + {{"i18nTextDefine_CreateTime" | translate}} + {{"i18nTextDefine_Status" | translate}} + {{"i18nTextDefine_Operation" | translate}} + + + + + {{i+1}} + {{item.nsdName || item.name }} + {{item.nsdVersion || item.version}} + {{item.nsdOnboardingState ? item.nsdOnboardingState : status}} + {{item.nsdOperationalState}} + {{item.nsdUsageState}} + + + + + + + + + {{i+1}} + {{item.vnfProductName || item.name }} + {{item.vnfdVersion || item.version}} + {{item.onboardingState}} + {{item.operationalState}} + {{item.usageState}} + + + + + + + + + {{i+1}} + {{item.pnfdName}} + {{item.pnfdVersion}} + {{item.pnfdOnboardingState}} + {{item.pnfdUsageState}} + + + + + + + + {{i+1}} + {{item.modelName}} + {{item.size}} + {{item.createTime}} + {{item.active ? 'Active' : 'Inactive'}} + + + + + + + +
\ 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 98f40637..0a25f2b1 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 @@ -31,7 +31,7 @@ export class OnboardVnfVmComponent implements OnInit { @ViewChild('notification') notification: any; // upload - tabs: string[] = ['NS', 'VNF', 'PNF']; + tabs: string[] = ['NS', 'VNF', 'PNF', 'NLP Model Reource']; currentTab: string = 'NS' fileList: UploadFile[] = []; uploading: boolean = false; @@ -43,6 +43,7 @@ export class OnboardVnfVmComponent implements OnInit { nsTableData: any[]; vnfTableData: any[]; pnfTableData: any[]; + modelTableData: any[]; status: string = "Onboard Available"; pageIndex: number = 1; pageSize: number = 10; @@ -55,7 +56,8 @@ export class OnboardVnfVmComponent implements OnInit { url = { ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', - pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' + pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content', + model: '/api/usecaseui-server/v1/intent/uploadModel' }; file: { @@ -94,6 +96,9 @@ export class OnboardVnfVmComponent implements OnInit { case 'PNF': this.getTablePnfData() break + case 'NLP Model Reource': + this.getTableModelData(); + break } } @@ -113,8 +118,10 @@ export class OnboardVnfVmComponent implements OnInit { API = 'createNetworkServiceData'; } else if (this.currentTab === 'VNF') { API = 'createVnfData'; - } else { + } else if (this.currentTab === 'PNF') { API = 'createPnfData'; + } else { + return false; } this.myhttp.getCreatensData(API, this.requestBody)//on-line .subscribe((data) => { @@ -128,8 +135,58 @@ export class OnboardVnfVmComponent implements OnInit { // Drag and drop and click the upload button onClick(): void { this.display = 'none'; - let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : 'pnf') - this.handleUpload(this.url[tab].replace("*_*", this.infoId)); + 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); + } + + handleUploadModel(url: string): void { + const formData = new FormData(); + // tslint:disable-next-line:no-any + this.fileList.forEach((file: any) => { + formData.set('file', file); + }); + this.uploading = true; + this.file = { + name: this.fileList[0].name, + uid: this.fileList[0].uid, + progress: 0, + status: true, + success: 0 + }; + let requery = (file) => { + file.progress += 3; + setTimeout(() => { + if (file.progress < 100) { + requery(file) + } + }, 100) + }; + requery(this.file); + const req = new HttpRequest('POST', url, formData, { + reportProgress: true, + withCredentials: true + }); + //Upload pre-empty array + this.fileList = []; + this.http.request(req) + .pipe(filter(e => e instanceof HttpResponse)) + .subscribe( + (event: {}) => { + this.file.progress = 100; + this.file.status = false; + this.uploading = false; + this.msg.success('upload successfully.'); + this.getTableModelData(); + }, + err => { + this.file.progress = 100; + this.file.status = false; + this.file.success = 1; + this.uploading = false; + this.msg.error('upload failed.'); + } + ); } handleUpload(url: string): void { @@ -244,6 +301,22 @@ export class OnboardVnfVmComponent implements OnInit { }) } + // Get Model list + getTableModelData() { + this.isSpinning = true; + this.myhttp.getOnboardTableModelData() + .subscribe((data) => { + data.forEach(element => { + element['size'] = `${element['size']}K`; + }) + this.modelTableData = data; + this.isSpinning = false; //loading hide + }, (err) => { + console.error(err); + this.isSpinning = false; + }) + } + // confirm showConfirm(requestBody: object, id: string): void { let API = this.currentTab === 'NS' ? 'getNsonboard' : 'getVnfonboard'; @@ -333,17 +406,20 @@ export class OnboardVnfVmComponent implements OnInit { API = 'deleteNsIdData'; } else if (this.currentTab === 'VNF') { API = 'deleteVnfIdData'; - } else { + } else if (this.currentTab === 'PNF') { API = 'deletePnfIdData'; + } else { + API = 'deleteModelIdData'; } this.myhttp[API](pkgid) .subscribe((data) => { resolve() - if(data.status === 'FAILED'){ - this.notification.notificationFailed(this.currentTab, 'delete', pkgid); - }else { - this.notification.notificationSuccess(this.currentTab, 'delete', pkgid); - } + let tipTitle = this.currentTab === 'NLP Model Reource' ? 'MODELREOURCE' : this.currentTab + if(data.status === 'FAILED'){ + this.notification.notificationFailed(tipTitle, 'delete', pkgid); + }else { + this.notification.notificationSuccess(tipTitle, 'delete', pkgid); + } //refresh list after successful deletion switch (this.currentTab) { case 'NS': @@ -355,10 +431,30 @@ export class OnboardVnfVmComponent implements OnInit { case 'PNF': this.getTablePnfData(); break + case 'NLP Model Reource': + this.getTableModelData(); + break } }, (err) => { console.log(err); this.notification.notificationFailed(this.currentTab, 'delete', pkgid); }) } + + // 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) => { + if(data.status === 'FAILED'){ + this.msg.success('Actived Failed'); + return; + } + this.msg.success('Actived Successfully'); + this.getTableModelData(); + }, (err) => { + console.error(err); + }); + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts index 2418c904..693d6487 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -19,17 +19,26 @@ export class BusinessOrderComponent implements OnInit { ngOnInit() {} ngOnChanges() { - this.AreaFormatting(); + let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; + if (this.modelParams && this.showModel) { + this.slicing_order_info = {...this.modelParams}; + if (this.slicing_order_info.coverageArea) { + areaList = []; + areaList.push(this.slicing_order_info.coverageArea.split(" ").join(";")); + } + } + this.AreaFormatting(areaList); } - detailFn(flag){ + detailFn(flag){ COMMUNICATION_FORM_ITEMS.forEach((item, index) => { - if(item.key=='coverageAreaNumber'){ - item["coverflag"] = flag == true ? false:true - } + if(item.key=='coverageAreaNumber'){ + item["coverflag"] = flag == true ? false:true + } }) } - @Input() showModel: boolean; + @Input() showModel: boolean; + @Input() modelParams: any; @Output() cancel = new EventEmitter(); comunicationFormItems = COMMUNICATION_FORM_ITEMS; slicing_order_info = { @@ -47,9 +56,8 @@ export class BusinessOrderComponent implements OnInit { validateRulesShow: any[] = []; rulesText: any[] = []; areaLevel: number = 4; - masktext: string = MASKTEXT ; - AreaFormatting(): void { - let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; + masktext: string = MASKTEXT ; + AreaFormatting(areaList): void { this.areaList = areaList.map((item: any) => { let arr = item.split(";"); item = arr.map((it, index) => { diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index 6b43a8af..f229d7cf 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -8,6 +8,7 @@ +
- + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts index a0a96b3f..6eb5e936 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts @@ -47,7 +47,9 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { statusOptions: any[] = BUSINESS_STATUS; progressingTimer: any[] = []; terminateStart: any[] = []; - businessOrderShow: boolean = false; + businessOrderShow: boolean = false; + inputBusinessOrderShow: boolean = false; + orderForm: any; getCSMFBusinessList(): void { this.loading = true; // this.listOfData = []; //solve the problem of blank screen after each operation @@ -232,10 +234,22 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { } OrderModelShow(): void { - this.businessOrderShow = true; + this.orderForm = null; + this.businessOrderShow = true; } orderModelClose($event: any): void { - this.businessOrderShow = $event; - this.getCSMFBusinessList(); - } + this.businessOrderShow = $event; + this.getCSMFBusinessList(); + } + inputOrderModelShow(): void { + this.inputBusinessOrderShow = true; + } + inputOrderModelClose($event: any): void { + this.inputBusinessOrderShow = false; + if ($event.cancel) { + return; + } + this.orderForm = $event.param; + this.businessOrderShow = true; + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html new file mode 100644 index 00000000..a448f3e0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html @@ -0,0 +1,38 @@ + + +
+ + + + +
+ + + + {{rulesText[0]}} + + + +
+
+
+ Sound Recording: + + + +
+
+ Audition: + + +
+
+
+ + diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less new file mode 100644 index 00000000..025518f4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less @@ -0,0 +1,50 @@ +.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: 26px; + } + .audioBtn{ + font-size: 27px; + position: absolute; + top: 10px; + left: 217px; + } + .anticon-pause-circle-o{ + color: red; + } + } + .play_class{ + font-size: 26px; + margin-top: 20px; + } + } +} +.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/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.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/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts new file mode 100644 index 00000000..3196bbba --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts @@ -0,0 +1,101 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Util } from '../../../../../shared/utils/utils'; +import { onboardService } from '../../../../../core/services/onboard.service'; +import { Recorder } from '../../../../../shared/utils/recorder'; + +@Component({ + selector: 'app-input-business-order', + templateUrl: './input-business-order.component.html', + styleUrls: ['./input-business-order.component.less'] +}) +export class InputBusinessOrderComponent implements OnInit { + + constructor(private Util: Util, private Recorder: Recorder, private myhttp: onboardService) { } + + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + isSpinning: boolean = false; + communicationMessage: String = ""; + validateRulesShow: any[] = []; + rulesText: any[] = []; + radioValue: String = 'text'; + isPlay: boolean = false; + clickRepeat: boolean = false; + + ngOnInit() { + this.validateRulesShow = []; + this.rulesText = []; + this.communicationMessage = ''; + } + + ngOnChange() { + } + + handleCancel(): void { + this.showModel = false; + this.communicationMessage = ""; + this.modalOpreation.emit({ "cancel": true }); + } + + handleOk(): void { + if (this.clickRepeat) { + return; + } + this.clickRepeat = true; + if (this.radioValue === "text") { + this.submitFormMessage(); + return; + } + this.clickRepeat = false; + this.communicationMessage = ""; + this.showModel = false; + let defaultParams = { + coverageArea: "Beijing Beijing Haiding Wanshoulu", + expDataRateDL: "1000", + expDataRateUL: "1000", + latency: "10", + maxNumberofUEs: "10", + name: "exclusive slicing service", + resourceSharingLevel: "shared", + uEMobilityLevel: "stationary" + } + this.modalOpreation.emit({ "cancel": false, "param": defaultParams }); + } + submitFormMessage(): void { + this.Util.validator("communicationMessage", "communicationMessage", this.communicationMessage, 0, this.rulesText, this.validateRulesShow); + if (this.validateRulesShow.indexOf(true) > -1) { + this.clickRepeat = false; + return + } + let params = { +     "title": "predict", +     "text": this.communicationMessage + }; + this.myhttp["analysisInputText"](params) + .subscribe((data) => { + this.clickRepeat = false; + if (data === 0) { + return; + } + let orderForm = { ...data }; + this.communicationMessage = ""; + this.showModel = false; + this.modalOpreation.emit({ "cancel": false, "param": orderForm }); + }, (err) => { + this.clickRepeat = false; + console.log(err); + }) + } + startAudio(): void { + this.isPlay = true; + this.Recorder.beforeStartRecord(); + } + stopAudio(): void { + this.isPlay = false; + this.Recorder.stopRecord(); + } + playAudio(): void { + let audio = document.querySelector('audio'); + audio["src"] = this.Recorder.playRecord(); + } +} -- cgit 1.2.3-korg