From ca007e933bcd9f63aa77801656ed9dd4142c432c Mon Sep 17 00:00:00 2001 From: ARULNA Date: Fri, 2 Jun 2017 16:27:25 -0400 Subject: Initial coomit for AAI-UI(sparky-fe) Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb Signed-off-by: ARULNA --- src/app/vnfSearch/VnfSearch.jsx | 129 +++++++++++++ src/app/vnfSearch/VnfSearchActions.js | 215 +++++++++++++++++++++ src/app/vnfSearch/VnfSearchConstants.js | 71 +++++++ .../VnfSearchOrchestratedStatusVisualization.jsx | 95 +++++++++ .../vnfSearch/VnfSearchProvStatusVisualization.jsx | 97 ++++++++++ src/app/vnfSearch/VnfSearchReducer.js | 97 ++++++++++ .../vnfSearch/VnfSearchTotalCountVisualization.jsx | 75 +++++++ 7 files changed, 779 insertions(+) create mode 100644 src/app/vnfSearch/VnfSearch.jsx create mode 100644 src/app/vnfSearch/VnfSearchActions.js create mode 100644 src/app/vnfSearch/VnfSearchConstants.js create mode 100644 src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx create mode 100644 src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx create mode 100644 src/app/vnfSearch/VnfSearchReducer.js create mode 100644 src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx (limited to 'src/app/vnfSearch') 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 ( +
+
+ {i18n(VNF_TITLE)} +
+ + + +
+ ); + } +} +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 ( +
+
+
+

{i18n(CHART_ORCH_STATUS.title)}

+ + + + + + + + + +
+
+
+ ); + } + +} +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 ( +
+
+
+

{i18n(CHART_PROV_STATUS.title)}

+ + + + + + + + + +
+
+
+ ); + } + +} +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 ( +
+
+
+   +

{i18n(TOTAL_VNF_COUNT.title)}

+
+ {count} +
+
+
+
+ ); + } + +} +export default connect(mapStateToProps)(VnfSearchTotalCountVisualization); -- cgit 1.2.3-korg