diff options
Diffstat (limited to 'src/generic-components/graph')
| -rw-r--r-- | src/generic-components/graph/ForceDirectedGraph.jsx | 262 | ||||
| -rw-r--r-- | src/generic-components/graph/NodeFactory.js | 46 | ||||
| -rw-r--r-- | src/generic-components/graph/NodeVisualElementConstants.js | 22 | ||||
| -rw-r--r-- | src/generic-components/graph/TempCreateAttributes.js | 464 |
4 files changed, 674 insertions, 120 deletions
diff --git a/src/generic-components/graph/ForceDirectedGraph.jsx b/src/generic-components/graph/ForceDirectedGraph.jsx index 872b2d5..00c2575 100644 --- a/src/generic-components/graph/ForceDirectedGraph.jsx +++ b/src/generic-components/graph/ForceDirectedGraph.jsx @@ -1,25 +1,28 @@ /* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. * Copyright © 2017 Amdocs - * ================================================================================ + * All rights reserved. + * ============================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - * ============LICENSE_END========================================================= + * ============LICENSE_END===================================================== * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. */ + import {drag} from 'd3-drag'; import {forceSimulation, forceLink, forceManyBody, forceCenter} from 'd3-force'; import {interpolateNumber} from 'd3-interpolate'; @@ -44,7 +47,7 @@ class ForceDirectedGraph extends Component { nodeButtonSelectedCallback: PropTypes.func, currentlySelectedNodeView: PropTypes.string }; - + static defaultProps = { viewWidth: 0, viewHeight: 0, @@ -57,16 +60,16 @@ class ForceDirectedGraph extends Component { nodeButtonSelectedCallback: undefined, currentlySelectedNodeView: '' }; - + constructor(props) { super(props); - + this.state = { nodes: [], links: [], mainGroupTransform: zoomIdentity }; - + this.updateSimulationForce = this.updateSimulationForce.bind(this); - this.resetTransform = this.resetTransform.bind(this); + this.resetState = this.resetState.bind(this); this.applyBufferDataToState = this.applyBufferDataToState.bind(this); this.createNodePropForState = this.createNodePropForState.bind(this); this.createLinkPropForState = this.createLinkPropForState.bind(this); @@ -74,118 +77,138 @@ class ForceDirectedGraph extends Component { this.simulationComplete = this.simulationComplete.bind(this); this.simulationTick = this.simulationTick.bind(this); this.nodeSelected = this.nodeSelected.bind(this); + this.nodeButtonSelected = this.nodeButtonSelected.bind(this); this.onZoom = this.onZoom.bind(this); this.onGraphDrag = this.onGraphDrag.bind(this); this.onNodeDrag = this.onNodeDrag.bind(this); this.addNodeInterpolator = this.addNodeInterpolator.bind(this); this.runInterpolators = this.runInterpolators.bind(this); - + this.nodeBuffer = []; this.linkBuffer = []; this.nodeDatum = []; this.nodeButtonDatum = []; this.nodeFactory = new NodeFactory(); this.visualElementFactory = new NodeVisualElementFactory(); - + this.isGraphMounted = false; - + this.listenerGraphCounter = -1; this.nodeIndexTracker = new Map(); this.interpolators = new Map(); this.areInterpolationsRunning = false; - + this.newNodeSelected = true; this.currentlySelectedNodeButton = undefined; - + this.intervalTimer = interval(this.applyBufferDataToState, simulationKeys.DATA_COPY_INTERVAL); this.intervalTimer.stop(); - + this.interpolationTimer = interval(this.runInterpolators, simulationKeys.DATA_COPY_INTERVAL); this.interpolationTimer.stop(); - + this.simulation = forceSimulation(); this.simulation.on('end', this.simulationComplete); this.simulation.stop(); - + this.svgZoom = zoom().scaleExtent([NodeConstants.SCALE_EXTENT_MIN, NodeConstants.SACEL_EXTENT_MAX]); this.svgZoom.clickDistance(2); this.nodeDrag = drag().clickDistance(2); - + this.updateSimulationForce(); - + // Temporary code until backend supports NOT displaying the button in the response. + if(props.dataOverlayButtons.length === 1) { + this.hideButton = true; + } else { + this.hideButton = false; + } if (props.graphData) { if (props.graphData.graphCounter !== -1) { - this.startSimulation(props.graphData); + this.startSimulation(props.graphData, props.currentlySelectedNodeView, props.dataOverlayButtons); } } } - + componentDidMount() { this.isGraphMounted = true; } - + componentWillReceiveProps(nextProps) { if (nextProps.graphData.graphCounter !== this.props.graphData.graphCounter) { this.listenerGraphCounter = this.props.graphData.graphCounter; this.newNodeSelected = true; - this.resetTransform(); - this.startSimulation(nextProps.graphData); + this.resetState(); + this.startSimulation(nextProps.graphData, nextProps.currentlySelectedNodeView, nextProps.dataOverlayButtons); } } - + + componentDidUpdate(prevProps) { let hasNewGraphDataRendered = (prevProps.graphData.graphCounter === this.props.graphData.graphCounter); let shouldAttachListeners = (this.listenerGraphCounter !== this.props.graphData.graphCounter); let nodeCount = this.state.nodes.length; - + if (nodeCount > 0) { if (hasNewGraphDataRendered && shouldAttachListeners) { - let nodes = select('.fdgMainSvg').select('.fdgMainG') .selectAll('.aai-entity-node') .data(this.nodeDatum); - nodes.on('click', (d) => { this.nodeSelected(d); }); - + nodes.call(this.nodeDrag.on('drag', (d) => { let xAndY = [currentEvent.x, currentEvent.y]; this.onNodeDrag(d, xAndY); })); - + let mainSVG = select('.fdgMainSvg'); let mainView = mainSVG.select('.fdgMainView'); this.svgZoom.transform(mainSVG, zoomIdentity); this.svgZoom.transform(mainView, zoomIdentity); - + mainSVG.call(this.svgZoom.on('zoom', () => { // D3 Zoom also handles panning this.onZoom(currentEvent.transform); })).on('dblclick.zoom', null); // Ignore the double-click zoom event - + this.listenerGraphCounter = this.props.graphData.graphCounter; } + + if (this.newNodeSelected) { + let nodeButtons = select('.fdgMainSvg').select('.fdgMainG') + .selectAll('.aai-entity-node') + .selectAll('.node-button') + .data(this.nodeButtonDatum); + if (!nodeButtons.empty()) { + nodeButtons.on('click', (d) => { + this.nodeButtonSelected(d); + }); + if (hasNewGraphDataRendered && shouldAttachListeners) { + this.newNodeSelected = false; + } + } + } } } - + componentWillUnmount() { this.isGraphMounted = false; - + let nodes = select('.fdgMainSvg').select('.fdgMainG') .selectAll('.aai-entity-node'); let nodeButtons = nodes.selectAll('.node-button'); - + nodes.on('click', null); nodeButtons.on('click', null); - + let mainSVG = select('.fdgMainSvg'); - + mainSVG.call(this.svgZoom.on('zoom', null)).on('dblclick.zoom', null); mainSVG.call(drag().on('drag', null)); } - + updateSimulationForce() { this.simulation.force('link', forceLink()); this.simulation.force('link').id((d) => { @@ -193,55 +216,65 @@ class ForceDirectedGraph extends Component { }); this.simulation.force('link').strength(0.3); this.simulation.force('link').distance(100); - + this.simulation.force('charge', forceManyBody()); this.simulation.force('charge').strength(-1250); this.simulation.alpha(1); - + this.simulation.force('center', forceCenter(this.props.viewWidth / 2, this.props.viewHeight / 2)); } - - resetTransform() { + + resetState() { if (this.isGraphMounted) { this.setState(() => { return { - mainGroupTransform: zoomIdentity + mainGroupTransform: zoomIdentity, + nodes: [], links: [] }; }); } } - + applyBufferDataToState() { this.nodeIndexTracker.clear(); - + let newNodes = []; this.nodeBuffer.map((node, i) => { let nodeProps = this.createNodePropForState(node); - - if (nodeProps.meta.nodeMeta.className === NodeConstants.SELECTED_NODE_CLASS_NAME || - nodeProps.meta.nodeMeta.className === NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME) { - + + if (nodeProps.meta.nodeMeta.className === + NodeConstants.SELECTED_NODE_CLASS_NAME || + nodeProps.meta.nodeMeta.className === + NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME) { + this.nodeButtonDatum[0].data = nodeProps.meta; - - nodeProps = { - ...nodeProps, - buttons: [this.nodeButtonDatum[0].isSelected] - }; + if(this.nodeButtonDatum.length > 1) { + this.nodeButtonDatum[1].data = nodeProps.meta; + nodeProps = { + ...nodeProps, + buttons: [this.nodeButtonDatum[0].isSelected, this.nodeButtonDatum[1].isSelected] + }; + } else { + nodeProps = { + ...nodeProps, + buttons: [this.nodeButtonDatum[0].isSelected] + }; + } } - - newNodes.push(this.nodeFactory.buildNode(nodeProps.meta.nodeMeta.className, nodeProps)); - + + newNodes.push(this.nodeFactory.buildNode(nodeProps.meta.nodeMeta.className, nodeProps, this.hideButton)); + this.nodeIndexTracker.set(node.id, i); }); - + let newLinks = []; this.linkBuffer.map((link) => { let key = link.id; let linkProps = this.createLinkPropForState(link); newLinks.push(this.visualElementFactory.createSvgLine(linkProps, key)); }); - + if (this.isGraphMounted) { this.setState(() => { return { @@ -250,7 +283,7 @@ class ForceDirectedGraph extends Component { }); } } - + createNodePropForState(nodeData) { return { renderProps: { @@ -260,7 +293,7 @@ class ForceDirectedGraph extends Component { } }; } - + createLinkPropForState(linkData) { return { className: 'aai-entity-link', @@ -270,10 +303,10 @@ class ForceDirectedGraph extends Component { y2: linkData.target.y }; } - - startSimulation(graphData) { + + startSimulation(graphData, currentView, overlayButtons) { this.nodeFactory.setNodeMeta(graphData.graphMeta); - + // Experiment with removing length = 0... might not be needed as new array // assignment will likely destroy old reference this.nodeBuffer.length = 0; @@ -282,45 +315,60 @@ class ForceDirectedGraph extends Component { this.linkBuffer = Array.from(graphData.linkDataArray); this.nodeDatum.length = 0; this.nodeDatum = Array.from(graphData.nodeDataArray); - + this.nodeButtonDatum.length = 0; - - let isNodeDetailsSelected = true; + + let isNodeDetailsSelected = (currentView === + overlayButtons[0] || + currentView === + ''); this.nodeButtonDatum.push({ - name: NodeConstants.ICON_ELLIPSES, isSelected: isNodeDetailsSelected + name: NodeConstants.ICON_ELLIPSES, isSelected: isNodeDetailsSelected, overlayName: overlayButtons[0] }); - + + + if(overlayButtons.length > 1 ) { + let isSecondButtonSelected = (currentView === overlayButtons[1]); + + this.nodeButtonDatum.push({ + name: NodeConstants.ICON_TRIANGLE_WARNING, isSelected: isSecondButtonSelected, overlayName: overlayButtons[1] + }); + } + + if (isNodeDetailsSelected) { this.currentlySelectedNodeButton = NodeConstants.ICON_ELLIPSES; + } else { + this.currentlySelectedNodeButton = NodeConstants.ICON_TRIANGLE_WARNING; } - + this.updateSimulationForce(); - + this.simulation.nodes(this.nodeBuffer); this.simulation.force('link').links(this.linkBuffer); this.simulation.on('tick', this.simulationTick); this.simulation.restart(); } - + simulationComplete() { this.intervalTimer.stop(); this.applyBufferDataToState(); } - + simulationTick() { this.intervalTimer.restart(this.applyBufferDataToState, simulationKeys.DATA_COPY_INTERVAL); this.simulation.on('tick', null); } - + nodeSelected(datum) { if (this.props.nodeSelectedCallback) { this.props.nodeSelectedCallback(datum); } - + let didUpdateNew = false; let didUpdatePrevious = false; let isSameNodeSelected = true; - + // Check to see if a default node was previously selected let selectedDefaultNode = select('.fdgMainSvg').select('.fdgMainG') .selectAll('.aai-entity-node') @@ -333,7 +381,7 @@ class ForceDirectedGraph extends Component { isSameNodeSelected = false; } } - + // Check to see if a searched node was previously selected let selectedSearchedNode = select('.fdgMainSvg').select('.fdgMainG') .selectAll('.aai-entity-node') @@ -346,7 +394,7 @@ class ForceDirectedGraph extends Component { isSameNodeSelected = false; } } - + if (!isSameNodeSelected) { let newlySelectedNode = select('.fdgMainSvg').select('.fdgMainG') .selectAll('.aai-entity-node') @@ -354,7 +402,7 @@ class ForceDirectedGraph extends Component { return (datum.id === d.id); }); if (!newlySelectedNode.empty()) { - + if (newlySelectedNode.datum().nodeMeta.searchTarget) { this.nodeBuffer[newlySelectedNode.datum().index].nodeMeta.className = NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME; @@ -365,13 +413,35 @@ class ForceDirectedGraph extends Component { didUpdateNew = true; } } - + if (didUpdatePrevious && didUpdateNew) { this.newNodeSelected = true; this.applyBufferDataToState(); } } + nodeButtonSelected(datum) { + if (this.props.nodeButtonSelectedCallback) { + let buttonClickEvent = { + buttonId: datum.overlayName + }; + this.props.nodeButtonSelectedCallback(buttonClickEvent); + } + + if (this.currentlySelectedNodeButton !== datum.name) { + if (datum.name === this.nodeButtonDatum[0].name) { + this.nodeButtonDatum[0].isSelected = true; + this.nodeButtonDatum[1].isSelected = false; + } + if (datum.name === this.nodeButtonDatum[1].name) { + this.nodeButtonDatum[0].isSelected = false; + this.nodeButtonDatum[1].isSelected = true; + } + this.currentlySelectedNodeButton = datum.name; + this.applyBufferDataToState(); + } + } + onZoom(eventTransform) { if (this.isGraphMounted) { this.setState(() => { @@ -381,7 +451,7 @@ class ForceDirectedGraph extends Component { }); } } - + onGraphDrag(xAndYCoords) { let translate = `translate(${xAndYCoords.x}, ${xAndYCoords.y})`; let oldTransform = this.state.mainGroupTransform; @@ -393,7 +463,7 @@ class ForceDirectedGraph extends Component { }); } } - + onNodeDrag(datum, xAndYCoords) { let nodeIndex = this.nodeIndexTracker.get(datum.id); if (this.nodeBuffer[nodeIndex]) { @@ -402,7 +472,7 @@ class ForceDirectedGraph extends Component { this.applyBufferDataToState(); } } - + addNodeInterpolator(nodeId, key, startingValue, endingValue, duration) { let numberInterpolator = interpolateNumber(startingValue, endingValue); let timeNow = now(); @@ -410,20 +480,20 @@ class ForceDirectedGraph extends Component { nodeId: nodeId, key: key, duration: duration, timeCreated: timeNow, method: numberInterpolator }; this.interpolators.set(nodeId, interpolationObject); - + if (!this.areInterpolationsRunning) { this.interpolationTimer.restart(this.runInterpolators, simulationKeys.DATA_COPY_INTERVAL); this.areInterpolationsRunning = true; } } - + runInterpolators() { // If we have no more interpolators to run then shut'r down! if (this.interpolators.size === 0) { this.interpolationTimer.stop(); this.areInterpolationsRunning = false; } - + let iterpolatorsComplete = []; // Apply interpolation values this.interpolators.forEach((interpolator) => { @@ -439,22 +509,22 @@ class ForceDirectedGraph extends Component { this.nodeBuffer[nodeIndex][interpolator.key] = interpolator.method(t); } }); - + // Remove any interpolators that are complete if (iterpolatorsComplete.length > 0) { for (let i = 0; i < iterpolatorsComplete.length; i++) { this.interpolators.delete(iterpolatorsComplete[i]); } } - + this.applyBufferDataToState(); } - + render() { // We will be using these values veru shortly, commenting out for eslint // reasons so we can build for PV let {viewWidth, viewHeight} = this.props; let {nodes, links, mainGroupTransform} = this.state; - + return ( <div className='ts-force-selected-graph'> <svg className={'fdgMainSvg'} width='100%' height='100%'> @@ -478,9 +548,9 @@ class ForceDirectedGraph extends Component { </div> ); } - + static graphCounter = 0; - + static generateNewProps(nodeArray, linkArray, metaData) { ForceDirectedGraph.graphCounter += 1; return { diff --git a/src/generic-components/graph/NodeFactory.js b/src/generic-components/graph/NodeFactory.js index da57ffb..abfd73b 100644 --- a/src/generic-components/graph/NodeFactory.js +++ b/src/generic-components/graph/NodeFactory.js @@ -1,25 +1,28 @@ /* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. * Copyright © 2017 Amdocs - * ================================================================================ + * All rights reserved. + * ============================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - * ============LICENSE_END========================================================= + * ============LICENSE_END===================================================== * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. */ + import React from 'react'; import NodeVisualElementConstants from './NodeVisualElementConstants.js'; @@ -38,11 +41,11 @@ class NodeFactory { this.graphMeta = metaObject; this.visualElementFactory.setVisualElementMeta(metaObject); } - - buildNode(nodeType, nodeProps) { + // hideButton a temporary solution to not display the button. + buildNode(nodeType, nodeProps, hideButton) { let translate = `translate( - ${nodeProps.renderProps.x}, + ${nodeProps.renderProps.x}, ${nodeProps.renderProps.y})`; let finalProps = { ...nodeProps.renderProps, @@ -51,14 +54,20 @@ class NodeFactory { }; let nodeVisualElementsData = this.extractVisualElementArrayFromMeta( - nodeType); + nodeType, hideButton); let nodeVisualElements = undefined; if (nodeVisualElementsData) { nodeVisualElements = []; nodeVisualElementsData.map((elementData, index) => { if (elementData.type === NodeVisualElementConstants.BUTTON) { if (nodeProps.buttons) { - let isButtonSelected = true; + let isButtonSelected = false; + if (index === 4) { + isButtonSelected = nodeProps.buttons[0]; + } + if (index === 5) { + isButtonSelected = nodeProps.buttons[1]; + } elementData = { ...elementData, isSelected: isButtonSelected @@ -99,11 +108,20 @@ class NodeFactory { return React.createElement('g', finalProps); } - extractVisualElementArrayFromMeta(nodeClassName) { + extractVisualElementArrayFromMeta(nodeClassName, hideButton) { let nodeVisualElements = undefined; if (this.graphMeta.aaiEntityNodeDescriptors) { nodeVisualElements = this.graphMeta.aaiEntityNodeDescriptors[nodeClassName].visualElements; + if(hideButton) { + // temp, until BE not sent the triangle button + for (var i = 0; i < nodeVisualElements.length; i++) { + if (nodeVisualElements[i].type === 'button' && nodeVisualElements[i].name === 'icon_triangle_warning') { + nodeVisualElements.splice(i, 1); + return; + } + } + } } return nodeVisualElements; } diff --git a/src/generic-components/graph/NodeVisualElementConstants.js b/src/generic-components/graph/NodeVisualElementConstants.js index 11d9f7d..aeeedf7 100644 --- a/src/generic-components/graph/NodeVisualElementConstants.js +++ b/src/generic-components/graph/NodeVisualElementConstants.js @@ -1,25 +1,28 @@ /* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. * Copyright © 2017 Amdocs - * ================================================================================ + * All rights reserved. + * ============================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - * ============LICENSE_END========================================================= + * ============LICENSE_END===================================================== * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. */ + export default { SVG_CIRCLE: 'circle', SVG_LINE: 'line', @@ -41,6 +44,5 @@ export default { ICON_ELLIPSES: 'icon_ellipses', ICON_TRIANGLE_WARNING: 'icon_triangle_warning', ICON_TICK: 'icon_tick', - ICON_WARNING: 'icon_warning', - BUTTON_CLICK_NODE_DETAILS: 'NODE_DETAILS' + ICON_WARNING: 'icon_warning' }; diff --git a/src/generic-components/graph/TempCreateAttributes.js b/src/generic-components/graph/TempCreateAttributes.js new file mode 100644 index 0000000..fac32ba --- /dev/null +++ b/src/generic-components/graph/TempCreateAttributes.js @@ -0,0 +1,464 @@ +/* + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. + * Copyright © 2017 Amdocs + * All rights reserved. + * ============================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END===================================================== + * + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. + */ + +import React from 'react'; + + +export default { + createNodeAttributes: () => { + return { + className: 'node' + }; + }, + createShapeAttributes: () => { + return { + r: 3 + }; + }, + createCircleStyle: () => { + return { + fill: 'rgb(98, 102, 104)', + stroke: 'rgb(78, 82, 84)', + strokeWidth: 1 + }; + }, + createLinkAttributes: () => { + return { + className: 'link', + x1: 50, + y1: 50, + x2: 100, + y2: 500, + }; + }, + createLineStyle: () => { + return { + stroke: 'rgb(217, 218, 218)', + strokeWidth: 1 + }; + }, + createTestCircle: () => { + return React.createElement('circle', { + cx: '100', + cy: '100', + r: '15', + fill: 'rgb(255, 255, 255)', + stroke: 'rgb(98, 102, 104)', + strokeWidth: '3' + }); + }, + getNodeLinkArray: () => { + return { + 'graphMeta': { + 'aaiEntityNodeDescriptors': { + 'generalNodeClass': { + 'class': 'aai-entity-node general-node', + 'visualElements': [ + { + 'type': 'circle', + 'class': 'outer', + 'svgAttributes': { + 'r': '16' + } + }, + { + 'type': 'circle', + 'class': 'inner', + 'svgAttributes': { + 'r': '10' + } + }, + { + 'type': 'text', + 'class': 'id-type-label', + 'displayKey': 'itemType', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '33' + } + } + }, + { + 'type': 'text', + 'class': 'id-value-label', + 'displayKey': 'itemNameValue', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '48' + } + } + } + ] + }, + 'searchedNodeClass': { + 'class': 'aai-entity-node search-node', + 'visualElements': [ + { + 'type': 'circle', + 'class': 'outer', + 'svgAttributes': { + 'r': '16' + } + }, + { + 'type': 'circle', + 'class': 'inner', + 'svgAttributes': { + 'r': '10' + } + }, + { + 'type': 'text', + 'class': 'id-type-label', + 'displayKey': 'itemType', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '33' + } + } + }, + { + 'type': 'text', + 'class': 'id-value-label', + 'displayKey': 'itemNameValue', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '48' + } + } + } + ] + }, + 'selectedSearchedNodeClass': { + 'class': 'aai-entity-node selected-search-node', + 'visualElements': [ + { + 'type': 'circle', + 'class': 'outer', + 'svgAttributes': { + 'r': '31' + } + }, + { + 'type': 'circle', + 'class': 'inner', + 'svgAttributes': { + 'r': '20' + } + }, + { + 'type': 'text', + 'class': 'id-type-label', + 'displayKey': 'itemType', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '48' + } + } + }, + { + 'type': 'text', + 'class': 'id-value-label', + 'displayKey': 'itemNameValue', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '63' + } + } + }, + { + 'type': 'button', + 'name': 'icon_ellipses', + 'class': 'node-button', + 'shapeAttributes': { + 'offset': { + 'x': '33', + 'y': '-35' + } + }, + 'svgAttributes': { + 'className': 'node-button', + 'r': '10' + } + }, + { + 'type': 'button', + 'name': 'icon_triangle_warning', + 'class': 'node-button', + 'shapeAttributes': { + 'offset': { + 'x': '46', + 'y': '-12' + } + }, + 'svgAttributes': { + 'className': 'node-button', + 'r': '10' + } + } + ] + }, + 'selectedNodeClass': { + 'class': 'aai-entity-node selected-node', + 'visualElements': [ + { + 'type': 'circle', + 'class': 'outer', + 'svgAttributes': { + 'r': '31' + } + }, + { + 'type': 'circle', + 'class': 'inner', + 'svgAttributes': { + 'r': '20' + } + }, + { + 'type': 'text', + 'class': 'id-type-label', + 'displayKey': 'itemType', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '48' + } + } + }, + { + 'type': 'text', + 'class': 'id-value-label', + 'displayKey': 'itemNameValue', + 'shapeAttributes': { + 'offset': { + 'x': '0', + 'y': '63' + } + } + }, + { + 'type': 'button', + 'name': 'icon_ellipses', + 'class': 'node-button', + 'shapeAttributes': { + 'offset': { + 'x': '33', + 'y': '-35' + } + }, + 'svgAttributes': { + 'className': 'node-button', + 'r': '10' + } + }, + { + 'type': 'button', + 'name': 'icon_triangle_warning', + 'class': 'node-button', + 'shapeAttributes': { + 'offset': { + 'x': '46', + 'y': '-12' + } + }, + 'svgAttributes': { + 'className': 'node-button', + 'r': '10' + } + } + ] + } + }, + 'numNodes': 6, + 'numLinks': 5, + 'renderTimeInMs': 4550, + 'numLinksResolvedSuccessfullyFromCache': 0, + 'numLinksResolvedSuccessfullyFromServer': 7, + 'numLinkResolveFailed': 0 + }, + 'nodes': [{ + 'id': 'TRINITY-PSERVER', + 'itemType': 'pserver', + 'itemNameKey': 'pserver.TRINITY-PSERVER', + 'itemNameValue': 'TRINITY-PSERVER', + 'itemProperties': { + 'hostname': 'TRINITY-PSERVER', + 'in-maint': 'false', + 'resource-version': '1455590484' + }, + 'nodeMeta': { + 'className': 'selectedSearchedNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 628, + 'relationshipNode': false, + 'searchTarget': true, + 'enrichableNode': false, + 'nodeValidated': true, + 'nodeIssue': true + } + }, { + 'id': 'TRINITYSIL', + 'itemType': 'complex', + 'itemNameKey': 'complex.TRINITYSIL', + 'itemNameValue': 'TRINITYSIL', + 'itemProperties': { + 'country': 'USA', + 'postal-code': '07748', + 'city': 'Middletown', + 'physical-location-id': 'TRINITYSIL', + 'resource-version': '1459957457', + 'street1': 'Trinity', + 'state': 'NJ', + 'physical-location-type': 'Trinity', + 'region': 'US' + }, + 'nodeMeta': { + 'className': 'generalNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 644, + 'relationshipNode': false, + 'searchTarget': false, + 'enrichableNode': false, + 'nodeValidated': true, + 'nodeIssue': false + } + }, { + 'id': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50', + 'itemType': 'vserver', + 'itemNameKey': 'vserver.c385bb3e-6ebd-4898-bc92-792e0ac2db50', + 'itemNameValue': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50', + 'itemProperties': { + 'in-maint': 'false', + 'resource-version': '1475160142', + 'vserver-name': 'bems0001vm001', + 'prov-status': 'ACTIVE', + 'vserver-id': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50', + 'vserver-name2': 'bems0001vm001bem001-1452', + 'vserver-selflink': 'TRINITY vserverLink', + 'is-closed-loop-disabled': 'false' + }, + 'nodeMeta': { + 'className': 'generalNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 2633, + 'relationshipNode': false, + 'searchTarget': false, + 'enrichableNode': false + } + }, { + 'id': '7c73d776-001d-4042-a958-37f2e419ed10', + 'itemType': 'vserver', + 'itemNameKey': 'vserver.7c73d776-001d-4042-a958-37f2e419ed10', + 'itemNameValue': '7c73d776-001d-4042-a958-37f2e419ed10', + 'itemProperties': { + 'resource-version': '1477075390', + 'vserver-name': 'nsbg0001vm002', + 'prov-status': 'NVTPROV', + 'vserver-id': '7c73d776-001d-4042-a958-37f2e419ed10', + 'vserver-name2': 'VM-19631', + 'vserver-selflink': 'TRINITY vserverLink' + }, + 'nodeMeta': { + 'className': 'generalNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 2368, + 'relationshipNode': false, + 'searchTarget': false, + 'enrichableNode': false + } + }, { + 'id': 'fc6be93d-915e-4034-a8f9-463b70130614', + 'itemType': 'vserver', + 'itemNameKey': 'vserver.fc6be93d-915e-4034-a8f9-463b70130614', + 'itemNameValue': 'fc6be93d-915e-4034-a8f9-463b70130614', + 'itemProperties': { + 'resource-version': '1477075398', + 'vserver-name': 'nsbg0001vm004', + 'prov-status': 'NVTPROV', + 'vserver-id': 'fc6be93d-915e-4034-a8f9-463b70130614', + 'vserver-name2': 'VM-19630', + 'vserver-selflink': 'TRINITY vserverLink' + }, + 'nodeMeta': { + 'className': 'generalNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 2621, + 'relationshipNode': false, + 'searchTarget': false, + 'enrichableNode': false + } + }, { + 'id': '8555c2ed-6818-43c5-8cf5-cd36b0169031', + 'itemType': 'vserver', + 'itemNameKey': 'vserver.8555c2ed-6818-43c5-8cf5-cd36b0169031', + 'itemNameValue': '8555c2ed-6818-43c5-8cf5-cd36b0169031', + 'itemProperties': { + 'resource-version': '1477075396', + 'vserver-name': 'nsbg0001vm003', + 'prov-status': 'NVTPROV', + 'vserver-id': '8555c2ed-6818-43c5-8cf5-cd36b0169031', + 'vserver-name2': 'VM-19629', + 'vserver-selflink': 'TRINITY vserverLink' + }, + 'nodeMeta': { + 'className': 'generalNodeClass', + 'nodeDebug': null, + 'selfLinkResponseTimeInMs': 2663, + 'relationshipNode': false, + 'searchTarget': false, + 'enrichableNode': false + } + }], + 'links': [{ + 'id': 'TRINITY-PSERVER_TRINITYSIL', + 'source': 'TRINITY-PSERVER', + 'target': 'TRINITYSIL' + }, { + 'id': 'TRINITY-PSERVER_c385bb3e-6ebd-4898-bc92-792e0ac2db50', + 'source': 'TRINITY-PSERVER', + 'target': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50' + }, { + 'id': 'TRINITY-PSERVER_7c73d776-001d-4042-a958-37f2e419ed10', + 'source': 'TRINITY-PSERVER', + 'target': '7c73d776-001d-4042-a958-37f2e419ed10' + }, { + 'id': 'TRINITY-PSERVER_fc6be93d-915e-4034-a8f9-463b70130614', + 'source': 'TRINITY-PSERVER', + 'target': 'fc6be93d-915e-4034-a8f9-463b70130614' + }, { + 'id': 'TRINITY-PSERVER_8555c2ed-6818-43c5-8cf5-cd36b0169031', + 'source': 'TRINITY-PSERVER', + 'target': '8555c2ed-6818-43c5-8cf5-cd36b0169031' + }] + }; + } +}; |