diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/onboard-vnf-vm')
6 files changed, 244 insertions, 41 deletions
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html new file mode 100644 index 00000000..9e7f669b --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html @@ -0,0 +1,30 @@ +<nz-modal + [(nzVisible)]="isShowFlag" + nzTitle="NLP Model Type" + (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" + nzWidth="450px" + nzHeight="600px" +> + <div class="subnet_params_container"> + <form nz-form class='text-form-class'> + <nz-form-item> + <nz-form-label + [nzSpan]="7" + [nzFor]="nlpType" + > + Type + </nz-form-label> + <nz-form-control [nzSpan]="10"> + <nz-select + [name]="nlpType" + [(ngModel)]="nlpType" + > + <nz-option nzValue="nlp" nzLabel="nlp"></nz-option> + <nz-option nzValue="intent" nzLabel="intent"></nz-option> + </nz-select> + </nz-form-control> + </nz-form-item> + </form> + </div> +</nz-modal> diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less new file mode 100644 index 00000000..0cf44fad --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less @@ -0,0 +1,56 @@ +.subnet_params_container{ + padding-left: 3%; + .text-form-class{ + margin-bottom: 20px; + } + .subnet_params_area{ + margin-right: 5px; + } + .ant-btn-icon-only{ + padding: 0 5px !important; + } + .subnet_params_button{ + margin-top: 7px; + margin-left: 10px; + } + .subnet_params_icon{ + font-size: 14px; + } + .audio_class{ + height: 130px; + .recode_class{ + margin-top: 30px; + position: relative; + span{ + font-size: 17px; + } + .audioBtn{ + font-size: 20px; + position: absolute; + top: 5px; + left: 142px; + } + .anticon-pause-circle-o{ + color: red; + } + } + .play_class{ + font-size: 17px; + margin-top: 20px; + button { + margin-left: 2px; + } + } + } +} +.ant-form-item { + margin-top: 20px; + margin-bottom: -5px; +} + +.validateRules{ + color: red; +} +.error-input-border{ + border-color: red!important; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputBusinessOrderComponent } from './input-business-order.component'; + +describe('InputBusinessOrderComponent', () => { + let component: InputBusinessOrderComponent; + let fixture: ComponentFixture<InputBusinessOrderComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputBusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputBusinessOrderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts new file mode 100644 index 00000000..64b1973a --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Recorder } from '../../../shared/utils/recorder'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-nlp-upload-dialog', + templateUrl: './nlp-upload-dialog.component.html', + styleUrls: ['./nlp-upload-dialog.component.less'] +}) +export class NlpUploadDialogComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private msg: NzMessageService + ) { } + + @Input() isShowFlag: boolean; + @Output() returnNlpType = new EventEmitter(); + nlpType: String = "nlp"; + + ngOnInit() {} + + ngOnChange() {} + + handleCancel(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": true }); + } + + handleOk(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": false, nlpType: this.nlpType }); + } + +} diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html index 34e78e60..2c7b11a5 100644 --- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -89,11 +89,12 @@ </thead> <thead *ngIf="currentTab === 'NLP Model Reource'"> <tr class="theadColor"> - <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th> + <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Size" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_CreateTime" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Status" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Type" | translate}} </th> <th nzWidth="20%"> {{"i18nTextDefine_Operation" | translate}} </th> </tr> </thead> @@ -150,6 +151,7 @@ <td>{{item.size}}</td> <td>{{item.createTime}}</td> <td>{{item.active ? 'Active' : 'Inactive'}}</td> + <td>{{item.type || '--'}}</td> <td> <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)"> Delete @@ -163,4 +165,8 @@ </nz-table> </nz-spin> </div> +<app-nlp-upload-dialog + [isShowFlag]="nlpDialogFlag" + (returnNlpType)="receiveNlpType($event)" +></app-nlp-upload-dialog> <app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts index b9d74c19..ccdebc3b 100644 --- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -14,11 +14,11 @@ limitations under the License. */ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import { Component, OnInit, HostBinding, ViewChild } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd'; +import { filter } from 'rxjs/operators'; import { onboardService } from '../../core/services/onboard.service'; import { slideToRight } from '../../shared/utils/animates'; -import { NzMessageService, UploadFile, NzModalService } from 'ng-zorro-antd'; -import { filter } from 'rxjs/operators'; @Component({ selector: 'app-onboard-vnf-vm', @@ -38,6 +38,10 @@ export class OnboardVnfVmComponent implements OnInit { infoId: string; display: string = 'block'; + // nlp dialog + nlpDialogFlag: boolean = false; + nlpType: string = ''; + // table isSpinning: boolean = false; nsTableData: any[]; @@ -60,6 +64,20 @@ export class OnboardVnfVmComponent implements OnInit { model: '/api/usecaseui-server/v1/intent/uploadModel' }; + tabMap = { + NS: 'ns', + VNF: 'vnf', + PNF: 'pnf', + 'NLP Model Reource': 'model', + } + + currentTabApi = { + NS: 'createNetworkServiceData', + VNF: 'createVnfData', + PNF: 'createPnfData', + 'NLP Model Reource': '', + } + file: { name: string, uid: string, @@ -113,31 +131,51 @@ export class OnboardVnfVmComponent implements OnInit { beforeUpload = (file: UploadFile): boolean => { this.fileList.splice(0, 1, file); - let API: string; - if (this.currentTab === 'NS') { - API = 'createNetworkServiceData'; - } else if (this.currentTab === 'VNF') { - API = 'createVnfData'; - } else if (this.currentTab === 'PNF') { - API = 'createPnfData'; - } else { + let API: string = this.currentTabApi[this.currentTab]; + + if (!API) { return false; } - this.myhttp.getCreatensData(API, this.requestBody)//on-line + + this.myhttp.getCreatensData(API, this.requestBody) .subscribe((data) => { this.infoId = data["id"]; }, (err) => { console.log(err); - }) + }); + return false; } + onClick() { + if (this.currentTab === 'NLP Model Reource') { + this.nlpDialogFlag = true; + return; + } + this.startUploadFile(); + } + + receiveNlpType(data) { + this.nlpDialogFlag = false; + if (data.cancel) { + return; + } + this.nlpType = data.nlpType; + this.startUploadFile(); + } + // Drag and drop and click the upload button - onClick(): void { + startUploadFile(): void { this.display = 'none'; - let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : (this.currentTab === 'PNF' ? 'pnf' : 'model')); - let url = tab === "model" ? this.url[tab] : this.url[tab].replace("*_*", this.infoId); - tab === "model" ? this.handleUploadModel(url) : this.handleUpload(url); + let tab = this.tabMap[this.currentTab]; + let url; + if (tab === "model") { + url = this.url[tab]; + this.handleUploadModel(url); + return; + } + url = this.url[tab].replace("*_*", this.infoId); + this.handleUpload(url); } handleUploadModel(url: string): void { @@ -243,24 +281,36 @@ export class OnboardVnfVmComponent implements OnInit { this.isSpinning = true; //ns vfc lists this.myhttp.getOnboardTableData() - .subscribe((data) => { - this.nsTableData = data; - //ns sdc list - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - let nsData = data; - // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); - let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); - this.nsTableData = this.nsTableData.concat(sameData); - }, (err) => { - this.msg.error(err); - this.isSpinning = false; - }) - }, (err) => { - this.msg.error(err); - this.isSpinning = false; - }) + .subscribe( + (data) => { + this.nsTableData = data; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe( + (data) => { + this.isSpinning = false; //loading hide + if (!data) { + return; + } + let nsData = data; + let sameData = nsData.filter((nssdc) => { + return !this.nsTableData.find((nsvfc) => { + return nsvfc.id == nssdc.uuid + }) + }); + this.nsTableData = this.nsTableData.concat(sameData); + }, + (err) => { + this.msg.error(err); + this.isSpinning = false; + } + ) + }, + (err) => { + this.msg.error(err); + this.isSpinning = false; + } + ) } // Get the vnf list @@ -443,7 +493,6 @@ export class OnboardVnfVmComponent implements OnInit { // Actived Model Resource activedModelFile(data) { - console.log('actived model'); let url = `/api/usecaseui-server/v1/intent/activeModel?modelId=${data.id}`; this.myhttp.getOnboardTableActiveModelData(url) .subscribe((data) => { |