2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
21 import * as _ from "lodash";
22 import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
23 import { ComponentInstanceFactory } from "app/utils";
24 import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
25 import { CommonGraphUtils } from "../common/common-graph-utils";
26 import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
27 import { ModulesNodesStyle } from "../common/style/module-node-style";
28 import { GRAPH_EVENTS } from "app/utils";
29 import { EventListenerService } from "app/services";
30 import '@bardit/cytoscape-expand-collapse';
31 import { AngularJSBridge } from "../../../services/angular-js-bridge-service";
33 interface IDeploymentGraphScope extends ng.IScope {
37 export class DeploymentGraph implements ng.IDirective {
38 private _cy: Cy.Instance;
40 constructor(private NodesFactory: NodesFactory,
41 private commonGraphUtils: CommonGraphUtils,
42 private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
43 private ComponentInstanceFactory: ComponentInstanceFactory,
44 private eventListenerService: EventListenerService) {
48 template = require('./deployment-graph.html');
54 link = (scope: IDeploymentGraphScope, el: JQuery) => {
56 if (scope.component.isResource()) {
57 if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.modules) {
58 this.loadGraph(scope, el);
60 this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => {
61 this.loadGraph(scope, el);
67 public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
68 if (component.modules) { // Init module nodes
69 _.each(component.modules, (groupModule: Module) => {
70 let moduleNode = this.NodesFactory.createModuleNode(groupModule);
71 this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
75 _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
76 let componentInstanceNode = this.NodesFactory.createNode(instance);
77 componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.modules, instance.uniqueId);
78 if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
79 this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode);
83 // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
84 // so we must add an empty dummy child node
85 _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
86 if (!moduleNode.isParent()) {
87 let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
88 let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
89 componentInstanceNode.parent = moduleNode.id();
90 let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position());
91 dummyNode.addClass('dummy-node');
96 private registerGraphEvents() {
98 this._cy.on('afterExpand', (event) => {
99 event.cyTarget.qtip({});
102 this._cy.on('afterCollapse', (event) => {
103 this.commonGraphUtils.initNodeTooltip(event.cyTarget);
107 private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
109 let graphEl = el.find('.sdc-deployment-graph-wrapper');
110 const imagePath = AngularJSBridge.getAngularConfig().imagesPath;
111 this._cy = cytoscape({
113 style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
114 zoomingEnabled: false,
115 selectionType: 'single',
119 //adding expand collapse extension
120 this._cy.expandCollapse({
129 expandCollapseCueSize: 18,
130 expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
131 collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png',
132 expandCollapseCueSensitivity: 2,
136 this.initGraphNodes(this._cy, scope.component); //creating instances nodes
137 this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
138 this._cy.collapseAll();
139 this.registerGraphEvents();
141 scope.$on('$destroy', () => {
143 _.forEach(GRAPH_EVENTS, (event) => {
144 this.eventListenerService.unRegisterObserver(event);
150 public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
151 return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
155 DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService'];