fix: fix bugs of adding customers

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

2 files changed, 539 insertions, 479 deletions

diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.ts b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
index b470adf8..78d4f145 100644
--- a/usecaseui-portal/src/app/views/management/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
@@ -13,477 +13,536 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ManagemencsService } from '../../../core/services/managemencs.service';
-import { Observable } from 'rxjs';
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { ManagemencsService } from '../../../core/services/managemencs.service'
+import { Observable } from 'rxjs'
 
 @Component({
-    selector: 'app-customer',
-    templateUrl: './customer.component.html',
-    styleUrls: ['./customer.component.less']
+  selector: 'app-customer',
+  templateUrl: './customer.component.html',
+  styleUrls: ['./customer.component.less']
 })
 export class CustomerComponent implements OnInit {
-    @ViewChild('chart') chart;
-    @ViewChild('pie') pie;
-    @ViewChild('notification') notification: any;
-    public chose = '';
+  @ViewChild('chart') chart
+  @ViewChild('pie') pie
+  @ViewChild('notification') notification: any
+  public chose = ''
 
-    resizeMark;
-    constructor(
-        private managemencs: ManagemencsService,
-    ) {
-    }
-
-    ngOnInit() {
-        this.getAllCustomers();
-        this.resizeMark = Observable.fromEvent(window, 'resize')
-            .subscribe((event) => {
-                this.pie.resize(this.chart.nativeElement.offsetHeight, 210)
-            })
-    }
+  resizeMark
+  constructor (private managemencs: ManagemencsService) {}
 
-    ngAfterViewInit() {
+  ngOnInit () {
+    this.getAllCustomers()
+    this.resizeMark = Observable.fromEvent(window, 'resize').subscribe(
+      event => {
         this.pie.resize(this.chart.nativeElement.offsetHeight, 210)
-    }
+      }
+    )
+  }
 
-    ngOnDestroy() {
-        this.resizeMark.unsubscribe()
-    }
+  ngAfterViewInit () {
+    this.pie.resize(this.chart.nativeElement.offsetHeight, 210)
+  }
 
-    AllCustomersdata = [];
-    AllServiceTypes = [];
-    customerber = [];
-    // Get all customers
-    selectCustomer = {
-        name: null,
-        id: null
-    };
-    addNewCustomer = null;
-    addNewServiceType = null;
-    deleteCustomerModelVisible = false;
-    deleteServiceTypeModelVisible = false;
-    getAllCustomers() {
-        this.managemencs.getAllCustomers().subscribe((data) => {
-            this.AllCustomersdata = data.map((item) => {
-                return { name: item["subscriber-name"], id: item["global-customer-id"] }
-            });
-            this.selectCustomer = this.AllCustomersdata[0];
-            this.serviceInit["customer"] = this.AllCustomersdata[0].name;
-            this.getCustomersPie();
-            this.getServiceTypes(this.selectCustomer);
-            this.getCustomersColumn(this.selectCustomer);
-        })
+  ngOnDestroy () {
+    this.resizeMark.unsubscribe()
+  }
 
-    }
+  AllCustomersdata = []
+  AllServiceTypes = []
+  customerber = []
+  // Get all customers
+  selectCustomer = {
+    name: null,
+    id: null
+  }
+  addNewCustomer = null
+  addNewServiceType = null
+  deleteCustomerModelVisible = false
+  deleteServiceTypeModelVisible = false
+  getAllCustomers () {
+    this.managemencs.getAllCustomers().subscribe(data => {
+      this.AllCustomersdata = data.map(item => {
+        return { name: item['subscriber-name'], id: item['global-customer-id'] }
+      })
+      this.selectCustomer = this.AllCustomersdata[0]
+      this.serviceInit['customer'] = this.AllCustomersdata[0].name
+      this.getCustomersPie()
+      this.getServiceTypes(this.selectCustomer)
+      this.getCustomersColumn(this.selectCustomer)
+    })
+  }
 
-    // Get all servicetype
-    getServiceTypes(item) {
-        this.managemencs.getServiceTypes(item).subscribe((data) => {
-            this.AllServiceTypes = data.map((item) => {
-                return { type: item["service-type"], id: item["global-customer-id"] }
-            });
-        })
-    }
+  // Get all servicetype
+  getServiceTypes (item) {
+    this.managemencs.getServiceTypes(item).subscribe(data => {
+      this.AllServiceTypes = data.map(item => {
+        return { type: item['service-type'], id: item['global-customer-id'] }
+      })
+    })
+  }
 
-    // Switch user data
-    choseCustomer(index, item) {
-        this.chose = index;
-        this.selectCustomer = item;
-        this.serviceInit["customer"] = this.selectCustomer.name;
-        this.getServiceTypes(item);
-        this.getCustomersColumn(item);
-    }
-
-    customeradd = false;
-    servicesadd = false;
-    //Customer pie
-    CUChartData: Object;
-    CUChartInit: Object = {
-        height: 200,
-        option: {
-            color: ["#F2F6FD"],
-            series: [{
-                type: 'pie',
-                name: "customer",
-                radius: '90%',
-                center: ['50%', '50%'],
-                data: [],
-                label: {
-                    normal: {
-                        position: 'center',
-                        show: false,
-                        formatter: '   {b|{b}：{c}}  ',
-                        backgroundColor: 'rgba(51,51,51,0.9)',
-                        borderColor: 'rgba(51,51,51,0.9)',
-                        borderWidth: 1,
-                        borderRadius: 4,
-                        rich: {
-                            b: {
-                                fontSize: 16,
-                                color: '#fff',
-                                lineHeight: 33
-                            }
-                        }
-                    },
-                    emphasis: {
-                        show: true,
+  // Switch user data
+  choseCustomer (index, item) {
+    this.chose = index
+    this.selectCustomer = item
+    this.serviceInit['customer'] = this.selectCustomer.name
+    this.getServiceTypes(item)
+    this.getCustomersColumn(item)
+  }
 
-                    }
-                },
-                labelLine: {
-                    normal: {
-                        show: false
-                    }
-                },
-                itemStyle: {
-                    normal: {
-                        borderWidth: 3,
-                        borderColor: '#ffffff',
-                    },
-                    emphasis: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [{
-                                offset: 0, color: '#7DCEFB'
-                            }, {
-                                offset: 1, color: '#0DA9E2'
-                            }],
-                            global: false
-                        },
-                        borderWidth: 0,
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 10, 5, 0)'
-                    }
+  customeradd = false
+  servicesadd = false
+  //Customer pie
+  CUChartData: Object
+  CUChartInit: Object = {
+    height: 200,
+    option: {
+      color: ['#F2F6FD'],
+      series: [
+        {
+          type: 'pie',
+          name: 'customer',
+          radius: '90%',
+          center: ['50%', '50%'],
+          data: [],
+          label: {
+            normal: {
+              position: 'center',
+              show: false,
+              formatter: '   {b|{b}：{c}}  ',
+              backgroundColor: 'rgba(51,51,51,0.9)',
+              borderColor: 'rgba(51,51,51,0.9)',
+              borderWidth: 1,
+              borderRadius: 4,
+              rich: {
+                b: {
+                  fontSize: 16,
+                  color: '#fff',
+                  lineHeight: 33
                 }
-            }]
-        }
-    };
-
-    // get customers chart pie
-    Pie_name = [];
-    Pie_value = [];
-    serviceChart = true;
-    getCustomersPie() {
-        this.managemencs.getCustomersPie().subscribe((data) => {
-            this.serviceChart = data.serviceTotalNum > 0 ? true : false
-            this.CUChartData = {
-                series: [{
-                    data: data.customerServiceList
-                }]
-            }
-        }, (err) => {
-            console.log(err);
-        });
-    }
-
-    // service bar
-    serviceData: Object;
-    serviceInit: Object = {
-        customer: '',
-        height: 190,
-        option: {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: "{b}:\n{c}"
+              }
             },
-            grid: {
-                top: '5%',
-                left: '0%',
-                bottom: '3%',
-                containLabel: true
+            emphasis: {
+              show: true
+            }
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderWidth: 3,
+              borderColor: '#ffffff'
             },
-            xAxis: [
-                {
-                    type: 'value',
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: "#EDEDED"
-                        }
-                    },
-                    axisLabel: {
-                        color: "#3C4F8C"
-                    }
-                }
+            emphasis: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#7DCEFB'
+                  },
+                  {
+                    offset: 1,
+                    color: '#0DA9E2'
+                  }
+                ],
+                global: false
+              },
+              borderWidth: 0,
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 10, 5, 0)'
+            }
+          }
+        }
+      ]
+    }
+  }
 
