summaryrefslogtreecommitdiffstats
path: root/src/app/vnfSearch
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/vnfSearch')
-rw-r--r--src/app/vnfSearch/VnfSearchActions.js18
-rw-r--r--src/app/vnfSearch/VnfSearchConstants.js4
-rw-r--r--src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx43
-rw-r--r--src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx43
-rw-r--r--src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx45
-rw-r--r--src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx46
-rw-r--r--src/app/vnfSearch/VnfSearchReducer.js10
-rw-r--r--src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx28
8 files changed, 168 insertions, 69 deletions
diff --git a/src/app/vnfSearch/VnfSearchActions.js b/src/app/vnfSearch/VnfSearchActions.js
index 0167962..156f541 100644
--- a/src/app/vnfSearch/VnfSearchActions.js
+++ b/src/app/vnfSearch/VnfSearchActions.js
@@ -205,8 +205,21 @@ function getVnfVisualizationsResultsEvent(results) {
};
}
+function setBusyFeedback(){
+ return {
+ type: vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK
+ };
+}
+
+function disableBusyFeedback(){
+ return {
+ type: vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK
+ };
+}
+
export function processVnfVisualizationsOnFilterChange(filterValueMap) {
return dispatch => {
+ dispatch(setBusyFeedback());
return fetch(VNF_FILTER_AGGREGATION_URL, {
method: POST,
headers: POST_HEADER,
@@ -222,8 +235,13 @@ export function processVnfVisualizationsOnFilterChange(filterValueMap) {
}
dispatch(getVnfVisualizationsResultsEvent(responseJson));
}
+ ).then(
+ () => {
+ dispatch(disableBusyFeedback());
+ }
).catch(
() => {
+ dispatch(disableBusyFeedback());
dispatch(getInvalidQueryEvent());
}
);
diff --git a/src/app/vnfSearch/VnfSearchConstants.js b/src/app/vnfSearch/VnfSearchConstants.js
index 97d7159..200d01f 100644
--- a/src/app/vnfSearch/VnfSearchConstants.js
+++ b/src/app/vnfSearch/VnfSearchConstants.js
@@ -30,7 +30,9 @@ export const vnfActionTypes = keyMirror({
VNF_NETWORK_ERROR: null,
VNF_SEARCH_RESULTS_RECEIVED: null,
VNF_SEARCH_FILTERS_RECEIVED: null,
- VNF_FILTER_PANEL_TOGGLED: null
+ VNF_FILTER_PANEL_TOGGLED: null,
+ VNF_ACTIVATE_BUSY_FEEDBACK: null,
+ VNF_DISABLE_BUSY_FEEDBACK: null
});
export const CHART_PROV_STATUS = {
diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
index ca6f269..806ab3a 100644
--- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
@@ -36,27 +36,35 @@ 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';
let mapStateToProps = ({vnfSearch}) => {
let {
- processedNfRoleCountChartData = CHART_NF_ROLE.emptyData
+ processedNfRoleCountChartData = CHART_NF_ROLE.emptyData,
+ enableBusyFeedback = false
} = vnfSearch;
return {
- processedNfRoleCountChartData
+ processedNfRoleCountChartData,
+ enableBusyFeedback
};
};
class VnfSearchNfRoleVisualization extends Component {
static propTypes = {
- processedNfRoleCountChartData: React.PropTypes.object
+ processedNfRoleCountChartData: React.PropTypes.object,
+ enableBusyFeedback: React.PropTypes.bool
};
render() {
let {
- processedNfRoleCountChartData
+ processedNfRoleCountChartData,
+ enableBusyFeedback
} = this.props;
-
+ let componentVisibitliyClassName = 'showContainer';
+ if(enableBusyFeedback){
+ componentVisibitliyClassName = 'hideContainer';
+ }
let visualizationClass = 'visualizations';
if (processedNfRoleCountChartData.values ===
@@ -74,16 +82,21 @@ class VnfSearchNfRoleVisualization extends Component {
<div className='visualization-charts'>
<div>
<h3>{i18n(CHART_NF_ROLE.title)}</h3>
- <ResponsiveContainer width='100%' height={300}>
- <BarChart data={processedNfRoleCountChartData.values}>
- <XAxis dataKey={xAxisAttrName}/>
- <YAxis/>
- <CartesianGrid strokeDasharray='3 3'/>
- <Tooltip/>
- <Bar name={i18n(CHART_NF_ROLE.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={processedNfRoleCountChartData.values}>
+ <XAxis dataKey={xAxisAttrName}/>
+ <YAxis/>
+ <CartesianGrid strokeDasharray='3 3'/>
+ <Tooltip/>
+ <Bar name={i18n(CHART_NF_ROLE.yAxisLabel)}
+ dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
+ </BarChart>
+ </ResponsiveContainer>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
index 30c6cdc..3f4acf0 100644
--- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
@@ -36,27 +36,35 @@ 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';
let mapStateToProps = ({vnfSearch}) => {
let {
- processedNfTypeCountChartData = CHART_NF_TYPE.emptyData
+ processedNfTypeCountChartData = CHART_NF_TYPE.emptyData,
+ enableBusyFeedback = false
} = vnfSearch;
return {
- processedNfTypeCountChartData
+ processedNfTypeCountChartData,
+ enableBusyFeedback
};
};
class VnfSearchNfTypeVisualization extends Component {
static propTypes = {
- processedNfTypeCountChartData: React.PropTypes.object
+ processedNfTypeCountChartData: React.PropTypes.object,
+ enableBusyFeedback: React.PropTypes.bool
};
render() {
let {
- processedNfTypeCountChartData
+ processedNfTypeCountChartData,
+ enableBusyFeedback
} = this.props;
-
+ let componentVisibitliyClassName = 'showContainer';
+ if(enableBusyFeedback){
+ componentVisibitliyClassName = 'hideContainer';
+ }
let visualizationClass = 'visualizations';
if (processedNfTypeCountChartData.values ===
null ||
@@ -72,16 +80,21 @@ class VnfSearchNfTypeVisualization extends Component {
<div className='visualization-charts'>
<div >
<h3>{i18n(CHART_NF_TYPE.title)}</h3>
- <ResponsiveContainer width='100%' height={300}>
- <BarChart data={processedNfTypeCountChartData.values}>
- <XAxis dataKey={xAxisAttrName}/>
- <YAxis />
- <CartesianGrid strokeDasharray='3 3'/>
- <Tooltip/>
- <Bar name={i18n(CHART_NF_TYPE.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={processedNfTypeCountChartData.values}>
+ <XAxis dataKey={xAxisAttrName}/>
+ <YAxis />
+ <CartesianGrid strokeDasharray='3 3'/>
+ <Tooltip/>
+ <Bar name={i18n(CHART_NF_TYPE.yAxisLabel)}
+ dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
+ </BarChart>
+ </ResponsiveContainer>
+ </div>
</div>
</div>
</div>
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>
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
diff --git a/src/app/vnfSearch/VnfSearchReducer.js b/src/app/vnfSearch/VnfSearchReducer.js
index 1394f97..afd822c 100644
--- a/src/app/vnfSearch/VnfSearchReducer.js
+++ b/src/app/vnfSearch/VnfSearchReducer.js
@@ -105,6 +105,16 @@ export default (state = {}, action) => {
vnfFilterValues: data.nonConvertedValues // launching DI view via menu button requires this
// to be set so visualizations and table will populate themselves
};
+ case vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK:
+ return {
+ ...state,
+ enableBusyFeedback: true
+ };
+ case vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK:
+ return {
+ ...state,
+ enableBusyFeedback: false
+ };
case filterBarActionTypes.CLEAR_FILTERS:
return {
...state,
diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
index a2abd7c..553de42 100644
--- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
@@ -26,14 +26,18 @@ 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';
let mapStateToProps = ({vnfSearch}) => {
let {
- count = TOTAL_VNF_COUNT.emptyValue
+ count = TOTAL_VNF_COUNT.emptyValue,
+ enableBusyFeedback = false
} = vnfSearch;
return {
- count
+ count,
+ enableBusyFeedback
};
};
@@ -42,14 +46,19 @@ class VnfSearchTotalCountVisualization extends Component {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
- ])
+ ]),
+ enableBusyFeedback: React.PropTypes.bool
};
render() {
let {
- count
+ count,
+ enableBusyFeedback
} = this.props;
-
+ let componentVisibitliyClassName = 'showContainer';
+ if(enableBusyFeedback){
+ componentVisibitliyClassName = 'hideContainer';
+ }
let visualizationClass = 'visualizations';
if (count === null) {
visualizationClass = 'visualizations hidden';
@@ -61,8 +70,13 @@ class VnfSearchTotalCountVisualization extends Component {
<div className='visualization-side-by-side-30'>
<span>&nbsp;</span>
<h3>{i18n(TOTAL_VNF_COUNT.title)}</h3>
- <div className='total-box-entity-count'>
- <span>{count}</span>
+ <div className='spinner'>
+ <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
+ </div>
+ <div className={componentVisibitliyClassName}>
+ <div className='total-box-entity-count'>
+ <span>{count}</span>
+ </div>
</div>
</div>
</div>