diff options
22 files changed, 582 insertions, 83 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 48b125de..d46f9f5e 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -97,6 +97,7 @@ import { SlicingBusinessModelComponent } from './views/services/slicing-manageme import { NsiModelComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component'; 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'; @NgModule({ providers: [ @@ -158,7 +159,8 @@ import { CsmfSlicingBusinessManagementComponent } from './views/services/slicing SlicingBusinessModelComponent, NsiModelComponent, NssiModelComponent, - CsmfSlicingBusinessManagementComponent + CsmfSlicingBusinessManagementComponent, + BusinessOrderComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts index 7902f0d1..5a1e9110 100644 --- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -48,7 +48,12 @@ export class SlicingTaskServices { slicingNssiQueryOfStatus: this.baseUrl + "/resource/nssi/instanceStatus/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}",
slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details",
//csmf
- csmfSlicingBusinessList:"/api/usecaseui/csmf/5gSlicing/services/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",
+ csmfSlicingBusinessList:"/api/uui-slicing/csmf/5gSlicing/orders/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",
+ csmfActivate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/activate",
+ csmfDeactivate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/deactivate",
+ csmfTerminate:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}",
+ csmfGetProgress:"/api/usecaseui/csmf/5gSlicing/service/{serviceId}/progress",
+ csmfPurchase:"/api/uui-slicing/csmf/5gSlicing",
//monitor 5G
fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",
fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",
@@ -175,6 +180,28 @@ export class SlicingTaskServices { .replace("{pageSize}", paramsObj.pageSize);
return this.http.get<any>(url);
}
+ // change CSMF slicing business activate status
+ csmfChangeActivate(paramsObj, activate: boolean) {
+ let url = this.url.csmfActivate.replace("{serviceId}", paramsObj.serviceId);
+ if (!activate) {
+ url = this.url.csmfDeactivate.replace("{serviceId}", paramsObj.serviceId)
+ }
+ return this.http.put<any>(url, paramsObj);
+ }
+ // terminate CSMF slicing business
+ csmfTerminate(paramsObj) {
+ const url = this.url.csmfTerminate.replace('{serviceId}', paramsObj.serviceId);
+ return this.http.delete<any>(url);
+ }
+ // query CSMF slicing business progress
+ csmfSlicingProgress(paramsObj) {
+ let url = this.url.csmfGetProgress.replace("{serviceId}", paramsObj.serviceId);
+ return this.http.get<any>(url);
+ }
+ csmfSlicingPurchase(paramsObj){
+ let url = this.url.csmfPurchase;
+ return this.http.post<any>(url, paramsObj);
+ }
//monitor 5G
getFetchTraffic(service_list, time) {
diff --git a/usecaseui-portal/src/app/mock/json/csmfActivate.json b/usecaseui-portal/src/app/mock/json/csmfActivate.json new file mode 100644 index 00000000..7b9810a4 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/csmfActivate.json @@ -0,0 +1,9 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "Activate slicing service processing succeeded." + }, + "result_body": { + "operation_id": "3b74758c-4a23-4c44-88bf-e5ed3baa395f" + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json b/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json new file mode 100644 index 00000000..d9370a42 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/csmfSlicingProgress.json @@ -0,0 +1,11 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "Query operation process processing succeeded." + }, + "result_body": { + "operation_id": "3b74758c-4a23-4c44-88bf-e5ed3baa395f", + "operation_type": "activation", + "operation_progress": 66 + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/csmfTerminate.json b/usecaseui-portal/src/app/mock/json/csmfTerminate.json new file mode 100644 index 00000000..5c6d3e2a --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/csmfTerminate.json @@ -0,0 +1,9 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "Terminate slicing service processing succeeded." + }, + "result_body": { + "operation_id": "e227846c-daca-487a-9750-5d0ddb8a95d0" + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json index 4ec93450..15a0ee8a 100644 --- a/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json +++ b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json @@ -5,84 +5,84 @@ }, "result_body": { "record_number": 8, - "slicing_service_list": [ + "slicing_order_list": [ { - "service_id": "5G-777", - "service_name": "eMBB_e2e_Slice_Service_5GCustomer", + "order_id": "5G-777", + "order_name": "eMBB_e2e_Slice_Service_5GCustomer", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-010101", - "service_status": "activated", - "last_operation_id": "8401c767-4fe9-43c3-82b5-707c1aaf5caf", + "order_status": "activated", "last_operation_type": "activation", "last_operation_process": 100 }, { - "service_id": "8c681037-75c9-444c-a665-34a66372e13e", - "service_name": "test_0203", + "order_id": "8c681037-75c9-444c-a665-34a66372e13e", + "order_name": "test_0203", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-1370889D", - "service_status": "deactivated", - "last_operation_id": null, + "order_status": "deactivated", "last_operation_type": null, "last_operation_process": null }, { - "service_id": "dfa76a2f-6416-4070-9024-355d0d210234", - "service_name": "CSMFService", + "order_id": "dfa76a2f-6416-4070-9024-355d0d210234", + "order_name": "CSMFService", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-485C16B6", - "service_status": "deactivated", - "last_operation_id": "06258836-8152-43ad-9c8e-e2a1783b1996", + "order_status": "deactivated", "last_operation_type": "activation", "last_operation_process": 0 }, { - "service_id": "1e6a6a4b-8efb-4211-b583-b2e8567c5950", - "service_name": "CSMFService", + "order_id": "1e6a6a4b-8efb-4211-b583-b2e8567c5950", + "order_name": "CSMFService", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-6C572676", - "service_status": "deactivated", - "last_operation_id": null, + "order_status": "deactivated", "last_operation_type": null, "last_operation_process": null }, { - "service_id": "9941305e-311f-4a88-bd9e-431252a46337", - "service_name": "CSMFService", + "order_id": "9941305e-311f-4a88-bd9e-431252a46337", + "order_name": "CSMFService", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-D38E2F0", - "service_status": "deactivated", - "last_operation_id": null, + "order_status": "deactivated", "last_operation_type": null, "last_operation_process": null }, { - "service_id": "4876265d-e4bb-4240-bcda-7b4b00481e4a", - "service_name": "test_0205", + "order_id": "4876265d-e4bb-4240-bcda-7b4b00481e4a", + "order_name": "test_0205", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-6A345C48", - "service_status": "deactivated", - "last_operation_id": null, + "order_status": "deactivated", "last_operation_type": null, "last_operation_process": null }, { - "service_id": "6c52086a-e9b6-4f31-bc7a-7b34d66c69c0", - "service_name": "test_0204", + "order_id": "6c52086a-e9b6-4f31-bc7a-7b34d66c69c0", + "order_name": "test_0204", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-774F54FC", - "service_status": "deactivated", - "last_operation_id": null, + "order_status": "deactivated", "last_operation_type": null, "last_operation_process": null }, { - "service_id": "1cab507a-3422-46f8-8520-9b46c95b7f9d", - "service_name": "aaa", + "order_id": "1cab507a-3422-46f8-8520-9b46c95b7f9d", + "order_name": "aaa", + "order_creation_time":"1454171445000", "service_type": "embb", "service_snssai": "01-44AA4085", - "service_status": "deactivated", - "last_operation_id": "012c888a-a46f-4ebc-bcde-7f7c769769b7", + "order_status": "deactivated", "last_operation_type": "DELETE", "last_operation_process": 100 } diff --git a/usecaseui-portal/src/app/mock/json/csmf_slicing_purchase.json b/usecaseui-portal/src/app/mock/json/csmf_slicing_purchase.json new file mode 100644 index 00000000..1893f80d --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/csmf_slicing_purchase.json @@ -0,0 +1,10 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing order created normally." + }, + "result_body": { + "service_id": "service123456", + "operation_id": "operation123456" + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js index 420f017c..85cb6fdd 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -20,8 +20,8 @@ module.exports = ///////<-------------api proxy--------->///// "/usecaseui-server/v1/*": "/$1", "/usecaseui-server/v1/*?:param": "/$1", - "/usecaseui/csmf/*": "/$1", - "/usecaseui/csmf/*?:param": "/$1", + "/uui-slicing/csmf/*": "/$1", + "/uui-slicing/csmf/*?:param": "/$1", /////////////// //text interface @@ -120,7 +120,11 @@ module.exports = "/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list_activated", "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail", ///////<-------------CSMF slicing_business--------->///// - "/5gSlicing/services/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData", + "/5gSlicing/orders/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData", + "/POST/uui-slicing/csmf/5gSlicing": "/csmf_slicing_purchase", + "/PUT/usecaseui/csmf/5gSlicing/service/:serviceId/activate": "/csmfActivate", + "/DELETE/usecaseui/csmf/5gSlicing/service/:serviceId": "/csmfTerminate", + "/5gSlicing/service/:serviceId/progress": "/csmfSlicingProgress", ///////<-------------monitor 5G--------->///// "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData": "/fetchTrafficData", "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers": "/fetchOnlineusersData", diff --git a/usecaseui-portal/src/app/mock/server.js b/usecaseui-portal/src/app/mock/server.js index 3c49777d..63e6167c 100644 --- a/usecaseui-portal/src/app/mock/server.js +++ b/usecaseui-portal/src/app/mock/server.js @@ -20,7 +20,7 @@ const middlewares = jsonServer.defaults(); const customersRouters = require('./routes'); const baseUrl = "/usecaseui-server/v1"; const nsmfBaseUrl = "/uui-slicing/nsmf"; -const csmfBaseUrl = "/usecaseui/csmf"; +const csmfBaseUrl = "/uui-slicing/csmf"; // Set default middlewares (logger, static, cors and no-cache) server.use(middlewares); @@ -119,6 +119,21 @@ server.delete(`${nsmfBaseUrl}/*`, (req, res, next) => { req.url = '/DELETE'+req.url; next(); }) +server.put(`${csmfBaseUrl}/*`, (req, res, next) => { + req.method = 'GET'; + req.url = '/PUT'+req.url; + next(); +}) +server.post(`${csmfBaseUrl}/*`, (req, res, next) => { + req.method = 'GET'; + req.url = '/POST'+req.url; + next(); +}) +server.delete(`${csmfBaseUrl}/*`, (req, res, next) => { + req.method = 'GET'; + req.url = '/DELETE'+req.url; + next(); +}) server.listen(3002, () => { console.log('Mock Server is successfully running on port 3002 😁') diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html new file mode 100644 index 00000000..d4914dd1 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html @@ -0,0 +1,3 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" + nzWidth="900px"> +</nz-modal> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts new file mode 100644 index 00000000..1d7a756d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BusinessOrderComponent } from './business-order.component'; + +describe('BusinessOrderComponent', () => { + let component: BusinessOrderComponent; + let fixture: ComponentFixture<BusinessOrderComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BusinessOrderComponent); + 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/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 new file mode 100644 index 00000000..0647b76d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -0,0 +1,24 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants"; +@Component({ + selector: 'app-business-order', + templateUrl: './business-order.component.html', + styleUrls: ['./business-order.component.less'] +}) +export class BusinessOrderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + @Input() showModel: boolean; + @Output() cancel = new EventEmitter<boolean>(); + + handleCancel() { + this.showModel = false; + this.cancel.emit(this.showModel) + } + handleOk() { + console.log(1) + } +} 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 c3f2d631..818fc136 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 @@ -1,4 +1,4 @@ -<div class="slicing-resource-table slicing-resource_tab"> +<div> <div nz-row> <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> @@ -7,6 +7,7 @@ <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option> </nz-select> </div> + <button nz-button nzType="primary" class="buy-button" (click)="OrderModelShow()">Purchase</button> </div> <div class="slicing-resource-table-list"> <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger @@ -17,6 +18,7 @@ <th width=100>No</th> <th width=280>Service Instance Id</th> <th width=200>Service Instance Name</th> + <th width=200>Creation Time</th> <th width=110>Service Type</th> <th width=110>S-NSSAI</th> <th width=110>Status</th> @@ -27,37 +29,38 @@ <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> <tr> <td>{{i+1}}</td> - <td>{{ data.service_id }}</td> - <td>{{ data.service_name }}</td> + <td>{{ data.order_id }}</td> + <td>{{ data.order_name }}</td> + <td>{{ data.order_creation_time }}</td> <td>{{ data.service_type?data.service_type:'--' }}</td> <td>{{ data.service_snssai }}</td> <td> <span class="marginLeft10"> - <span *ngIf="data.last_operation_process && data.last_operation_process !== '100'"> - {{data.last_operation_process+'%'}} + <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'"> + {{data.last_operation_progress+'%'}} </span> <br> - {{data.service_status}} + {{data.order_status}} </span> <br> </td> <td> <div class="action-icon"> - <nz-switch [ngModel]="data.service_status==='activated'?true:false" - [nzDisabled]="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100'" + <nz-switch [ngModel]="data.order_status==='activated'?true:false" + [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'" (ngModelChange)="switchChange(data,i)"></nz-switch> <nz-progress - *ngIf="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && data.last_operation_type !== 'DELETE'" - [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active"> + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'" + [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"> </nz-progress> </div> <div class="action-icon"> - <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && (data.last_operation_type !== 'DELETE' || data.service_status==='activated')}" + <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.order_status==='activated')}" nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff" (click)="terminate(data)"></i> <nz-progress - *ngIf="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && terminateStart" - [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active"> + *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart" + [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active"> </nz-progress> </div> </td> @@ -66,4 +69,5 @@ </tbody> </nz-table> </div> + <app-business-order [showModel]="businessOrderShow" (cancel)="businessOrderShow=$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.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less index b813e966..f52f4ad2 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less @@ -25,6 +25,7 @@ i.anticon { color: #aaa; opacity: 0.6; } -.slicing-resource-table{ - margin: 0 0 0 60px!important; +.buy-button{ + float: right; + margin-right: 2%; }
\ 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 8b844f5f..76f0bcdf 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 @@ -1,48 +1,76 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {BUSINESS_STATUS} from "../../../../../constants/constants"; -import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; +import {SlicingTaskServices} from '.././../../../core/services/slicingTaskServices'; +import { NzModalService, NzMessageService } from 'ng-zorro-antd'; +import *as moment from 'moment'; @Component({ - selector: 'app-csmf-slicing-business-management', - templateUrl: './csmf-slicing-business-management.component.html', - styleUrls: ['./csmf-slicing-business-management.component.less'] + selector: 'app-csmf-slicing-business-management', + templateUrl: './csmf-slicing-business-management.component.html', + styleUrls: ['./csmf-slicing-business-management.component.less'] }) export class CsmfSlicingBusinessManagementComponent implements OnInit { constructor( - private myhttp: SlicingTaskServices + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService ) { } - ngOnInit() { - this.getCSMFBusinessList() - } + + ngOnInit() { + this.getCSMFBusinessList() + } + ngOnDestroy() { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; + } + 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; + // isSelect: boolean = false; + progressingTimer: any[] = []; terminateStart: boolean = false; - - getCSMFBusinessList(){ + businessOrderShow: boolean = false; + getCSMFBusinessList() { this.loading = true; + // this.isSelect = false; this.listOfData = []; let paramsObj = { - status:this.selectedValue, + status: this.selectedValue, pageNo: this.pageIndex, pageSize: this.pageSize }; + // if (this.selectedValue !== BUSINESS_STATUS[0]) { + // paramsObj["businessStatus"] = this.selectedValue; + // this.isSelect = true; + // } this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => { - const { result_header: { result_code }, result_body: { slicing_service_list, record_number } } = res; + const {result_header: {result_code}, result_body: {slicing_order_list, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; - if(slicing_service_list !==null && slicing_service_list.length >0){ - this.listOfData = slicing_service_list.map((item, index) => { - if (item.last_operation_process && item.last_operation_type && Number(item.last_operation_process) < 100) { - + if (slicing_order_list !== null && slicing_order_list.length > 0) { + this.listOfData = slicing_order_list.map((item, index) => { + item.order_creation_time = moment(Number(item.order_creation_time)).format('YYYY-MM-DD'); + if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) { + let updata = (prodata: { operation_progress: string }) => { + item.last_operation_progress = prodata.operation_progress || item.last_operation_progress; + }; + let obj = { + serviceId: item.order_id + }; if (item.last_operation_type === 'DELETE') this.terminateStart = true; + this.queryProgress(obj, index, updata).then((res) => { + item.last_operation_progress = '100'; + this.getCSMFBusinessList(); + }) } return item }); @@ -54,16 +82,143 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; this.getCSMFBusinessList(); } + searchData(reset: boolean = false) { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; this.getCSMFBusinessList(); } switchChange(slicing, i) { - console.log(slicing,i,"slicing") + console.log(slicing, i, "slicing"); + this.modalService.confirm({ + nzTitle: '<i>Are you sure you want to perform this task?</i>', + nzContent: '<b>Name:' + slicing.order_name + '</b>', + nzOnOk: () => { + let paramsObj = { + serviceId: slicing.order_id + }; + if (slicing.order_status === 'activated') { + this.changeActivate(paramsObj, false, slicing, "deactivate", "deactivated", i) + } else { + this.changeActivate(paramsObj, true, slicing, "activate", "activated", i); + } + }, + nzCancelText: 'No', + nzOnCancel: () => { + let singleSlicing = Object.assign({}, this.listOfData[i]); + this.listOfData[i] = singleSlicing; + this.listOfData = [...this.listOfData]; + } + }); } + changeActivate(paramsObj, isActivate, slicing, activateValue, finished, index) { + this.loading = true; + this.myhttp.changeActivateSlicingService(paramsObj, isActivate).subscribe(res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; + if (+result_code === 200) { + this.getCSMFBusinessList(); + } else { + let singleSlicing = Object.assign({}, this.listOfData[index]); + this.listOfData[index] = singleSlicing; + this.listOfData = [...this.listOfData]; + this.getCSMFBusinessList(); + } + this.getCSMFBusinessList(); + }, () => { + this.loading = false; + let singleSlicing = Object.assign({}, this.listOfData[index]); + this.listOfData[index] = singleSlicing; + this.listOfData = [...this.listOfData]; + this.getCSMFBusinessList(); + }) + } + terminate(slicing) { - console.log(slicing,"slicing") + console.log(slicing, "slicing"); + this.modalService.confirm({ + nzTitle: 'Are you sure you want to terminate this task?', + nzContent: '<b>Name: </b>' + slicing.order_name, + nzOnOk: () => { + let paramsObj = { serviceId: slicing.order_id }; + this.terminateStart = true; + this.loading = true; + this.myhttp.terminateSlicingService(paramsObj).subscribe(res => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = res; + this.loading = false; + if (+result_code === 200) { + this.getCSMFBusinessList(); + } else { + this.terminateStart = false; + } + }, () => { + this.loading = false; + this.terminateStart = false; + }) + }, + nzCancelText: 'No', + nzOnCancel: () => { + console.info('Cancel termination') + } + }); + } + queryProgress(obj, index, callback) { + return new Promise(res => { + let requery = () => { + this.myhttp.getSlicingBusinessProgress(obj) + .subscribe((data) => { + const { result_header: { result_code, result_message }, result_body: { operation_id } } = data; + if (+result_code === 200) { + if (data.result_body.operation_progress && Number(data.result_body.operation_progress) < 100) { + callback(data.result_body); + let progressSetTimeOut = setTimeout(() => { + requery(); + }, 5000); + this.progressingTimer.push({ + id: obj.serviceId, + timer: progressSetTimeOut + }) + } else { + this.progressingTimer.forEach((item) => { + if (item.serviceId === obj.serviceId) { + clearInterval(item.timer); + } + }); + res(data.result_body); + } + } else { + this.progressingTimer.forEach((item) => { + if (item.serviceId === obj.serviceId) { + clearInterval(item.timer); + } + }); + this.getCSMFBusinessList(); + this.message.error(result_message); + } + }, (err) => { + this.progressingTimer.forEach((item) => { + if (item.serviceId === obj.serviceId) { + clearInterval(item.timer); + } + }); + this.getCSMFBusinessList(); + this.message.error(err); + }) + }; + requery(); + }) + } + + OrderModelShow(){ + this.businessOrderShow = true; } } 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 index 965dca6a..1de13788 100644 --- 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 @@ -1,4 +1,9 @@ <nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing"> + <nz-tab nzTitle="communication Service"> + <app-csmf-slicing-business-management + *ngIf="currentTab ==='communication Service'" + ></app-csmf-slicing-business-management> + </nz-tab> <nz-tab nzTitle="Slicing Task Management"> <app-slicing-task-management *ngIf="currentTab ==='Slicing Task Management'" @@ -9,9 +14,4 @@ *ngIf="currentTab ==='Slicing Resource Management'" ></app-slicing-resource-management> </nz-tab> - <nz-tab nzTitle="CSMF Slicing Business Management"> - <app-csmf-slicing-business-management - *ngIf="currentTab ==='CSMF Slicing Business Management'" - ></app-csmf-slicing-business-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.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts index e2ca18e2..597e4ee9 100644 --- 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 @@ -15,7 +15,7 @@ export class SlicingManagementComponent implements OnInit { ngOnInit() { } - currentTab = 'Slicing Task Management'; + currentTab = 'communication Service'; handleTabChange($event): void { console.log($event,"$event"); this.currentTab = $event.tab._title; 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 index d7cb2f8d..415f5241 100644 --- 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 @@ -1,4 +1,4 @@ -<div> +<div class="slicing-task-resource-table"> <div nz-row> <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> 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 index 78ae9c6e..17951f40 100644 --- 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 @@ -21,4 +21,7 @@ nz-select { .task_operation_disabled { color: #A2ABCE; cursor: default; +} +.slicing-task-resource-table{ + margin: 0 0 0 50px!important; }
\ No newline at end of file diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index 68c5c2e9..8973f184 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -244,4 +244,201 @@ export const ADDRESS = [ ]
export const BUSINESS_STATUS = [
"All", "activated", "deactivated"
+]
+
+export const COMMUNICATION_FORM_ITEMS = [
+ {
+ title: 'Slicing Business Name',
+ key: 'name'
+ },
+ {
+ title: 'Max Number of UEs',
+ key: 'maxNumberofUEs'
+ },
+ {
+ title: 'Data Rate Downlink (Mbps)',
+ key: 'expDataRateDL'
+ },
+ {
+ title: 'Latency',
+ key: 'latency'
+ },
+ {
+ title: 'Data Rate Uplink (Mbps)',
+ key: 'expDataRateUL'
+ },
+ {
+ title: 'Resource Sharing Level',
+ key: 'resourceSharingLevel',
+ options: [
+ {
+ title: 'Shared',
+ key: 'shared'
+ },
+ {
+ title: 'Non-shared',
+ key: 'no-shared'
+ }
+ ]
+ },
+ {
+ title: 'Mobility',
+ key: 'uEMobilityLevel',
+ options: [
+ {
+ title: 'Stationary',
+ key: 'stationary'
+ },
+ {
+ title: 'Nomadic',
+ key: 'nomadic'
+ },
+ {
+ title: 'Spatially Restricted Mobility',
+ key: 'spatially restricted mobility'
+ },
+ {
+ title: 'Fully Mobility',
+ key: 'fully mobility'
+ }
+ ]
+ },
+ {
+ title: 'Use Interval (Month)',
+ key: 'useInterval'
+ },
+ {
+ title: 'Area',
+ key: 'coverageArea'
+ }
+]
+
+export const COMMUNICATION_FORM_ADDRESS = [
+ {
+ "id": "1",
+ "name": "Beijing",
+ "city": [
+ {
+ "id": "101",
+ "name": "Beijing",
+ "county": [
+ {
+ "id": "1001",
+ "name": "Haiding District",
+ "street": [
+ {
+ "id": "100101",
+ "name": "Wanshoulu Street"
+ },
+ {
+ "id": "100102",
+ "name": "Zhongguancun Street"
+ },
+ {
+ "id": "100103",
+ "name": "Haidian Street"
+ },
+ {
+ "id": "100104",
+ "name": "Xisanqi Street"
+ }
+ ]
+ },
+ {
+ "id": "1002",
+ "name": "Xicheng District",
+ "street": [
+ {
+ "id": "100201",
+ "name": "Guang'anmenwai Street"
+ },
+ {
+ "id": "100202",
+ "name": "Xuanwumen Street"
+ },
+ {
+ "id": "100203",
+ "name": "West Changan Street"
+ },
+ {
+ "id": "100204",
+ "name": "Financial Street"
+ }
+ ]
+ },
+ {
+ "id": "1003",
+ "name": "Changping District",
+ "street": [
+ {
+ "id": "100301",
+ "name": "Chengbei Street"
+ },
+ {
+ "id": "100302",
+ "name": "Chengnan Street"
+ },
+ {
+ "id": "100303",
+ "name": "Tiantongyuan North Street"
+ },
+ {
+ "id": "100304",
+ "name": "Tiantongyuan South Street"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "2",
+ "name": "Shanghai",
+ "city": [{
+ "id": "201",
+ "name": "Shanghai City",
+ "county": [{
+ "id": "2001",
+ "name": "udongxin District",
+ "street": [
+ {
+ "id": "200101",
+ "name": "Lujiazui Street"
+ },
+ {
+ "id": "200102",
+ "name": "Zhoujiadu Street"
+ },
+ {
+ "id": "200103",
+ "name": "Tangqiao Street"
+ },
+ {
+ "id": "200104",
+ "name": "Nanquanlu Street"
+ }
+ ]
+ },
+ {
+ "id": "2002",
+ "name": "Jingan District",
+ "street": [
+ {
+ "id": "200201",
+ "name": "Jiangning Lu Street"
+ },
+ {
+ "id": "200202",
+ "name": "Jing'an Temple Street"
+ },
+ {
+ "id": "200203",
+ "name": "Nanjing West Road Street"
+ }
+ ]
+ }
+ ]
+ }]
+ }
]
\ No newline at end of file diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 6f10e362..bd3a6b79 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -816,8 +816,8 @@ nz-notification-container .ant-notification{ } } .slicing-resource_tab { - width: 104%; - margin-left: 20px!important; + width: 103%; + margin-left: 60px!important; margin-top: -35px!important; .ant-tabs-content.ant-tabs-content-animated{ padding: 20px 0!important; |