-            ],
-            yAxis: [
-                {
-                    type: 'category',
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: "#EDEDED"
-                        }
-                    },
-                    axisLabel: {
-                        color: "#3C4F8C"
-                    },
-                    data: [],
-                },
+  // get customers chart pie
+  Pie_name = []
+  Pie_value = []
+  serviceChart = true
+  getCustomersPie () {
+    this.managemencs.getCustomersPie().subscribe(
+      data => {
+        this.serviceChart = data.serviceTotalNum > 0 ? true : false
+        this.CUChartData = {
+          series: [
+            {
+              data: data.customerServiceList
+            }
+          ]
+        }
+      },
+      err => {
+        console.log(err)
+      }
+    )
+  }
 
-            ],
-            series: [
-                {
-                    name: '',
-                    barWidth: '40%',
-                    type: 'bar',
-                    data: [],
-                    itemStyle: {
-                        normal: {
-                            color: function (params) {
-                                // build a color map as your need.
-                                var colorList = [
-                                    {
-                                        type: 'bar',
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#FCCE2B'
-                                        }, {
-                                            offset: 1,
-                                            color: '#FEE956'
-                                        }],
-                                        globalCoord: false,
-                                    },
-                                    {
-                                        type: 'bar',
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#F43A59'
-                                        }, {
-                                            offset: 1,
-                                            color: '#FA6C92'
-                                        }],
-                                        globalCoord: false,
-                                    },
-                                    {
-                                        type: 'bar',
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#4F5B60'
-                                        }, {
-                                            offset: 1,
-                                            color: '#879499'
-                                        }],
-                                        globalCoord: false,
-                                    },
-                                    {
-                                        type: 'bar',
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#31DAC3'
-                                        }, {
-                                            offset: 1,
-                                            color: '#5FEFE3'
-                                        }],
-                                        globalCoord: false,
-                                    },
-                                    {
-                                        type: 'bar',
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#999999'
-                                        }, {
-                                            offset: 1,
-                                            color: '#C9C9C9'
-                                        }],
-                                        globalCoord: false,
-                                    }
-                                ];
-                                return colorList[params.dataIndex]
-                            },
-                        }
-                    }
-                },
-                {
-                    name: 'Type4',
+  // service bar
+  serviceData: Object
+  serviceInit: Object = {
+    customer: '',
+    height: 190,
+    option: {
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: '{b}:\n{c}'
+      },
+      grid: {
+        top: '5%',
+        left: '0%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#EDEDED'
+            }
+          },
+          axisLabel: {
+            color: '#3C4F8C'
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: 'category',
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#EDEDED'
+            }
+          },
+          axisLabel: {
+            color: '#3C4F8C'
+          },
+          data: []
+        }
+      ],
+      series: [
+        {
+          name: '',
+          barWidth: '40%',
+          type: 'bar',
+          data: [],
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                // build a color map as your need.
+                var colorList = [
+                  {
                     type: 'bar',
-                    stack: '',
-                    data: '',
-
-                },
-                {
-                    name: 'Type1',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#FCCE2B'
+                      },
+                      {
+                        offset: 1,
+                        color: '#FEE956'
+                      }
+                    ],
+                    globalCoord: false
+                  },
+                  {
                     type: 'bar',
-                    stack: '',
-                    data: ''
-                },
-                {
-                    name: 'Type2',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#F43A59'
+                      },
+                      {
+                        offset: 1,
+                        color: '#FA6C92'
+                      }
+                    ],
+                    globalCoord: false
+                  },
+                  {
                     type: 'bar',
-                    stack: '',
-                    data: ''
-                },
-                {
-                    name: 'Type3',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#4F5B60'
+                      },
+                      {
+                        offset: 1,
+                        color: '#879499'
+                      }
+                    ],
+                    globalCoord: false
+                  },
+                  {
                     type: 'bar',
-                    stack: '',
-                    data: ''
-                },
-                {
-                    name: 'Other',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#31DAC3'
+                      },
+                      {
+                        offset: 1,
+                        color: '#5FEFE3'
+                      }
+                    ],
+                    globalCoord: false
+                  },
+                  {
                     type: 'bar',
-                    stack: '',
-                    data: '',
-
-                }
-            ]
-        }
-    };
-    name_s = [];
-    value_s = [];
-    getCustomersColumn(item) {
-        this.name_s = [];
-        this.value_s = [];
-        this.managemencs.getCustomersColumn(item).subscribe((data) => {
-            data.list.forEach((item) => {
-                this.name_s.push(item.name);
-                this.value_s.push(item.value);
-            })
-            this.serviceData = {
-                yAxis: [{
-                    data: this.name_s
-                }],
-                series: [{
-                    data: this.value_s
-                }]
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#999999'
+                      },
+                      {
+                        offset: 1,
+                        color: '#C9C9C9'
+                      }
+                    ],
+                    globalCoord: false
+                  }
+                ]
+                return colorList[params.dataIndex]
+              }
             }
