2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
24 import {connect} from 'react-redux';
25 import Grid from 'react-bootstrap/lib/Grid';
26 import Row from 'react-bootstrap/lib/Row';
27 import Col from 'react-bootstrap/lib/Col';
28 import Clearfix from 'react-bootstrap/lib/Clearfix';
30 LineChart, Line, XAxis, YAxis, CartesianGrid,
31 Tooltip, ResponsiveContainer, Brush
33 import i18n from 'utils/i18n/i18n';
35 import TopographicMap from 'generic-components/map/TopographicMap.jsx';
37 onTopographicMapMounted, onCountByTypeLoad, onLoadTotalCountByDate
38 } from 'app/inventory/InventoryActions.js';
41 TOTAL_ENTITY_COUNTS_BY_DATE_CHART,
42 COMPLEX_BY_LOCATION_TITLE,
43 ENTITIES_BY_TYPE_TITLE,
44 TOTAL_ENTITY_COUNT_TITLE
45 } from 'app/inventory/InventoryConstants.js';
46 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
47 import PaginatedTable from 'generic-components/paginatedTable/PaginatedTable.jsx';
49 dateFormatLocalTimeZoneMMDDYYYY, getTicks, getTicksData, sortDataByField
50 } from 'utils/DateTimeChartUtil.js';
51 import TitledContainer from 'generic-components/titledContainer/TitledContainer.jsx';
52 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
54 const mapStateToProps = ({inventoryReducer}) => {
56 mapPlotPoints = [], countByType = [], countByDate = [],
57 feedbackMsgText = '', feedbackMsgSeverity = ''
69 const mapActionToProps = (dispatch) => {
71 onMountQueryTopographicVisualization: (requestObject) => {
72 dispatch(onTopographicMapMounted(requestObject));
73 }, onLoadCountByType: () => {
74 dispatch(onCountByTypeLoad());
75 }, onLoadTotalCountByDate: () => {
76 dispatch(onLoadTotalCountByDate());
81 class Inventory extends Component {
87 this.props.onMountQueryTopographicVisualization(requestObject);
88 this.props.onLoadCountByType();
89 this.props.onLoadTotalCountByDate();
94 mapPlotPoints, countByType, onLoadCountByType, countByDate,
95 feedbackMsgSeverity, feedbackMsgText
98 let tableDefinition = {
99 key: {name: 'Entity'},
100 doc_count: {name: 'Count'}
102 let paginationClasses = 'audit-pagination';
104 'inventory-table table table-striped table-bordered table-condensed';
106 const xAxisAttrName = 'date';
107 const yAxisAttrName = 'count';
108 const sortedData = sortDataByField(countByDate, xAxisAttrName);
109 const ticksArr = getTicks(sortedData, xAxisAttrName);
110 const completeData = getTicksData(sortedData, ticksArr, xAxisAttrName);
111 const completeSortedData = sortDataByField(completeData, xAxisAttrName);
113 let totalEntities = 0;
115 if (sortedData.length > 0) {
117 dateFormatLocalTimeZoneMMDDYYYY(sortedData[sortedData.length - 1]
119 totalEntities = sortedData[sortedData.length - 1].count;
124 <div className='secondary-header'>
125 <span className='secondary-title'>{i18n(INVENTORY_TITLE)}</span>
126 <InlineMessage level={feedbackMsgSeverity}
127 messageTxt={feedbackMsgText}/>
131 <Col xs={3} sm={3} md={3}>
132 <TitledContainer title={TOTAL_ENTITY_COUNT_TITLE}>
133 <div className='total-entity-count'>
135 <span>{lastDate}</span>
138 <TitledContainer title={ENTITIES_BY_TYPE_TITLE}>
140 tableHeaders={tableDefinition}
141 displayHeader={false}
142 tableData={countByType}
145 onPageIndexSelected={ () => onLoadCountByType()}
146 paginationClass={paginationClasses}
147 tableClass={tableClasses}
148 maxPaginationLinks={25}/>
151 <Clearfix visibleSmBlock/>
152 <Col xs={9} sm={9} md={9}>
154 title={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.title)}>
155 <ResponsiveContainer width='100%' height={250}>
156 <LineChart data={completeSortedData}
158 top: 10, bottom: 10, left: 10, right: 70
160 <XAxis dataKey={xAxisAttrName} ticks={ticksArr}
161 tickCount={ticksArr.length}
162 tickFormatter={dateFormatLocalTimeZoneMMDDYYYY}/>
164 <CartesianGrid strokeDasharray='3 3'/>
165 <Tooltip labelFormatter={dateFormatLocalTimeZoneMMDDYYYY}/>
166 <Brush dataKey={xAxisAttrName}
167 tickFormatter={dateFormatLocalTimeZoneMMDDYYYY}
168 height={20} stroke={COLOR_BLUE}/>
170 name={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.yAxisLabel)}
171 type='monotone' dataKey={yAxisAttrName}
173 connectNulls={true} activeDot={{r: 6}}/>
175 </ResponsiveContainer>
177 <TitledContainer title={i18n(COMPLEX_BY_LOCATION_TITLE)}>
178 <TopographicMap pointArray={mapPlotPoints}/>
187 export default connect(mapStateToProps, mapActionToProps)(Inventory);