Custom date range time (#101)

* checking in work before downloading vue-functional-date dependency

* adding vue2-datepicker library with customisations for screen. Need to add disabled days

* got custom date range working. fixed bug with relative range not filtering correctly.

* removing dead code and making input look like rest of inputs on filter bar

* removing old date range styles. adjusting styling

* moving date range picker into folder to make it easier to test. added shortcuts and replaced relative range dropdown with it.

* matching logic for shortcut in date range picker

* fixing route logic on refresh to allow custom ranges if set. Will reset back to previous valid range otherwise max retention time.

* Adding more shortcuts for finer control over time.

* Adding more shortcuts for finer control over time.

* general cleanup and supporting clear date range better

* fixing clearable. adding placeholder for case of invalid range. parsing date range to display to allow custom ranges input in browser url.

* changing mouse cursor.

* moving constants out

* lint. removed unused lib. fixing lint resolver.

* adding getRange to helpers

* moving isDayDisabled to helpers

* removing clear handler as date input no longer is clearable

* moving shortcuts to helpers

* moving maxStartDate to helpers

* moving timePanelLabel to helpers

* moving rangeDisplayText to helpers

* small refactoring

* adding tests for getTimePanelLabel

* adding skeleton for tests

* Adding tests and mocking moment

* testing isDayDisabled

* fix for when maxDay is 1. added tests for getShortcuts

* adding tests for getRange

* adding tests for getRangeDisplayText

* lint fixes

* removing integration tests as the functionality is tested in unit test

* 3.10.0-beta.0

* PR comments

* PR comments

* refactoring based on user feedback. needs more work

* got most of the new changes working. Need to add filter by

* hook up filter by. adding in validation to not allow dates before retention period

* making code simpler

* fixing breaking unit tests

* fixing lint

* adding unit tests

* making sure limits refresh when time ticks over to next day.

* lint

* 3.10.0-beta.1

* minor style changes. Changing order so date picker is last.

* 3.10.0

Author: just-at-uber

.eslintrc.js

@@ -62,4 +62,7 @@ module.exports = {
     ],
     'space-before-blocks': 'error',
   },
+  settings: {
+    'import/resolver': 'webpack',
+  },
 };

client/App.vue

@@ -121,6 +121,7 @@ export default {
 </template>
 
 <style src="vue-virtual-scroller/dist/vue-virtual-scroller.css"></style>
+<style src="vue2-datepicker/index.css"></style>
 <style lang="stylus">
 @import "https://d1a3f4spazzrp4.cloudfront.net/uber-fonts/4.0.0/superfine.css"
 @import "https://d1a3f4spazzrp4.cloudfront.net/uber-icons/3.14.0/uber-icons.css"
@@ -224,7 +225,7 @@ main
       margin-bottom layout-spacing-small
     > header
       display flex
-      align-items center
+      align-items: start;
       flex 0 0 auto
       > *
         margin inline-spacing-small

client/components/date-range-picker.vue

@@ -0,0 +1,25 @@
+export const ALLOWED_PERIOD_TYPES = [
+  'second',
+  'seconds',
+  'minute',
+  'minutes',
+  'hour',
+  'hours',
+  'day',
+  'days',
+  'month',
+  'months',
+];
+
+export const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export const RANGE_OPTIONS = [
+  { text: 'Last 10 minutes', value: 'last-10-minutes', daysAgo: 0.007 },
+  { text: 'Last 60 minutes', value: 'last-60-minutes', daysAgo: 0.041 },
+  { text: 'Last 3 hours', value: 'last-3-hours', daysAgo: 0.125 },
+  { text: 'Last 24 hours', value: 'last-24-hours', daysAgo: 1 },
+  { text: 'Last 3 days', value: 'last-3-days', daysAgo: 3 },
+  { text: 'Last 7 days', value: 'last-7-days', daysAgo: 7 },
+  { text: 'Last 30 days', value: 'last-30-days', daysAgo: 30 },
+  { text: 'Last 3 months', value: 'last-3-months', daysAgo: 90 },
+];

client/components/date-range-picker/constants.js

@@ -0,0 +1,109 @@
+import moment from 'moment';
+import {
+  ALLOWED_PERIOD_TYPES,
+  DATETIME_FORMAT,
+  RANGE_OPTIONS,
+} from './constants';
+
+export const getDateString = date => moment(date).format(DATETIME_FORMAT);
+
+export const getMaxEndDate = now => moment(now).endOf('day');
+
+export const getMinStartDate = (maxDays, now) =>
+  moment(now)
+    .startOf('day')
+    .subtract(maxDays, 'days');
+
+export const getRange = dateRange => {
+  if (!dateRange) {
+    return [];
+  }
+
+  if (typeof dateRange !== 'string') {
+    return [dateRange.startTime.toDate(), dateRange.endTime.toDate()];
+  }
+
+  const [, count, unit] = dateRange.split('-');
+
+  const startTime = moment()
+    .subtract(count, unit)
+    .startOf(unit)
+    .toDate();
+
+  const endTime = moment()
+    .endOf(unit)
+    .toDate();
+
+  return [startTime, endTime];
+};
+
+export const getRangeDisplayText = dateRange => {
+  if (!dateRange) {
+    return '';
+  }
+
+  if (typeof dateRange !== 'string') {
+    return `${dateRange.startTime.format(
+      DATETIME_FORMAT
+    )} - ${dateRange.endTime.format(DATETIME_FORMAT)}`;
+  }
+
+  const [, count, unit] = dateRange.split('-');
+
+  const parsedCount = parseInt(count);
+
+  if (!parsedCount) {
+    return '';
+  }
+
+  if (!ALLOWED_PERIOD_TYPES.includes(unit)) {
+    return '';
+  }
+
+  return `Last ${parsedCount} ${unit}`;
+};
+
+export const getShortcuts = (maxDays, onClickHandler) => {
+  let options = RANGE_OPTIONS;
+
+  if (maxDays && maxDays < 90) {
+    options = options.filter(o => o.daysAgo < maxDays);
+    const periodType = maxDays === 1 ? 'day' : 'days';
+
+    const option = {
+      daysAgo: maxDays,
+      text: `Last ${maxDays} ${periodType}`,
+      value: `last-${maxDays}-${periodType}`,
+    };
+
+    options.push(option);
+    options.sort((a, b) => a.daysAgo - b.daysAgo);
+  }
+
+  options = options.map(option => ({
+    ...option,
+    onClick: () => onClickHandler(option),
+  }));
+
+  return options;
+};
+
+export const getTimePanelLabel = showTimePanel =>
+  showTimePanel ? 'Select date' : 'Select time';
+
+export const isDateValid = (date, minStartDate, maxEndDate) =>
+  date._isValid &&
+  date.isSameOrAfter(minStartDate) &&
+  date.isSameOrBefore(maxEndDate);
+
+export const isDayDisabled = minStartDate => date => {
+  const momentDate = moment(date);
+
+  if (minStartDate) {
+    if (momentDate.isBefore(minStartDate)) {
+      return true;
+    }
+  }
+
+  return momentDate.isAfter(moment().endOf('day'));
+};