-        })
+          }
+        },
+        {
+          name: 'Type4',
+          type: 'bar',
+          stack: '',
+          data: ''
+        },
+        {
+          name: 'Type1',
+          type: 'bar',
+          stack: '',
+          data: ''
+        },
+        {
+          name: 'Type2',
+          type: 'bar',
+          stack: '',
+          data: ''
+        },
+        {
+          name: 'Type3',
+          type: 'bar',
+          stack: '',
+          data: ''
+        },
+        {
+          name: 'Other',
+          type: 'bar',
+          stack: '',
+          data: ''
+        }
+      ]
     }
+  }
+  name_s = []
+  value_s = []
+  getCustomersColumn (item) {
+    this.name_s = []
+    this.value_s = []
+    this.managemencs.getCustomersColumn(item).subscribe(data => {
+      data.list.forEach(item => {
+        this.name_s.push(item.name)
+        this.value_s.push(item.value)
+      })
+      this.serviceData = {
+        yAxis: [
+          {
+            data: this.name_s
+          }
+        ],
+        series: [
+          {
+            data: this.value_s
+          }
+        ]
+      }
+    })
+  }
 
-    createNewCustomer(): void {
-        let createParams = {
-            // customerId: this.addNewCustomer,
-            'global-customer-id': this.addNewCustomer,
-            'subscriber-name': this.addNewCustomer,
-            'subscriber-type': 'INFRA'
-        };
-        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notification.notificationSuccess('Customer', 'Create', this.addNewCustomer);
-                this.getAllCustomers();
-            } else {
-                this.notification.notificationFailed('Customer', 'Create', this.addNewCustomer);
-            }
-        })
+  createNewCustomer (): void {
+    console.log('=====>', this.addNewCustomer)
+    let createParams = {
+      // customerId: this.addNewCustomer,
+      'global-customer-id': this.addNewCustomer,
+      'subscriber-name': this.addNewCustomer,
+      'subscriber-type': 'INFRA'
     }
+    console.log(createParams, '====>createParams')
+    this.managemencs
+      .createCustomer(this.addNewCustomer, createParams)
+      .subscribe(data => {
+        if (data['status'] == 'SUCCESS') {
+          this.notification.notificationSuccess(
+            'Customer',
+            'Create',
+            this.addNewCustomer
+          )
+          this.getAllCustomers()
+        } else {
+          this.notification.notificationFailed(
+            'Customer',
+            'Create',
+            this.addNewCustomer
+          )
+        }
+      })
+  }
 
