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/VnfSearchOrchestratedStatusVisualization.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/VnfSearchOrchestratedStatusVisualization.jsx')
| -rw-r--r-- | src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx | 45 |
1 files changed, 30 insertions, 15 deletions
diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx index 1855db7..7cc29d8 100644 --- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx @@ -36,25 +36,35 @@ 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'; let mapStateToProps = ({vnfSearch}) => { let { - processedOrchStatusCountChartData = CHART_ORCH_STATUS.emptyData + processedOrchStatusCountChartData = CHART_ORCH_STATUS.emptyData, + enableBusyFeedback = false } = vnfSearch; return { - processedOrchStatusCountChartData + processedOrchStatusCountChartData, + enableBusyFeedback }; }; class VnfSearchOrchStatusVisualizations extends Component { + static propTypes = { + processedOrchStatusCountChartData: React.PropTypes.object, + enableBusyFeedback: React.PropTypes.bool + }; render() { let { - processedOrchStatusCountChartData + processedOrchStatusCountChartData, + enableBusyFeedback } = this.props; - + let componentVisibitliyClassName = 'showContainer'; + if(enableBusyFeedback){ + componentVisibitliyClassName = 'hideContainer'; + } let visualizationClass = 'visualizations'; if (processedOrchStatusCountChartData.values === null || @@ -70,16 +80,21 @@ class VnfSearchOrchStatusVisualizations extends Component { <div className='visualization-charts'> <div > <h3>{i18n(CHART_ORCH_STATUS.title)}</h3> - <ResponsiveContainer width='100%' height={300}> - <BarChart data={processedOrchStatusCountChartData.values}> - <XAxis dataKey={xAxisAttrName}/> - <YAxis /> - <CartesianGrid strokeDasharray='3 3'/> - <Tooltip/> - <Bar name={i18n(CHART_ORCH_STATUS.yAxisLabel)} - dataKey={yAxisAttrName} fill={COLOR_BLUE}/> - </BarChart> - </ResponsiveContainer> + <div className='spinner'> + <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} /> + </div> + <div className={componentVisibitliyClassName}> + <ResponsiveContainer width='100%' height={300}> + <BarChart data={processedOrchStatusCountChartData.values}> + <XAxis dataKey={xAxisAttrName}/> + <YAxis /> + <CartesianGrid strokeDasharray='3 3'/> + <Tooltip/> + <Bar name={i18n(CHART_ORCH_STATUS.yAxisLabel)} + dataKey={yAxisAttrName} fill={COLOR_BLUE}/> + </BarChart> + </ResponsiveContainer> + </div> </div> </div> </div> |