diff options
16 files changed, 695 insertions, 135 deletions
@@ -37,3 +37,6 @@ holmes/ # build usecase-ui/ + +#settings +.vscode/ diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index be1f08a3..16f8bc43 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -71,6 +71,7 @@ import { } from "@angular/common"; // common function util import { Util } from "./shared/utils/utils"; +import { Recorder} from './shared/utils/recorder'; // common function http import { Http } from "./shared/utils/http"; // Custom service @@ -110,6 +111,7 @@ import { NsiModelComponent } from "./views/services/slicing-management/slicing-r import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component"; import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component"; import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component"; +import { InputBusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component'; import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component"; import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component"; import { ManageServiceComponent } from "./views/services/sotn-management/manage-service/manage-service.component"; @@ -122,7 +124,8 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select { provide: LocationStrategy, useClass: HashLocationStrategy }, { provide: NZ_I18N, useValue: en_US }, Util, - Http, + Http, + Recorder, ServiceListService, HomesService, onboardService, @@ -180,7 +183,8 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select NsiModelComponent, NssiModelComponent, CsmfSlicingBusinessManagementComponent, - BusinessOrderComponent, + BusinessOrderComponent, + InputBusinessOrderComponent, MdonsCreationComponent, MdonsDetailComponent, DisableControlDirective, diff --git a/usecaseui-portal/src/app/core/services/onboard.service.ts b/usecaseui-portal/src/app/core/services/onboard.service.ts index e7b1bfc6..20d9c244 100644 --- a/usecaseui-portal/src/app/core/services/onboard.service.ts +++ b/usecaseui-portal/src/app/core/services/onboard.service.ts @@ -27,12 +27,14 @@ export class onboardService { onboardTableData: this.baseUrl + "/uui-lcm/ns-packages", onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages", onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages", + onboardDataModel: this.baseUrl + "/intent/listModel", sdc_nsListData: this.baseUrl + "/uui-lcm/sdc-ns-packages", // GET sdc_vnfListData: this.baseUrl + "/uui-lcm/sdc-vf-packages", // GET onboardNs: this.baseUrl + "/uui-lcm/ns-packages", //POST - + analysisInput: this.baseUrl + "/intent/predict", //POST onboardVNF: this.baseUrl + "/uui-lcm/vf-packages", //POST deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage", + deleteModelpack: this.baseUrl + "/intent/deleteModel", // Delete Vnf vfc package deleteVnfPack: this.baseUrl + "/uui-lcm/deleteVnfPackage", // Delete Pnf package @@ -64,6 +66,17 @@ export class onboardService { getOnboardTablePnfData() { return this.http.get<any>(this.url.onboardDataPNF); } + // MODEL Data + getOnboardTableModelData() { + return this.http.get<any>(this.url.onboardDataModel); + } + // MODEL Data + getOnboardTableActiveModelData(url) { + return this.http.get<any>(url); + } + analysisInputText(requestBody) { + return this.http.post<any>(this.url["analysisInput"], requestBody); + } //onboard sdc ns getNsonboard(requestBody) { return this.http.post<any>(this.url["onboardNs"], requestBody); @@ -87,7 +100,11 @@ export class onboardService { let params = new HttpParams({ fromObject: {"pnfdInfoId":paramsObj }}); return this.http.delete<any>(this.url.deletePnfPack , {params}); } - + // Delete model package + deleteModelIdData(paramsObj) { + let params = new HttpParams({ fromObject: { "modelId": paramsObj }}); + return this.http.delete<any>(this.url.deleteModelpack,{params}); + } // The following APIs function are not optimizable------------------- //create--Get the id after dragging the file before uploading diff --git a/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json index fcdc39f0..dbb4637e 100644 --- a/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json +++ b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json @@ -4,7 +4,7 @@ "result_message": "5Gslicingorderqueryresult." }, "result_body": { - "record_number": 11, + "record_number": 2, "connection_links_list": [{ "linkId": "233errt4545", "anInfo": { diff --git a/usecaseui-portal/src/app/shared/utils/recorder.ts b/usecaseui-portal/src/app/shared/utils/recorder.ts new file mode 100644 index 00000000..65cf9136 --- /dev/null +++ b/usecaseui-portal/src/app/shared/utils/recorder.ts @@ -0,0 +1,149 @@ +export class Recorder { + mediaStreams: any; + audioInput: any; + recorder: any; + leftDataList: any[] = []; + rightDataList: any[] = []; + + throwError(message) { + alert(message); + throw new function () { this.toString = function () { return message; } }; + } + + // start sound recording + beforeStartRecord() { + let getUserMedia = window.navigator.mediaDevices.getUserMedia || null; + if (!getUserMedia) { + this.throwError('The current browser does not support recording.'); + return; + } + window.navigator.mediaDevices.getUserMedia({ + audio: true + }).then(mediaStream => { + this.mediaStreams = mediaStream; + this.startRecord(); + }).catch(err => { + + }) + } + + startRecord() { + // Clear data before recording again + let audioContext = new (window["AudioContext"] || window["webkitAudioContext"])(); + this.recorder = this.createJSNode(audioContext); + this.recorder.connect(audioContext.destination); + this.recorder.onaudioprocess = (event) => { + // console.log(event.inputBuffer); + let audioBuffer = event.inputBuffer; + let leftChannelData = audioBuffer.getChannelData(0), + rightChannelData = audioBuffer.getChannelData(1); + // console.log(leftChannelData, rightChannelData); + // need to clone data + this.leftDataList.push(leftChannelData.slice(0)); + this.rightDataList.push(rightChannelData.slice(0)); + } + this.audioInput = audioContext.createMediaStreamSource(this.mediaStreams); + } + + createJSNode(audioContext) { + const BUFFER_SIZE = 4096; + const INPUT_CHANNEL_COUNT = 2; + const OUTPUT_CHANNEL_COUNT = 2; + let creator = audioContext.createScriptProcessor || audioContext.createJavaScriptNode; + creator = creator.bind(audioContext); + return creator(BUFFER_SIZE, + INPUT_CHANNEL_COUNT, OUTPUT_CHANNEL_COUNT); + } + + // stop sound recording + stopRecord() { + this.mediaStreams.getAudioTracks()[0].stop(); + this.recorder.disconnect(); + this.audioInput.disconnect(); + } + + // Play recording related functional components + mergeArray(list) { + let length = list.length * list[0].length; + let data = new Float32Array(length), + offset = 0; + for (let i = 0; i < list.length; i++) { + data.set(list[i], offset); + offset += list[i].length; + } + return data; + } + + playRecord() { + let leftData = this.mergeArray(this.leftDataList); + let rightData = this.mergeArray(this.rightDataList); + let allData = this.interleaveLeftAndRight(leftData, rightData); + let blob = this.createWavFile(allData); + let _URL = window["URL"] || window["webkitURL"]; + return _URL.createObjectURL(blob); + } + + // Cross merge left and right channel data + interleaveLeftAndRight(left, right) { + let totalLength = left.length + right.length; + let data = new Float32Array(totalLength); + for (let i = 0; i < left.length; i++) { + let k = i * 2; + data[k] = left[i]; + data[k + 1] = right[i]; + } + return data; + } + + createWavFile(audioData) { + const WAV_HEAD_SIZE = 44; + let buffer = new ArrayBuffer(audioData.length * 2 + WAV_HEAD_SIZE), + // need to use a view to manipulate the buffer + view = new DataView(buffer); + // Write wav header information + // Resource exchange file identifier + this.writeUTFBytes(view, 0, 'RIFF'); + // The total number of bytes from the beginning of the next address to the end of the file is - 8 + view.setUint32(4, 44 + audioData.length * 2, true); + // Wav file flag + this.writeUTFBytes(view, 8, 'WAVE'); + // Waveform format flag + this.writeUTFBytes(view, 12, 'fmt '); + // Filter bytes, generally 0x10 = 16 + view.setUint32(16, 16, true); + // sample format (raw) + view.setUint16(20, 1, true); + // stereo (2 channels) + view.setUint16(22, 2, true); + // sample rate + view.setUint32(24, 44100, true); + // byte rate (sample rate * block align) + view.setUint32(28, 44100 * 2, true); + // block align (channel count * bytes per sample) + view.setUint16(32, 2 * 2, true); + // bits per sample + view.setUint16(34, 16, true); + // data sub-chunk + // data chunk identifier + this.writeUTFBytes(view, 36, 'data'); + // data chunk length + view.setUint32(40, audioData.length * 2, true); + + // Write PCM data + let length = audioData.length; + let index = 44; + let volume = 1; + for (let i = 0; i < length; i++) { + view.setInt16(index, audioData[i] * (0x7FFF * volume), true); + index += 2; + } + return new Blob([new Uint8Array(buffer)], { type: 'audio/wav' }); + } + + writeUTFBytes(view, offset, string) { + var lng = string.length; + for (var i = 0; i < lng; i++) { + view.setUint8(offset + i, string.charCodeAt(i)); + } + } +}
\ No newline at end of file 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 @@ <!-- tab --> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab> </nz-tabset> <div class="list"> - <!-- upload --> - <div class="listUploadContainer"> - <div class="listupload"> - <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <p class="ant-upload-drag-icon"> - <i nz-icon type="inbox" class="anticon anticon-inbox"></i> - </p> - <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p> - <p class="ant-upload-hint"></p> - </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload"> - {{ uploading ? 'Uploading' : 'Start Upload' }} - </button> - </div> - <div class="listlin"></div> - <div class="listfile"> - <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> - <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div> - <div class="listfilebgc" *ngIf="file"> - <i class="anticon anticon-link icon"></i> - <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div> - <div class="color" *ngIf="file.status"> - <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress> - </div> - <div class="color" *ngIf="!file.status"> - <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> - <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> - </div> - <div *ngIf="!file.status"> - <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i> - <i class="anticon anticon-exclamation-circle fail" *ngIf="file.success === 1"></i> - </div> - </div> - </div> - </div> - <!-- table --> - <nz-spin [nzSpinning]="isSpinning" class="listContainer"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="currentTab === 'NS'? nsTableData: (currentTab === 'VNF'? vnfTableData : pnfTableData)" nzShowSizeChanger [nzFrontPagination]="true" - [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' nzSize="middle"> - <thead> - <tr class="theadColor"> - <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> - <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th> - <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> - <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> - <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th> - <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> - <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> - </tr> - </thead> - <tbody *ngIf="currentTab === 'NS'"> - <tr *ngFor="let item of nzTable.data;let i = index;"> - <td>{{i+1}}</td> - <td>{{item.nsdName || item.name }}</td> - <td>{{item.nsdVersion || item.version}}</td> - <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td> - <td>{{item.nsdOperationalState}}</td> - <td>{{item.nsdUsageState}}</td> - <td> - <i [ngClass]="{'cannotclick': isUpdate}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)" - *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)" - *ngIf="item.id"></i> - </td> - </tr> - </tbody> - <tbody *ngIf="currentTab === 'VNF'"> - <tr *ngFor="let item of nzTable.data;let i = index;"> - <td>{{i+1}}</td> - <td>{{item.vnfProductName || item.name }}</td> - <td>{{item.vnfdVersion || item.version}}</td> - <td>{{item.onboardingState}}</td> - <td>{{item.operationalState}}</td> - <td>{{item.usageState}}</td> - <td> - <i [ngClass]="{'cannotclick': isUpdate}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)" - *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)" - *ngIf="item.id"></i> - </td> - </tr> - </tbody> - <tbody *ngIf="currentTab === 'PNF'" > - <tr *ngFor="let item of nzTable.data; let i = index;"> - <td>{{i+1}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <td> - <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"></i> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> + <!-- upload --> + <div class="listUploadContainer"> + <div class="listupload"> + <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p> + <p class="ant-upload-hint"></p> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + </div> + <div class="listlin"></div> + <div class="listfile"> + <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div> + <div class="listfilebgc" *ngIf="file"> + <i class="anticon anticon-link icon"></i> + <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div> + <div class="color" *ngIf="file.status"> + <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!file.status"> + <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!file.status"> + <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i> + <i class="anticon anticon-exclamation-circle fail" *ngIf="file.success === 1"></i> + </div> + </div> + </div> + </div> + <!-- table --> + <nz-spin [nzSpinning]="isSpinning" class="listContainer"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table + #nzTable + [nzData]="currentTab === 'NS' + ? nsTableData + : (currentTab === 'VNF' + ? vnfTableData + : (currentTab === 'PNF' + ? pnfTableData + : modelTableData + ) + )" + nzShowSizeChanger + [nzFrontPagination]="true" + [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + nzSize="middle" + > + <thead *ngIf="currentTab !== 'NLP Model Reource'"> + <tr class="theadColor"> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> + </tr> + </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="20%"> {{"i18nTextDefine_Operation" | translate}} </th> + </tr> + </thead> + <tbody *ngIf="currentTab === 'NS'"> + <tr *ngFor="let item of nzTable.data;let i = index;"> + <td>{{i+1}}</td> + <td>{{item.nsdName || item.name }}</td> + <td>{{item.nsdVersion || item.version}}</td> + <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <i [ngClass]="{'cannotclick': isUpdate}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)" + *ngIf="item.id"></i> + </td> + </tr> + </tbody> + <tbody *ngIf="currentTab === 'VNF'"> + <tr *ngFor="let item of nzTable.data;let i = index;"> + <td>{{i+1}}</td> + <td>{{item.vnfProductName || item.name }}</td> + <td>{{item.vnfdVersion || item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.operationalState}}</td> + <td>{{item.usageState}}</td> + <td> + <i [ngClass]="{'cannotclick': isUpdate}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)" + *ngIf="item.id"></i> + </td> + </tr> + </tbody> + <tbody *ngIf="currentTab === 'PNF'" > + <tr *ngFor="let item of nzTable.data; let i = index;"> + <td>{{i+1}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"></i> + </td> + </tr> + </tbody> + <tbody *ngIf="currentTab === 'NLP Model Reource'"> + <tr *ngFor="let item of nzTable.data;let i = index;"> + <td>{{i+1}}</td> + <td>{{item.modelName}}</td> + <td>{{item.size}}</td> + <td>{{item.createTime}}</td> + <td>{{item.active ? 'Active' : 'Inactive'}}</td> + <td> + <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)"> + Delete + </button> + <button nz-button nzType="primary" class="buy-button" (click)="activedModelFile(item)"> + Actived + </button> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> </div> <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 98f40637..b9d74c19 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.error('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<boolean>(); 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 @@ </nz-select> </div> <button nz-button nzType="primary" class="buy-button" (click)="OrderModelShow()">Create</button> + <button nz-button nzType="primary" class="buy-button" (click)="inputOrderModelShow()">Smart Create</button> </div> <div class="slicing-resource-table-list"> <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger @@ -68,5 +69,6 @@ </tbody> </nz-table> </div> - <app-business-order [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order> + <app-input-business-order [showModel]="inputBusinessOrderShow" (modalOpreation)="inputOrderModelClose($event)"></app-input-business-order> + <app-business-order [modelParams]="orderForm" [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order> </div>
\ 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 @@ +<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning"> + <nz-modal [(nzVisible)]="showModel" nzTitle="Communication Service Message" (nzOnCancel)="handleCancel()" + (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 (click)="playAudio()">Click To Play</button> + <audio class="audio-node" id="audio_id" autoplay></audio> + </div> + </div> + </div> + </nz-modal> +</nz-spin> 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<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/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(); + } +} diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index eca33690..0c2f55bf 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -88,9 +88,13 @@ "i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功", "i18nTextDefine_InstanceUpdateFailed":"更新失败", "i18nTextDefine_Close":"关闭", - "i18nTextDefine_Templateparsingfailed": "模板解析失败" + "i18nTextDefine_Templateparsingfailed":"模板解析失败", "i18nTextDefine_domainService":"Domain Services", - + "i18nTextDefine_CreateTime":"上传时间", + "i18nTextDefine_Activated":"是否激活", + "i18nTextDefine_Operation":"操作", + "i18nTextDefine_Size": "大小", + "ccvpn-creation-component": "--:", "i18nTextDefine_InstanceCreation": "实例创建", "i18nTextDefine_InstanceTopology": "实例拓扑", @@ -115,6 +119,7 @@ "i18nTextDefine_NS": "NS", "i18nTextDefine_PNF": "PNF", "i18nTextDefine_VNF": "VNF", + "i18nTextDefine_MODELREOURCE": "NLP Model Reource", "i18nTextDefine_UsageState": "使用状态", "i18nTextDefine_Operationbutton": "操作按钮", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 7eb5ec60..427e4944 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -113,6 +113,7 @@ "i18nTextDefine_NS": "NS", "i18nTextDefine_PNF": "PNF", "i18nTextDefine_VNF": "VNF", + "i18nTextDefine_MODELREOURCE": "NLP Model Reource", "i18nTextDefine_UsageState": "Usage State", "i18nTextDefine_Operationbutton": "Operation button", @@ -170,5 +171,9 @@ "i18nTextDefine_NearEnd": "Near End", "i18nTextDefine_FarEnd": "Far End", "i18nTextDefine_ExternalNetworkMessage":"Note: Both the endpoints would be changed to ENNI.", - "i18nTextDefine_domainService":"Domain Services" + "i18nTextDefine_domainService":"Domain Services", + "i18nTextDefine_CreateTime": "Upload Time", + "i18nTextDefine_Activated": "Activated", + "i18nTextDefine_Operation": "Opreation", + "i18nTextDefine_Size":"Size" } |