-    // Customer delete model
-    thisdeleteCustomer = {
-        name: null,
-        id: null
-    };
-    deleteCustomerModel(itemCustomer) {
-        this.thisdeleteCustomer = itemCustomer;
-        this.deleteCustomerModelVisible = true;
-    }
-    deleteCustomerCancel() {
-        this.deleteCustomerModelVisible = false;
-    }
-    deleteCustomerOk() {
-        this.deleteCustomerModelVisible = false;
-        this.getCustomerVersion(this.thisdeleteCustomer);
-    }
-    getCustomerVersion(thisdeleteCustomer) {
-        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                let params = {
-                    customerId: thisdeleteCustomer.id,
-                    resourceVersion: data["result"]["resource-version"]
-                };
-                this.deleteCustomer(params)
-            } else {
-                console.error(data, "Interface returned error")
-            }
-        })
-    }
-    deleteCustomer(paramsObj) {
-        this.managemencs.deleteSelectCustomer(paramsObj).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notification.notificationSuccess('Customer', 'delete', this.thisdeleteCustomer.name);
-                this.getAllCustomers();
-            } else {
-                this.notification.notificationFailed('Customer', 'delete', this.thisdeleteCustomer.name);
-            }
-        })
-    }
+  // Customer delete model
+  thisdeleteCustomer = {
+    name: null,
+    id: null
+  }
+  deleteCustomerModel (itemCustomer) {
+    this.thisdeleteCustomer = itemCustomer
+    this.deleteCustomerModelVisible = true
+  }
+  deleteCustomerCancel () {
+    this.deleteCustomerModelVisible = false
+  }
+  deleteCustomerOk () {
+    this.deleteCustomerModelVisible = false
+    this.getCustomerVersion(this.thisdeleteCustomer)
+  }
+  getCustomerVersion (thisdeleteCustomer) {
+    this.managemencs
+      .getdeleteCustomerVersion(thisdeleteCustomer)
+      .subscribe(data => {
+        if (data['status'] == 'SUCCESS') {
+          let params = {
+            customerId: thisdeleteCustomer.id,
+            resourceVersion: data['result']['resource-version']
+          }
+          this.deleteCustomer(params)
+        } else {
+          console.error(data, 'Interface returned error')
+        }
+      })
+  }
+  deleteCustomer (paramsObj) {
+    this.managemencs.deleteSelectCustomer(paramsObj).subscribe(data => {
+      if (data['status'] == 'SUCCESS') {
+        this.notification.notificationSuccess(
+          'Customer',
+          'delete',
+          this.thisdeleteCustomer.name
+        )
+        this.getAllCustomers()
+      } else {
+        this.notification.notificationFailed(
+          'Customer',
+          'delete',
+          this.thisdeleteCustomer.name
+        )
+      }
+    })
+  }
 
