catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.ts

   1 import {Component, ElementRef, Inject, OnInit} from "@angular/core";
   2 import {DeploymentGraphService} from "./deployment-graph.service";
   3 import '@bardit/cytoscape-expand-collapse';
   4 import * as _ from "lodash";
   5 import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
   6 import {WorkspaceService} from "../../workspace/workspace.service";
   7 import {NodesFactory} from "../../../../models/graph/nodes/nodes-factory";
   8 import {CommonGraphUtils} from "../graph/common/common-graph-utils";
   9 import {ISdcConfig, SdcConfigToken} from "../../../config/sdc-config.config";
  10 import {Module} from "../../../../models/modules/base-module";
  11 import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
  12 import {ComponentGenericResponse} from "../../../services/responses/component-generic-response";
  13 import {ComponentInstanceFactory} from "../../../../utils/component-instance-factory";
  14 import {ModulesNodesStyle} from "../graph/common/style/module-node-style";
  15 import {ComponentInstanceNodesStyle} from "../graph/common/style/component-instances-nodes-style";
  16 import {CompositionGraphLinkUtils} from "../graph/utils/composition-graph-links-utils";
  17
  18 @Component({
  19     selector: 'deployment-graph',
  20     templateUrl: './deployment-graph.component.html',
  21     styleUrls: ['./deployment-graph.component.less']
  22 })
  23
  24 export class DeploymentGraphComponent implements OnInit {
  25     constructor(private elRef: ElementRef,
  26                 private topologyTemplateService: TopologyTemplateService,
  27                 private workspaceService: WorkspaceService,
  28                 private deploymentService: DeploymentGraphService,
  29                 private commonGraphUtils: CommonGraphUtils,
  30                 private nodeFactory: NodesFactory,
  31                 private commonGraphLinkUtils: CompositionGraphLinkUtils,
  32                 @Inject(SdcConfigToken) private sdcConfig: ISdcConfig) {
  33
  34     }
  35
  36     public _cy: Cy.Instance;
  37
  38     ngOnInit(): void {
  39         this.topologyTemplateService.getDeploymentGraphData(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId).subscribe((response: ComponentGenericResponse) => {
  40             this.deploymentService.componentInstances = response.componentInstances;
  41             this.deploymentService.componentInstancesRelations = response.componentInstancesRelations;
  42             this.deploymentService.modules = response.modules;
  43             this.loadGraph();
  44         });
  45     }
  46
  47     public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
  48         let parentGroup: Module = _.find(groupsArray, (group: Module) => {
  49             return _.find(_.values(group.members), (member: string) => {
  50                 return member === componentInstanceId;
  51             });
  52         });
  53         return parentGroup ? parentGroup.uniqueId : "";
  54     };
  55
  56     public initGraphModules = () => {
  57         if (this.deploymentService.modules) { // Init module nodes
  58             _.each(this.deploymentService.modules, (groupModule: Module) => {
  59                 let moduleNode = this.nodeFactory.createModuleNode(groupModule);
  60                 this.commonGraphUtils.addNodeToGraph(this._cy, moduleNode);
  61             });
  62         }
  63     }
  64
  65     public initGraphComponentInstances = () => {
  66         _.each(this.deploymentService.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
  67             let componentInstanceNode = this.nodeFactory.createNode(instance);
  68             componentInstanceNode.parent = this.findInstanceModule(this.deploymentService.modules, instance.uniqueId);
  69             if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
  70                 this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, componentInstanceNode);
  71             }
  72         });
  73     }
  74
  75     public handleEmptyModule = () => {
  76         // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
  77         // so we must add an empty dummy child node
  78         _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
  79             if (!moduleNode.isParent()) {
  80                 let dummyInstance = ComponentInstanceFactory.createEmptyComponentInstance();
  81                 let componentInstanceNode = this.nodeFactory.createNode(dummyInstance);
  82                 componentInstanceNode.parent = moduleNode.id();
  83                 let dummyNode = this.commonGraphUtils.addNodeToGraph(this._cy, componentInstanceNode, moduleNode.position());
  84                 dummyNode.addClass('dummy-node');
  85             }
  86         })
  87     }
  88
  89     public initGraphNodes = (): void => {
  90         this.initGraphModules();
  91         this.initGraphComponentInstances();
  92         this.handleEmptyModule();
  93     };
  94
  95     private loadGraph = () => {
  96
  97         let graphEl = this.elRef.nativeElement.querySelector('.sdc-deployment-graph-wrapper');
  98         this._cy = cytoscape({
  99             container: graphEl,
 100             style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
 101             zoomingEnabled: false,
 102             selectionType: 'single',
 103
 104         });
 105
 106         //adding expand collapse extension
 107         this._cy.expandCollapse({
 108             layoutBy: {
 109                 name: "grid",
 110                 animate: true,
 111                 randomize: false,
 112                 fit: true
 113             },
 114             fisheye: false,
 115             undoable: false,
 116             expandCollapseCueSize: 18,
 117             expandCueImage: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
 118             collapseCueImage: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'openModule.png',
 119             expandCollapseCueSensitivity: 2,
 120             cueOffset: -20
 121         });
 122
 123         this.initGraphNodes(); //creating instances nodes
 124         this.commonGraphLinkUtils.initGraphLinks(this._cy, this.deploymentService.componentInstancesRelations);
 125         this._cy.collapseAll();
 126     };
 127 }