Initial coomit for AAI-UI(sparky-fe)

Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb
Signed-off-by: ARULNA <arul.nambi@amdocs.com>

7 files changed, 779 insertions, 0 deletions

diff --git a/src/app/vnfSearch/VnfSearch.jsx b/src/app/vnfSearch/VnfSearch.jsx
new file mode 100644
index 0000000..f1f69f5
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearch.jsx
@@ -0,0 +1,129 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {
+  VNF_TITLE,
+  VNFS_ROUTE,
+  DEFAULT_VNFS_SEARCH_HASH
+} from 'app/vnfSearch/VnfSearchConstants.js';
+import {
+  processTotalVnfVisualizationOnSearchChange,
+  processOrchStatusVisualizationOnSearchChange,
+  processProvStatusVisualizationOnSearchChange,
+  setNotificationText
+} from 'app/vnfSearch/VnfSearchActions.js';
+import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx';
+import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx';
+import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx';
+import i18n from 'utils/i18n/i18n';
+import {changeUrlAddress, buildRouteObj} from 'utils/Routes.js';
+
+const mapStateToProps = ({vnfSearch}) => {
+  let {
+        feedbackMsgText = '',
+        feedbackMsgSeverity = ''
+      } = vnfSearch;
+
+  return {
+    feedbackMsgText,
+    feedbackMsgSeverity
+  };
+};
+
+let mapActionToProps = (dispatch) => {
+  return {
+    onReceiveNewParams: (vnfParam) => {
+      dispatch(processTotalVnfVisualizationOnSearchChange(vnfParam));
+      dispatch(processOrchStatusVisualizationOnSearchChange(vnfParam));
+      dispatch(processProvStatusVisualizationOnSearchChange(vnfParam));
+    },
+    onMessageStateChange: (msgText, msgSeverity) => {
+      dispatch(setNotificationText(msgText, msgSeverity));
+    }
+  };
+};
+
+class vnfSearch extends Component {
+  componentWillMount() {
+    if (this.props.match &&
+      this.props.match.params &&
+      this.props.match.params.vnfParam) {
+      this.props.onReceiveNewParams(this.props.match.params.vnfParam);
+    } else {
+      // render using default search params (hash for "VNFs")
+      this.props.onReceiveNewParams(DEFAULT_VNFS_SEARCH_HASH);
+      changeUrlAddress(buildRouteObj(VNFS_ROUTE, DEFAULT_VNFS_SEARCH_HASH),
+        this.props.history);
+    }
+
+    if (this.props.feedbackMsgText) {
+      this.props.onMessageStateChange(this.props.feedbackMsgText,
+        this.props.feedbackMsgSeverity);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.match.params.vnfParam) {
+      if (nextProps.match.params.vnfParam !==
+        this.props.match.params.vnfParam) {
+        this.props.onReceiveNewParams(nextProps.match.params.vnfParam);
+      }
+    } else if (this.props.match.params.vnfParam) {
+      // currently on VNF page and somebody has clicked the VNF NavLink
+      // want to reload the view with the default params (hash for "NFVs")
+      this.props.onReceiveNewParams(DEFAULT_VNFS_SEARCH_HASH);
+      changeUrlAddress(buildRouteObj(VNFS_ROUTE, DEFAULT_VNFS_SEARCH_HASH),
+        this.props.history);
+    }
+
+    if (nextProps.feedbackMsgText &&
+      nextProps.feedbackMsgText !==
+      this.props.feedbackMsgText) {
+      this.props.onMessageStateChange(nextProps.feedbackMsgText,
+        nextProps.feedbackMsgSeverity);
+    }
+  }
+
+  componentWillUnmount() {
+    // resetting to default params so on relaunch there will be no
+    // visibility of old searches
+    this.props.onReceiveNewParams(DEFAULT_VNFS_SEARCH_HASH);
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='secondary-header'>
+          <span className='secondary-title'>{i18n(VNF_TITLE)}</span>
+        </div>
+        <VnfSearchTotalCountVisualization />
+        <VnfSearchProvStatusVisualizations />
+        <VnfSearchOrchStatusVisualizations />
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapActionToProps)(vnfSearch);
diff --git a/src/app/vnfSearch/VnfSearchActions.js b/src/app/vnfSearch/VnfSearchActions.js
new file mode 100644
index 0000000..0f31e09
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchActions.js
@@ -0,0 +1,215 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import {
+  vnfActionTypes,
+  VNF_RESULT_URL
+} from 'app/vnfSearch/VnfSearchConstants.js';
+
+import {
+  getVnfProvStatusQueryString,
+  getVnfOrchStatusQueryString,
+  getVnfCountQueryString
+} from 'app/networking/NetworkUtil.js';
+import {
+  POST,
+  POST_HEADER,
+  ERROR_RETRIEVING_DATA
+} from 'app/networking/NetworkConstants.js';
+import {
+  getSetGlobalMessageEvent,
+  getClearGlobalMessageEvent
+} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js';
+
+let fetch = require('node-fetch');
+fetch.Promise = require('es6-promise').Promise;
+
+const itemKeyWord = 'key';
+const countKeyWord = 'doc_count';
+
+function getInvalidQueryEvent() {
+  return {
+    type: vnfActionTypes.VNF_NETWORK_ERROR,
+    data: {errorMsg: ERROR_RETRIEVING_DATA}
+  };
+}
+/*it is a vertical bar chart then y and x are switched */
+function getProvStatusEvent(responseJson) {
+  if (responseJson && responseJson.groupby_aggregation &&
+    responseJson.groupby_aggregation.buckets &&
+    responseJson.groupby_aggregation.buckets.length > 0) {
+    let groupByProvStatusBucket;
+    let dataPoints = [];
+    for (groupByProvStatusBucket of
+      responseJson.groupby_aggregation.buckets) {
+      dataPoints.push({
+        'x': groupByProvStatusBucket[itemKeyWord].split('=', 1)[0],
+        'y': groupByProvStatusBucket[countKeyWord]
+      });
+    }
+
+    let newProvStatusChartData = [
+      {
+        'values': dataPoints
+      }
+    ];
+
+    let provStatusCountChartData = {
+      chartData: newProvStatusChartData
+    };
+    return {
+      type: vnfActionTypes.COUNT_BY_PROV_STATUS_RECEIVED,
+      data: {provStatusCountChartData}
+    };
+  }
+  else {
+    return {
+      type: vnfActionTypes.ERROR_NO_DATA_FOR_PROV_STATUS_IN_SEARCH_RANGE_RECEIVED
+    };
+  }
+}
+
+function getOrchStatusEvent(responseJson) {
+  if (responseJson && responseJson.groupby_aggregation &&
+    responseJson.groupby_aggregation.buckets &&
+    responseJson.groupby_aggregation.buckets.length > 0) {
+    let groupByOrchStatusBucket;
+    let dataPoints = [];
+    for (groupByOrchStatusBucket of
+      responseJson.groupby_aggregation.buckets) {
+      dataPoints.push({
+        'x': groupByOrchStatusBucket[itemKeyWord].split('=', 1)[0],
+        'y': groupByOrchStatusBucket[countKeyWord]
+      });
+    }
+
+    let newOrchStatusChartData = [
+      {
+        'values': dataPoints
+      }
+    ];
+
+    let orchStatusCountChartData = {
+      chartData: newOrchStatusChartData
+    };
+    return {
+      type: vnfActionTypes.COUNT_BY_ORCH_STATUS_RECEIVED,
+      data: {orchStatusCountChartData}
+    };
+  }
+  else {
+    return {
+      type: vnfActionTypes.ERROR_NO_DATA_FOR_ORCH_STATUS_IN_SEARCH_RANGE_RECEIVED
+    };
+  }
+}
+
+function getTotalVnfEvent(responseJson) {
+  if (responseJson && responseJson.count && responseJson.count > 0) {
+    return {
+      type: vnfActionTypes.TOTAL_VNF_COUNT_RECEIVED,
+      data: {count: responseJson.count}
+    };
+  }
+  else {
+    return {
+      type: vnfActionTypes.ERROR_NO_COUNT_RECEIVED
+    };
+  }
+}
+
+export function processProvStatusVisualizationOnSearchChange(requestObject) {
+  return dispatch => {
+    return fetch(VNF_RESULT_URL, {
+      method: POST,
+      headers: POST_HEADER,
+      body: JSON.stringify(getVnfProvStatusQueryString(requestObject))
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => {
+        dispatch(getProvStatusEvent(responseJson));
+      }
+    ).catch(
+      () => {
+        dispatch(getInvalidQueryEvent());
+      }
+    );
+  };
+}
+
+export function processOrchStatusVisualizationOnSearchChange(requestObject) {
+  return dispatch => {
+    return fetch(VNF_RESULT_URL, {
+      method: POST,
+      headers: POST_HEADER,
+      body: JSON.stringify(getVnfOrchStatusQueryString(requestObject))
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => {
+        dispatch(getOrchStatusEvent(responseJson));
+      }
+    ).catch(
+      () => {
+        dispatch(getInvalidQueryEvent());
+      }
+    );
+  };
+}
+
+export function processTotalVnfVisualizationOnSearchChange(requestObject) {
+  return dispatch => {
+    return fetch(VNF_RESULT_URL + '/count', {
+      method: POST,
+      headers: POST_HEADER,
+      body: JSON.stringify(
+        getVnfCountQueryString(requestObject))
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => {
+        dispatch(getTotalVnfEvent(responseJson));
+      }
+    ).catch(
+      () => {
+        dispatch(getInvalidQueryEvent());
+      }
+    );
+  };
+}
+
+export function setNotificationText(msgText, msgSeverity) {
+  if (msgText.length > 0) {
+    return dispatch => {
+      dispatch(
+        getSetGlobalMessageEvent(msgText, msgSeverity));
+    };
+  } else {
+    return dispatch => {
+      dispatch(getClearGlobalMessageEvent());
+    };
+  }
+}
diff --git a/src/app/vnfSearch/VnfSearchConstants.js b/src/app/vnfSearch/VnfSearchConstants.js
new file mode 100644
index 0000000..d54cd88
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchConstants.js
@@ -0,0 +1,71 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+import keyMirror from 'utils/KeyMirror.js';
+import {BASE_URL} from 'app/networking/NetworkConstants.js';
+
+export const VNF_TITLE = 'VNFs';
+
+export const vnfActionTypes = keyMirror({
+  COUNT_BY_PROV_STATUS_RECEIVED: null,
+  ERROR_NO_DATA_FOR_PROV_STATUS_IN_SEARCH_RANGE_RECEIVED: null,
+  COUNT_BY_ORCH_STATUS_RECEIVED: null,
+  ERROR_NO_DATA_FOR_ORCH_STATUS_IN_SEARCH_RANGE_RECEIVED: null,
+  TOTAL_VNF_COUNT_RECEIVED: null,
+  ERROR_NO_COUNT_RECEIVED: null,
+  VNF_NETWORK_ERROR: null
+});
+
+export const CHART_PROV_STATUS = {
+  title: 'VNFs By Provisioning Status',
+  yAxisLabel: 'VNFs',
+  xAxisLabel: 'VNFs',
+  emptyData: [{'values': [
+    {
+      'x': 'No data discovered for Provisioning Status',
+      'y': 0
+    }
+  ]}]
+};
+
+export const CHART_ORCH_STATUS = {
+  title: 'VNFs By Orchestration Status',
+  yAxisLabel: 'VNFs',
+  emptyData: [{'values': [
+    {
+      'x': 'No data discovered for Orchestration Status',
+      'y': 0
+    }
+  ]}]
+};
+
+export const TOTAL_VNF_COUNT = {
+  title: 'Total VNFs',
+  emptyValue: 0
+};
+
+export const VNF_RESULT_URL = BASE_URL + '/search/summarybyentitytype';
+
+export const DEFAULT_VNFS_SEARCH_HASH = '2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d';
+export const VNFS_ROUTE = 'vnfSearch';
diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
new file mode 100644
index 0000000..e72f3f6
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
@@ -0,0 +1,95 @@
+/* eslint-disable max-len,max-len,max-len,max-len,max-len,max-len */
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+
+import i18n from 'utils/i18n/i18n';
+
+import {CHART_ORCH_STATUS} from 'app/vnfSearch/VnfSearchConstants.js';
+import {COLOR_BLUE} from 'utils/GlobalConstants.js';
+
+
+let mapStateToProps = ({vnfSearch}) => {
+  let {
+        processedOrchStatusCountChartData = CHART_ORCH_STATUS.emptyData
+      } = vnfSearch;
+
+  return {
+    processedOrchStatusCountChartData
+  };
+};
+
+class VnfSearchOrchStatusVisualizations extends Component {
+
+  render() {
+    let {
+						processedOrchStatusCountChartData
+				} = this.props;
+
+    let visualizationClass = 'visualizations';
+    if (processedOrchStatusCountChartData[0].values ===
+      null ||
+						processedOrchStatusCountChartData[0].values.size <=
+      0) {
+      visualizationClass = 'visualizations hidden';
+    }
+    const xAxisAttrName = 'x';
+    const yAxisAttrName = 'y';
+
+    return (
+      <div id='audit-visualizations' className={visualizationClass}>
+        <div className='visualization-charts'>
+          <div >
+            <h3>{i18n(CHART_ORCH_STATUS.title)}</h3>
+            <ResponsiveContainer width='100%' height={300}>
+              <BarChart data={processedOrchStatusCountChartData[0].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>
+    );
+  }
+
+}
+export default connect(mapStateToProps)(
+  VnfSearchOrchStatusVisualizations);
diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
new file mode 100644
index 0000000..3d9d524
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
@@ -0,0 +1,97 @@
+/* eslint-disable max-len,max-len,max-len,max-len,max-len,max-len */
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+
+import i18n from 'utils/i18n/i18n';
+
+import {CHART_PROV_STATUS} from 'app/vnfSearch/VnfSearchConstants.js';
+import {COLOR_BLUE} from 'utils/GlobalConstants.js';
+
+let mapStateToProps = ({vnfSearch}) => {
+  let {
+        processedProvStatusCountChartData = CHART_PROV_STATUS.emptyData
+      } = vnfSearch;
+
+  return {
+    processedProvStatusCountChartData
+  };
+};
+
+class VnfSearchProvStatusVisualization extends Component {
+  static propTypes = {
+    processedProvStatusCountChartData: React.PropTypes.array
+  };
+
+  render() {
+    let {
+						processedProvStatusCountChartData
+				} = this.props;
+
+    let visualizationClass = 'visualizations';
+    if (processedProvStatusCountChartData[0].values ===
+      null ||
+      processedProvStatusCountChartData[0].values.size <=
+      0) {
+      visualizationClass = 'visualizations hidden';
+    }
+    const xAxisAttrName = 'x';
+    const yAxisAttrName = 'y';
+
+    return (
+      <div id='audit-visualizations' className={visualizationClass}>
+        <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[0].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>
+    );
+  }
+
+}
+export default connect(mapStateToProps)(VnfSearchProvStatusVisualization);
diff --git a/src/app/vnfSearch/VnfSearchReducer.js b/src/app/vnfSearch/VnfSearchReducer.js
new file mode 100644
index 0000000..0a6803a
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchReducer.js
@@ -0,0 +1,97 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+import {vnfActionTypes} from 'app/vnfSearch/VnfSearchConstants.js';
+import {
+  CHART_ORCH_STATUS,
+  CHART_PROV_STATUS,
+  TOTAL_VNF_COUNT
+} from 'app/vnfSearch/VnfSearchConstants.js';
+import {ERROR_RETRIEVING_DATA} from 'app/networking/NetworkConstants.js';
+import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js';
+import {
+  globalAutoCompleteSearchBarActionTypes
+} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js';
+
+export default (state = {}, action) => {
+  let data = action.data;
+  switch (action.type) {
+
+    case vnfActionTypes.COUNT_BY_PROV_STATUS_RECEIVED:
+      return {
+        ...state,
+        processedProvStatusCountChartData: data.provStatusCountChartData.chartData,
+        feedbackMsgText: '',
+        feedbackMsgSeverity: ''
+      };
+
+    case vnfActionTypes.COUNT_BY_ORCH_STATUS_RECEIVED:
+      return {
+        ...state,
+        processedOrchStatusCountChartData: data.orchStatusCountChartData.chartData,
+        feedbackMsgText: '',
+        feedbackMsgSeverity: ''
+      };
+    case vnfActionTypes.TOTAL_VNF_COUNT_RECEIVED:
+      return {
+        ...state,
+        count: data.count,
+        feedbackMsgText: '',
+        feedbackMsgSeverity: ''
+      };
+    case vnfActionTypes.ERROR_NO_DATA_FOR_PROV_STATUS_IN_SEARCH_RANGE_RECEIVED:
+      return {
+        ...state,
+        processedProvStatusCountChartData: CHART_PROV_STATUS.emptyData,
+      };
+    case vnfActionTypes.ERROR_NO_DATA_FOR_ORCH_STATUS_IN_SEARCH_RANGE_RECEIVED:
+      return {
+        ...state,
+        processedOrchStatusCountChartData: CHART_ORCH_STATUS.emptyData,
+      };
+    case vnfActionTypes.ERROR_NO_COUNT_RECEIVED:
+      return {
+        ...state,
+        count: TOTAL_VNF_COUNT.emptyValue,
+      };
+    case vnfActionTypes.VNF_NETWORK_ERROR:
+      return {
+        ...state,
+        processedProvStatusCountChartData: CHART_PROV_STATUS.emptyData,
+        processedOrchStatusCountChartData: CHART_ORCH_STATUS.emptyData,
+        count: TOTAL_VNF_COUNT.emptyValue,
+        feedbackMsgText: ERROR_RETRIEVING_DATA,
+        feedbackMsgSeverity: MESSAGE_LEVEL_DANGER
+      };
+    case globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT:
+      return {
+        ...state,
+        processedProvStatusCountChartData: CHART_PROV_STATUS.emptyData,
+        processedOrchStatusCountChartData: CHART_ORCH_STATUS.emptyData,
+        count: TOTAL_VNF_COUNT.emptyValue
+      };
+  }
+
+  return state;
+};
diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
new file mode 100644
index 0000000..326dae9
--- /dev/null
+++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
@@ -0,0 +1,75 @@
+/* eslint-disable max-len,max-len,max-len,max-len,max-len,max-len */
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+
+import i18n from 'utils/i18n/i18n';
+
+import {TOTAL_VNF_COUNT} from 'app/vnfSearch/VnfSearchConstants.js';
+
+let mapStateToProps = ({vnfSearch}) => {
+  let {
+        count = TOTAL_VNF_COUNT.emptyValue
+      } = vnfSearch;
+
+  return {
+    count
+  };
+};
+
+class VnfSearchTotalCountVisualization extends Component {
+  static propTypes = {
+    count: React.PropTypes.number
+  };
+
+  render() {
+    let {
+          count
+        } = this.props;
+
+    let visualizationClass = 'visualizations';
+    if (count === null) {
+      visualizationClass = 'visualizations hidden';
+    }
+
+    return (
+      <div id='audit-visualizations' className={visualizationClass}>
+        <div className='visualization-charts'>
+          <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>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+export default connect(mapStateToProps)(VnfSearchTotalCountVisualization);