-    createNewServiceType() {
-        let createParams = {
-            customer: this.selectCustomer,
-            ServiceType: this.addNewServiceType,
-            "service-type": this.addNewServiceType,
-            "temp-ub-sub-account-id": "sotnaccount"
-        };
-        this.managemencs.createServiceType(createParams).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notification.notificationSuccess('ServiceType', 'Create', this.addNewServiceType);
-                this.getAllCustomers();
-            } else {
-                this.notification.notificationFailed('ServiceType', 'Create', this.addNewServiceType);
-            }
-        })
+  createNewServiceType () {
+    let createParams = {
+      customer: this.selectCustomer,
+      ServiceType: this.addNewServiceType,
+      'service-type': this.addNewServiceType,
+      'temp-ub-sub-account-id': 'sotnaccount'
     }
+    this.managemencs.createServiceType(createParams).subscribe(data => {
+      if (data['status'] == 'SUCCESS') {
+        this.notification.notificationSuccess(
+          'ServiceType',
+          'Create',
+          this.addNewServiceType
+        )
+        this.getAllCustomers()
+      } else {
+        this.notification.notificationFailed(
+          'ServiceType',
+          'Create',
+          this.addNewServiceType
+        )
+      }
+    })
+  }
 
-    // ServiceType delete model
-    thisdeleteServiceType = {
-        type: null
-    };
-    deleteServiceTypeModel(itemServiceType) {
-        this.thisdeleteServiceType = itemServiceType;
-        this.deleteServiceTypeModelVisible = true;
+  // ServiceType delete model
+  thisdeleteServiceType = {
+    type: null
+  }
+  deleteServiceTypeModel (itemServiceType) {
+    this.thisdeleteServiceType = itemServiceType
+    this.deleteServiceTypeModelVisible = true
+  }
+  deleteServiceTypeCancel () {
+    this.deleteServiceTypeModelVisible = false
+  }
+  deleteServiceTypeOk () {
+    this.deleteServiceTypeModelVisible = false
+    this.getServiceTypeVersion()
+  }
+  getServiceTypeVersion () {
+    let paramss = {
+      customerId: this.selectCustomer,
+      ServiceType: this.thisdeleteServiceType['type']
     }
-    deleteServiceTypeCancel() {
-        this.deleteServiceTypeModelVisible = false;
-    }
-    deleteServiceTypeOk() {
-        this.deleteServiceTypeModelVisible = false;
-        this.getServiceTypeVersion();
-    }
-    getServiceTypeVersion() {
-        let paramss = {
-            customerId: this.selectCustomer,
-            ServiceType: this.thisdeleteServiceType["type"]
-        };
-        this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                let params = {
-                    customerId: this.selectCustomer,
-                    ServiceType: this.thisdeleteServiceType["type"],
-                    version: data["result"]["resource-version"]
-                };
-                this.deleteServiceType(params);
-            } else {
-                console.error(data, "Interface returned error")
-            }
-        })
-    }
-    deleteServiceType(params) {
-        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.notification.notificationSuccess('ServiceType', 'delete', this.thisdeleteServiceType["type"]);
-                this.getAllCustomers();
-            } else {
-                this.notification.notificationFailed('ServiceType', 'delete', this.thisdeleteServiceType["type"]);
-            }
-        })
-    }
-
-
+    this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe(data => {
+      if (data['status'] == 'SUCCESS') {
+        let params = {
+          customerId: this.selectCustomer,
+          ServiceType: this.thisdeleteServiceType['type'],
+          version: data['result']['resource-version']
+        }
+        this.deleteServiceType(params)
+      } else {
+        console.error(data, 'Interface returned error')
+      }
+    })
+  }
+  deleteServiceType (params) {
+    this.managemencs.deleteSelectServiceType(params).subscribe(data => {
+      if (data['status'] == 'SUCCESS') {
+        this.notification.notificationSuccess(
+          'ServiceType',
+          'delete',
+          this.thisdeleteServiceType['type']
+        )
+        this.getAllCustomers()
+      } else {
+        this.notification.notificationFailed(
+          'ServiceType',
+          'delete',
+          this.thisdeleteServiceType['type']
+        )
+      }
+    })
+  }
 }
