Initial coomit for AAI-UI(sparky-fe)

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

4 files changed, 396 insertions, 0 deletions

diff --git a/src/generic-components/dateRangeSelector/DateRangeSelector.jsx b/src/generic-components/dateRangeSelector/DateRangeSelector.jsx
new file mode 100644
index 0000000..09b892f
--- /dev/null
+++ b/src/generic-components/dateRangeSelector/DateRangeSelector.jsx
@@ -0,0 +1,162 @@
+/*
+ * ============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 moment from 'moment-timezone';
+
+import Button from 'react-bootstrap/lib/Button.js';
+import MenuItem from 'react-bootstrap/lib/MenuItem.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import Popover from 'react-bootstrap/lib/Popover.js';
+
+import DateRange from 'generic-components/dateRange/DateRange.jsx';
+import {DATE_PICKER_PLACEHOLDER} from 'generic-components/dateRange/DateRangeConstants.js';
+import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js';
+import {
+  TODAY,
+  YESTERDAY,
+  LAST_WEEK,
+  LAST_MONTH,
+  CUSTOM,
+  LABEL_TODAY,
+  LABEL_YESTERDAY,
+  LABEL_LAST_WEEK,
+  LABEL_LAST_MONTH,
+  LABEL_CUSTOM_SEARCH,
+  SEARCH_BUTTON_TEXT,
+  ICON_CLASS_CALENDAR,
+  ICON_CLASS_DOWN_CARET
+} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
+import DateRangeSelectorActions from 'generic-components/dateRangeSelector/DateRangeSelectorActions.js';
+import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
+
+import i18n from 'utils/i18n/i18n';
+
+let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess());
+let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => {
+
+  let {
+        startDate = currentDayWithTimeZone,
+        endDate = currentDayWithTimeZone,
+        period = TODAY,
+        periodErrText,
+        periodErrSev
+      } = dateRangeSelectorData;
+
+  return {
+    startDate,
+    endDate,
+    period,
+    periodErrText,
+    periodErrSev
+  };
+};
+
+let mapActionToProps = (dispatch) => {
+  return {
+    onNewDateSelection: (startMoment, endMoment, period) => {
+      let periodChangeAction = DateRangeSelectorActions.onPeriodChange(
+        startMoment, endMoment, period);
+      // notify all listeners that the period has changed
+      dispatch(periodChangeAction);
+      // update the DateRange component with the newly selected dates
+      dispatch(DateRangeActions.onStartDateChange(
+        periodChangeAction.data.dateRange.startDate,
+        periodChangeAction.data.dateRange.endDate));
+    }
+  };
+};
+
+export class DateRangeSelector extends Component {
+  static propTypes = {
+    startDate: React.PropTypes.instanceOf(moment),
+    endDate: React.PropTypes.instanceOf(moment),
+    period: React.PropTypes.string,
+    periodErrText: React.PropTypes.string,
+    periodErrSev: React.PropTypes.string
+  };
+
+  newDateSelection(period) {
+    this.props.onNewDateSelection(this.props.startDate, this.props.endDate,
+      period);
+    this.refs.dateRangePopover.hide();
+  }
+
+  componentDidMount() {
+    let {startDate, endDate, period, onNewDateSelection} = this.props;
+    // whenever the DateRangeSelector is first mounted, want it
+    // initialized to today's date
+    startDate = currentDayWithTimeZone;
+    endDate = currentDayWithTimeZone;
+    onNewDateSelection(startDate, endDate, period);
+  }
+
+  render() {
+    let {period, periodErrSev, periodErrText} = this.props;
+    let displayDateRange = (this.props.startDate).format(
+        DATE_PICKER_PLACEHOLDER) + ' - ' +
+      (this.props.endDate).format(DATE_PICKER_PLACEHOLDER);
+    return (
+      <div className='dateRangeSelector'>
+        <OverlayTrigger trigger='click' ref='dateRangePopover'
+                        placement='bottom' overlay={
+     <Popover id='dateRangeSelectorPopover'>
+      <MenuItem active={period === TODAY ? true : false} onSelect={() =>
+       this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)}</MenuItem>
+      <MenuItem active={period === YESTERDAY ? true : false} onSelect={() =>
+       this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)}</MenuItem>
+      <MenuItem active={period === LAST_WEEK ? true : false} onSelect={() =>
+       this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)}</MenuItem>
+      <MenuItem active={period === LAST_MONTH ? true : false} onSelect={() =>
+       this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)}</MenuItem>
+      <OverlayTrigger trigger='click' placement='right' overlay={
+       <Popover id='customSearchPopover'>
+        <InlineMessage level={periodErrSev} messageTxt={periodErrText} />
+        <DateRange />
+        <Button className='dateRangeSearchButton' bsSize='xsmall'
+          bsStyle='primary'
+          disabled={periodErrText !== '' ? true : false}
+          onClick={() => this.newDateSelection(CUSTOM)}>
+          {i18n(SEARCH_BUTTON_TEXT)}
+        </Button>
+       </Popover>
+      }>
+       <MenuItem active={period === CUSTOM ? true : false} >
+          {i18n(LABEL_CUSTOM_SEARCH)}
+       </MenuItem>
+      </OverlayTrigger>
+     </Popover>}>
+          <Button className='dateRangeSelectorSearchButton' bsStyle='default'>
+            <i className={ICON_CLASS_CALENDAR} aria-hidden='true'></i>
+            <span>{displayDateRange} </span>
+            <i className={ICON_CLASS_DOWN_CARET} aria-hidden='true'></i>
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector);
diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js b/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js
new file mode 100644
index 0000000..5d786f7
--- /dev/null
+++ b/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js
@@ -0,0 +1,118 @@
+/*
+ * ============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 {
+  dateRangeSelectorActionTypes,
+  ERROR_UNKNOWN_PERIOD,
+  TODAY,
+  YESTERDAY,
+  LAST_WEEK,
+  LAST_MONTH,
+  CUSTOM
+} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
+
+function buildPeriodChangeAction(startMoment, endMoment, period) {
+  return {
+    type: dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE,
+    data: {
+      dateRange: {
+        startDate: startMoment,
+        endDate: endMoment
+      },
+      period: period
+    }
+  };
+}
+
+function buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg) {
+  return {
+    type: dateRangeSelectorActionTypes.EVENT_PERIOD_ERROR,
+    data: {
+      dateRange: {
+        startDate: startMoment,
+        endDate: endMoment
+      },
+      period: period,
+      errorMsg: errorMsg
+    }
+  };
+}
+
+export default {
+  onPeriodChange(startMoment, endMoment, period) {
+    var moment = require('moment');
+    let startPeriod = moment(new Date());
+    let endPeriod = moment(new Date());
+    let unknownPeriod = false;
+
+    switch (period) {
+      case TODAY:
+        // already have today's date set
+        break;
+      case YESTERDAY:
+        startPeriod = moment(startPeriod).subtract(1, 'days');
+        break;
+      case LAST_WEEK:
+        startPeriod = moment(startPeriod).subtract(7, 'days');
+        break;
+      case LAST_MONTH:
+        startPeriod = moment(startPeriod).subtract(1, 'months');
+        break;
+      case CUSTOM:
+        startPeriod = startMoment;
+        endPeriod = endMoment;
+        break;
+      default:
+        unknownPeriod = true;
+        break;
+    }
+
+    if (unknownPeriod) {
+      let errorMsg = ERROR_UNKNOWN_PERIOD + ': ' + period;
+      return buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg);
+    } else {
+      /*
+       Temp fix until we support time ...
+       - set start date time to 00:00:00
+       - set end date time to 23:59:59
+       this is to ensure we cover an entire day
+       (ex: start day May 26, end day May 26 ... expect to cover
+          0:00:00 to 23:59:59 for that day)
+       */
+      startPeriod.toDate();
+      startPeriod.hour(0);
+      startPeriod.minute(0);
+      startPeriod.second(0);
+
+      endPeriod.toDate();
+      endPeriod.hour(23);
+      endPeriod.minute(59);
+      endPeriod.second(59);
+
+      return buildPeriodChangeAction(startPeriod, endPeriod, period);
+    }
+
+  }
+};
diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js b/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js
new file mode 100644
index 0000000..14554a3
--- /dev/null
+++ b/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js
@@ -0,0 +1,53 @@
+/*
+ * ============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';
+
+export const dateRangeSelectorActionTypes = keyMirror({
+  EVENT_PERIOD_CHANGE: null,
+  EVENT_PERIOD_ERROR: null,
+});
+
+// labels
+export const LABEL_TODAY = 'Today';
+export const LABEL_YESTERDAY = 'Since Yesterday';
+export const LABEL_LAST_WEEK = 'Since Last Week';
+export const LABEL_LAST_MONTH = 'Since Last Month';
+export const LABEL_CUSTOM_SEARCH = 'Custom';
+export const SEARCH_BUTTON_TEXT = 'Search';
+
+// Periods
+export const TODAY = 'today';
+export const YESTERDAY = 'yesterday';
+export const LAST_WEEK = 'lastWeek';
+export const LAST_MONTH = 'lastMonth';
+export const CUSTOM = 'custom';
+
+// classes
+export const ICON_CLASS_CALENDAR = 'fa fa-calendar fa-lg';
+export const ICON_CLASS_DOWN_CARET = 'fa fa-caret-down fa-lg';
+
+// errors
+export const ERROR_UNKNOWN_PERIOD = 'The specified period is unknown';
diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js b/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js
new file mode 100644
index 0000000..5fa85da
--- /dev/null
+++ b/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js
@@ -0,0 +1,63 @@
+/*
+ * ============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 {dateRangeActionTypes} from 'generic-components/dateRange/DateRangeConstants.js';
+import {dateRangeSelectorActionTypes} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
+import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js';
+
+export default (state = {}, action) => {
+
+  switch (action.type) {
+
+    case dateRangeActionTypes.DATE_RANGE_CHANGE:
+      return {
+        ...state,
+        startDate: action.data.dateRange.startDate,
+        endDate: action.data.dateRange.endDate,
+        periodErrText: '',
+        periodErrSev: ''
+      };
+
+    case dateRangeActionTypes.INVALID_DATE_RANGE:
+      return {
+        ...state,
+        startDate: action.data.dateRange.startDate,
+        endDate: action.data.dateRange.endDate,
+        periodErrText: action.data.errorMsg,
+        periodErrSev: MESSAGE_LEVEL_DANGER
+      };
+
+    case dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE:
+      return {
+        ...state,
+        startDate: action.data.dateRange.startDate,
+        endDate: action.data.dateRange.endDate,
+        period: action.data.period,
+        periodErrText: '',
+        periodErrSev: ''
+      };
+  }
+  return state;
+};