change for the slice mgmt UI

Issue-ID: USECASEUI-387

Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79

4 files changed, 485 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
new file mode 100644
index 00000000..4adf3747
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
@@ -0,0 +1,204 @@
+<div theme class="main">
+  <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false>
+    <tbody>
+      <tr>
+        <td width="4%"></td>
+        <td width="96%">
+          <button style="float:right" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button>
+        </td>
+      </tr>
+      <ng-template ngFor let-data [ngForOf]="nzExpandTable.data">
+        <tr>
+          <td width="4%" class="tdCls" nzShowExpand [(nzExpand)]="data.expand"></td>
+          <td width="96%" class="tdCls">{{data.name | translate}}</td>
+        </tr>
+        <tr [nzExpand]="data.expand">
+          <td class="noPadding" colspan="2">
+            <form autocomplete="off" [formGroup]="validateForm">
+              <ng-template [ngIf]="data.rowIdx == 1">
+                <div style="display: flex; justify-content: center; padding: 1%;">
+                  <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" |  translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="name" id="name" [(ngModel)]="siteData.name">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="description" id="description" [(ngModel)]="siteData.description">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+              <ng-template [ngIf]="data.rowIdx == 2">
+                <div style="display: flex; justify-content: center; padding: 1%;">
+                  <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" |  translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_name" id="l2vpn_name" [(ngModel)]="l2vpn.l2vpn_name">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_description" id="l2vpn_description" [(ngModel)]="l2vpn.l2vpn_description">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_COS"><span class="form-lable-font">COS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_COS" id="l2vpn_COS" [(ngModel)]="l2vpn.l2vpn_COS"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_dualLink"><span class="form-lable-font">Dual Link</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_dualLink" id="l2vpn_dualLink" [(ngModel)]="l2vpn.l2vpn_dualLink"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_tenantId"><span class="form-lable-font">Tenant ID</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_tenantId" id="l2vpn_tenantId" [(ngModel)]="l2vpn.l2vpn_tenantId"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_vpnType"><span class="form-lable-font">VPN Type</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_vpnType" id="l2vpn_vpnType" [(ngModel)]="l2vpn.l2vpn_vpnType"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cbs"><span class="form-lable-font">CBS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_cbs" id="l2vpn_cbs" [(ngModel)]="l2vpn.l2vpn_cbs"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_ebs"><span class="form-lable-font">EBS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_ebs" id="l2vpn_ebs" [(ngModel)]="l2vpn.l2vpn_ebs"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">Color Aware</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_colorAware" id="l2vpn_colorAware" [(ngModel)]="l2vpn.l2vpn_colorAware">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_reroute"><span class="form-lable-font">Re-route</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_reroute" id="l2vpn_reroute" [(ngModel)]="l2vpn.l2vpn_reroute">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">Coupling Flag</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_couplingFlag" id="l2vpn_couplingFlag" [(ngModel)]="l2vpn.l2vpn_couplingFlag"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cir"><span class="form-lable-font">CIR</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_cir" id="l2vpn_cir" [(ngModel)]="l2vpn.l2vpn_cir"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_startTime"><span class="form-lable-font">Strat Time</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <nz-date-picker formControlName="l2vpn_startTime" id="l2vpn_startTime" [(ngModel)]="l2vpn.l2vpn_startTime"></nz-date-picker>
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_endTime"><span class="form-lable-font">End Time</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <nz-date-picker formControlName="l2vpn_endTime" id="l2vpn_endTime" [(ngModel)]="l2vpn.l2vpn_endTime"></nz-date-picker>
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_eir"><span class="form-lable-font">EIR</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_eir" id="l2vpn_eir" [(ngModel)]="l2vpn.l2vpn_eir"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                        <nz-form-item class="mar-0x  child">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_SLS"><span class="form-lable-font">SLS</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="l2vpn_SLS" id="l2vpn_SLS" [(ngModel)]="l2vpn.l2vpn_SLS"  (keypress)="numberOnly($event)">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                </div>
+              </div>
+            </ng-template>
+            <ng-template [ngIf]="data.rowIdx == 3">
+              <div style="display: flex; justify-content: center; padding: 1%;">
+                <div style="width: 100%" class="">
+                    <div style="display: flex; justify-content: space-around;">
+                      <div class="sotn-form">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_cVLAN" ><span class="form-lable-font">VLAN</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="sotnuni_cVLAN" id="sotnuni_cVLAN" [(ngModel)]="uni.sotnuni_cVLAN">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_tpId" ><span class="form-lable-font">TP ID</span></nz-form-label>
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <input nz-input formControlName="sotnuni_tpId" id="sotnuni_tpId" [(ngModel)]="uni.sotnuni_tpId">
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                      <div class="sotn-form ">
+                        <nz-form-item  class="mar-0x">
+                          <nz-form-control [nzSm]="14" [nzXs]="24">
+                            <button (click)="addUNI($event)" nz-button nzType="primary">Add</button>
+                          </nz-form-control>
+                        </nz-form-item>
+                      </div>
+                    </div>
+                    <nz-table #basicTable [nzData]="sotnUni" [nzShowPagination]="false">
+                      <thead>
+                        <tr>
+                          <th>VLAN</th>
+                          <th>TP Id</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                          <tr *ngFor="let data of basicTable.data">
+                          <td>{{ data.sotnuni_cVLAN }}</td>
+                          <td>{{ data.sotnuni_tpId }}</td>
+                          <td>
+                            <a>Delete</a>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </nz-table>
+                  </div>
+                </div>
+              </ng-template>
+            </form>
+          </td>
+        </tr>
+      </ng-template>
+    </tbody>
+   </nz-table>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
new file mode 100644
index 00000000..5ac5c07d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
@@ -0,0 +1,59 @@
+
+.main {
+    min-height: calc(~"100vh - 165px");
+}
+nz-table
+{
+    th,tr,td,nz-spin,div,span
+    {
+        background: var(--primary);
+        color: var(--on-primary) ;        
+        .action
+        {
+            margin-left:10px;
+        }
+    }
+    td{
+        border-bottom: 1px solid #F7F8FC;
+        padding:5px;
+    }
+    th{
+        padding:5px;
+        font-weight:bold;  
+        color: var(--on-primary) ; 
+    }
+    tr{
+        border-left-color: var(--primary);
+    }
+
+        
+}
+.tdCls{
+    font-weight:bold;
+    color: var(--on-primary) ;
+    background-color:var(--primary) ;
+    overflow: hidden; 
+    height:21px;   
+  }
+.sotn-form{
+    display: flex;
+    flex-direction: column;
+    width: 45%;
+}
+.crt-btn{
+
+    display: flex;
+    justify-content: flex-end;
+}
+.form-lable-font{
+    font-weight: bold;
+    color: deepskyblue;
+}
+.mar-0x{
+    margin:0;
+}
+
+.labelcls{
+    color: var(--on-primary);
+}
+
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts
new file mode 100644
index 00000000..d135a250
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderServiceComponent } from './order-service.component';
+
+describe('OrderServiceComponent', () => {
+  let component: OrderServiceComponent;
+  let fixture: ComponentFixture<OrderServiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderServiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
new file mode 100644
index 00000000..5a6bf6a2
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
@@ -0,0 +1,197 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,  
+  FormGroup,
+  Validators
+} from '@angular/forms';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { NzMessageService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-order-service',
+  templateUrl: './order-service.component.html',
+  styleUrls: ['./order-service.component.less']
+})
+export class OrderServiceComponent implements OnInit {
+
+  validateForm: FormGroup;
+  validateForm1: FormGroup;
+  validateForm2: FormGroup;
+  l2vpn:object = {};
+  siteData:object = {};
+  tipMsg: String = "serviceCreationInitiated";
+  displayMsg:boolean = false;
+  displayMsg2:boolean = false;
+  buttonDisabled:boolean = false;
+  intervalData:any;
+  baseUrl:string = '/api/usecaseui-server/v1';
+  expandDataSet = [
+    { rowIdx: 1, name: 'Service', expand: true },
+    { rowIdx: 2, name: 'VPN', expand: true },
+    { rowIdx: 3, name: 'UNI', expand: true }
+  ];
+  uni = {
+    sotnuni_cVLAN:"asdf",
+    sotnuni_tpId:"asdf"
+  };
+  sotnUni = [
+    {
+      sotnuni_cVLAN:"asdf",
+      sotnuni_tpId:"saf"
+    }
+  ];
+
+  constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService) { }
+
+  ngOnInit() {
+    this.validateForm = this.fb.group({
+      name:[null, [Validators.required]],
+      description:[null, [Validators.required]],
+      l2vpn_name:[null, [Validators.required]],
+      l2vpn_dualLink:[null, [Validators.required]],
+      l2vpn_description:[null, [Validators.required]],
+      l2vpn_SLS:[null, [Validators.required]],
+      l2vpn_COS:[null, [Validators.required]],
+      l2vpn_tenantId:[null, [Validators.required]],
+      l2vpn_vpnType:[null, [Validators.required]],
+      l2vpn_cbs:[null, [Validators.required]],
+      l2vpn_ebs:[null, [Validators.required]],
+      l2vpn_colorAware:[null, [Validators.required]],
+      l2vpn_reroute:[null, [Validators.required]],
+      l2vpn_couplingFlag:[null, [Validators.required]],
+      l2vpn_cir:[null, [Validators.required]],
+      l2vpn_eir:[null, [Validators.required]],
+      l2vpn_startTime:[null, [Validators.required]],
+      l2vpn_endTime:[null, [Validators.required]],
+      sotnuni_cVLAN:[null, [Validators.required]],
+      sotnuni_tpId:[null, [Validators.required]],
+    });
+    // this.validateForm1 = this.fb.group({
+    //   l2vpn_name:[null, [Validators.required]],
+    //   l2vpn_dualLink:[null, [Validators.required]],
+    //   l2vpn_description:[null, [Validators.required]],
+    //   l2vpn_SLS:[null, [Validators.required]],
+    //   l2vpn_COS:[null, [Validators.required]],
+    //   l2vpn_tenantId:[null, [Validators.required]],
+    //   l2vpn_vpnType:[null, [Validators.required]],
+    //   l2vpn_cbs:[null, [Validators.required]],
+    //   l2vpn_ebs:[null, [Validators.required]],
+    //   l2vpn_colorAware:[null, [Validators.required]],
+    //   l2vpn_reroute:[null, [Validators.required]],
+    //   l2vpn_couplingFlag:[null, [Validators.required]],
+    //   l2vpn_cir:[null, [Validators.required]],
+    //   l2vpn_eir:[null, [Validators.required]],
+    //   l2vpn_startTime:[null, [Validators.required]],
+    //   l2vpn_endTime:[null, [Validators.required]],
+    // });
+    // this.validateForm2 = this.fb.group({
+    //   sotnuni_cVLAN:[null, [Validators.required]],
+    //   sotnuni_tpId:[null, [Validators.required]],
+    // });
+  }
+
+  numberOnly(event): boolean {
+    const charCode = (event.which) ? event.which : event.keyCode;
+    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+        }
+    return true;
+  }
+
+  addUNI () {
+    this.sotnUni.push(this.uni);
+    // this.uni = {};
+  }
+
+  selectOrderSiteData(): void {
+    if (!this.validateVpnAndUni() ||
+      !this.validateServices() ) {
+      this.displayMsg = true;
+      this.message.error("Please fill all mandatory fields");
+      var comp = this;
+      setTimeout(function () {
+        comp.displayMsg = false;
+      }, 5000);
+    } else {
+      this.putnewSotnSiteData()
+    }
+  }
+
+  validateServices (): boolean {
+    if (this.siteData["name"] == null ||
+      this.siteData["description"] == null) {
+        return false;
+    }
+    return true;
+  }
+
+  validateVpnAndUni (): boolean {
+    if (this.l2vpn["l2vpn_COS"] == null ||
+      this.l2vpn["l2vpn_dualLink"] == null ||
+      this.l2vpn["l2vpn_description"] == null ||
+      this.l2vpn["l2vpn_name"] == null ||
+      this.l2vpn["l2vpn_tenantId"] == null ||
+      this.l2vpn["l2vpn_vpnType"] == null ||
+      this.l2vpn["l2vpn_cbs"] == null ||
+      this.l2vpn["l2vpn_ebs"] == null ||
+      this.l2vpn["l2vpn_colorAware"] == null ||
+      this.l2vpn["l2vpn_cir"] == null ||
+      this.l2vpn["l2vpn_startTime"] == null ||
+      this.l2vpn["l2vpn_endTime"] == null ||
+      this.l2vpn["l2vpn_eir"] == null ||
+      this.l2vpn["l2vpn_SLS"] == null ||
+      this.sotnUni.length == 0 ||
+      this.l2vpn["l2vpn_reroute"] == null) {
+        return false;
+    }
+    return true;
+  }
+
+  putnewSotnSiteData() {
+    console.log("order service data===>", this.siteData)
+    let comp = this;
+    this.message.info('Instantiation In Progress');
+    this.buttonDisabled = true;
+    let body = JSON.stringify(this.siteData);
+    const httpOptions = {
+      headers: new HttpHeaders({
+       'Content-Type': 'application/json',
+      })
+    };
+    let url1 = this.baseUrl + '/uui-lcm/Sotnservices';
+    // this.http.post<any>(url1, body, httpOptions).subscribe((data) => { 
+    //   let comp = this;
+    //   this.message.info('Instantiation In Progress');
+    //   comp.displayMsg2 = true;
+    //   this.intervalData = setInterval(() => {
+    //     let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId;
+    //     this.http.get<any>(url2, {}).subscribe((data) => {
+    //       if (data.status == "1") {
+    //         clearInterval(comp.intervalData);
+    //         comp.displayMsg2 = true;
+    //         comp.message.success('Service Created');
+    //         comp.goToPage();
+    //       }
+    //       else {
+    //         comp.message.info('Instantiation In Progress');
+    //         comp.displayMsg2 = true;
+    //       }
+    //     }, (err) => {
+    //       console.log(err);
+    //     });
+    //   }, 1000);
+    // }, (err) => {
+    //   console.log(err);
+    // });
+    setTimeout(() => {
+      comp.message.success("Service Created");
+      comp.goToPage();
+    }, 3000);
+  }
+
+  goToPage(): void {
+    setTimeout(function () {
+      // document.getElementById('manageService').click();
+    }, 1000);
+  }
+
+}