summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html3
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less0
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts24
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html30
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less5
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts195
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html10
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less3
11 files changed, 257 insertions, 42 deletions
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:&nbsp;</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