diff options
23 files changed, 954 insertions, 275 deletions
@@ -37,3 +37,6 @@ holmes/ # build usecase-ui/ + +#settings +.vscode/ diff --git a/docs/docs_intent_based_network.rst b/docs/docs_intent_based_network.rst new file mode 100644 index 00000000..760cdb1d --- /dev/null +++ b/docs/docs_intent_based_network.rst @@ -0,0 +1,79 @@ +.. contents:: + :depth: 3 +.. +.. _docs_intent_based_network: + + +Intent Based Network +============================= + +Overall Blueprint +----------------- +Intent-based network (IBN) is a self-driving network that uses decoupling +network control logic and closed-loop orchestration techniques to automate +application intents. An IBN is an intelligent network, which can automatically +convert, verify, deploy, configure, and optimize itself to achieve target +network state according to the intent of the operators, and can automatically +solve abnormal events to ensure the network reliability. + +REQ-453 Smart Operator Intent Translation in UUI based on IBN - R8 5G Slicing Support +In R8, the smart operator intent translation function is proposed to support +the 5G slicing selection of current E2E usecase in UUI. +The target architecture of the Intent-Based Network is divided into a Intent +orchestration layer (hereinafter referred to as the Intent layer), a control +layer and a network layer. + + +Abbreviations +------------- + ++---------------+--------------------------------------------+ +| Abbreviation | Meaning | ++===============+============================================+ +| IBN | Intent Based Network | ++---------------+--------------------------------------------+ + + + +Scope of Honolulu release +----------------------- +The scope for Honolulu developed in UUI includes GUI, UUI-server, and NLP. + +GUI +- Services +- 5G Slicing Management +- Package Management +- NLP Model resource + +Server +- Intent Management Module + +NLP Server +(new Micro-service) +Three NLP algorithms are considered to be applied in current solutions: +- BERT (Bidirectional Encoder Representations from Transformers)：developed by researchers at Google AI Language. It has caused a stir in the Machine Learning community by presenting state-of-the-art results in a wide variety of NLP tasks. BERT’s key technical innovation is applying the bidirectional training of Transformer, a popular attention model, to language modelling. + + + +Impacted Modules for Honolulu +--------------------------- + +U-UI +~~~~ +Target of R8: translate from the human inputs to the slice parameters based on NLP +in UUI, and then run the slices based on the current ONAP. + +A new page is required in the UUI that users can enter network requirements through +the natural language, which then sends the user input to the IBN component and displays +the response information to the user. This process can be repeated several times +until the dialog completes and a new Intent is formed in the IBN component. + + + +Functional Test Cases +--------------------- + + + +Operation Guidance +------------------ diff --git a/docs/platform/images/csmf-management.png b/docs/platform/images/csmf-management.png Binary files differindex 5d78f19c..fc24632d 100644 --- a/docs/platform/images/csmf-management.png +++ b/docs/platform/images/csmf-management.png diff --git a/docs/platform/installation/user-guide/uui-guide.rst b/docs/platform/installation/user-guide/uui-guide.rst index 2df95435..c1569e7a 100644 --- a/docs/platform/installation/user-guide/uui-guide.rst +++ b/docs/platform/installation/user-guide/uui-guide.rst @@ -68,7 +68,10 @@ https://wiki.onap.org/display/DW/UUI * 5G Slicing Management This module consists of two parts. -The first part is CSMF component which provides the functions of creating network slicing and displaying the created slicing. Also, customers can use this page to activate, deactivate and terminate the slcing. +The first part is CSMF component which provides the functions of creating network slicing and displaying the created slicing. Also, customers can use this page to activate, deactivate and terminate the slicing. +In Honolulu Release, the coverageArea number param is added. Users could input the grid numbers to specify the area where they want the slicing service to cover. For Coverage Area Number, please enter the rectangle grid numbers corresponding to the physical coverage areas on the sample image shown on GUI. + +Note: The sample image file is named as 'coverageAreaMap.png' and it is stored in the frontend project of usecase-ui: ``usecase-ui\usecaseui-portal\src\assets\images\coverageAreaMap.png``. If the map of a different region is required, you can replace the sample image with the same name in the frontend project. And you also need to re-release the frontend project docker container. |CSMF Management Page| 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/POST_intent_predict.json b/usecaseui-portal/src/app/mock/json/POST_intent_predict.json new file mode 100644 index 00000000..a0ccf863 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/POST_intent_predict.json @@ -0,0 +1,10 @@ +{ + "maxNumberofUEs": "10", + "latency": "10", + "name": "exclusive slicing service", + "uEMobilityLevel": "stationary", + "expDataRateUL": "1000", + "expDataRateDL": "1000", + "resourceSharingLevel": "non-shared", + "coverageArea": "Beijing Beijing Haiding Wanshoulu" +}
\ No newline at end of file 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/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js index 30c96b9d..8c59104a 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -105,9 +105,10 @@ module.exports = { "/DELETE_uui-lcm_deleteVnfPackage", "/DELETE/uui-lcm/deletePnfPackage?pnfdInfoId:id": "/DELETE_uui-lcm_deletePnfPackage", - "/POST/uui-lcm/ns-packages": "/POST_uui-lcm_ns-packages", + "/POST/uui-lcm/ns-packages": "/POST_uui-lcm_ns-packages", "/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages", - "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create", + "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create", + "/POST/intent/predict": "/POST_intent_predict", ///////<-------------slicing--------->///// "/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": 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 78d7195e..6409f008 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..586aa6fb --- /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 nz-button nzType="default" [disabled]='isDisable' (click)="playAudio()">Click To Play</button> + <audio class="audio-node" id="audio_id" autoplay></audio> + </div> + </div> + </div> + </nz-modal> +</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..50d3af28 --- /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,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/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..94bccfe5 --- /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,109 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +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, + private msg: NzMessageService + ) { } + + @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; + isDisable: boolean = true; + 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; + this.msg.error(`Error: Request failed with status code ${err.status}`); + }) + } + 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(); + } +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts index 5deb91b7..dd4c8126 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts @@ -1,66 +1,67 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {NzModalService, NzMessageService} from "ng-zorro-antd"; -import {SlicingTaskServices} from '.././../../../../../core/services/slicingTaskServices'; -import { SlicingBusinessModelComponent } from '../../slicing-business-management/slicing-business-model/slicing-business-model.component'; -import { NssiModelComponent } from '../../nssi-management/nssi-model/nssi-model.component'; +import { Component, Input, OnInit } from "@angular/core"; +import { NzModalService, NzMessageService } from "ng-zorro-antd"; +import { SlicingTaskServices } from ".././../../../../../core/services/slicingTaskServices"; +import { SlicingBusinessModelComponent } from "../../slicing-business-management/slicing-business-model/slicing-business-model.component"; +import { NssiModelComponent } from "../../nssi-management/nssi-model/nssi-model.component"; @Component({ - selector: 'app-nsi-model', - templateUrl: './nsi-model.component.html', - styleUrls: ['./nsi-model.component.less'] + selector: "app-nsi-model", + templateUrl: "./nsi-model.component.html", + styleUrls: ["./nsi-model.component.less"], }) export class NsiModelComponent implements OnInit { - - constructor( - private myhttp: SlicingTaskServices, - private modalService: NzModalService, - private message: NzMessageService - ) { - } - @Input() nsiId; - businessList: any[]; - nssiList: any[]; - isSpinning: boolean = true; - ngOnInit() { - this.getNsiDetail() - } - getNsiDetail() { - this.myhttp.getSlicingNsiDetail(this.nsiId).then(res => { - this.isSpinning = false; - const { result_body: {hosted_business_list,included_nssi_list} } = res; - this.businessList = hosted_business_list.map((item)=>{ - if(item.service_instance_id !==null){ - return item - } - }); - this.nssiList = included_nssi_list.map((item)=>{ - if(item.service_instance_id !==null){ - return item - } - }); - }) - } - showBusinessDetail(data){ - this.modalService.create({ - nzContent:SlicingBusinessModelComponent, - nzTitle:"Detail", - nzWidth:"70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams:{ - businessId:data.service_instance_id - } - }); - } - showNssiDetail(data){ - this.modalService.create({ - nzContent:NssiModelComponent, - nzTitle:"Detail", - nzWidth:"70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams:{ - nssiId:data.service_instance_id - } - }); - } + constructor( + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService + ) {} + @Input() nsiId; + businessList: any[]; + nssiList: any[]; + isSpinning: boolean = true; + ngOnInit() { + this.getNsiDetail(); + } + getNsiDetail() { + this.myhttp.getSlicingNsiDetail(this.nsiId).then((res) => { + this.isSpinning = false; + const { + result_body: { hosted_business_list, included_nssi_list }, + } = res; + this.businessList = hosted_business_list.map((item) => { + if (item.service_instance_id !== null) { + return item; + } + }); + this.nssiList = included_nssi_list.map((item) => { + if (item.service_instance_id !== null) { + return item; + } + }); + }); + } + showBusinessDetail(data) { + this.modalService.create({ + nzContent: SlicingBusinessModelComponent, + nzTitle: "Detail", + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + businessId: data.service_instance_id, + outerData: data, + }, + }); + } + showNssiDetail(data) { + this.modalService.create({ + nzContent: NssiModelComponent, + nzTitle: "Detail", + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + nssiId: data.service_instance_id, + }, + }); + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts index 5fe303b0..6e08f955 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts @@ -1,87 +1,101 @@ -import {Component, Input, OnInit,SimpleChanges} from '@angular/core'; -import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; -import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices"; -import {NzModalService, NzMessageService} from 'ng-zorro-antd'; -import {NssiModelComponent} from "../nssi-model/nssi-model.component"; +import { Component, Input, OnInit, SimpleChanges } from "@angular/core"; +import { BUSINESS_STATUS } from "../../../../../../../constants/constants"; +import { SlicingTaskServices } from "../../../../../../core/services/slicingTaskServices"; +import { NzModalService, NzMessageService } from "ng-zorro-antd"; +import { NssiModelComponent } from "../nssi-model/nssi-model.component"; @Component({ - selector: 'app-nssi-table', - templateUrl: './nssi-table.component.html', - styleUrls: ['./nssi-table.component.less'] + selector: "app-nssi-table", + templateUrl: "./nssi-table.component.html", + styleUrls: ["./nssi-table.component.less"], }) export class NssiTableComponent implements OnInit { + constructor( + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService + ) {} - constructor( - private myhttp: SlicingTaskServices, - private modalService: NzModalService, - private message: NzMessageService - ) { - } + @Input() currentTabName; - @Input() currentTabName; + ngOnChanges(changes: SimpleChanges) { + if ( + changes.currentTabName.currentValue === + "Slicing Subnet Instance Management" + ) { + this.getNssiList(); + } + } + ngOnInit() {} - ngOnChanges(changes: SimpleChanges) { - if (changes.currentTabName.currentValue === 'Slicing Subnet Instance Management') { - this.getNssiList() - } - } - ngOnInit() {} + selectedValue: string = BUSINESS_STATUS[0]; + listOfData: any[] = []; + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; + isSelect: boolean = false; + statusOptions: any[] = BUSINESS_STATUS; - selectedValue: string = BUSINESS_STATUS[0]; - listOfData: any[] = []; - pageIndex: number = 1; - pageSize: number = 10; - total: number = 0; - loading = false; - isSelect: boolean = false; - statusOptions: any[] = BUSINESS_STATUS; + getNssiList(): void { + this.loading = true; + this.isSelect = false; + this.listOfData = []; + let paramsObj = { + pageNo: this.pageIndex, + pageSize: this.pageSize, + }; + if (this.selectedValue !== BUSINESS_STATUS[0]) { + paramsObj[ + "instanceStatus" + ] = this.selectedValue.toLocaleLowerCase(); + this.isSelect = true; + } + let getSlicingNssiListFailedCallback = () => { + this.loading = false; + }; + this.myhttp + .getSlicingNssiList( + paramsObj, + this.isSelect, + getSlicingNssiListFailedCallback + ) + .then((res) => { + const { + result_body: { nssi_service_instances, record_number }, + } = res; + this.loading = false; + this.total = record_number; + this.loading = false; + if ( + nssi_service_instances !== null && + nssi_service_instances.length > 0 + ) { + this.listOfData = nssi_service_instances; + } + }); + } - getNssiList(): void { - this.loading = true; - this.isSelect = false; - this.listOfData = []; - let paramsObj = { - pageNo: this.pageIndex, - pageSize: this.pageSize - }; - if (this.selectedValue !== BUSINESS_STATUS[0]) { - paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); - this.isSelect = true; - } - let getSlicingNssiListFailedCallback = () => { - this.loading = false; - } - this.myhttp.getSlicingNssiList(paramsObj, this.isSelect, getSlicingNssiListFailedCallback).then(res => { - const { result_body: {nssi_service_instances, record_number} } = res; - this.loading = false; - this.total = record_number; - this.loading = false; - if (nssi_service_instances !== null && nssi_service_instances.length > 0) { - this.listOfData = nssi_service_instances; - } - }) - } + getListOfProcessingStatus() { + this.pageIndex = 1; + this.pageSize = 10; + this.getNssiList(); + } - getListOfProcessingStatus() { - this.pageIndex = 1; - this.pageSize = 10; - this.getNssiList(); - } + searchData(reset: boolean = false) { + this.getNssiList(); + } - searchData(reset: boolean = false) { - this.getNssiList(); - } - - showdetail(data) { - const nssiModal = this.modalService.create({ - nzTitle: "Detail", - nzContent: NssiModelComponent, - nzWidth: "70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams: { - nssiId: data.service_instance_id - } - }) - } + showdetail(data) { + const nssiModal = this.modalService.create({ + nzTitle: "Detail", + nzContent: NssiModelComponent, + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + nssiId: data.service_instance_id, + }, + }); + } } 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" } |