diff --git a/usecaseui-portal/src/app/views/management/management.component.ts b/usecaseui-portal/src/app/views/management/management.component.ts
index b1a88e1e..727de636 100644
--- a/usecaseui-portal/src/app/views/management/management.component.ts
+++ b/usecaseui-portal/src/app/views/management/management.component.ts
@@ -13,50 +13,51 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { showHideAnimate, slideToRight } from '../../shared/utils/animates';
-import { ManagemencsService } from '../../core/services/managemencs.service';
+import { Component, OnInit, HostBinding } from '@angular/core'
+import { showHideAnimate, slideToRight } from '../../shared/utils/animates'
+import { ManagemencsService } from '../../core/services/managemencs.service'
 
 @Component({
-    selector: 'app-management',
-    templateUrl: './management.component.html',
-    styleUrls: ['./management.component.less'],
-    animations: [
-        showHideAnimate, slideToRight
-    ]
+  selector: 'app-management',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.less'],
+  animations: [showHideAnimate, slideToRight]
 })
 export class ManagementComponent implements OnInit {
-    @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
+  @HostBinding('@routerAnimate') routerAnimateState //Routing animation
 
-    nocuster: boolean;
-    firstCustomer: string;
+  nocuster: boolean
+  firstCustomer: string
 
-    constructor(private managemencs: ManagemencsService) { }
+  constructor (private managemencs: ManagemencsService) {}
 
-    ngOnInit() {
-        this.getAllCustomers();
-    }
-   
-    // Get all customers
-    getAllCustomers() {
-        this.managemencs.getAllCustomers().subscribe((data) => {
-            this.nocuster = data.length > 0 ? false : true;
-        })
-    }
-    createNewCustomer(customer) {
-        let createParams = {
-            customerId: customer
-        };
-        this.managemencs.createCustomer(customer, createParams).subscribe((data) => {
-            if (data["status"] == 'SUCCESS') {
-                this.nocuster = false;
-            } else {
-                this.nocuster = true;
-                console.log(data, "Interface returned error")
-            }
-        })
-    }
-    clearCustomerInput() {
-        this.firstCustomer = '';
+  ngOnInit () {
+    this.getAllCustomers()
+  }
+
+  // Get all customers
+  getAllCustomers () {
+    this.managemencs.getAllCustomers().subscribe(data => {
+      this.nocuster = data.length > 0 ? false : true
+    })
+  }
+  createNewCustomer (customer) {
+    let createParams = {
+      // customerId: customer,
+      'global-customer-id': customer,
+      'subscriber-name': customer,
+      'subscriber-type': 'INFRA'
     }
+    this.managemencs.createCustomer(customer, createParams).subscribe(data => {
+      if (data['status'] == 'SUCCESS') {
+        this.nocuster = false
+      } else {
+        this.nocuster = true
+        console.log(data, 'Interface returned error')
+      }
+    })
+  }
+  clearCustomerInput () {
+    this.firstCustomer = ''
+  }
 }