diff options
Diffstat (limited to 'src/app/inventory')
-rw-r--r-- | src/app/inventory/Inventory.jsx | 190 | ||||
-rw-r--r-- | src/app/inventory/InventoryActions.js | 170 | ||||
-rw-r--r-- | src/app/inventory/InventoryConstants.js | 54 | ||||
-rw-r--r-- | src/app/inventory/InventoryReducer.js | 67 |
4 files changed, 481 insertions, 0 deletions
diff --git a/src/app/inventory/Inventory.jsx b/src/app/inventory/Inventory.jsx new file mode 100644 index 0000000..de7120b --- /dev/null +++ b/src/app/inventory/Inventory.jsx @@ -0,0 +1,190 @@ +/* + * ============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 Grid from 'react-bootstrap/lib/Grid'; +import Row from 'react-bootstrap/lib/Row'; +import Col from 'react-bootstrap/lib/Col'; +import Clearfix from 'react-bootstrap/lib/Clearfix'; +import { + LineChart, Line, XAxis, YAxis, CartesianGrid, + Tooltip, ResponsiveContainer, Brush +} from 'recharts'; +import i18n from 'utils/i18n/i18n'; + +import TopographicMap from 'generic-components/map/TopographicMap.jsx'; +import { + onTopographicMapMounted, onCountByTypeLoad, onLoadTotalCountByDate +} from 'app/inventory/InventoryActions.js'; +import { + INVENTORY_TITLE, + TOTAL_ENTITY_COUNTS_BY_DATE_CHART, + COMPLEX_BY_LOCATION_TITLE, + ENTITIES_BY_TYPE_TITLE, + TOTAL_ENTITY_COUNT_TITLE +} from 'app/inventory/InventoryConstants.js'; +import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx'; +import PaginatedTable from 'generic-components/paginatedTable/PaginatedTable.jsx'; +import { + dateFormatLocalTimeZoneMMDDYYYY, getTicks, getTicksData, sortDataByField +} from 'utils/DateTimeChartUtil.js'; +import TitledContainer from 'generic-components/titledContainer/TitledContainer.jsx'; +import {COLOR_BLUE} from 'utils/GlobalConstants.js'; + +const mapStateToProps = ({inventoryReducer}) => { + let { + mapPlotPoints = [], countByType = [], countByDate = [], + feedbackMsgText = '', feedbackMsgSeverity = '' + } = inventoryReducer; + + return { + mapPlotPoints, + countByType, + countByDate, + feedbackMsgText, + feedbackMsgSeverity + }; +}; + +const mapActionToProps = (dispatch) => { + return { + onMountQueryTopographicVisualization: (requestObject) => { + dispatch(onTopographicMapMounted(requestObject)); + }, onLoadCountByType: () => { + dispatch(onCountByTypeLoad()); + }, onLoadTotalCountByDate: () => { + dispatch(onLoadTotalCountByDate()); + } + }; +}; + +class Inventory extends Component { + + componentDidMount() { + let requestObject = { + entityType: 'complex' + }; + this.props.onMountQueryTopographicVisualization(requestObject); + this.props.onLoadCountByType(); + this.props.onLoadTotalCountByDate(); + } + + render() { + let { + mapPlotPoints, countByType, onLoadCountByType, countByDate, + feedbackMsgSeverity, feedbackMsgText + } = this.props; + + let tableDefinition = { + key: {name: 'Entity'}, + doc_count: {name: 'Count'} + }; + let paginationClasses = 'audit-pagination'; + let tableClasses = + 'inventory-table table table-striped table-bordered table-condensed'; + + const xAxisAttrName = 'date'; + const yAxisAttrName = 'count'; + const sortedData = sortDataByField(countByDate, xAxisAttrName); + const ticksArr = getTicks(sortedData, xAxisAttrName); + const completeData = getTicksData(sortedData, ticksArr, xAxisAttrName); + const completeSortedData = sortDataByField(completeData, xAxisAttrName); + + let totalEntities = 0; + let lastDate = ''; + if (sortedData.length > 0) { + lastDate = + dateFormatLocalTimeZoneMMDDYYYY(sortedData[sortedData.length - 1] + .date); + totalEntities = sortedData[sortedData.length - 1].count; + } + + return ( + <div> + <div className='secondary-header'> + <span className='secondary-title'>{i18n(INVENTORY_TITLE)}</span> + <InlineMessage level={feedbackMsgSeverity} + messageTxt={feedbackMsgText}/> + </div> + <Grid fluid={true}> + <Row> + <Col xs={3} sm={3} md={3}> + <TitledContainer title={TOTAL_ENTITY_COUNT_TITLE}> + <div className='total-entity-count'> + {totalEntities} + <span>{lastDate}</span> + </div> + </TitledContainer> + <TitledContainer title={ENTITIES_BY_TYPE_TITLE}> + <PaginatedTable + tableHeaders={tableDefinition} + displayHeader={false} + tableData={countByType} + activePage={1} + pageCount={1} + onPageIndexSelected={ () => onLoadCountByType()} + paginationClass={paginationClasses} + tableClass={tableClasses} + maxPaginationLinks={25}/> + </TitledContainer> + </Col> + <Clearfix visibleSmBlock/> + <Col xs={9} sm={9} md={9}> + <TitledContainer + title={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.title)}> + <ResponsiveContainer width='100%' height={250}> + <LineChart data={completeSortedData} + margin={{ + top: 10, bottom: 10, left: 10, right: 70 + }}> + <XAxis dataKey={xAxisAttrName} ticks={ticksArr} + tickCount={ticksArr.length} + tickFormatter={dateFormatLocalTimeZoneMMDDYYYY}/> + <YAxis/> + <CartesianGrid strokeDasharray='3 3'/> + <Tooltip labelFormatter={dateFormatLocalTimeZoneMMDDYYYY}/> + <Brush dataKey={xAxisAttrName} + tickFormatter={dateFormatLocalTimeZoneMMDDYYYY} + height={20} stroke={COLOR_BLUE}/> + <Line + name={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.yAxisLabel)} + type='monotone' dataKey={yAxisAttrName} + stroke={COLOR_BLUE} + connectNulls={true} activeDot={{r: 6}}/> + </LineChart> + </ResponsiveContainer> + </TitledContainer> + <TitledContainer title={i18n(COMPLEX_BY_LOCATION_TITLE)}> + <TopographicMap pointArray={mapPlotPoints}/> + </TitledContainer> + </Col> + </Row> + </Grid> + </div> + ); + } +} +export default connect(mapStateToProps, mapActionToProps)(Inventory); diff --git a/src/app/inventory/InventoryActions.js b/src/app/inventory/InventoryActions.js new file mode 100644 index 0000000..d3feab9 --- /dev/null +++ b/src/app/inventory/InventoryActions.js @@ -0,0 +1,170 @@ +/* + * ============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 { + GET, + POST_HEADER, + ERROR_RETRIEVING_DATA, + SAME_ORIGIN, + BACKEND_IP_ADDRESS +} from 'app/networking/NetworkConstants.js'; + +import { + INVENTORY_GEO_VISUALIZATION_SEARCH_URL, + GEO_VISUALIZATION_QUERY_STRING_PARAMETERS, + INVENTORY_COUNT_BY_TYPE_SEARCH_URL, + INVENTORY_COUNT_BY_DATE_SEARCH_URL, + InventoryActionTypes +} from 'app/inventory/InventoryConstants.js'; + +import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js'; + +function getSuccessfulTopographicVisualizationQueryEvent(responseJson) { + return { + type: InventoryActionTypes.TOPOGRAPHIC_QUERY_SUCCESS, + data: { + plotPoints: responseJson.plotPoints + } + }; +} + +function getFailedTopographicVisualizationQueryEvent() { + return { + type: InventoryActionTypes.TOPOGRAPHIC_QUERY_FAILED, + data: { + message: ERROR_RETRIEVING_DATA, + severity: MESSAGE_LEVEL_DANGER + } + }; +} + +function getSuccessfulCountByTypeQueryEvent(responseJson) { + return { + type: InventoryActionTypes.COUNT_BY_ENTITY_SUCCESS, + data: { + countByType: responseJson.result + } + }; +} + +function getFailedCountByTypeQueryEvent() { + return { + type: InventoryActionTypes.COUNT_BY_ENTITY_FAILED, + data: { + message: ERROR_RETRIEVING_DATA, + severity: MESSAGE_LEVEL_DANGER + } + }; +} + +function getSuccessfulCountsByDateQueryEvent(responseJson) { + return { + type: InventoryActionTypes.COUNT_BY_DATE_SUCCESS, + data: { + countByDate: responseJson.result + } + }; +} + +function getFailedCountByDateQueryEvent() { + return { + type: InventoryActionTypes.COUNT_BY_DATE_FAILED, + data: { + message: ERROR_RETRIEVING_DATA, + severity: MESSAGE_LEVEL_DANGER + } + }; +} + +function getDynamicTopographicQueryURL(entityType) { + return INVENTORY_GEO_VISUALIZATION_SEARCH_URL.replace(BACKEND_IP_ADDRESS, + BACKEND_IP_ADDRESS) + + GEO_VISUALIZATION_QUERY_STRING_PARAMETERS + + entityType; +} + +function getCountByTypeQueryURL() { + return INVENTORY_COUNT_BY_TYPE_SEARCH_URL.replace(BACKEND_IP_ADDRESS, + BACKEND_IP_ADDRESS); +} + +function getCountByDateQueryURL() { + return INVENTORY_COUNT_BY_DATE_SEARCH_URL.replace(BACKEND_IP_ADDRESS, + BACKEND_IP_ADDRESS); +} + +export function onLoadTotalCountByDate() { + return function (dispatch) { + fetch(getCountByDateQueryURL(), { + credentials: SAME_ORIGIN, + method: GET, + headers: POST_HEADER + }).then( + (response) => response.json() + ).then( + (responseJson) => dispatch( + getSuccessfulCountsByDateQueryEvent(responseJson)) + ).catch( + () => dispatch(getFailedCountByDateQueryEvent()) + ); + }; +} + +export function onCountByTypeLoad() { + return function (dispatch) { + fetch(getCountByTypeQueryURL(), { + credentials: SAME_ORIGIN, + method: GET, + headers: POST_HEADER + }).then( + (response) => response.json() + ).then( + (responseJson) => dispatch( + getSuccessfulCountByTypeQueryEvent(responseJson)) + ).catch( + () => dispatch(getFailedCountByTypeQueryEvent()) + ); + }; +} + +export function onTopographicMapMounted(requestObject) { + return function (dispatch) { + fetch(getDynamicTopographicQueryURL(requestObject.entityType), { + credentials: SAME_ORIGIN, + method: GET, + headers: POST_HEADER + }).then( + (response) => response.json() + ).then( + (responseJson) => dispatch( + getSuccessfulTopographicVisualizationQueryEvent(responseJson)) + ).catch( + () => { + dispatch(getFailedTopographicVisualizationQueryEvent()); + } + ); + }; +} + diff --git a/src/app/inventory/InventoryConstants.js b/src/app/inventory/InventoryConstants.js new file mode 100644 index 0000000..a7b3350 --- /dev/null +++ b/src/app/inventory/InventoryConstants.js @@ -0,0 +1,54 @@ +/* + * ============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 InventoryActionTypes = keyMirror({ + TOPOGRAPHIC_QUERY_SUCCESS: null, + TOPOGRAPHIC_QUERY_FAILED: null, + COUNT_BY_ENTITY_SUCCESS: null, + COUNT_BY_ENTITY_FAILED: null, + COUNT_BY_DATE_SUCCESS: null, + COUNT_BY_DATE_FAILED: null +}); + +export const INVENTORY_TITLE = 'Active Inventory'; +export const COMPLEX_BY_LOCATION_TITLE = 'Complexes By Location'; +export const TOTAL_ENTITY_COUNT_TITLE = 'Total Entities'; +export const ENTITIES_BY_TYPE_TITLE = 'Entities By Type'; + +export const INVENTORY_COUNT_BY_TYPE_SEARCH_URL = BASE_URL + '/visualization/entityCountHistory?type=table'; +export const INVENTORY_COUNT_BY_DATE_SEARCH_URL = BASE_URL + '/visualization/entityCountHistory?type=graph'; +export const INVENTORY_GEO_VISUALIZATION_SEARCH_URL = BASE_URL + '/visualization/geovisualization'; +export const GEO_VISUALIZATION_QUERY_STRING_PARAMETERS = '/?entity='; + +export const TOTAL_ENTITY_COUNTS_BY_DATE_CHART = { + title: 'Total Entities By Date', + yAxisLabel: 'Entities', + emptyData: [{ + values: [] + }] +}; diff --git a/src/app/inventory/InventoryReducer.js b/src/app/inventory/InventoryReducer.js new file mode 100644 index 0000000..8e33885 --- /dev/null +++ b/src/app/inventory/InventoryReducer.js @@ -0,0 +1,67 @@ +/* + * ============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 {InventoryActionTypes} from './InventoryConstants.js'; + +export default(state = {}, action) => { + + switch (action.type) { + case InventoryActionTypes.TOPOGRAPHIC_QUERY_SUCCESS: + return { + ...state, + mapPlotPoints: action.data.plotPoints + }; + break; + + case InventoryActionTypes.COUNT_BY_ENTITY_SUCCESS: + return { + ...state, + countByType: action.data.countByType + }; + break; + + case InventoryActionTypes.COUNT_BY_DATE_SUCCESS: + return { + ...state, + countByDate: action.data.countByDate + }; + break; + + case InventoryActionTypes.TOPOGRAPHIC_QUERY_FAILED: + case InventoryActionTypes.COUNT_BY_ENTITY_FAILED: + case InventoryActionTypes.COUNT_BY_DATE_FAILED: + return { + ...state, + feedbackMsgSeverity: action.data.severity, + feedbackMsgText: action.data.message + }; + break; + + default: + break; + } + + return state; +}; |