diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/graphs-v2/deployment-graph')
4 files changed, 154 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts new file mode 100644 index 0000000000..d6d4aef374 --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts @@ -0,0 +1,114 @@ +/** + * Created by obarda on 12/19/2016. + */ +/// <reference path="../../../references"/> +module Sdc.Directives { + + import Util = jasmine.Util; + + interface IDeploymentGraphScope extends ng.IScope { + component:Models.Components.Component; + } + + export class DeploymentGraph implements ng.IDirective { + private _cy:Cy.Instance; + + constructor(private NodesFactory:Utils.NodesFactory, private commonGraphUtils:Graph.Utils.CommonGraphUtils, + private deploymentGraphGeneralUtils:Graph.Utils.DeploymentGraphGeneralUtils, private ComponentInstanceFactory: Sdc.Utils.ComponentInstanceFactory) { + } + + restrict = 'E'; + templateUrl = '/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html'; + scope = { + component: '=', + isViewOnly: '=' + }; + + link = (scope:IDeploymentGraphScope, el:JQuery) => { + if(scope.component.isResource()) { + this.loadGraph(scope, el); + this.registerGraphEvents(); + } + }; + + + public initGraphNodes = (cy:Cy.Instance, component:Models.Components.Component):void => { + if (component.groups) { // Init module nodes + _.each(component.groups, (groupModule:Models.Module) => { + let moduleNode = this.NodesFactory.createModuleNode(groupModule); + this.commonGraphUtils.addNodeToGraph(cy, moduleNode); + + }); + } + _.each(component.componentInstances, (instance:Models.ComponentsInstances.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 + this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode); + } + }); + + // 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 = this.ComponentInstanceFactory.createEmptyComponentInstance(); + let componentInstanceNode = this.NodesFactory.createNode(dummyInstance); + componentInstanceNode.parent = moduleNode.id(); + let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position()); + dummyNode.addClass('dummy-node'); + } + }) + }; + + private registerGraphEvents() { + + this._cy.on('afterExpand', (event) => { + event.cyTarget.qtip({}); + }); + + this._cy.on('afterCollapse', (event) => { + this.commonGraphUtils.initNodeTooltip(event.cyTarget); + }); + } + + private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => { + + let graphEl = el.find('.sdc-deployment-graph-wrapper'); + this._cy = cytoscape({ + container: graphEl, + style: Sdc.Graph.Utils.ComponentIntanceNodesStyle.getCompositionGraphStyle().concat(Sdc.Graph.Utils.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: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'closeModule.png', + collapseCueImage: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'openModule.png', + expandCollapseCueSensitivity: 2, + cueOffset: -20 + }); + + this.initGraphNodes(this._cy, scope.component); //creating instances nodes + this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations); + this._cy.collapseAll(); + }; + + public static factory = (NodesFactory:Utils.NodesFactory, CommonGraphUtils:Graph.Utils.CommonGraphUtils, DeploymentGraphGeneralUtils:Graph.Utils.DeploymentGraphGeneralUtils, ComponentInstanceFactory: Utils.ComponentInstanceFactory) => { + return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory) + } + } + + DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory']; +}
\ No newline at end of file diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html new file mode 100644 index 0000000000..55e1c131f4 --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.html @@ -0,0 +1,2 @@ +<div class="sdc-deployment-graph-wrapper" ng-class="{'view-only':isViewOnly}"> +</div>
\ No newline at end of file diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less new file mode 100644 index 0000000000..ff8fc46380 --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-graph.less @@ -0,0 +1,14 @@ +deployment-graph { + display: block; + height:100%; + width: 100%; + + .sdc-deployment-graph-wrapper { + height:100%; + width: 100%; + } + + .view-only{ + background-color:rgb(248, 248, 248); + } +}
\ No newline at end of file diff --git a/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts new file mode 100644 index 0000000000..3ad9da56be --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts @@ -0,0 +1,24 @@ +/** + * Created by obarda on 12/21/2016. + */ +/// <reference path="../../../../references"/> +module Sdc.Graph.Utils { + + export class DeploymentGraphGeneralUtils { + + constructor() { + + } + + public findInstanceModule = (groupsArray:Array<Models.Module>, componentInstanceId:string):string => { + let parentGroup:Sdc.Models.Module = _.find(groupsArray, (group:Sdc.Models.Module) => { + return _.find(group.members, (member) => { + return member === componentInstanceId; + }); + }); + return parentGroup ? parentGroup.uniqueId : ""; + }; + } + + DeploymentGraphGeneralUtils.$inject = []; +}
\ No newline at end of file |