diff options
Diffstat (limited to 'src/app/tierSupport/TierSupport.jsx')
| -rw-r--r-- | src/app/tierSupport/TierSupport.jsx | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx new file mode 100644 index 0000000..d4b0f3b --- /dev/null +++ b/src/app/tierSupport/TierSupport.jsx @@ -0,0 +1,211 @@ +/* + * ============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, {Component} from 'react'; +import {connect} from 'react-redux'; +import SplitPane from 'react-split-pane'; + +import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx'; +import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx'; +import i18n from 'utils/i18n/i18n'; +import { + onNodeDetailsChange, + onNodeMenuChange, + splitPaneResize, + querySelectedNodeElement, + setNotificationText, + clearVIData +} from 'app/tierSupport/TierSupportActions.js'; +import { + TSUI_TITLE, + TSUI_NODE_DETAILS_INITIAL_WIDTH, + TSUI_NODE_DETAILS_MIN_WIDTH, + TSUI_GRAPH_MENU_NODE_DETAILS +} from './TierSupportConstants.js'; + +let mapStateToProps = ( + { + tierSupport: + { + tierSupportReducer, + globalAutoCompleteSearchBar + } + }) => { + + let { + forceDirectedGraphRawData = { + graphCounter: -1, + nodeDataArray: [], + linkDataArray: [], + graphMeta: {} + }, windowWidth = 500, + windowHeight = 500, + graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS, + feedbackMsgText = '', + feedbackMsgSeverity = '' + } = tierSupportReducer; + + let { + performPrepareVisualization = false, + selectedSuggestion = {} + } = globalAutoCompleteSearchBar; + return { + forceDirectedGraphRawData, + windowWidth, + windowHeight, + graphNodeSelectedMenu, + performPrepareVisualization, + selectedSuggestion, + feedbackMsgText, + feedbackMsgSeverity + }; +}; + +let mapActionToProps = (dispatch) => { + return { + onNodeSelected: (requestObject) => { + dispatch(onNodeDetailsChange(requestObject)); + }, + onNodeMenuSelect: (selectedMenu) => { + dispatch(onNodeMenuChange(selectedMenu.buttonId)); + }, + onSplitPaneResize: (initialLoad) => { + dispatch(splitPaneResize(initialLoad)); + }, + onNewVIParam: (param) => { + dispatch(querySelectedNodeElement(param)); + }, + onMessageStateChange: (msgText, msgSeverity) => { + dispatch(setNotificationText(msgText, msgSeverity)); + }, + onRequestClearData: () => { + dispatch(clearVIData()); + } + }; +}; + +class TierSupport extends Component { + static propTypes = { + forceDirectedGraphRawData: React.PropTypes.object, + windowWidth: React.PropTypes.number, + windowHeight: React.PropTypes.number, + graphNodeSelectedMenu: React.PropTypes.string, + feedbackMsgText: React.PropTypes.string, + feedbackMsgSeverity: React.PropTypes.string + }; + + componentWillReceiveProps(nextProps) { + if (nextProps.match.params.viParam && + nextProps.match.params.viParam !== + this.props.match.params.viParam) { + this.props.onNewVIParam(nextProps.match.params.viParam); + } + + if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) { + this.props.onMessageStateChange(nextProps.feedbackMsgText, + nextProps.feedbackMsgSeverity); + } + } + + componentWillMount() { + if (this.props.match.params.viParam) { + this.props.onNewVIParam(this.props.match.params.viParam); + } else { + this.props.onRequestClearData(); + } + } + + componentDidMount() { + this.props.onSplitPaneResize(true); + } + + componentWillUnmount() { + // resetting to default (empty screen) + this.props.onRequestClearData(); + } + + render() { + const { + forceDirectedGraphRawData, + onNodeSelected, + windowWidth, + windowHeight, + onSplitPaneResize, + onNodeMenuSelect + } = this.props; + let currentSelectedMenu = this.getCurrentSelectedMenu(); + + //Temp code for a demo, will be removed as Vis library is updated + let currentNodeButton = 'NODE_DETAILS'; + // End temp code + + return ( + <div className='tier-support-ui'> + <div className='secondary-header'> + <span className='secondary-title'>{i18n(TSUI_TITLE)}</span> + </div> + <SplitPane + split='vertical' + enableResizing='true' + onDragFinished={ () => { + onSplitPaneResize(false); + } } + defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH} + minSize={TSUI_NODE_DETAILS_MIN_WIDTH} + maxSize={-200} + primary='second'> + <div> + <ForceDirectedGraph + viewWidth={windowWidth} + viewHeight={windowHeight} + graphData={forceDirectedGraphRawData} + nodeSelectedCallback={(nodeData) => { + onNodeSelected(nodeData); + }} + nodeButtonSelectedCallback={(selectedMenuId) => { + onNodeMenuSelect(selectedMenuId); + }} + currentlySelectedNodeView={currentNodeButton}/> + </div> + <div> + {currentSelectedMenu} + </div> + </SplitPane> + </div> + ); + } + + getCurrentSelectedMenu() { + switch (this.props.graphNodeSelectedMenu) { + case TSUI_GRAPH_MENU_NODE_DETAILS: + if (!this.nodeDetails) { + this.nodeDetails = <SelectedNodeDetails/>; + } + return this.nodeDetails; + } + } +} + +export default connect(mapStateToProps, mapActionToProps)(TierSupport); |