slicingNssiList: this.baseUrl + "/resource/nssi/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
slicingNssiQueryOfStatus: this.baseUrl + "/resource/nssi/instanceStatus/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}",\r
slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details",\r
+ //csmf\r
+ csmfSlicingBusinessList:"/api/usecaseui/csmf/5gSlicing/services/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",\r
//monitor 5G\r
fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",\r
fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",\r
let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId);\r
return this.http.get<any>(url);\r
}\r
+ // Get CSMF slicing business list\r
+ getCSMFSlicingBusinessList(paramsObj) {\r
+ let url = this.url.csmfSlicingBusinessList.replace("{status}", paramsObj.status).replace("{pageNo}", paramsObj.pageNo)\r
+ .replace("{pageSize}", paramsObj.pageSize);\r
+ return this.http.get<any>(url);\r
+ }\r
+\r
//monitor 5G\r
getFetchTraffic(service_list, time) {\r
let url = this.url.fetchTraffic.replace("{queryTimestamp}", time);\r
--- /dev/null
+{
+ "result_header": {
+ "result_code": "200",
+ "result_message": "Query all slicing services processing succeeded."
+ },
+ "result_body": {
+ "record_number": 8,
+ "slicing_service_list": [
+ {
+ "service_id": "5G-777",
+ "service_name": "eMBB_e2e_Slice_Service_5GCustomer",
+ "service_type": "embb",
+ "service_snssai": "01-010101",
+ "service_status": "activated",
+ "last_operation_id": "8401c767-4fe9-43c3-82b5-707c1aaf5caf",
+ "last_operation_type": "activation",
+ "last_operation_process": 100
+ },
+ {
+ "service_id": "8c681037-75c9-444c-a665-34a66372e13e",
+ "service_name": "test_0203",
+ "service_type": "embb",
+ "service_snssai": "01-1370889D",
+ "service_status": "deactivated",
+ "last_operation_id": null,
+ "last_operation_type": null,
+ "last_operation_process": null
+ },
+ {
+ "service_id": "dfa76a2f-6416-4070-9024-355d0d210234",
+ "service_name": "CSMFService",
+ "service_type": "embb",
+ "service_snssai": "01-485C16B6",
+ "service_status": "deactivated",
+ "last_operation_id": "06258836-8152-43ad-9c8e-e2a1783b1996",
+ "last_operation_type": "activation",
+ "last_operation_process": 0
+ },
+ {
+ "service_id": "1e6a6a4b-8efb-4211-b583-b2e8567c5950",
+ "service_name": "CSMFService",
+ "service_type": "embb",
+ "service_snssai": "01-6C572676",
+ "service_status": "deactivated",
+ "last_operation_id": null,
+ "last_operation_type": null,
+ "last_operation_process": null
+ },
+ {
+ "service_id": "9941305e-311f-4a88-bd9e-431252a46337",
+ "service_name": "CSMFService",
+ "service_type": "embb",
+ "service_snssai": "01-D38E2F0",
+ "service_status": "deactivated",
+ "last_operation_id": null,
+ "last_operation_type": null,
+ "last_operation_process": null
+ },
+ {
+ "service_id": "4876265d-e4bb-4240-bcda-7b4b00481e4a",
+ "service_name": "test_0205",
+ "service_type": "embb",
+ "service_snssai": "01-6A345C48",
+ "service_status": "deactivated",
+ "last_operation_id": null,
+ "last_operation_type": null,
+ "last_operation_process": null
+ },
+ {
+ "service_id": "6c52086a-e9b6-4f31-bc7a-7b34d66c69c0",
+ "service_name": "test_0204",
+ "service_type": "embb",
+ "service_snssai": "01-774F54FC",
+ "service_status": "deactivated",
+ "last_operation_id": null,
+ "last_operation_type": null,
+ "last_operation_process": null
+ },
+ {
+ "service_id": "1cab507a-3422-46f8-8520-9b46c95b7f9d",
+ "service_name": "aaa",
+ "service_type": "embb",
+ "service_snssai": "01-44AA4085",
+ "service_status": "deactivated",
+ "last_operation_id": "012c888a-a46f-4ebc-bcde-7f7c769769b7",
+ "last_operation_type": "DELETE",
+ "last_operation_process": 100
+ }
+ ]
+ }
+}
\ No newline at end of file
///////<-------------api proxy--------->/////
"/usecaseui-server/v1/*": "/$1",
"/usecaseui-server/v1/*?:param": "/$1",
+ "/usecaseui/csmf/*": "/$1",
+ "/usecaseui/csmf/*?:param": "/$1",
///////////////
//text interface
"/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list",
"/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",
///////<-------------monitor 5G--------->/////
"/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData": "/fetchTrafficData",
"/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers": "/fetchOnlineusersData",
const customersRouters = require('./routes');
const baseUrl = "/usecaseui-server/v1";
const nsmfBaseUrl = "/uui-slicing/nsmf";
+const csmfBaseUrl = "/usecaseui/csmf";
// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);
-<p>
- csmf-slicing-business-management works!
-</p>
+<div class="slicing-resource-table slicing-resource_tab">
+ <div nz-row>
+ <div nz-col nzSpan="12" class="task_status">
+ <span>Status : </span>
+ <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue"
+ (ngModelChange)="getListOfProcessingStatus()">
+ <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ <div class="slicing-resource-table-list">
+ <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead>
+ <tr>
+ <th width=100>No</th>
+ <th width=280>Service Instance Id</th>
+ <th width=200>Service Instance Name</th>
+ <th width=110>Service Type</th>
+ <th width=110>S-NSSAI</th>
+ <th width=110>Status</th>
+ <th width=180>Aciton</th>
+ </tr>
+ </thead>
+ <tbody>
+ <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.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>
+ <br>
+ {{data.service_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'"
+ (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">
+ </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')}"
+ 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">
+ </nz-progress>
+ </div>
+ </td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
+ </div>
+</div>
\ No newline at end of file
+nz-select {
+ width: 200px;
+}
+.task_status{
+ margin-bottom: 20px;
+ span{
+ margin-right: 5%;
+ }
+}
+.action-icon{
+ display: inline-block;
+ vertical-align: top;
+}
+i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px 15px;
+ vertical-align: inherit!important;
+ &:hover{
+ color: #147dc2;
+ }
+}
+.cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+}
+.slicing-resource-table{
+ margin: 0 0 0 60px!important;
+}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
-
+import {BUSINESS_STATUS} from "../../../../../constants/constants";
+import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
@Component({
selector: 'app-csmf-slicing-business-management',
templateUrl: './csmf-slicing-business-management.component.html',
})
export class CsmfSlicingBusinessManagementComponent implements OnInit {
- constructor() { }
-
+ constructor(
+ private myhttp: SlicingTaskServices
+ ) {
+ }
ngOnInit() {
+ this.getCSMFBusinessList()
}
+ 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;
+ terminateStart: boolean = false;
+
+ getCSMFBusinessList(){
+ this.loading = true;
+ this.listOfData = [];
+ let paramsObj = {
+ status:this.selectedValue,
+ pageNo: this.pageIndex,
+ pageSize: this.pageSize
+ };
+ this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => {
+ const { result_header: { result_code }, result_body: { slicing_service_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 (item.last_operation_type === 'DELETE') this.terminateStart = true;
+ }
+ return item
+ });
+ }
+ }
+ })
+ }
+
+ getListOfProcessingStatus() {
+ this.pageIndex = 1;
+ this.pageSize = 10;
+ this.getCSMFBusinessList();
+ }
+ searchData(reset: boolean = false) {
+ this.getCSMFBusinessList();
+ }
+ switchChange(slicing, i) {
+ console.log(slicing,i,"slicing")
+ }
+ terminate(slicing) {
+ console.log(slicing,"slicing")
+ }
}
-<nz-tabset (nzSelectChange)="handleTabChange($event)">
+<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing">
<nz-tab nzTitle="Slicing Task Management">
<app-slicing-task-management
*ngIf="currentTab ==='Slicing Task Management'"
*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
Code Review / usecase-ui.git / commitdiff