src/app/inventory/Inventory.jsx

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