feat: Added progress display in view progress component

Change-Id: I893ca65ab9fe15f3dd534ad6d414d61180f137ce
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index b8e2690..badbaa0 100644 (file)
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -28,7 +28,9 @@ export class SlicingTaskServices {
         slicingInstance: this.baseUrl + '/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}',\r
         slicingSubnetInstance: this.baseUrl + '/resource/nsi/{nsiId}/nssiInstances',\r
         subnetInContext: this.baseUrl + '/resource/nssi/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}',\r
-        submitSlicing: this.baseUrl + '/task/auditInfo',    \r
+        submitSlicing: this.baseUrl + '/task/auditInfo',  \r
+        slicingBasicInfo: this.baseUrl + '/task/{taskId}/taskCreationInfo',\r
+        slicingCreateProgress: this.baseUrl + '/task/{taskId}/taskCreationProgress',\r
         //slicing-business-management\r
         slicingBusinessList:this.baseUrl+"/resource/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
         slicingBusinesQueryOfStatus:this.baseUrl+"/resource/{businessStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
@@ -36,7 +38,8 @@ export class SlicingTaskServices {
         deactivateSlicingService:this.baseUrl+"/resource/{serviceId}/deactivate",\r
         terminateSlicingService:this.baseUrl+"/resource/{serviceId}",\r
         queryOperationProgress:this.baseUrl+"resource/{serviceId}/progress",\r
-        slicingBasicInfo: this.baseUrl + '/task/{taskId}/taskCreationInfo',\r
+        \r
+        \r
     }\r
 \r
 \r
@@ -85,6 +88,10 @@ export class SlicingTaskServices {
         const url = this.url.slicingBasicInfo.replace('{taskId}', taskId);\r
         return this.http.get<any>(url);\r
     }\r
+    getSlicingCreateProgress (taskId: string) {\r
+        const url = this.url.slicingCreateProgress.replace('{taskId', taskId);\r
+        return this.http.get<any>(url);\r
+    }\r
 \r
     // Get slicing business list\r
     getSlicingBusinessList (paramsObj,isSelect: boolean) {\r

diff --git a/usecaseui-portal/src/app/mock/json/slicing_taskCreationProgress.json b/usecaseui-portal/src/app/mock/json/slicing_taskCreationProgress.json
new file mode 100644 (file)
index 0000000..7a14c73
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_taskCreationProgress.json
@@ -0,0 +1,11 @@
+{\r
+    "result_header": {\r
+        "result_code": "200",\r
+        "result_message": "5G slicing task operation progress result."\r
+    },\r
+    "result_body": {\r
+        "an_progress": 60,\r
+        "tn_progress": 60,\r
+        "cn_progress": 60\r
+    }\r
+}\r

diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index 35a9e13..9e7f2ae 100644 (file)
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -99,6 +99,7 @@ module.exports =
         "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance",
         "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
         "/uui-slicing/nsmf/task/:taskId/taskCreationInfo": "/slicing_taskCreationInfo",
+        "/uui-slicing/nsmf/task/:taskId/taskCreationProgress": "/slicing_taskCreationProgress",
 
         ///////<-------------slicing_business--------->/////
         "/uui-slicing/nsmf/resource/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_business_list",

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
index e6e348c..07599bf 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.html
@@ -11,5 +11,33 @@
                [NSTinfo]="NSTinfo"
        >
        </app-basic-info>
+       <nz-list [nzDataSource]="data" nzBordered nzHeader="任务详情:" [nzFooter]="null" [nzRenderItem]="defaultItem" >
+               <ng-template #defaultItem let-item> 
+                       <nz-list-item  nz-row nzType="flex" nzJustify="center" >
+                               <nz-steps 
+                                       nzType="navigation"
+                                       [nzCurrent]="item.currentProgress" 
+                                       nz-col 
+                                       nzSpan="20" 
+                                       nzSize="small" 
+                                       *ngFor="let item of data[0]; let i = index" class="task_progress" 
+                                       [ngStyle]="{paddingBottom: i === data[0].length -1 ? '30px': '0px'}"
+                               >
+                                       <nz-step [nzTitle]="item.title"></nz-step>
+                                       <nz-step 
+                                               [nzTitle]="item.currentProgress > 1 ? null : 'in progress'" 
+                                               [nzStatus]="item.status" nzIcon="anticon anticon-spin anticon-loading"
+                                       > </nz-step>
+                                       <nz-step 
+                                               [nzTitle]="item.status === 'finish' ? 'success' : null"
+                                               [nzStatus]="item.status === 'finish' ? 'finish' : 'wait'" 
+                                               nzIcon='loading'
+                                       ></nz-step>
+                               </nz-steps>
+                               
+                       </nz-list-item>
+               </ng-template>
+       </nz-list>
+
        
 </nz-modal>

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
index e69de29..4ffecfe 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.less
@@ -0,0 +1,3 @@
+.task_progress{\r
+    padding-top: 30px;\r
+}
\ No newline at end of file

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
index efb8ba7..77a36a0 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component.ts
@@ -19,12 +19,18 @@ export class CheckProcessModelComponent implements OnInit {
        checkDetail: any[];
        businessRequirement: any[];
        NSTinfo: any[];
+       data: any[];
+       currentProgress: number = 1;
+       timer: any = null;
 
        ngOnInit() { }
 
        ngOnChanges() {
                if (this.showProcess) {
                        this.getInfo();
+                       this.getProgress();
+               }else {
+                       clearTimeout(this.timer);
                }
        }
 
@@ -51,10 +57,45 @@ export class CheckProcessModelComponent implements OnInit {
                })
        }
 
+       getProgress(): void {
+               this.http.getSlicingCreateProgress(this.taskId).subscribe(res => {
+                       const { result_body, result_header: {result_code } } = res;
+                       if (+result_code === 200) {
+                               this.data = [];
+                               Object.keys(result_body).forEach( item => {
+                                       let currentProgress = 1
+                                       let status = 'process';
+                                       if(+result_body[item] === 100){
+                                               currentProgress = 2;
+                                               status = 'finish'
+                                       }
+                                       const title = item === 'an_progress'? '无线域': (item === 'tn_progress'? '传输域' : '核心域')
+                                       let obj = { [item]: result_body[item], currentProgress, title, status };
+                                       this.data.push(obj)
+                               })
+                               this.data = [this.data];
+                               let flag: boolean = false;
+                               Object.values(result_body).forEach ( item => {
+                                       if(item !== 100) {
+                                               flag = true;
+                                       }
+                               })
+                               if(flag) {
+                                       this.timer = setTimeout( () => {
+                                               this.getProgress()
+                                       }, 5000)
+                               }
+                       }
+               })
+       }
+
        handleCancel() {
                this.showProcess = false;
                this.cancel.emit(this.showProcess)
        }
-       handleOk() { }
+       handleOk() { 
+               this.handleCancel();
+       }
 
 }
+ 
\ No newline at end of file