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