2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React, {Component} from 'react';
27 import {connect} from 'react-redux';
28 import Grid from 'react-bootstrap/lib/Grid';
29 import Row from 'react-bootstrap/lib/Row';
30 import Col from 'react-bootstrap/lib/Col';
31 import Clearfix from 'react-bootstrap/lib/Clearfix';
33 LineChart, Line, XAxis, YAxis, CartesianGrid,
34 Tooltip, ResponsiveContainer, Brush
36 import i18n from 'utils/i18n/i18n';
38 import TopographicMap from 'generic-components/map/TopographicMap.jsx';
40 onTopographicMapMounted, onCountByTypeLoad, onLoadTotalCountByDate
41 } from 'app/inventory/InventoryActions.js';
44 TOTAL_ENTITY_COUNTS_BY_DATE_CHART,
45 COMPLEX_BY_LOCATION_TITLE,
46 ENTITIES_BY_TYPE_TITLE,
47 TOTAL_ENTITY_COUNT_TITLE
48 } from 'app/inventory/InventoryConstants.js';
49 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
50 import PaginatedTable from 'generic-components/paginatedTable/PaginatedTable.jsx';
52 dateFormatLocalTimeZoneYYYYMMDD,
56 } from 'utils/DateTimeChartUtil.js';
57 import TitledContainer from 'generic-components/titledContainer/TitledContainer.jsx';
58 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
60 const mapStateToProps = ({inventoryReducer}) => {
62 mapPlotPoints = [], countByType = [], countByDate = [],
63 feedbackMsgText = '', feedbackMsgSeverity = ''
75 const mapActionToProps = (dispatch) => {
77 onMountQueryTopographicVisualization: (requestObject) => {
78 dispatch(onTopographicMapMounted(requestObject));
79 }, onLoadCountByType: () => {
80 dispatch(onCountByTypeLoad());
81 }, onLoadTotalCountByDate: () => {
82 dispatch(onLoadTotalCountByDate());
87 class Inventory extends Component {
93 this.props.onMountQueryTopographicVisualization(requestObject);
94 this.props.onLoadCountByType();
95 this.props.onLoadTotalCountByDate();
100 mapPlotPoints, countByType, onLoadCountByType, countByDate,
101 feedbackMsgSeverity, feedbackMsgText
104 let tableDefinition = {
105 key: {name: 'Entity'},
106 doc_count: {name: 'Count'}
108 let paginationClasses = 'audit-pagination';
110 'inventory-table table table-striped table-bordered table-condensed';
112 const xAxisAttrName = 'date';
113 const yAxisAttrName = 'count';
114 const sortedData = sortDataByField(countByDate, xAxisAttrName);
115 const ticksArr = getTicks(sortedData, xAxisAttrName);
116 const completeData = getTicksData(sortedData, ticksArr, xAxisAttrName);
117 const completeSortedData = sortDataByField(completeData, xAxisAttrName);
119 let totalEntities = 0;
121 if (sortedData.length > 0) {
123 dateFormatLocalTimeZoneYYYYMMDD(sortedData[sortedData.length - 1]
125 totalEntities = sortedData[sortedData.length - 1].count;
130 <div className='secondary-header'>
131 <span className='secondary-title'>{i18n(INVENTORY_TITLE)}</span>
132 <InlineMessage level={feedbackMsgSeverity}
133 messageTxt={feedbackMsgText}/>
137 <Col xs={3} sm={3} md={3}>
138 <TitledContainer title={TOTAL_ENTITY_COUNT_TITLE}>
139 <div className='total-entity-count'>
141 <span>{lastDate}</span>
144 <TitledContainer title={ENTITIES_BY_TYPE_TITLE}>
146 tableHeaders={tableDefinition}
147 displayHeader={false}
148 tableData={countByType}
151 onPageIndexSelected={ () => onLoadCountByType()}
152 paginationClass={paginationClasses}
153 tableClass={tableClasses}
154 maxPaginationLinks={25}/>
157 <Clearfix visibleSmBlock/>
158 <Col xs={9} sm={9} md={9}>
160 title={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.title)}>
161 <ResponsiveContainer width='100%' height={250}>
162 <LineChart data={completeSortedData}
164 top: 10, bottom: 10, left: 10, right: 70
166 <XAxis dataKey={xAxisAttrName} ticks={ticksArr}
167 tickCount={ticksArr.length}
168 tickFormatter={dateFormatLocalTimeZoneYYYYMMDD}/>
170 <CartesianGrid strokeDasharray='3 3'/>
171 <Tooltip labelFormatter={dateFormatLocalTimeZoneYYYYMMDD}/>
172 <Brush dataKey={xAxisAttrName}
173 tickFormatter={dateFormatLocalTimeZoneYYYYMMDD}
174 height={20} stroke={COLOR_BLUE}/>
176 name={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.yAxisLabel)}
177 type='monotone' dataKey={yAxisAttrName}
179 connectNulls={true} activeDot={{r: 6}}/>
181 </ResponsiveContainer>
183 <TitledContainer title={i18n(COMPLEX_BY_LOCATION_TITLE)}>
184 <TopographicMap pointArray={mapPlotPoints}/>
193 export default connect(mapStateToProps, mapActionToProps)(Inventory);