summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition/deployment/deployment-graph.component.ts
blob: 143a759960855a360841cac65a9ad5523c38a765 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import {Component, ElementRef, Inject, OnInit} from "@angular/core";
import {DeploymentGraphService} from "./deployment-graph.service";
import '@bardit/cytoscape-expand-collapse';
import * as _ from "lodash";
import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
import {WorkspaceService} from "../../workspace/workspace.service";
import {NodesFactory} from "../../../../models/graph/nodes/nodes-factory";
import {CommonGraphUtils} from "../graph/common/common-graph-utils";
import {ISdcConfig, SdcConfigToken} from "../../../config/sdc-config.config";
import {Module} from "../../../../models/modules/base-module";
import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
import {ComponentGenericResponse} from "../../../services/responses/component-generic-response";
import {ComponentInstanceFactory} from "../../../../utils/component-instance-factory";
import {ModulesNodesStyle} from "../graph/common/style/module-node-style";
import {ComponentInstanceNodesStyle} from "../graph/common/style/component-instances-nodes-style";
import {CompositionGraphLinkUtils} from "../graph/utils/composition-graph-links-utils";

@Component({
    selector: 'deployment-graph',
    templateUrl: './deployment-graph.component.html',
    styleUrls: ['./deployment-graph.component.less']
})

export class DeploymentGraphComponent implements OnInit {
    constructor(private elRef: ElementRef,
                private topologyTemplateService: TopologyTemplateService,
                private workspaceService: WorkspaceService,
                private deploymentService: DeploymentGraphService,
                private commonGraphUtils: CommonGraphUtils,
                private nodeFactory: NodesFactory,
                private commonGraphLinkUtils: CompositionGraphLinkUtils,
                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig) {

    }

    public _cy: Cy.Instance;

    ngOnInit(): void {
        this.topologyTemplateService.getDeploymentGraphData(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId).subscribe((response: ComponentGenericResponse) => {
            this.deploymentService.componentInstances = response.componentInstances;
            this.deploymentService.componentInstancesRelations = response.componentInstancesRelations;
            this.deploymentService.modules = response.modules;
            this.loadGraph();
        });
    }

    public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
        let parentGroup: Module = _.find(groupsArray, (group: Module) => {
            return _.find(_.values(group.members), (member: string) => {
                return member === componentInstanceId;
            });
        });
        return parentGroup ? parentGroup.uniqueId : "";
    };

    public initGraphModules = () => {
        if (this.deploymentService.modules) { // Init module nodes
            _.each(this.deploymentService.modules, (groupModule: Module) => {
                let moduleNode = this.nodeFactory.createModuleNode(groupModule);
                this.commonGraphUtils.addNodeToGraph(this._cy, moduleNode);
            });
        }
    }

    public initGraphComponentInstances = () => {
        _.each(this.deploymentService.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
            let componentInstanceNode = this.nodeFactory.createNode(instance);
            componentInstanceNode.parent = this.findInstanceModule(this.deploymentService.modules, instance.uniqueId);
            if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
                this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, componentInstanceNode);
            }
        });
    }

    public handleEmptyModule = () => {
        // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
        // so we must add an empty dummy child node
        _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
            if (!moduleNode.isParent()) {
                let dummyInstance = ComponentInstanceFactory.createEmptyComponentInstance();
                let componentInstanceNode = this.nodeFactory.createNode(dummyInstance);
                componentInstanceNode.parent = moduleNode.id();
                let dummyNode = this.commonGraphUtils.addNodeToGraph(this._cy, componentInstanceNode, moduleNode.position());
                dummyNode.addClass('dummy-node');
            }
        })
    }

    public initGraphNodes = (): void => {
        this.initGraphModules();
        this.initGraphComponentInstances();
        this.handleEmptyModule();
    };

    private loadGraph = () => {

        let graphEl = this.elRef.nativeElement.querySelector('.sdc-deployment-graph-wrapper');
        this._cy = cytoscape({
            container: graphEl,
            style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
            zoomingEnabled: false,
            selectionType: 'single',

        });

        //adding expand collapse extension
        this._cy.expandCollapse({
            layoutBy: {
                name: "grid",
                animate: true,
                randomize: false,
                fit: true
            },
            fisheye: false,
            undoable: false,
            expandCollapseCueSize: 18,
            expandCueImage: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
            collapseCueImage: this.sdcConfig.imagesPath + '/assets/styles/images/resource-icons/' + 'openModule.png',
            expandCollapseCueSensitivity: 2,
            cueOffset: -20
        });

        this.initGraphNodes(); //creating instances nodes
        this.commonGraphLinkUtils.initGraphLinks(this._cy, this.deploymentService.componentInstancesRelations);
        this._cy.collapseAll();
    };
}