summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/graphs-v2
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2')
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts2
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts52
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts2
3 files changed, 33 insertions, 23 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
index 83bf747501..5285f46112 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
@@ -3,7 +3,7 @@ import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, Compositi
import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils";
import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
import {CommonGraphUtils} from "../../common/common-graph-utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
export class CompositionGraphPaletteUtils {
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
index 5ad6570013..3a0726f212 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -1,22 +1,25 @@
-import {Component, Module, NodesFactory, ComponentInstance} from "app/models";
-import {ComponentInstanceFactory} from "app/utils";
-import {DeploymentGraphGeneralUtils} from "./deployment-utils/deployment-graph-general-utils";
-import {CommonGraphUtils} from "../common/common-graph-utils";
-import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style";
-import {ModulesNodesStyle} from "../common/style/module-node-style";
-import {GRAPH_EVENTS} from "app/utils";
-import {EventListenerService} from "app/services";
-import 'cytoscape-expand-collapse';
+import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
+import { ComponentInstanceFactory } from "app/utils";
+import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
+import { CommonGraphUtils } from "../common/common-graph-utils";
+import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
+import { ModulesNodesStyle } from "../common/style/module-node-style";
+import { GRAPH_EVENTS } from "app/utils";
+import { EventListenerService } from "app/services";
+import '@bardit/cytoscape-expand-collapse';
interface IDeploymentGraphScope extends ng.IScope {
- component:Component;
+ component: Component;
}
export class DeploymentGraph implements ng.IDirective {
- private _cy:Cy.Instance;
+ private _cy: Cy.Instance;
- constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils,
- private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) {
+ constructor(private NodesFactory: NodesFactory,
+ private commonGraphUtils: CommonGraphUtils,
+ private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
+ private ComponentInstanceFactory: ComponentInstanceFactory,
+ private eventListenerService: EventListenerService) {
}
restrict = 'E';
@@ -26,7 +29,7 @@ export class DeploymentGraph implements ng.IDirective {
isViewOnly: '='
};
- link = (scope:IDeploymentGraphScope, el:JQuery) => {
+ link = (scope: IDeploymentGraphScope, el: JQuery) => {
if (scope.component.isResource()) {
if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) {
@@ -39,16 +42,15 @@ export class DeploymentGraph implements ng.IDirective {
}
};
-
- public initGraphNodes = (cy:Cy.Instance, component:Component):void => {
+ public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
if (component.groups) { // Init module nodes
- _.each(component.groups, (groupModule:Module) => {
+ _.each(component.groups, (groupModule: Module) => {
let moduleNode = this.NodesFactory.createModuleNode(groupModule);
this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
});
}
- _.each(component.componentInstances, (instance:ComponentInstance) => { // Init component instance nodes
+ _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
let componentInstanceNode = this.NodesFactory.createNode(instance);
componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId);
if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
@@ -58,7 +60,7 @@ export class DeploymentGraph implements ng.IDirective {
// 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) => {
+ _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
if (!moduleNode.isParent()) {
let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
@@ -80,7 +82,7 @@ export class DeploymentGraph implements ng.IDirective {
});
}
- private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => {
+ private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
let graphEl = el.find('.sdc-deployment-graph-wrapper');
this._cy = cytoscape({
@@ -112,9 +114,17 @@ export class DeploymentGraph implements ng.IDirective {
this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
this._cy.collapseAll();
this.registerGraphEvents();
+
+ scope.$on('$destroy', () => {
+ this._cy.destroy();
+ _.forEach(GRAPH_EVENTS, (event) => {
+ this.eventListenerService.unRegisterObserver(event);
+ });
+ });
+
};
- public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => {
+ public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
}
}
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index 4bfbe5270e..0158a38253 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -10,7 +10,7 @@ import {
import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
import {EventListenerService} from "app/services";
import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
interface IPaletteScope {