diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
23 files changed, 472 insertions, 741 deletions
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css deleted file mode 100644 index 4e80750c..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ /dev/null @@ -1,67 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; -} -.list nz-table tbody td span.onboarding { - font-size: 12px; - color: #147dc2; -} -.list nz-table tbody td span.onboarded { - font-size: 14px; - color: #147dc2; -} -.list nz-table tbody td span.updating { - font-size: 12px; - color: blue; -} -.list nz-table tbody td span.deleting { - font-size: 12px; - color: red; -} -.list nz-table tbody td span.invalid { - font-size: 14px; - color: purple; -} -.list nz-table tbody td i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; -} -.list nz-table tbody td i.anticon:hover { - color: #147dc2; -} -.list nz-table tbody td .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; -} -.list nz-table tbody td .fileIcon{ - display: none; -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html deleted file mode 100644 index c48d68f9..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ /dev/null @@ -1,123 +0,0 @@ -<!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. ---> - -<!-- tab --> -<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <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> -</div> -<app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less deleted file mode 100644 index f877e1ca..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ /dev/null @@ -1,138 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -th{ - background-color: rgba(241,243,244,.9) !important; -} -.list { - padding: 20px; - .listUploadContainer{ - display: flex; - align-items: flex-start; - width: 100%; - height: 30%; - margin-bottom: 1%; - .listupload { - position: relative; - width: 22%; - margin-left: 13%; - .upload{ - position: absolute; - left: 50%; - bottom: -48px; - transform: translateX(-50%); - color: #FFFFFF; - font-size: 13px; - background-color: #3E9BFF; - font-family: ArialMT; - } - } - .listlin { - width: 1%; - margin-left: 10%; - height: 177px; - margin-bottom: 30px; - border-right: 2px solid #EEEEEE; - } - .listfile { - width: 43%; - height: 100%; - margin-left: 10%; - .listFileTitle{ - height: 15%; - padding-bottom: 15px; - color: rgba(66,84,143,1); - font-family: ArialMT; - } - .nouploadfile{ - height: 80%; - width: 100%; - text-align: center; - font-size: 22px; - margin: 5% 0 10px; - } - .listfilebgc { - display: flex; - justify-content: space-around; - align-items: center; - width:100%; - height: 80%; - padding: 5px; - background-color: #fff; - border-radius: 2px; - color: #42548F; - .icon{ - width: 15px; - } - :nth-child(3){ - width: 50%; - } - :nth-child(4){ - width: 5%; - height:100%; - .success{ - color:#7BC7F3!important; - } - .fail{ - color:#fb5c5c!important; - } - } - .color { - color:rgba(66,84,143,1); - span{ - color:rgba(66,84,143,0.7); - } - .progress{ - color:rgba(66,84,143,0.7); - } - } - } - - } - - } - .listContainer{ - height: 69%; - .mask { - top: 0; - left: 0; - position: fixed; - width: 100%; - height: 100%; - opacity: 0.1; - background: black; - z-index: 1049; - } - } - nz-table { - tbody { - td { - i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; - &:hover{ - color: #147dc2; - } - } - .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; - } - } - } - } -} diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts deleted file mode 100644 index 07c8b959..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { TranslateModule } from '@ngx-translate/core'; -import { HttpClientModule } from '@angular/common/http'; -import { NzMessageService, NzModalService } from 'ng-zorro-antd'; - -import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; -import { onboardService } from '../../../core/services/onboard.service'; - -describe('OnboardVnfVmComponent', () => { - let component: OnboardVnfVmComponent; - let fixture: ComponentFixture<OnboardVnfVmComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - NO_ERRORS_SCHEMA - ], - imports: [TranslateModule, HttpClientModule], - declarations: [ OnboardVnfVmComponent ], - providers: [onboardService, NzMessageService, NzModalService] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(OnboardVnfVmComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts deleted file mode 100644 index 3d312c5c..00000000 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ /dev/null @@ -1,360 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core'; -import { onboardService } from '../../../core/services/onboard.service'; -import { slideToRight } from '../../../shared/utils/animates'; -import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; -import { filter } from 'rxjs/operators'; - -@Component({ - selector: 'app-onboard-vnf-vm', - templateUrl: './onboard-vnf-vm.component.html', - styleUrls: ['./onboard-vnf-vm.component.less'], - animations: [slideToRight] -}) -export class OnboardVnfVmComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - @ViewChild('notification') notification: any; - - // upload - tabs: string[] = ['NS', 'VNF', 'PNF']; - currentTab: string = 'NS' - fileList: UploadFile[] = []; - uploading:boolean = false; - infoId: string; - display: string = 'block'; - - // table - isSpinning: boolean = false; - nsTableData: any[]; - vnfTableData: any[]; - pnfTableData: any[]; - status: string = "Onboard Available"; - pageIndex: number = 1; - pageSize: number = 10; - - // update or delete - isUpdate: boolean = false; - jobId: string; - - //url - 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' - }; - - file: { - name: string, - uid: string, - progress: number, - status: boolean, - success: number - }; - - constructor( - private myhttp: onboardService, - private http: HttpClient, - private msg: NzMessageService, - private modalService: NzModalService - ) { } - - //default Call ns data by default - ngOnInit() { - this.getTableData(); - } - - // Handling tab switching request data - handleTabChange(tab: string): void { - this.currentTab = tab; - this.fileList = []; - this.display = 'block'; - delete this.file; - switch (tab) { - case 'NS': - this.getTableData(); - break - case 'VNF': - this.getTableVnfData() - break - case 'PNF': - this.getTablePnfData() - break - } - } - - //before put create--Drag and drop files to the page before uploading - requestBody = { - "userDefinedData": { - "additionalProp1": "", - "additionalProp2": "", - "additionalProp3": "" - } - } - - beforeUpload = (file: UploadFile): boolean => { - this.fileList.splice(0,1,file); - let API: string; - if(this.currentTab === 'NS'){ - API = 'createNetworkServiceData'; - }else if(this.currentTab === 'VNF'){ - API = 'createVnfData'; - }else { - API = 'createPnfData'; - } - this.myhttp.getCreatensData(API, this.requestBody)//on-line - .subscribe((data) => { - this.infoId = data["id"]; - }, (err) => { - console.log(err); - }) - return false; - } - - // 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)); - } - - handleUpload(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('PUT', 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.currentTab === 'NS' ? this.getTableData() : (this.currentTab === 'VNF' ? this.getTableVnfData() : this.getTablePnfData()); - }, - err => { - this.file.progress = 100; - this.file.status = false; - this.file.success = 1; - this.uploading = false; - this.msg.error('upload failed.'); - } - ); - } - - // Get the NS list - getTableData(): void{ - this.isSpinning = true; - //ns vfc lists - this.myhttp.getOnboardTableData() - .subscribe((data) => { - this.nsTableData = data; - //ns sdc list - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - let nsData = data; - // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); - let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); - this.nsTableData = this.nsTableData.concat(sameData); - }, (err) => { - console.error(err); - this.isSpinning = false; - }) - }, (err) => { - console.error(err); - this.isSpinning = false; - }) - } - - // Get the vnf list - getTableVnfData(): void{ - this.isSpinning = true; - //vnf vfc lists - this.myhttp.getOnboardTableVnfData() - .subscribe((data) => { - this.vnfTableData = data; - //vnf sdc lists - this.myhttp.getSDC_VNFTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - let vnfData = data; - // this.VNFTableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); - let sameData = vnfData.filter((vnfsdc) => { return !this.vnfTableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); - this.vnfTableData = this.vnfTableData.concat(sameData); - }, (err) => { - console.error(err); - this.isSpinning = false; - }) - }, (err) => { - console.error(err); - this.isSpinning = false; - }) - } - - // Get pnf list - getTablePnfData() { - this.isSpinning = true; - this.myhttp.getOnboardTablePnfData() - .subscribe((data) => { - this.pnfTableData = 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'; - this.modalService.confirm({ - nzTitle: '<p>Are you sure you want to do this?</p>', - nzOnOk: () => { - this.myhttp[API](requestBody) - .subscribe((data) => { - if (data.status == "success") { - if(this.currentTab === 'NS'){ - this.isUpdate = false; - this.notification.notificationSuccess(this.currentTab, "OnboardingState", id); - this.getTableData(); - }else{ - this.jobId = data.jobId; - this.queryProgress(this.jobId, id); - this.getTableVnfData(); - } - } else { - this.isUpdate = false; - this.notification.notificationFailed(this.currentTab, "OnboardingState", id); - return false - } - }, (err) => { - console.log(err); - }) - } - }) - } - - - // ns onboard Upload button - updataService(id: string) { - this.isUpdate = true; - let requestBody = { "csarId": id }; - this.showConfirm(requestBody, id) - } - - //Progress Progress inquiry - queryProgress(jobId: string, id: string): any{ - let mypromise = new Promise((res) => { - this.myhttp.getProgress(jobId, 0) - .subscribe((data) => { - if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { - this.isUpdate = true; - setTimeout(() => { - this.queryProgress(this.jobId, id); - }, 10000) - return false - } - if (data.responseDescriptor.progress > 100) { - this.isUpdate = false; - this.notification.notificationFailed(this.currentTab, 'OnboardingState', id); - }else if (data.responseDescriptor.progress < 100) { - this.isUpdate = true; - setTimeout(() => { - this.queryProgress(this.jobId, id); - }, 5000) - } else { - res(data); - this.isUpdate = false; - this.notification.notificationSuccess(this.currentTab, 'OnboardingState', id); - } - return false - }) - }) - return mypromise; - } - - /* delete button */ - showDeleteConfirm(pkgid: string): void { - this.modalService.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'Do you Want to delete these items?', - nzOkText: 'Yes', - nzCancelText: 'No', - nzOnOk: () => new Promise((resolve) => { - this.deleteService(pkgid, resolve); - }).catch(() => console.log('Oops errors!')) - }); - } - - //delete nsItem - deleteService(pkgid, resolve) { - let API: string; - if(this.currentTab === 'NS'){ - API = 'deleteNsIdData'; - }else if(this.currentTab === 'VNF'){ - API = 'deleteVnfIdData'; - }else{ - API = 'deletePnfIdData'; - } - this.myhttp[API](pkgid) - .subscribe((data) => { - this.notification.notificationSuccess(this.currentTab, 'OnboardingState', pkgid); - resolve() - //refresh list after successful deletion - switch(this.currentTab){ - case 'NS': - this.getTableData(); - break - case 'VNF': - this.getTableVnfData(); - break - case 'PNF': - this.getTablePnfData(); - break - } - }, (err) => { - console.log(err); - this.notification.notificationFailed(this.currentTab, 'OnboardingState', pkgid); - }) - } -} diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts index e5e94c94..9057502c 100644 --- a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts +++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts @@ -1,14 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { FormsModule } from '@angular/forms'; import { DeleteModelComponent } from './delete-model.component'; -describe('DeleteModelComponent', () => { +fdescribe('DeleteModelComponent', () => { let component: DeleteModelComponent; let fixture: ComponentFixture<DeleteModelComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DeleteModelComponent ] + declarations: [ DeleteModelComponent ], + imports: [ TranslateModule.forRoot(), NgZorroAntdModule.forRoot(), FormsModule ], + providers: [ { provide: NZ_I18N, useValue: en_US } ] }) .compileComponents(); })); diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts index f9bf9a9c..5ce0d108 100644 --- a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts @@ -1,25 +1,25 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ - selector: 'app-delete-model', - templateUrl: './delete-model.component.html', - styleUrls: ['./delete-model.component.less'] + selector: 'app-delete-model', + templateUrl: './delete-model.component.html', + styleUrls: ['./delete-model.component.less'] }) export class DeleteModelComponent implements OnInit { - @Input()deleteModalVisible: boolean; - @Input()thisService; - @Input()terminationType; - @Input()loadingAnimateShow; - @Input()templateDeleteSuccessFaild; - @Input()gracefulTerminationTimeout; + @Input() deleteModalVisible: boolean; + @Input() thisService; + @Input() terminationType; + @Input() loadingAnimateShow; + @Input() templateDeleteSuccessFaild; + @Input() gracefulTerminationTimeout; - @Output() cancel = new EventEmitter<boolean>(); - @Output() deleteModalOK = new EventEmitter<any>(); + @Output() cancel = new EventEmitter<boolean>(); + @Output() deleteModalOK = new EventEmitter<any>(); - constructor() { } + constructor() { } - ngOnInit() { - } + ngOnInit() { + } deleteOk() { this.deleteModalVisible = false; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html new file mode 100644 index 00000000..59401e02 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -0,0 +1,8 @@ +<nz-tabset> + <nz-tab nzTitle="Slicing Task Management"> + <app-slicing-task-management></app-slicing-task-management> + </nz-tab> + <nz-tab nzTitle="Slicing Resource Management"> + <app-slicing-resource-management></app-slicing-resource-management> + </nz-tab> +</nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts new file mode 100644 index 00000000..25fbf515 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingManagementComponent } from './slicing-management.component'; + +describe('SlicingManagementComponent', () => { + let component: SlicingManagementComponent; + let fixture: ComponentFixture<SlicingManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts new file mode 100644 index 00000000..ae2133de --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-management', + templateUrl: './slicing-management.component.html', + styleUrls: ['./slicing-management.component.less'] +}) +export class SlicingManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html new file mode 100644 index 00000000..0408552d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html @@ -0,0 +1,3 @@ +<p> + slicing-resource-management works! +</p> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts new file mode 100644 index 00000000..6a22984b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingResourceManagementComponent } from './slicing-resource-management.component'; + +describe('SlicingResourceManagementComponent', () => { + let component: SlicingResourceManagementComponent; + let fixture: ComponentFixture<SlicingResourceManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingResourceManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingResourceManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts new file mode 100644 index 00000000..38dc48c8 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-resource-management', + templateUrl: './slicing-resource-management.component.html', + styleUrls: ['./slicing-resource-management.component.less'] +}) +export class SlicingResourceManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html new file mode 100644 index 00000000..6a5abe88 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html @@ -0,0 +1,37 @@ +<div> + <div nz-row> + <div nz-col nzSpan="6"> + <span>Status：</span> + <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue"> + <nz-option nzLabel="Jack" nzValue="jack"></nz-option> + <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option> + <nz-option nzLabel="Tom" nzValue="tom"></nz-option> + </nz-select> + </div> + </div> + <div> + <nz-table #basicTable [nzData]="listOfData"> + <thead> + <tr> + <th>Name</th> + <th>Age</th> + <th>Status</th> + <th>Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let data of basicTable.data"> + <td>{{ data.name }}</td> + <td>{{ data.age }}</td> + <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td> + <td> + <a (click)="showdetail(data)">Show Detail</a> + </td> + </tr> + </tbody> + </nz-table> + </div> + <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData" + (cancel)="showDetail=$event"> + </app-slicing-task-model> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less new file mode 100644 index 00000000..1de685d6 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less @@ -0,0 +1,3 @@ +nz-select { + width: 200px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts new file mode 100644 index 00000000..a2631a98 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingTaskManagementComponent } from './slicing-task-management.component'; + +describe('SlicingTaskManagementComponent', () => { + let component: SlicingTaskManagementComponent; + let fixture: ComponentFixture<SlicingTaskManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingTaskManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingTaskManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts new file mode 100644 index 00000000..ad29c5ed --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slicing-task-management', + templateUrl: './slicing-task-management.component.html', + styleUrls: ['./slicing-task-management.component.less'] +}) +export class SlicingTaskManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + showDetail: boolean = false; + selectedValue = null; + detailData: object = {}; + moduleTitle: string = ""; + listOfData = [ + { + key: '1', + name: 'John Brown', + age: 32, + status: 0 + }, + { + key: '2', + name: 'Jim Green', + age: 42, + status: 0 + }, + { + key: '3', + name: 'Joe Black', + age: 32, + status: 1 + } + ]; + showdetail(data: any) { + console.log(data, this.showDetail) + this.detailData = data; + this.showDetail = true; + this.moduleTitle = data.status === 0 ? "Check Configuration" : "View Progress"; + } +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html new file mode 100644 index 00000000..f864dc92 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html @@ -0,0 +1,149 @@ +<nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()"> + <nz-list class="taskmodel_list" [nzDataSource]="checkDetail" nzBordered [nzHeader]="'配置审核详情：'" [nzFooter]="null" + [nzRenderItem]="checkItem"> + <ng-template #checkItem let-check> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="10"> + <span>Task ID： {{ check.id }}</span> + </div> + <div nz-col nzSpan="8"> + <span>Task Name： {{ check.name }}</span> + </div> + <div nz-col nzSpan="6"> + <span>S-NSSAI：{{ check.snssai }}</span> + </div> + </nz-list-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="10"> + <span>Arrived Time： {{ check.arrivedtime }}</span> + </div> + <div nz-col nzSpan="8"> + <span>Status： {{ check.status }}</span> + </div> + </nz-list-item> + </ng-template> + </nz-list> + + <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息：'" + [nzFooter]="null" [nzRenderItem]="businessItem"> + <ng-template #businessItem let-item> + <nz-list-item> + <span class="ant-typography">Name：</span> + {{ item.name }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">S-NSSAI： </span> + {{ item.snssai }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">Time： </span> + {{ item.expiretime }} + </nz-list-item> + <nz-list-item> + <span class="ant-typography">Area： </span> + {{ item. area }} + </nz-list-item> + </ng-template> + </nz-list> + + <nz-list class="taskmodel_list" [nzDataSource]="NSTinfo" nzBordered [nzHeader]="'匹配NST信息：'" [nzFooter]="null" + [nzRenderItem]="taskItem"> + <ng-template #taskItem let-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="12"> + <span>NST ID： {{ item.id }}</span> + </div> + <div nz-col nzSpan="12"> + <span>NST Name： {{ item.name }}</span> + </div> + </nz-list-item> + </ng-template> + </nz-list> + + + <div> + <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null"> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <div nz-col nzSpan="12"> + 切片实例 ID： + <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> + <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片实例名称：{{selectedServiceName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetService()"> + <i nz-icon class="anticon anticon-plus"></i> + </button> + </div> + </nz-list-item> + <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> + <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p> + <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域："> + <div nz-row [nzGutter]="8"> + <div nz-col nzSpan="12"> + 切片子网实例 ID： + <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> + <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon + class="anticon anticon-plus"></i></button> + <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting" + nzTheme="outline"></i></button> + </div> + </div> + </nz-card> + <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域："> + <div nz-row [nzGutter]="8"> + <div nz-col nzSpan="12"> + 切片子网实例 ID： + <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> + <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon + class="anticon anticon-plus"></i></button> + <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting" + nzTheme="outline"></i></button> + </div> + </div> + </nz-card> + <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域："> + + <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle"> + <div nz-col nzSpan="12"> + 切片子网实例 ID： + <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> + <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + </nz-select> + </div> + <div nz-col nzSpan="8"> + 切片子网实例名称：{{selectedServiceName}} + </div> + <div nz-col nzSpan="4"> + <button nz-button nzType="primary" (click)="resetService()"> + <i nz-icon class="anticon anticon-plus"></i> + </button> + <button nz-button nzType="primary"> + <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i> + </button> + </div> + </div> + </nz-card> + </nz-list-item> + </nz-list> + </div> + +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less new file mode 100644 index 00000000..aad9a554 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less @@ -0,0 +1,15 @@ +nz-select { + width: 70%; +} + +.taskmodel_list { + margin-bottom: 20px; + + .listitem_subtitle { + font-size: 14px; + color: rgba(0, 0, 0, 0.85); + margin-bottom: 16px; + font-weight: 500; + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts new file mode 100644 index 00000000..a6c02728 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SlicingTaskModelComponent } from './slicing-task-model.component'; + +describe('SlicingTaskModelComponent', () => { + let component: SlicingTaskModelComponent; + let fixture: ComponentFixture<SlicingTaskModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SlicingTaskModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SlicingTaskModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts new file mode 100644 index 00000000..2abe8d44 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-slicing-task-model', + templateUrl: './slicing-task-model.component.html', + styleUrls: ['./slicing-task-model.component.less'] +}) +export class SlicingTaskModelComponent implements OnInit { + @Input() showDetail: boolean; + @Input() moduleTitle: string; + @Input() modelData: object; + @Output() cancel = new EventEmitter<boolean>(); + + constructor() { } + checkDetail: [{}] = [{ + id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177", + name: "5G Slice eMMB", + snssai: "1-010101", + arrivedtime: "2019-10-29 10:00", + status: "Checking" + }]; //配置审核详情 + businessRequirement: [{}] = [{ + name: "5G Slice eMMB", + snssai: "1-010101", + expiretime: "2019-10-29 10:00", + area: "Beijing", + }];//业务需求信息 + NSTinfo: [{}] = [{ + id: "46da8cf8-0878-48ac-bea3-f2200959411a", + name: "eMBB instancel" + }];//匹配NST信息 + selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a'; + selectedServiceName = ''; + serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c']; + serviceData: {} = { + "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela", + "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb", + "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc", + }; + + ngOnInit() { + this.serviceIdChange(this.selectedServiceId) + } + + serviceIdChange(value: string): void { + this.selectedServiceName = this.serviceData[value]; + console.log(this.selectedServiceName, "=====") + } + resetService() { + this.selectedServiceId = ""; + this.serviceIdChange(this.selectedServiceId); + } + + handleCancel() { + this.showDetail = false; + this.cancel.emit(this.showDetail); + } + handleOk() { + this.handleCancel(); + } +} |