cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts

   1 /*
   2 ============LICENSE_START==========================================
   3 ===================================================================
   4 Copyright (C) 2019 Orange. All rights reserved.
   5 ===================================================================
   6 Modification Copyright (c) 2020 IBM
   7 ===================================================================
   8 Modification Copyright (c) 2020 Orange
   9 ===================================================================
  10
  11 Unless otherwise specified, all software contained herein is licensed
  12 under the Apache License, Version 2.0 (the License);
  13 you may not use this software except in compliance with the License.
  14 You may obtain a copy of the License at
  15
  16     http://www.apache.org/licenses/LICENSE-2.0
  17
  18 Unless required by applicable law or agreed to in writing, software
  19 distributed under the License is distributed on an "AS IS" BASIS,
  20 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  21 See the License for the specific language governing permissions and
  22 limitations under the License.
  23 ============LICENSE_END============================================
  24 */
  25
  26 import dagre from 'dagre';
  27 import graphlib from 'graphlib';
  28 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
  29 import * as joint from 'jointjs';
  30 import './jointjs/elements/palette.function.element';
  31 import './jointjs/elements/action.element';
  32 import './jointjs/elements/board.function.element';
  33 import { DesignerStore } from './designer.store';
  34 import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
  35 import { GraphUtil } from './graph.util';
  36 import { GraphGenerator } from './graph.generator.util';
  37 import { FunctionsStore } from './functions.store';
  38 import { Subject } from 'rxjs';
  39 import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
  40 import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
  41 import { ActivatedRoute, Router } from '@angular/router';
  42 import { DesignerService } from './designer.service';
  43 import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model';
  44 import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes';
  45 import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder';
  46 import { PackageCreationStore } from '../package-creation/package-creation.store';
  47 import { PackageCreationService } from '../package-creation/package-creation.service';
  48 import { PackageCreationUtils } from '../package-creation/package-creation.utils';
  49 import * as JSZip from 'jszip';
  50 import { saveAs } from 'file-saver';
  51 import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service';
  52 import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model';
  53 import { TopologyTemplate } from './model/designer.topologyTemplate.model';
  54 import { ToastrService } from 'ngx-toastr';
  55 import { DesignerDashboardState } from './model/designer.dashboard.state';
  56 import { NgxUiLoaderService } from 'ngx-ui-loader';
  57
  58 @Component({
  59     selector: 'app-designer',
  60     templateUrl: './designer.component.html',
  61     styleUrls: ['./designer.component.css'],
  62     encapsulation: ViewEncapsulation.None
  63 })
  64 export class DesignerComponent implements OnInit, OnDestroy {
  65
  66     controllerSideBar: boolean;
  67     actionAttributesSideBar: boolean;
  68     functionAttributeSidebar: boolean;
  69     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
  70     customActionName: string;
  71     showAction: boolean;
  72     cl = 'editBar';
  73
  74     boardGraph: joint.dia.Graph;
  75     boardPaper: joint.dia.Paper;
  76
  77     paletteGraph: joint.dia.Graph;
  78     palettePaper: joint.dia.Paper;
  79     ngUnsubscribe = new Subject();
  80     opt = { tx: 100, ty: 100 };
  81     filesData: any = [];
  82     folder: FolderNodeElement = new FolderNodeElement();
  83     zipFile: JSZip = new JSZip();
  84     cbaPackage: CBAPackage;
  85     actions: string[] = [];
  86     dataTarget: string;
  87     steps: string[];
  88     designerState: DesignerDashboardState;
  89     currentActionName: string;
  90     packageId: any;
  91
  92     constructor(
  93         private designerStore: DesignerStore,
  94         private functionStore: FunctionsStore,
  95         private packageCreationStore: PackageCreationStore,
  96         private packageCreationUtils: PackageCreationUtils,
  97         private graphUtil: GraphUtil,
  98         private graphGenerator: GraphGenerator,
  99         private route: ActivatedRoute,
 100         private router: Router,
 101         private designerService: DesignerService,
 102         private packageCreationService: PackageCreationService,
 103         private packageCreationExtractionService: PackageCreationExtractionService,
 104         private activatedRoute: ActivatedRoute,
 105         private ngxService: NgxUiLoaderService,
 106         private toastService: ToastrService) {
 107         this.controllerSideBar = true;
 108         this.actionAttributesSideBar = false;
 109         this.showAction = false;
 110         this.functionAttributeSidebar = false;
 111
 112     }
 113
 114     _toggleSidebar1() {
 115         this.controllerSideBar = !this.controllerSideBar;
 116         if (this.controllerSideBar === false) {
 117             this.cl = 'editBar2';
 118         }
 119         if (this.controllerSideBar === true) {
 120             this.cl = 'editBar';
 121         }
 122     }
 123
 124     _toggleSidebar2() {
 125         this.actionAttributesSideBar = !this.actionAttributesSideBar;
 126     }
 127
 128     publishBluePrint() {
 129         this.create();
 130         this.zipFile.generateAsync({ type: 'blob' })
 131             .then(blob => {
 132                 const formData = new FormData();
 133                 formData.append('file', blob);
 134                 this.designerService.publishBlueprint(formData).subscribe(res => {
 135                     this.toastService.success('Package Deployed Successfuly');
 136                     console.log('Package Deployed...');
 137                 }, error => {
 138                     this.toastService.error(error.message, 'Package error');
 139                     console.log(error);
 140                 }, () => {
 141                     //  this.deployBluePrint = false;
 142                 });
 143             });
 144     }
 145
 146
 147     /**
 148      * - There is a board (main paper) that will the action and function selected from the palette
 149      * itmes in this board will be used to create tosca workflow and node templates
 150      * - There is also palette , whis contains all the possible functions and actions
 151      * that can be dragged into the board
 152      * - There is also a fly paper , which is temporarliy paper created on the fly
 153      * when items is dragged from the palette- and it's deleted when the item is dropped over
 154      * the board.
 155      * for more info about the drag and drop algorithem used please visit the following link:
 156      * https://stackoverflow.com/a/36932973/1340034
 157      */
 158
 159     ngOnInit() {
 160         // this.ngxService.start();
 161         this.customActionName = this.route.snapshot.paramMap.get('actionName');
 162         if (this.customActionName !== '') {
 163             this.showAction = true;
 164         }
 165         this.initializeBoard();
 166         this.initializePalette();
 167         this.stencilPaperEventListeners();
 168         const id = this.route.snapshot.paramMap.get('id');
 169         this.designerService.getPagedPackages(id).subscribe(
 170             (bluePrintDetailModels) => {
 171                 if (bluePrintDetailModels) {
 172                     this.viewedPackage = bluePrintDetailModels[0];
 173                     this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/'
 174                         + this.viewedPackage.artifactVersion)
 175                         .subscribe(response => {
 176                             const blob = new Blob([response], { type: 'application/octet-stream' });
 177                             this.packageCreationExtractionService.extractBlobToStore(blob);
 178                         });
 179                 }
 180             });
 181         this.packageCreationStore.state$.subscribe(cba => {
 182             this.cbaPackage = cba;
 183             console.log(cba.templateTopology.content);
 184             this.designerStore.saveSourceContent(cba.templateTopology.content);
 185
 186         });
 187
 188         /**
 189          * the code to retrieve from server is commented
 190          */
 191         this.functionStore.state$
 192             .pipe(
 193                 distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
 194                 takeUntil(this.ngUnsubscribe))
 195             .subscribe(state => {
 196
 197                 if (state.serverFunctions) {
 198                     console.log('inside subscriotn on functions store -->', state.serverFunctions);
 199                     console.log(state);
 200                     // this.viewedFunctions = state.functions;
 201                     const list = state.serverFunctions;
 202
 203                     const cells = this.graphUtil.buildPaletteGraphFromList(list);
 204                     this.paletteGraph.resetCells(cells);
 205
 206                     let idx = 0;
 207                     cells.forEach(cell => {
 208                         cell.translate(5, (cell.attributes.size.height + 5) * idx++);
 209                     });
 210                 }
 211             });
 212
 213         this.designerStore.state$
 214             .pipe(
 215                 distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
 216                 takeUntil(this.ngUnsubscribe))
 217             .subscribe(state => {
 218                 this.designerState = state;
 219                 if (state.sourceContent) {
 220                     console.log('inside desinger.component---> ', state);
 221                     // generate graph from store objects if exist
 222                     const topologtTemplate: TopologyTemplate = JSON.parse(state.sourceContent);
 223                     console.log(topologtTemplate);
 224                     delete state.sourceContent;
 225                     this.graphGenerator.clear(this.boardGraph);
 226                     this.graphGenerator.populate(topologtTemplate, this.boardGraph);
 227
 228                     console.log('all cells', this.boardGraph.getCells());
 229                     /**
 230                      * auto arrange elements in graph
 231                      * https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#layout.DirectedGraph
 232                      */
 233                     joint.layout.DirectedGraph.layout(this.boardGraph.getCells(), {
 234                         dagre,
 235                         graphlib,
 236                         setLinkVertices: false,
 237                         marginX: 10,
 238                         marginY: 10,
 239                         clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 },
 240                         rankDir: 'TB'
 241                     });
 242                     this.actions = [];
 243                     console.log('here');
 244                     for (const workflowsKey in topologtTemplate.workflows) {
 245                         if (workflowsKey && !this.actions.includes(workflowsKey)) {
 246                             this.actions.push(workflowsKey);
 247                             /* tslint:disable:no-string-literal */
 248                             if (!this.designerState.template.workflows[workflowsKey]['inputs']) {
 249                                 this.designerState.template.workflows[workflowsKey]['inputs'] = {};
 250                             }
 251                             if (!this.designerState.template.workflows[workflowsKey]['outputs']) {
 252                                 this.designerState.template.workflows[workflowsKey]['outputs'] = {};
 253                             }
 254                         }
 255                     }
 256                 }
 257             });
 258
 259         // action triggering
 260         this.functionStore.retrieveFuntions();
 261         this.activatedRoute.paramMap.subscribe(res => {
 262             this.packageId = res.get('id');
 263         });
 264
 265     }
 266
 267     initializePalette() {
 268         if (!this.paletteGraph) {
 269             this.paletteGraph = new joint.dia.Graph();
 270             this.palettePaper = new joint.dia.Paper({
 271                 el: $('#palette-paper'),
 272                 model: this.paletteGraph,
 273                 width: 318,
 274                 // height: '100%',
 275                 height: $('#palette-paper').height(),
 276                 // background: {
 277                 //   color: 'rgba(0, 255, 0, 0.3)'
 278                 // },
 279                 interactive: false
 280                 // elements in paletter need to be fixed, please refer to flying paper concept
 281             });
 282         }
 283     }
 284
 285     initializeBoard() {
 286         if (!this.boardGraph) {
 287             console.log('initializeBoard...');
 288             this.boardGraph = new joint.dia.Graph();
 289             this.boardPaper = new joint.dia.Paper({
 290                 el: $('#board-paper'),
 291                 model: this.boardGraph,
 292                 height: '100%',
 293                 width: '100%',
 294                 // origin: { x: 80, y: 70 },
 295                 gridSize: 10, // background line sizes
 296                 drawGrid: true,
 297                 // background: {
 298                 // color: 'rgba(0, 255, 0, 0.3)'
 299                 // },
 300                 cellViewNamespace: joint.shapes
 301             });
 302
 303             this.boardPaper.on('all', element => {
 304                 // console.log(element);
 305             });
 306
 307             this.boardPaper.on('link:pointerdown', link => {
 308                 console.log(link);
 309             });
 310
 311             this.boardPaper.on('element:pointerdown', element => {
 312                 // this.modelSelected.emit(element.model.get('model'));
 313             });
 314
 315             this.boardPaper.on('blank:pointerclick', () => {
 316                 // this.selectedModel = undefined;
 317             });
 318
 319             this.boardGraph.on('change:position', (cell) => {
 320
 321                 const parentId = cell.get('parent');
 322                 if (!parentId) {
 323                     // this is action
 324                     return;
 325                 }
 326
 327                 const parent = this.boardGraph.getCell(parentId);
 328
 329                 const parentBbox = parent.getBBox();
 330                 const cellBbox = cell.getBBox();
 331                 if (parentBbox.containsPoint(cellBbox.origin()) &&
 332                     parentBbox.containsPoint(cellBbox.topRight()) &&
 333                     parentBbox.containsPoint(cellBbox.corner()) &&
 334                     parentBbox.containsPoint(cellBbox.bottomLeft())) {
 335
 336                     // All the four corners of the child are inside
 337                     // the parent area.
 338                     return;
 339                 }
 340
 341                 // Revert the child position.
 342                 cell.set('position', cell.previous('position'));
 343             });
 344         }
 345         console.log('done initializing Board...');
 346     }
 347
 348     insertCustomActionIntoBoard() {
 349         console.log('saving action to store action workflow....');
 350         let actionName = this.graphUtil.generateNewActionName();
 351         while (this.actions.includes(actionName)) {
 352             actionName = this.graphUtil.generateNewActionName();
 353         }
 354         this.graphUtil.createCustomActionWithName(actionName, this.boardGraph);
 355         this.designerStore.addDeclarativeWorkFlow(actionName);
 356         this.actions.push(actionName);
 357     }
 358
 359     stencilPaperEventListeners() {
 360         this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => {
 361
 362             $('body').append(`
 363         <div id="flyPaper"
 364             style="position:fixed;z-index:100;opacity:.7;pointer-event:none;background-color: transparent !important;"></div>`
 365             );
 366             const flyGraph = new joint.dia.Graph();
 367             const flyPaper = new joint.dia.Paper({
 368                 el: $('#flyPaper'),
 369                 model: flyGraph,
 370                 interactive: true
 371             });
 372             const flyShape = draggedCell.model.clone();
 373             const pos = draggedCell.model.position();
 374             const offset = {
 375                 x: x - pos.x,
 376                 y: y - pos.y
 377             };
 378
 379             flyShape.position(0, 0);
 380             flyGraph.addCell(flyShape);
 381             $('#flyPaper').offset({
 382                 left: pointerDownEvent.pageX - offset.x,
 383                 top: pointerDownEvent.pageY - offset.y
 384             });
 385             $('body').on('mousemove.fly', mouseMoveEvent => {
 386                 $('#flyPaper').offset({
 387                     left: mouseMoveEvent.pageX - offset.x,
 388                     top: mouseMoveEvent.pageY - offset.y
 389                 });
 390             });
 391
 392             $('body').on('mouseup.fly', mouseupEvent => {
 393                 const mouseupX = mouseupEvent.pageX;
 394                 const mouseupY = mouseupEvent.pageY;
 395                 const target = this.boardPaper.$el.offset();
 396                 // Dropped over paper ?
 397                 if (mouseupX > target.left &&
 398                     mouseupX < target.left + this.boardPaper.$el.width() &&
 399                     mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) {
 400                     const functionType = this.graphUtil.getFunctionTypeFromPaletteFunction(flyShape);
 401                     // step name is CDS realted terminology, please refer to tosca types
 402                     const stepName = functionType;
 403                     const functionElementForBoard = this.graphUtil.dropFunctionOverActionWithPosition(
 404                         stepName, functionType,
 405                         mouseupX, mouseupY,
 406                         target, offset,
 407                         this.boardGraph);
 408
 409                     const parentCell = this.graphUtil.getParent(functionElementForBoard, this.boardPaper);
 410
 411                     if (parentCell &&
 412                         parentCell.model.attributes.type === ActionElementTypeName &&
 413                         this.graphUtil.canEmpedMoreChildern(parentCell.model, this.boardGraph)) {
 414
 415                         if (this.graphUtil.isEmptyParent(parentCell.model)) {
 416                             // first function in action
 417                             const actionName = parentCell.model.attributes.attrs['#label'].text;
 418                             this.designerStore.addStepToDeclarativeWorkFlow(actionName, stepName, functionType);
 419                             if (functionType === 'dg-generic') {
 420                                 this.designerStore.addDgGenericNodeTemplate(stepName);
 421                             } else {
 422                                 this.designerStore.addNodeTemplate(stepName, functionType);
 423                             }
 424                         } else {
 425                             // second action means there was a dg-generic node before
 426                             this.designerStore.addNodeTemplate(stepName, functionType);
 427                             // this will fail if multiple dg-generic were added
 428                             // TODO prevent multi functions of the same type inside the same action
 429                             const dgGenericNode = this.graphUtil.getDgGenericChild(parentCell.model, this.boardGraph)[0];
 430                             const dgGenericNodeName = this.graphUtil.getFunctionNameFromBoardFunction(dgGenericNode);
 431                             this.designerStore.addDgGenericDependency(dgGenericNodeName, stepName);
 432                         }
 433
 434
 435                         // Prevent recursive embedding.
 436                         if (parentCell &&
 437                             parentCell.model.get('parent') !== functionElementForBoard.id) {
 438                             parentCell.model.embed(functionElementForBoard);
 439                         }
 440                     } else {
 441                         console.log('function dropped outside action or not allowed, rolling back...');
 442                         alert('function dropped outside action or not allowed, rolling back...');
 443                         functionElementForBoard.remove();
 444                     }
 445                 }
 446                 $('body').off('mousemove.fly').off('mouseup.fly');
 447                 // flyShape.remove();
 448                 $('#flyPaper').remove();
 449             });
 450         });
 451         console.log('done stencilPaperEventListeners()...');
 452     }
 453
 454     ngOnDestroy() {
 455         this.ngUnsubscribe.next();
 456         this.ngUnsubscribe.complete();
 457     }
 458
 459     saveBluePrint() {
 460         this.ngxService.start();
 461         FilesContent.clear();
 462         let packageCreationModes: PackageCreationModes;
 463         this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
 464         this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
 465         packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
 466         this.designerStore.state$.subscribe(state => {
 467             this.cbaPackage.templateTopology.content = this.packageCreationUtils.transformToJson(state.template);
 468         });
 469         packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
 470         this.filesData.push(this.folder.TREE_DATA);
 471         this.saveBluePrintToDataBase();
 472
 473     }
 474
 475     enrichBluePrint() {
 476         this.ngxService.start();
 477         console.log('start enrich ------------');
 478         this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology);
 479         this.formTreeData();
 480         this.enrichPackage();
 481     }
 482
 483     private formTreeData() {
 484         FilesContent.clear();
 485         let packageCreationModes: PackageCreationModes;
 486         this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
 487         this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
 488         packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
 489         packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
 490         this.filesData.push(this.folder.TREE_DATA);
 491     }
 492
 493     private enrichPackage() {
 494         this.create();
 495         this.zipFile.generateAsync({ type: 'blob' })
 496             .then(blob => {
 497                 this.packageCreationService.enrichAndDeployPackage(blob).subscribe(response => {
 498                     // this.packageCreationService.enrichPackage(blob).subscribe(response => {
 499                     response = JSON.parse(response);
 500                     console.log(response);
 501                     console.log('success');
 502                     const id = response['blueprintModel']['id'];
 503                     this.router.navigate(['/packages/designer/' + id]);
 504                     // const blobInfo = new Blob([response], { type: 'application/octet-stream' });
 505                     // this.packageCreationStore.clear();
 506                     // this.packageCreationExtractionService.extractBlobToStore(blobInfo);
 507                     this.toastService.success('Enriched & Deployed successfully ');
 508                 }, err => {
 509                     console.log(err);
 510                     this.toastService.error(err.message, 'Enrich Failed');
 511                     this.ngxService.stop();
 512                 }, () => {
 513                     this.ngxService.stop();
 514                 });
 515             }, error => {
 516                 this.toastService.error(error.mesasge, 'Error occurs during enrichment process');
 517                 console.error('Error -' + error.message);
 518             }, () => {
 519                 this.ngxService.stop();
 520             });
 521     }
 522
 523     create() {
 524         this.zipFile = new JSZip();
 525         FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
 526             this.zipFile.folder(key.split('/')[0]);
 527             this.zipFile.file(key, value);
 528         });
 529
 530     }
 531
 532     saveBluePrintToDataBase() {
 533         this.create();
 534         this.zipFile.generateAsync({ type: 'blob' })
 535             .then(blob => {
 536                 this.packageCreationService.savePackage(blob).subscribe(
 537                     bluePrintDetailModels => {
 538                         this.toastService.success('Package is updated successfully');
 539                         const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
 540                         this.router.navigate(['/packages/designer/' + id]);
 541                         console.log('success');
 542                     }, error => {
 543                         this.toastService.error('Error Occured during editing process' + error.message);
 544                         console.log('Error -' + error.message);
 545                     }, () => {
 546                         this.ngxService.stop();
 547                     });
 548             }, err => {
 549             },
 550                 () => {
 551                     this.ngxService.stop();
 552                 });
 553     }
 554
 555     openActionAttributes(customActionName: string) {
 556         console.log('opening here action attributes');
 557         this.currentActionName = customActionName;
 558         this.actionAttributesSideBar = true;
 559         this.functionAttributeSidebar = false;
 560         this.designerStore.setCurrentAction(customActionName);
 561         /* tslint:disable:no-string-literal */
 562         this.steps = Object.keys(this.designerState.template.workflows[customActionName]['steps']);
 563     }
 564
 565     openFunctionAttributes(customFunctionName: string) {
 566         // console.log(customFunctionName);
 567         this.actionAttributesSideBar = false;
 568         this.functionAttributeSidebar = true;
 569         // console.log(this.designerState.template.workflows[this.currentActionName]
 570         // ['steps'][customFunctionName]['target']);
 571         this.designerStore.setCurrentFunction(this.designerState.template.workflows[this.currentActionName]
 572         ['steps'][customFunctionName]['target']);
 573     }
 574
 575     getTarget(stepname) {
 576         try {
 577             //  console.log(this.currentActionName + " -- " + stepname)
 578             return this.designerState.template.workflows[this.currentActionName]
 579             ['steps'][stepname]['target'];
 580         } catch (e) {
 581             // console.log(e);
 582         }
 583     }
 584
 585     downloadPackage() {
 586
 587         this.ngxService.start();
 588         this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/'
 589             + this.viewedPackage.artifactVersion).subscribe(response => {
 590                 const blob = new Blob([response], { type: 'application/octet-stream' });
 591                 saveAs(blob, this.viewedPackage.artifactName + '-' + this.viewedPackage.artifactVersion + '-CBA.zip');
 592
 593             }, err => {
 594                 this.toastService.error('Package ' + this.viewedPackage.artifactName + 'has error when downloading' +
 595                     err.message);
 596                 this.ngxService.stop();
 597             }, () => {
 598                 this.toastService.success('Package ' + this.viewedPackage.artifactName + 'downloaded successfully');
 599                 this.ngxService.stop();
 600             });
 601     }
 602 }