Initial coomit for AAI-UI(sparky-fe)

Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb
Signed-off-by: ARULNA <arul.nambi@amdocs.com>

4 files changed, 481 insertions, 0 deletions

diff --git a/src/app/inventory/Inventory.jsx b/src/app/inventory/Inventory.jsx
new file mode 100644
index 0000000..de7120b
--- /dev/null
+++ b/src/app/inventory/Inventory.jsx
@@ -0,0 +1,190 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Clearfix from 'react-bootstrap/lib/Clearfix';
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  Tooltip, ResponsiveContainer, Brush
+} from 'recharts';
+import i18n from 'utils/i18n/i18n';
+
+import TopographicMap from 'generic-components/map/TopographicMap.jsx';
+import {
+  onTopographicMapMounted, onCountByTypeLoad, onLoadTotalCountByDate
+} from 'app/inventory/InventoryActions.js';
+import {
+  INVENTORY_TITLE,
+  TOTAL_ENTITY_COUNTS_BY_DATE_CHART,
+  COMPLEX_BY_LOCATION_TITLE,
+  ENTITIES_BY_TYPE_TITLE,
+  TOTAL_ENTITY_COUNT_TITLE
+} from 'app/inventory/InventoryConstants.js';
+import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
+import PaginatedTable from 'generic-components/paginatedTable/PaginatedTable.jsx';
+import {
+  dateFormatLocalTimeZoneMMDDYYYY, getTicks, getTicksData, sortDataByField
+} from 'utils/DateTimeChartUtil.js';
+import TitledContainer from 'generic-components/titledContainer/TitledContainer.jsx';
+import {COLOR_BLUE} from 'utils/GlobalConstants.js';
+
+const mapStateToProps = ({inventoryReducer}) => {
+  let {
+        mapPlotPoints   = [], countByType = [], countByDate = [],
+        feedbackMsgText = '', feedbackMsgSeverity = ''
+      }                 = inventoryReducer;
+
+  return {
+    mapPlotPoints,
+    countByType,
+    countByDate,
+    feedbackMsgText,
+    feedbackMsgSeverity
+  };
+};
+
+const mapActionToProps = (dispatch) => {
+  return {
+    onMountQueryTopographicVisualization: (requestObject) => {
+      dispatch(onTopographicMapMounted(requestObject));
+    }, onLoadCountByType: () => {
+      dispatch(onCountByTypeLoad());
+    }, onLoadTotalCountByDate: () => {
+      dispatch(onLoadTotalCountByDate());
+    }
+  };
+};
+
+class Inventory extends Component {
+
+  componentDidMount() {
+    let requestObject = {
+      entityType: 'complex'
+    };
+    this.props.onMountQueryTopographicVisualization(requestObject);
+    this.props.onLoadCountByType();
+    this.props.onLoadTotalCountByDate();
+  }
+
+  render() {
+    let {
+          mapPlotPoints, countByType, onLoadCountByType, countByDate,
+          feedbackMsgSeverity, feedbackMsgText
+        } = this.props;
+
+    let tableDefinition = {
+	    key: {name: 'Entity'},
+	    doc_count: {name: 'Count'}
+    };
+    let paginationClasses = 'audit-pagination';
+    let tableClasses =
+          'inventory-table table table-striped table-bordered table-condensed';
+
+    const xAxisAttrName = 'date';
+    const yAxisAttrName = 'count';
+    const sortedData = sortDataByField(countByDate, xAxisAttrName);
+    const ticksArr = getTicks(sortedData, xAxisAttrName);
+    const completeData = getTicksData(sortedData, ticksArr, xAxisAttrName);
+    const completeSortedData = sortDataByField(completeData, xAxisAttrName);
+
+    let totalEntities = 0;
+    let lastDate = '';
+    if (sortedData.length > 0) {
+      lastDate =
+        dateFormatLocalTimeZoneMMDDYYYY(sortedData[sortedData.length - 1]
+          .date);
+      totalEntities = sortedData[sortedData.length - 1].count;
+    }
+
+    return (
+      <div>
+        <div className='secondary-header'>
+          <span className='secondary-title'>{i18n(INVENTORY_TITLE)}</span>
+          <InlineMessage level={feedbackMsgSeverity}
+                         messageTxt={feedbackMsgText}/>
+        </div>
+        <Grid fluid={true}>
+          <Row>
+            <Col xs={3} sm={3} md={3}>
+              <TitledContainer title={TOTAL_ENTITY_COUNT_TITLE}>
+                <div className='total-entity-count'>
+                  {totalEntities}
+                  <span>{lastDate}</span>
+                </div>
+              </TitledContainer>
+              <TitledContainer title={ENTITIES_BY_TYPE_TITLE}>
+                <PaginatedTable
+                  tableHeaders={tableDefinition}
+                  displayHeader={false}
+                  tableData={countByType}
+                  activePage={1}
+                  pageCount={1}
+                  onPageIndexSelected={ () => onLoadCountByType()}
+                  paginationClass={paginationClasses}
+                  tableClass={tableClasses}
+                  maxPaginationLinks={25}/>
+              </TitledContainer>
+            </Col>
+            <Clearfix visibleSmBlock/>
+            <Col xs={9} sm={9} md={9}>
+              <TitledContainer
+                title={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.title)}>
+                <ResponsiveContainer width='100%' height={250}>
+                  <LineChart data={completeSortedData}
+                             margin={{
+                               top: 10, bottom: 10, left: 10, right: 70
+                             }}>
+                    <XAxis dataKey={xAxisAttrName} ticks={ticksArr}
+                           tickCount={ticksArr.length}
+                           tickFormatter={dateFormatLocalTimeZoneMMDDYYYY}/>
+                    <YAxis/>
+                    <CartesianGrid strokeDasharray='3 3'/>
+                    <Tooltip labelFormatter={dateFormatLocalTimeZoneMMDDYYYY}/>
+                    <Brush dataKey={xAxisAttrName}
+                           tickFormatter={dateFormatLocalTimeZoneMMDDYYYY}
+                           height={20} stroke={COLOR_BLUE}/>
+                    <Line
+                      name={i18n(TOTAL_ENTITY_COUNTS_BY_DATE_CHART.yAxisLabel)}
+                      type='monotone' dataKey={yAxisAttrName}
+                      stroke={COLOR_BLUE}
+                      connectNulls={true} activeDot={{r: 6}}/>
+                  </LineChart>
+                </ResponsiveContainer>
+              </TitledContainer>
+              <TitledContainer title={i18n(COMPLEX_BY_LOCATION_TITLE)}>
+                <TopographicMap pointArray={mapPlotPoints}/>
+              </TitledContainer>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapActionToProps)(Inventory);
diff --git a/src/app/inventory/InventoryActions.js b/src/app/inventory/InventoryActions.js
new file mode 100644
index 0000000..d3feab9
--- /dev/null
+++ b/src/app/inventory/InventoryActions.js
@@ -0,0 +1,170 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import {
+  GET,
+  POST_HEADER,
+  ERROR_RETRIEVING_DATA,
+  SAME_ORIGIN,
+  BACKEND_IP_ADDRESS
+} from 'app/networking/NetworkConstants.js';
+
+import {
+  INVENTORY_GEO_VISUALIZATION_SEARCH_URL,
+  GEO_VISUALIZATION_QUERY_STRING_PARAMETERS,
+  INVENTORY_COUNT_BY_TYPE_SEARCH_URL,
+  INVENTORY_COUNT_BY_DATE_SEARCH_URL,
+  InventoryActionTypes
+} from 'app/inventory/InventoryConstants.js';
+
+import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js';
+
+function getSuccessfulTopographicVisualizationQueryEvent(responseJson) {
+  return {
+    type: InventoryActionTypes.TOPOGRAPHIC_QUERY_SUCCESS,
+    data: {
+      plotPoints: responseJson.plotPoints
+    }
+  };
+}
+
+function getFailedTopographicVisualizationQueryEvent() {
+  return {
+    type: InventoryActionTypes.TOPOGRAPHIC_QUERY_FAILED,
+    data: {
+      message: ERROR_RETRIEVING_DATA,
+      severity: MESSAGE_LEVEL_DANGER
+    }
+  };
+}
+
+function getSuccessfulCountByTypeQueryEvent(responseJson) {
+  return {
+    type: InventoryActionTypes.COUNT_BY_ENTITY_SUCCESS,
+    data: {
+      countByType: responseJson.result
+    }
+  };
+}
+
+function getFailedCountByTypeQueryEvent() {
+  return {
+    type: InventoryActionTypes.COUNT_BY_ENTITY_FAILED,
+    data: {
+      message: ERROR_RETRIEVING_DATA,
+      severity: MESSAGE_LEVEL_DANGER
+    }
+  };
+}
+
+function getSuccessfulCountsByDateQueryEvent(responseJson) {
+  return {
+    type: InventoryActionTypes.COUNT_BY_DATE_SUCCESS,
+    data: {
+      countByDate: responseJson.result
+    }
+  };
+}
+
+function getFailedCountByDateQueryEvent() {
+  return {
+    type: InventoryActionTypes.COUNT_BY_DATE_FAILED,
+    data: {
+      message: ERROR_RETRIEVING_DATA,
+      severity: MESSAGE_LEVEL_DANGER
+    }
+  };
+}
+
+function getDynamicTopographicQueryURL(entityType) {
+  return INVENTORY_GEO_VISUALIZATION_SEARCH_URL.replace(BACKEND_IP_ADDRESS,
+      BACKEND_IP_ADDRESS) +
+    GEO_VISUALIZATION_QUERY_STRING_PARAMETERS +
+    entityType;
+}
+
+function getCountByTypeQueryURL() {
+  return INVENTORY_COUNT_BY_TYPE_SEARCH_URL.replace(BACKEND_IP_ADDRESS,
+    BACKEND_IP_ADDRESS);
+}
+
+function getCountByDateQueryURL() {
+  return INVENTORY_COUNT_BY_DATE_SEARCH_URL.replace(BACKEND_IP_ADDRESS,
+    BACKEND_IP_ADDRESS);
+}
+
+export function onLoadTotalCountByDate() {
+  return function (dispatch) {
+    fetch(getCountByDateQueryURL(), {
+      credentials: SAME_ORIGIN,
+      method: GET,
+      headers: POST_HEADER
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => dispatch(
+        getSuccessfulCountsByDateQueryEvent(responseJson))
+    ).catch(
+      () => dispatch(getFailedCountByDateQueryEvent())
+    );
+  };
+}
+
+export function onCountByTypeLoad() {
+  return function (dispatch) {
+    fetch(getCountByTypeQueryURL(), {
+      credentials: SAME_ORIGIN,
+      method: GET,
+      headers: POST_HEADER
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => dispatch(
+        getSuccessfulCountByTypeQueryEvent(responseJson))
+    ).catch(
+      () => dispatch(getFailedCountByTypeQueryEvent())
+    );
+  };
+}
+
+export function onTopographicMapMounted(requestObject) {
+  return function (dispatch) {
+    fetch(getDynamicTopographicQueryURL(requestObject.entityType), {
+      credentials: SAME_ORIGIN,
+      method: GET,
+      headers: POST_HEADER
+    }).then(
+      (response) => response.json()
+    ).then(
+      (responseJson) => dispatch(
+        getSuccessfulTopographicVisualizationQueryEvent(responseJson))
+    ).catch(
+      () => {
+        dispatch(getFailedTopographicVisualizationQueryEvent());
+      }
+    );
+  };
+}
+
diff --git a/src/app/inventory/InventoryConstants.js b/src/app/inventory/InventoryConstants.js
new file mode 100644
index 0000000..a7b3350
--- /dev/null
+++ b/src/app/inventory/InventoryConstants.js
@@ -0,0 +1,54 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import keyMirror from 'utils/KeyMirror.js';
+import {BASE_URL} from 'app/networking/NetworkConstants.js';
+
+export const InventoryActionTypes = keyMirror({
+  TOPOGRAPHIC_QUERY_SUCCESS: null,
+  TOPOGRAPHIC_QUERY_FAILED: null,
+  COUNT_BY_ENTITY_SUCCESS: null,
+  COUNT_BY_ENTITY_FAILED: null,
+  COUNT_BY_DATE_SUCCESS: null,
+  COUNT_BY_DATE_FAILED: null
+});
+
+export const INVENTORY_TITLE = 'Active Inventory';
+export const COMPLEX_BY_LOCATION_TITLE = 'Complexes By Location';
+export const TOTAL_ENTITY_COUNT_TITLE = 'Total Entities';
+export const ENTITIES_BY_TYPE_TITLE = 'Entities By Type';
+
+export const INVENTORY_COUNT_BY_TYPE_SEARCH_URL = BASE_URL + '/visualization/entityCountHistory?type=table';
+export const INVENTORY_COUNT_BY_DATE_SEARCH_URL = BASE_URL + '/visualization/entityCountHistory?type=graph';
+export const INVENTORY_GEO_VISUALIZATION_SEARCH_URL = BASE_URL + '/visualization/geovisualization';
+export const GEO_VISUALIZATION_QUERY_STRING_PARAMETERS = '/?entity=';
+
+export const TOTAL_ENTITY_COUNTS_BY_DATE_CHART = {
+  title: 'Total Entities By Date',
+  yAxisLabel: 'Entities',
+  emptyData: [{
+    values: []
+  }]
+};
diff --git a/src/app/inventory/InventoryReducer.js b/src/app/inventory/InventoryReducer.js
new file mode 100644
index 0000000..8e33885
--- /dev/null
+++ b/src/app/inventory/InventoryReducer.js
@@ -0,0 +1,67 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import {InventoryActionTypes} from './InventoryConstants.js';
+
+export default(state = {}, action) => {
+  
+  switch (action.type) {
+    case InventoryActionTypes.TOPOGRAPHIC_QUERY_SUCCESS:
+      return {
+        ...state,
+        mapPlotPoints: action.data.plotPoints
+      };
+      break;
+    
+    case InventoryActionTypes.COUNT_BY_ENTITY_SUCCESS:
+      return {
+        ...state,
+        countByType: action.data.countByType
+      };
+      break;
+    
+    case InventoryActionTypes.COUNT_BY_DATE_SUCCESS:
+      return {
+        ...state,
+        countByDate: action.data.countByDate
+      };
+      break;
+    
+    case InventoryActionTypes.TOPOGRAPHIC_QUERY_FAILED:
+    case InventoryActionTypes.COUNT_BY_ENTITY_FAILED:
+    case InventoryActionTypes.COUNT_BY_DATE_FAILED:
+      return {
+        ...state,
+        feedbackMsgSeverity: action.data.severity,
+        feedbackMsgText: action.data.message
+      };
+      break;
+    
+    default:
+      break;
+  }
+  
+  return state;
+};