src/app/inventory/Inventory.jsx

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