diff options
| author |   arul.nambi <arul.nambi@amdocs.com> | 2018-01-30 12:34:34 -0500 |
|---|---|---|
| committer | arul.nambi <arul.nambi@amdocs.com> | 2018-01-30 14:00:30 -0500 |
| commit | f42261a2cd0582e0209018c23816681e146ea97d (patch) | |
| tree | 078eb4fee79f5cb0740615042afc31a48b429d69 /src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx | |
| 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/vnfSearch/VnfSearchProvStatusVisualization.jsx')
| -rw-r--r-- | src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx | 46 |
1 files changed, 30 insertions, 16 deletions
diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx index cdf6872..7ef6e9e 100644 --- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx @@ -36,27 +36,36 @@ 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'; let mapStateToProps = ({vnfSearch}) => { let { - processedProvStatusCountChartData = CHART_PROV_STATUS.emptyData + processedProvStatusCountChartData = CHART_PROV_STATUS.emptyData, + enableBusyFeedback = false } = vnfSearch; return { - processedProvStatusCountChartData + processedProvStatusCountChartData, + enableBusyFeedback }; }; class VnfSearchProvStatusVisualization extends Component { static propTypes = { - processedProvStatusCountChartData: React.PropTypes.object + processedProvStatusCountChartData: React.PropTypes.object, + enableBusyFeedback: React.PropTypes.bool }; render() { let { - processedProvStatusCountChartData + processedProvStatusCountChartData, + enableBusyFeedback } = this.props; + let componentVisibitliyClassName = 'showContainer'; + if(enableBusyFeedback){ + componentVisibitliyClassName = 'hideContainer'; + } let visualizationClass = 'visualizations'; if (processedProvStatusCountChartData.values === null || @@ -72,17 +81,22 @@ class VnfSearchProvStatusVisualization extends Component { <div className='visualization-charts'> <div className='visualization-side-by-side-70'> <h3>{i18n(CHART_PROV_STATUS.title)}</h3> - <ResponsiveContainer width='100%' height={300}> - <BarChart - data={processedProvStatusCountChartData.values}> - <XAxis dataKey={xAxisAttrName}/> - <YAxis /> - <CartesianGrid strokeDasharray='3 3'/> - <Tooltip/> - <Bar name={i18n(CHART_PROV_STATUS.xAxisLabel)} - dataKey={yAxisAttrName} fill={COLOR_BLUE}/> - </BarChart> - </ResponsiveContainer> + <div className='spinner'> + <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} /> + </div> + <div className={componentVisibitliyClassName}> + <ResponsiveContainer width='100%' height={345} > + <BarChart + data={processedProvStatusCountChartData.values}> + <XAxis dataKey={xAxisAttrName}/> + <YAxis /> + <CartesianGrid strokeDasharray='3 3'/> + <Tooltip/> + <Bar name={i18n(CHART_PROV_STATUS.xAxisLabel)} + dataKey={yAxisAttrName} fill={COLOR_BLUE}/> + </BarChart> + </ResponsiveContainer> + </div> </div> </div> </div> @@ -90,4 +104,4 @@ class VnfSearchProvStatusVisualization extends Component { } } -export default connect(mapStateToProps)(VnfSearchProvStatusVisualization); +export default connect(mapStateToProps)(VnfSearchProvStatusVisualization);
\ No newline at end of file |