diff options
author | 2018-01-30 12:34:34 -0500 | |
---|---|---|
committer | 2018-01-30 14:00:30 -0500 | |
commit | f42261a2cd0582e0209018c23816681e146ea97d (patch) | |
tree | 078eb4fee79f5cb0740615042afc31a48b429d69 /src/app/tierSupport | |
parent | 89cfd8bfafeb71ea89030b062a467631988f15f0 (diff) |
Implementing user feed back
Change-Id: I66196a4a5a319bb9c78c503244c0e78824ac855a
Signed-off-by: arul.nambi <arul.nambi@amdocs.com>
Issue-ID: AAI-696
Diffstat (limited to 'src/app/tierSupport')
-rw-r--r-- | src/app/tierSupport/TierSupport.jsx | 78 | ||||
-rw-r--r-- | src/app/tierSupport/TierSupportActions.js | 18 | ||||
-rw-r--r-- | src/app/tierSupport/TierSupportConstants.js | 4 | ||||
-rw-r--r-- | src/app/tierSupport/TierSupportReducer.js | 10 |
4 files changed, 77 insertions, 33 deletions
diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx index 315b6a0..943943f 100644 --- a/src/app/tierSupport/TierSupport.jsx +++ b/src/app/tierSupport/TierSupport.jsx @@ -24,6 +24,8 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import SplitPane from 'react-split-pane'; +import { ClipLoader } from 'react-spinners'; +import {COLOR_BLUE} from 'utils/GlobalConstants.js'; import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js'; import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx'; @@ -69,7 +71,8 @@ let mapStateToProps = ( graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS, feedbackMsgText = '', feedbackMsgSeverity = '', - nodeData = {} + nodeData = {}, + enableBusyFeedback = false } = tierSupportReducer; let { @@ -85,7 +88,8 @@ let mapStateToProps = ( selectedSuggestion, feedbackMsgText, feedbackMsgSeverity, - nodeData + nodeData, + enableBusyFeedback }; }; @@ -123,7 +127,8 @@ class TierSupport extends Component { graphNodeSelectedMenu: React.PropTypes.string, feedbackMsgText: React.PropTypes.string, feedbackMsgSeverity: React.PropTypes.string, - nodeData: React.PropTypes.object + nodeData: React.PropTypes.object, + enableBusyFeedback: React.PropTypes.bool }; componentWillReceiveProps(nextProps) { @@ -169,10 +174,14 @@ class TierSupport extends Component { windowWidth, windowHeight, onSplitPaneResize, - onNodeMenuSelect + onNodeMenuSelect, + enableBusyFeedback } = this.props; - + let componentVisibitliyClassName = 'showContainer'; + if(enableBusyFeedback){ + componentVisibitliyClassName = 'hideContainer'; + } let availableOverlay; let overlayComponent; // Currently only ONE overlay can be added to each view. @@ -200,35 +209,40 @@ class TierSupport extends Component { let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent); return ( <div className='tier-support-ui'> - <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); - }} - dataOverlayButtons={dataOverlayButtons} - currentlySelectedNodeView={currentNodeButton}/> + <div className='spinner'> + <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} /> + </div> + <div className={componentVisibitliyClassName}> + <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); + }} + dataOverlayButtons={dataOverlayButtons} + currentlySelectedNodeView={currentNodeButton}/> + </div> + <div> + {currentSelectedMenu} + </div> + </SplitPane> </div> - <div> - {currentSelectedMenu} - </div> - </SplitPane> </div> ); } diff --git a/src/app/tierSupport/TierSupportActions.js b/src/app/tierSupport/TierSupportActions.js index ead321e..fc4bcad 100644 --- a/src/app/tierSupport/TierSupportActions.js +++ b/src/app/tierSupport/TierSupportActions.js @@ -120,6 +120,18 @@ export function clearVIData() { }; } +function setBusyFeedback(){ + return { + type: tierSupportActionTypes.TIER_SUPPORT_ACTIVATE_BUSY_FEEDBACK + }; +} + +function disableBusyFeedback(){ + return { + type: tierSupportActionTypes.TIER_SUPPORT_DISABLE_BUSY_FEEDBACK + }; +} + export function fetchSelectedNodeElement(fetchRequestCallback) { return dispatch => { return fetchRequestCallback().then( @@ -140,8 +152,13 @@ export function fetchSelectedNodeElement(fetchRequestCallback) { dispatch(noNodeDetailsFoundEvent(NO_RESULTS_FOUND)); } } + ).then( + () => { + dispatch(disableBusyFeedback()); + } ).catch( (errorCode) => { + dispatch(disableBusyFeedback()); if (errorCode.message >= STATUS_CODE_5XX_SERVER_ERROR) { dispatch(getInvalidSelectedNodeSearchEvent(ERROR_RETRIEVING_DATA)); } else { @@ -169,6 +186,7 @@ export function querySelectedNodeElement( } return dispatch => { + dispatch(setBusyFeedback()); dispatch(fetchSelectedNodeElement(selectedNodeFetchRequest)); }; } diff --git a/src/app/tierSupport/TierSupportConstants.js b/src/app/tierSupport/TierSupportConstants.js index d20325f..d66816e 100644 --- a/src/app/tierSupport/TierSupportConstants.js +++ b/src/app/tierSupport/TierSupportConstants.js @@ -32,7 +32,9 @@ export const tierSupportActionTypes = keyMirror({ TS_GRAPH_NODE_SELECTED: null, TS_GRAPH_NODE_MENU_SELECTED: null, SPLIT_PANE_RESIZE: null, - TIER_SUPPORT_CLEAR_DATA: null + TIER_SUPPORT_CLEAR_DATA: null, + TIER_SUPPORT_ACTIVATE_BUSY_FEEDBACK: null, + TIER_SUPPORT_DISABLE_BUSY_FEEDBACK: null }); export const TSUI_NODE_DETAILS_INITIAL_WIDTH = 300; diff --git a/src/app/tierSupport/TierSupportReducer.js b/src/app/tierSupport/TierSupportReducer.js index 1560427..c9a4faf 100644 --- a/src/app/tierSupport/TierSupportReducer.js +++ b/src/app/tierSupport/TierSupportReducer.js @@ -89,6 +89,16 @@ export default combineReducers({ ...state, nodeData: action.data }; + case tierSupportActionTypes.TIER_SUPPORT_ACTIVATE_BUSY_FEEDBACK: + return { + ...state, + enableBusyFeedback: true + }; + case tierSupportActionTypes.TIER_SUPPORT_DISABLE_BUSY_FEEDBACK: + return { + ...state, + enableBusyFeedback: false + }; case globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT: let emptyNodesAndLinksWarningEvent = ForceDirectedGraph.generateNewProps([], [], {}); return { |