From c89060158fab7394c3bddc5eacb0411dbb13785c Mon Sep 17 00:00:00 2001 From: Steve Thomas Date: Mon, 5 Feb 2018 11:54:23 -0500 Subject: Correcting spinner Change-Id: I0531805d63a9d5b8ac6a161281845a6b8cc1f4af Issue-ID: AAI-732 Signed-off-by: Steve Thomas --- src/app/tierSupport/TierSupport.jsx | 15 ++-------- src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx | 14 +++------ src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx | 14 +++------ .../VnfSearchOrchestratedStatusVisualization.jsx | 14 +++------ .../vnfSearch/VnfSearchProvStatusVisualization.jsx | 35 +++++++++------------- .../vnfSearch/VnfSearchTotalCountVisualization.jsx | 15 +++------- src/utils/SpinnerContainer.jsx | 30 +++++++++++++++++++ 7 files changed, 63 insertions(+), 74 deletions(-) create mode 100644 src/utils/SpinnerContainer.jsx (limited to 'src') diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx index 943943f..e51dde8 100644 --- a/src/app/tierSupport/TierSupport.jsx +++ b/src/app/tierSupport/TierSupport.jsx @@ -24,8 +24,7 @@ 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 Spinner from 'utils/SpinnerContainer.jsx'; import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js'; import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx'; @@ -177,11 +176,6 @@ class TierSupport extends Component { 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. @@ -209,10 +203,7 @@ class TierSupport extends Component { let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent); return (
-
- -
-
+ -
+
); } diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx index 806ab3a..19b37cd 100644 --- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_NF_ROLE} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchNfRoleVisualization extends Component { processedNfRoleCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedNfRoleCountChartData.values === @@ -82,10 +79,7 @@ class VnfSearchNfRoleVisualization extends Component {

{i18n(CHART_NF_ROLE.title)}

-
- -
-
+ @@ -96,7 +90,7 @@ class VnfSearchNfRoleVisualization extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx index 3f4acf0..3c862d7 100644 --- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_NF_TYPE} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchNfTypeVisualization extends Component { processedNfTypeCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedNfTypeCountChartData.values === null || @@ -80,10 +77,7 @@ class VnfSearchNfTypeVisualization extends Component {

{i18n(CHART_NF_TYPE.title)}

-
- -
-
+ @@ -94,7 +88,7 @@ class VnfSearchNfTypeVisualization extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx index 7cc29d8..834e179 100644 --- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_ORCH_STATUS} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchOrchStatusVisualizations extends Component { processedOrchStatusCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedOrchStatusCountChartData.values === null || @@ -80,10 +77,7 @@ class VnfSearchOrchStatusVisualizations extends Component {

{i18n(CHART_ORCH_STATUS.title)}

-
- -
-
+ @@ -94,7 +88,7 @@ class VnfSearchOrchStatusVisualizations extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx index 7ef6e9e..fe985c9 100644 --- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_PROV_STATUS} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -62,10 +62,6 @@ class VnfSearchProvStatusVisualization extends Component { enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } let visualizationClass = 'visualizations'; if (processedProvStatusCountChartData.values === null || @@ -81,22 +77,19 @@ class VnfSearchProvStatusVisualization extends Component {

{i18n(CHART_PROV_STATUS.title)}

-
- -
-
+ - - - - - - - - -
+ + + + + + + + +
@@ -104,4 +97,4 @@ class VnfSearchProvStatusVisualization extends Component { } } -export default connect(mapStateToProps)(VnfSearchProvStatusVisualization); \ No newline at end of file +export default connect(mapStateToProps)(VnfSearchProvStatusVisualization); diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx index 553de42..0335da3 100644 --- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx @@ -26,8 +26,7 @@ import {connect} from 'react-redux'; import i18n from 'utils/i18n/i18n'; import {TOTAL_VNF_COUNT} from 'app/vnfSearch/VnfSearchConstants.js'; -import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -55,10 +54,7 @@ class VnfSearchTotalCountVisualization extends Component { count, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (count === null) { visualizationClass = 'visualizations hidden'; @@ -70,14 +66,11 @@ class VnfSearchTotalCountVisualization extends Component {
 

{i18n(TOTAL_VNF_COUNT.title)}

-
- -
-
+
{count}
-
+
diff --git a/src/utils/SpinnerContainer.jsx b/src/utils/SpinnerContainer.jsx new file mode 100644 index 0000000..448999c --- /dev/null +++ b/src/utils/SpinnerContainer.jsx @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import { ClipLoader } from 'react-spinners'; +import {COLOR_BLUE} from 'utils/GlobalConstants.js'; + +class SpinnerContainer extends Component { + render() { + // if loading, show content as busy (ex: grey out) + const spinnerContentClass = this.props.loading ? 'spinner-content' : ''; + return ( +
+
+ +
+
+ {this.props.children} +
+
+ ); + } +} +export default SpinnerContainer; + +SpinnerContainer.propTypes = { + loading: React.PropTypes.bool +}; + +SpinnerContainer.defaultProps = { + loading: false +}; + -- cgit 1.2.3-korg