open-vault/ui/app/components/pricing-metrics-dates.js

/**
 * @module PricingMetricsDates
 * PricingMetricsDates components are used on the Pricing Metrics page to handle queries related to pricing metrics.
 * This component assumes that query parameters (as in, from route params) are being passed in with the format MM-yyyy,
 * while the inputs expect a format of MM/yyyy.
 *
 * @example
 * ```js
 * <PricingMetricsDates @resultStart="2020-03-01T00:00:00Z" @resultEnd="2020-08-31T23:59:59Z" @queryStart="03-2020" @queryEnd="08-2020" />
 * ```
 * @param {object} resultStart - resultStart is the start date of the metrics returned. Should be a valid date string that the built-in Date() fn can parse
 * @param {object} resultEnd - resultEnd is the end date of the metrics returned. Should be a valid date string that the built-in Date() fn can parse
 * @param {string} [queryStart] - queryStart is the route param (formatted MM-yyyy) that the result will be measured against for showing discrepancy warning
 * @param {string} [queryEnd] - queryEnd is the route param (formatted MM-yyyy) that the result will be measured against for showing discrepancy warning
 * @param {number} [defaultSpan=12] - setting for default time between start and end input dates
 * @param {number} [retentionMonths=24] - setting for the retention months, which informs valid dates to query by
 */
import { set, computed } from '@ember/object';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { subMonths, startOfToday, format, endOfMonth, startOfMonth, isBefore } from 'date-fns';
import layout from '../templates/components/pricing-metrics-dates';
import { parseDateString } from 'vault/helpers/parse-date-string';

export default Component.extend({
  layout,
  router: service(),

  queryStart: null,
  queryEnd: null,
  resultStart: null,
  resultEnd: null,

  start: null,
  end: null,

  defaultSpan: 12,
  retentionMonths: 24,

  startDate: computed('start', function() {
    if (!this.start) return null;
    let date;
    try {
      date = parseDateString(this.start, '/');
      if (date) return date;
      return null;
    } catch (e) {
      return null;
    }
  }),
  endDate: computed('end', function() {
    if (!this.end) return null;
    let date;
    try {
      date = parseDateString(this.end, '/');
      if (date) return endOfMonth(date);
      return null;
    } catch (e) {
      return null;
    }
  }),

  error: computed('end', 'endDate', 'retentionMonths', 'start', 'startDate', function() {
    if (!this.startDate) {
      return 'Start date is invalid. Please use format MM/yyyy';
    }
    if (!this.endDate) {
      return 'End date is invalid. Please use format MM/yyyy';
    }
    if (isBefore(this.endDate, this.startDate)) {
      return 'Start date is after end date';
    }
    const lastMonthAvailable = endOfMonth(subMonths(startOfToday(), 1));
    if (isBefore(lastMonthAvailable, this.endDate)) {
      return `Data is not available until the end of the month`;
    }
    const earliestRetained = startOfMonth(subMonths(lastMonthAvailable, this.retentionMonths));
    if (isBefore(this.startDate, earliestRetained)) {
      return `No data retained before ${format(earliestRetained, 'MM/yyyy')} due to your settings`;
    }

    return null;
  }),

  init() {
    this._super(...arguments);
    let initialEnd;
    let initialStart;

    initialEnd = subMonths(startOfToday(), 1);
    if (this.queryEnd) {
      initialEnd = parseDateString(this.queryEnd, '-');
    } else {
      // if query isn't passed in, set it so that showResultsWarning works
      this.queryEnd = format(initialEnd, 'MM-yyyy');
    }
    initialStart = subMonths(initialEnd, this.defaultSpan);
    if (this.queryStart) {
      initialStart = parseDateString(this.queryStart, '-');
    } else {
      // if query isn't passed in, set it so that showResultsWarning works
      this.queryStart = format(initialStart, 'MM-yyyy');
    }

    set(this, 'start', format(initialStart, 'MM/yyyy'));
    set(this, 'end', format(initialEnd, 'MM/yyyy'));
  },

  actions: {
    handleQuery() {
      const start = format(this.startDate, 'MM-yyyy');
      const end = format(this.endDate, 'MM-yyyy');
      this.router.transitionTo('vault.cluster.clients', {
        queryParams: {
          start,
          end,
        },
      });
    },
  },
});