summaryrefslogtreecommitdiffstats
path: root/src/app/tierSupport
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/tierSupport')
-rw-r--r--src/app/tierSupport/TierSupport.jsx78
-rw-r--r--src/app/tierSupport/TierSupportActions.js18
-rw-r--r--src/app/tierSupport/TierSupportConstants.js4
-rw-r--r--src/app/tierSupport/TierSupportReducer.js10
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 {