gerrit.onap Code Review - usecase-ui.git/blob

   1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
   2 import { NzMessageService } from 'ng-zorro-antd';
   3 import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices'
   4
   5 @Component({
   6         selector: 'app-check-process-model',
   7         templateUrl: './check-process-model.component.html',
   8         styleUrls: ['./check-process-model.component.less']
   9 })
  10 export class CheckProcessModelComponent implements OnInit {
  11
  12         @Input() moduleTitle: string;
  13         @Input() showProcess: boolean;
  14         @Input() taskId: string;
  15         @Input() moduleOperation: string;
  16
  17         @Output() cancel = new EventEmitter<boolean>();
  18
  19         constructor(private http: SlicingTaskServices, private message: NzMessageService) { }
  20
  21         checkDetail: any[];
  22         businessRequirement: any[];
  23         NSTinfo: any[];
  24         data: any[];
  25         currentProgress: number = 1;
  26         timer: any = null;
  27         isSpinning: boolean = false;
  28         isGetData: boolean = false;
  29
  30         ngOnInit() { }
  31
  32         ngOnChanges() {
  33                 if (this.showProcess) {
  34                         this.isSpinning = true;
  35                         this.getInfo();
  36                         this.getProgress();
  37                 } else {
  38                         clearTimeout(this.timer);
  39                         this.isGetData = false;
  40                 }
  41         }
  42
  43         getInfo(): void {
  44                 this.http.getSlicingBasicInfo(this.taskId).subscribe(res => {
  45                         const { result_body, result_header: { result_code } } = res;
  46                         if (+result_code === 200) {
  47                                 const {
  48                                         task_id,
  49                                         task_name,
  50                                         create_time,
  51                                         processing_status,
  52                                         business_demand_info,
  53                                         nst_info,
  54                                         business_demand_info: { service_snssai, coverage_area_ta_list }
  55                                 } = result_body;
  56                                 // 处理配置审核详情数据
  57                                 this.checkDetail = [{ task_id, task_name, create_time, processing_status, service_snssai }];
  58                                 // 业务需求信息数据
  59                                 business_demand_info.area = coverage_area_ta_list.map(item => {
  60                                         item = item.split(';').join(' - ')
  61                                         return item
  62                                 })
  63                                 // 前端模拟数据
  64                                 let area = ["Beijing;Beijing;Haidian District", "Beijing;Beijing;Xicheng District", "Beijing;Beijing;Changping District"].map(item => {
  65                                         item = item.split(';').join(' - ')
  66                                         return item
  67                                 })
  68                                 this.businessRequirement = [{ ...business_demand_info, area }];
  69                                 // 匹配NST信息
  70                                 this.NSTinfo = [nst_info];
  71                         } else {
  72                                 const errorMessage = this.moduleOperation === 'Creating' ? 'Failed to get data' : 'Viewing results failed';
  73                                 this.message.error(errorMessage);
  74                         }
  75                         this.isLoadingShow();
  76                 }, ({ status, statusText }) => {
  77                         this.message.error(status + ' (' + statusText + ')');
  78                         this.isLoadingShow();
  79                 })
  80         }
  81
  82         isLoadingShow() {
  83                 if (this.isGetData) {
  84                         this.isSpinning = false;
  85                 } else {
  86                         this.isGetData = true;
  87                 }
  88         }
  89
  90         getProgress(): void {
  91                 this.http.getSlicingCreateProgress(this.taskId).subscribe(res => {
  92                         const { result_body, result_header: { result_code } } = res;
  93                         if (+result_code === 200) {
  94                                 this.data = [];
  95                                 Object.keys(result_body).forEach(item => {
  96                                         let currentProgress = 1
  97                                         let status = 'process';
  98                                         if (+result_body[item] === 100) {
  99                                                 currentProgress = 3;
 100                                                 status = 'finish'
 101                                         }
 102                                         const title = item === 'an_progress' ? 'An' : (item === 'tn_progress' ? 'Tn' : 'Cn')
 103                                         let obj = { [item]: result_body[item], currentProgress, title, status };
 104                                         if (result_body[item]) {
 105                                                 this.data.push(obj)
 106                                         }
 107                                 })
 108                                 this.data = [this.data];
 109                                 let flag: boolean = false;
 110                                 Object.values(result_body).forEach(item => {
 111                                         if (+item !== 100 && typeof item !== 'object') {
 112                                                 flag = true;
 113                                         }
 114                                 })
 115                                 if (flag) {
 116                                         this.timer = setTimeout(() => {
 117                                                 this.getProgress()
 118                                         }, 5000)
 119                                 }
 120                         } else {
 121                                 this.message.error('Failed to get progress')
 122                         }
 123                         this.isLoadingShow();
 124                 }, ({ status, statusText }) => {
 125                         this.message.error(status + ' (' + statusText + ')');
 126                         this.isLoadingShow();
 127                 })
 128         }
 129
 130         handleCancel() {
 131                 this.showProcess = false;
 132                 this.cancel.emit(this.showProcess)
 133         }
 134 }