src/app/inventory/Inventory.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 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
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  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=========================================================
  20  */
  21 import React, {Component} from 'react';
  22 import {connect} from 'react-redux';
  23 import Grid from 'react-bootstrap/lib/Grid';
  24 import Row from 'react-bootstrap/lib/Row';
  25 import Col from 'react-bootstrap/lib/Col';
  26 import Clearfix from 'react-bootstrap/lib/Clearfix';
  27 import {
  28   LineChart, Line, XAxis, YAxis, CartesianGrid,
  29   Tooltip, ResponsiveContainer, Brush
  30 } from 'recharts';
  31 import i18n from 'utils/i18n/i18n';
  32
  33 import TopographicMap from 'generic-components/map/TopographicMap.jsx';
  34 import {
  35   onTopographicMapMounted, onCountByTypeLoad, onLoadTotalCountByDate
  36 } from 'app/inventory/InventoryActions.js';
  37 import {
  38   INVENTORY_TITLE,
  39   TOTAL_ENTITY_COUNTS_BY_DATE_CHART,
  40   COMPLEX_BY_LOCATION_TITLE,
  41   ENTITIES_BY_TYPE_TITLE,
  42   TOTAL_ENTITY_COUNT_TITLE
  43 } from 'app/inventory/InventoryConstants.js';
  44 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
  45 import PaginatedTable from 'generic-components/paginatedTable/PaginatedTable.jsx';
  46 import {
  47   dateFormatLocalTimeZoneYYYYMMDD,
  48   getTicks,
  49   getTicksData,
  50   sortDataByField
  51 } from 'utils/DateTimeChartUtil.js';
  52 import TitledContainer from 'generic-components/titledContainer/TitledContainer.jsx';
  53 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
  54
  55 const mapStateToProps = ({inventoryReducer}) => {
  56   let {
  57         mapPlotPoints   = [], countByType = [], countByDate = [],
  58         feedbackMsgText = '', feedbackMsgSeverity = ''
  59       }                 = inventoryReducer;
  60
  61   return {
  62     mapPlotPoints,
  63     countByType,
  64     countByDate,
  65     feedbackMsgText,
  66     feedbackMsgSeverity
  67   };
  68 };
  69
  70 const mapActionToProps = (dispatch) => {
  71   return {
  72     onMountQueryTopographicVisualization: (requestObject) => {
  73       dispatch(onTopographicMapMounted(requestObject));
  74     }, onLoadCountByType: () => {
  75       dispatch(onCountByTypeLoad());
  76     }, onLoadTotalCountByDate: () => {
  77       dispatch(onLoadTotalCountByDate());
  78     }
  79   };
  80 };
  81
  82 class Inventory extends Component {
  83
  84   componentDidMount() {
  85     let requestObject = {
  86       entityType: 'complex'
  87     };
  88     this.props.onMountQueryTopographicVisualization(requestObject);
  89     this.props.onLoadCountByType();
  90     this.props.onLoadTotalCountByDate();
  91   }
  92
  93   render() {
  94     let {
  95           mapPlotPoints, countByType, onLoadCountByType, countByDate,
  96           feedbackMsgSeverity, feedbackMsgText
  97         } = this.props;
  98
  99     let tableDefinition = {
 100             key: {name: 'Entity'},
 101             doc_count: {name: 'Count'}
 102     };
 103     let paginationClasses = 'audit-pagination';
 104     let tableClasses =
 105           'inventory-table table table-striped table-bordered table-condensed';
 106
 107     const xAxisAttrName = 'date';
 108     const yAxisAttrName = 'count';
 109     const sortedData = sortDataByField(countByDate, xAxisAttrName);
 110     const ticksArr = getTicks(sortedData, xAxisAttrName);
 111     const completeData = getTicksData(sortedData, ticksArr, xAxisAttrName);
 112     const completeSortedData = sortDataByField(completeData, xAxisAttrName);
 113
 114     let totalEntities = 0;
 115     let lastDate = '';
 116     if (sortedData.length > 0) {
 117       lastDate =
 118         dateFormatLocalTimeZoneYYYYMMDD(sortedData[sortedData.length - 1]
 119           .date);
 120       totalEntities = sortedData[sortedData.length - 1].count;
 121     }
 122
 123     return (
 124       <div>
 125         <div className='secondary-header'>
 126           <span className='secondary-title'>{i18n(INVENTORY_TITLE)}</span>
 127           <InlineMessage level={feedbackMsgSeverity}
 128                          messageTxt={feedbackMsgText}/>
 129         </div>
 130         <Grid fluid={true}>
 131           <Row>
 132             <Col xs={3} sm={3} md={3}>
 133               <TitledContainer title={TOTAL_ENTITY_COUNT_TITLE}>
 134                 <div className='total-entity-count'>
 135                   {totalEntities}
 136                   <span>{lastDate}</span>
 137                 </div>
 138               </TitledContainer>
 139               <TitledContainer title={ENTITIES_BY_TYPE_TITLE}>
 140                 <PaginatedTable
 141                   tableHeaders={tableDefinition}
 142                   displayHeader={false}
 143                   tableData={countByType}
 144                   activePage={1}
 145                   pageCount={1}
 146                   onPageIndexSelected={ () => onLoadCountByType()}
 147                   paginationClass={paginationClasses}
 148                   tableClass={tableClasses}
 149                   maxPaginationLinks={25}/>
 150               </TitledContainer>
 151             </Col>
 152             <Clearfix visibleSmBlock/>
 153             <Col xs={9} sm={9} md={9}>
 154               <TitledContainer
 155                 title={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.title)}>
 156                 <ResponsiveContainer width='100%' height={250}>
 157                   <LineChart data={completeSortedData}
 158                              margin={{
 159                                top: 10, bottom: 10, left: 10, right: 70
 160                              }}>
 161                     <XAxis dataKey={xAxisAttrName} ticks={ticksArr}
 162                            tickCount={ticksArr.length}
 163                            tickFormatter={dateFormatLocalTimeZoneYYYYMMDD}/>
 164                     <YAxis/>
 165                     <CartesianGrid strokeDasharray='3 3'/>
 166                     <Tooltip labelFormatter={dateFormatLocalTimeZoneYYYYMMDD}/>
 167                     <Brush dataKey={xAxisAttrName}
 168                            tickFormatter={dateFormatLocalTimeZoneYYYYMMDD}
 169                            height={20} stroke={COLOR_BLUE}/>
 170                     <Line
 171                       name={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.yAxisLabel)}
 172                       type='monotone' dataKey={yAxisAttrName}
 173                       stroke={COLOR_BLUE}
 174                       connectNulls={true} activeDot={{r: 6}}/>
 175                   </LineChart>
 176                 </ResponsiveContainer>
 177               </TitledContainer>
 178               <TitledContainer title={i18n(COMPLEX_BY_LOCATION_TITLE)}>
 179                 <TopographicMap pointArray={mapPlotPoints}/>
 180               </TitledContainer>
 181             </Col>
 182           </Row>
 183         </Grid>
 184       </div>
 185     );
 186   }
 187 }
 188 export default connect(mapStateToProps, mapActionToProps)(Inventory);