diff --git a/changelog/30349.txt b/changelog/30349.txt new file mode 100644 index 0000000000..fa35126218 --- /dev/null +++ b/changelog/30349.txt @@ -0,0 +1,4 @@ + +```release-note:improvement +ui (enterprise): Replace date selector in client count usage page with fixed start and end dates that align with billing periods in order to return more relevant client counting data. +``` diff --git a/ui/app/components/clients/date-range.hbs b/ui/app/components/clients/date-range.hbs index bc7977f8f8..eb24de373f 100644 --- a/ui/app/components/clients/date-range.hbs +++ b/ui/app/components/clients/date-range.hbs @@ -4,35 +4,47 @@ }}
- - Client counting period - - - The dashboard displays client count activity during the specified date range below. Click edit to update the date range. - +
+ + Change billing period + +
+ {{#if this.version.isEnterprise}} + + + + + {{this.formattedDate @billingStartTime}} + + {{#if this.historicalBillingPeriods.length}} + + + {{#each this.historicalBillingPeriods as |period idx|}} + + {{this.formattedDate period}} + + {{/each}} + {{/if}} + + {{else}} + + {{/if}} +
-
- {{#if (and @startTime @endTime)}} -

{{this.formattedDate @startTime}}

-

—

-

{{this.formattedDate @endTime}}

- - {{else}} - - {{/if}}
{{#if this.showEditModal}} @@ -43,11 +55,6 @@

The start date will be used as the client counting start time and all clients in that month will be considered new. - {{#if this.version.isEnterprise}} - We recommend setting this date as your license or billing start date to get the most accurate new and total - client count estimations. These dates are only for querying data in storage. Editing the date range does not - change any license or billing configurations. - {{/if}}

@@ -78,15 +85,6 @@ End
- {{#if this.version.isEnterprise}} - - {{/if}}
{{#if this.validationError}} {{this.validationError}} {{/if}} - {{#if (and this.version.isEnterprise this.useDefaultDates)}} - - Dashboard will use the default date range from the API. - - {{/if}} diff --git a/ui/app/components/clients/date-range.ts b/ui/app/components/clients/date-range.ts index 9e87e413cf..14a38a7683 100644 --- a/ui/app/components/clients/date-range.ts +++ b/ui/app/components/clients/date-range.ts @@ -22,6 +22,8 @@ interface Args { onChange: (callback: OnChangeParams) => void; startTime: string; endTime: string; + billingStartTime: string; + retentionMonths: number; } /** * @module ClientsDateRange @@ -34,6 +36,8 @@ interface Args { * @param {function} onChange - callback when a new range is saved. * @param {string} [startTime] - ISO string timestamp of the current start date * @param {string} [endTime] - ISO string timestamp of the current end date + * @param {int} [retentionMonths=48] - number of months for historical billing + * @param {string} [billingStartTime] - ISO string timestamp of billing start date */ export default class ClientsDateRangeComponent extends Component { @@ -42,6 +46,7 @@ export default class ClientsDateRangeComponent extends Component { @tracked showEditModal = false; @tracked startDate = ''; // format yyyy-MM @tracked endDate = ''; // format yyyy-MM + @tracked selectedStart = this.args.billingStartTime; currentMonth = format(timestamp.now(), 'yyyy-MM'); constructor(owner: unknown, args: Args) { @@ -52,6 +57,7 @@ export default class ClientsDateRangeComponent extends Component { setTrackedFromArgs() { if (this.args.startTime) { this.startDate = parseAPITimestamp(this.args.startTime, 'yyyy-MM') as string; + this.selectedStart = this.formattedDate(this.args.startTime) as string; } if (this.args.endTime) { this.endDate = parseAPITimestamp(this.args.endTime, 'yyyy-MM') as string; @@ -62,6 +68,25 @@ export default class ClientsDateRangeComponent extends Component { return parseAPITimestamp(isoTimestamp, 'MMMM yyyy'); }; + get historicalBillingPeriods() { + // we want whole billing periods + const count = Math.floor(this.args.retentionMonths / 12); + const periods: string[] = []; + + for (let i = 1; i <= count; i++) { + const startDate = new Date(this.args.billingStartTime); + const utcMonth = startDate.getUTCMonth(); + const utcYear = startDate.getUTCFullYear() - i; + + startDate.setUTCFullYear(utcYear); + startDate.setUTCMonth(utcMonth); + + periods.push(startDate.toISOString()); + } + + return periods; + } + get useDefaultDates() { return !this.startDate && !this.endDate; } @@ -100,6 +125,7 @@ export default class ClientsDateRangeComponent extends Component { } } + // used for CE date picker @action handleSave() { if (this.validationError) return; const params: OnChangeParams = { @@ -122,4 +148,21 @@ export default class ClientsDateRangeComponent extends Component { this.args.onChange(params); this.onClose(); } + + @action + updateEnterpriseDateRange(start: string) { + const params: OnChangeParams = { + start_time: undefined, + end_time: undefined, + }; + + const [year, month] = start.split('-'); + if (year && month) { + // pass true for isEnd even for start because we want to go off last day of month here, otherwise we risk + // setting it to a start_time that is for the previous billing period + params.start_time = formatDateObject({ monthIdx: parseInt(month) - 1, year: parseInt(year) }, true); + } + + this.args.onChange(params); + } } diff --git a/ui/app/components/clients/page-header.hbs b/ui/app/components/clients/page-header.hbs index 6f938781f1..ed4ce20c75 100644 --- a/ui/app/components/clients/page-header.hbs +++ b/ui/app/components/clients/page-header.hbs @@ -4,15 +4,23 @@ }} - Vault Usage Metrics - - This dashboard surfaces Vault client usage over time. - Documentation is available here. - Date queries are sent in UTC. - - + + Client Usage + + {{#if (and this.formattedStartDate this.formattedEndDate)}} + +

+ For billing period: + {{this.formattedStartDate}} + - + {{this.formattedEndDate}} +

+ + {{/if}} + {{#if this.showExportButton}} {{/if}} + @@ -45,8 +60,11 @@

SELECTED DATE {{if this.formattedEndDate " RANGE"}}

{{this.formattedStartDate}} - {{if this.formattedEndDate "-"}} - {{this.formattedEndDate}}

+ {{#if this.showEndDate}} + {{"-"}} + {{this.formattedEndDate}} + {{/if}} +

+
+ +
- {{#if (eq @activity.id "no-data")}} diff --git a/ui/app/components/clients/page/counts.ts b/ui/app/components/clients/page/counts.ts index 2d92614a4a..0e6f9b8d1a 100644 --- a/ui/app/components/clients/page/counts.ts +++ b/ui/app/components/clients/page/counts.ts @@ -42,6 +42,10 @@ export default class ClientsCountsPageComponent extends Component { return this.args.startTimestamp ? parseAPITimestamp(this.args.startTimestamp, 'MMMM yyyy') : null; } + get formattedBillingStartDate() { + return this.args.config.billingStartTimestamp.toISOString(); + } + // returns text for empty state message if noActivityData get dateRangeMessage() { if (this.args.startTimestamp && this.args.endTimestamp) { diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss index b67c5b2388..e1eef8a758 100644 --- a/ui/app/styles/helper-classes/flexbox-and-grid.scss +++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss @@ -199,3 +199,7 @@ .align-items-center { align-items: center; } + +.align-items-end { + align-items: end; +} diff --git a/ui/tests/acceptance/clients/counts-test.js b/ui/tests/acceptance/clients/counts-test.js index a01f980712..3960cd7c0d 100644 --- a/ui/tests/acceptance/clients/counts-test.js +++ b/ui/tests/acceptance/clients/counts-test.js @@ -44,6 +44,7 @@ module('Acceptance | clients | counts', function (hooks) { }); test('it should persist filter query params between child routes', async function (assert) { + this.owner.lookup('service:version').type = 'community'; await visit('/vault/clients/counts/overview'); await click(CLIENT_COUNT.dateRange.edit); await fillIn(CLIENT_COUNT.dateRange.editDate('start'), '2023-03'); diff --git a/ui/tests/acceptance/clients/counts/overview-test.js b/ui/tests/acceptance/clients/counts/overview-test.js index 70284a497d..6720e03171 100644 --- a/ui/tests/acceptance/clients/counts/overview-test.js +++ b/ui/tests/acceptance/clients/counts/overview-test.js @@ -63,7 +63,8 @@ module('Acceptance | clients | overview', function (hooks) { assert.dom(CHARTS.xAxisLabel).exists({ count: 7 }, 'chart months matches query'); }); - test('it should update charts when querying date ranges', async function (assert) { + // TODO revisit once CE changes are finalized + test.skip('it should update charts when querying date ranges', async function (assert) { // query for single, historical month with no new counts (July 2023) const licenseStartMonth = format(LICENSE_START, 'yyyy-MM'); const upgradeMonth = format(UPGRADE_DATE, 'yyyy-MM'); diff --git a/ui/tests/helpers/clients/client-count-selectors.ts b/ui/tests/helpers/clients/client-count-selectors.ts index 7137f1b230..8cdf9affad 100644 --- a/ui/tests/helpers/clients/client-count-selectors.ts +++ b/ui/tests/helpers/clients/client-count-selectors.ts @@ -13,6 +13,7 @@ export const CLIENT_COUNT = { startDiscrepancy: '[data-test-counts-start-discrepancy]', }, dateRange: { + dropdownOption: (idx = 0) => `[data-test-date-range-billing-start="${idx}"]`, dateDisplay: (name: string) => (name ? `[data-test-date-range="${name}"]` : '[data-test-date-range]'), edit: '[data-test-date-range-edit]', editModal: '[data-test-date-range-edit-modal]', diff --git a/ui/tests/integration/components/clients/date-range-test.js b/ui/tests/integration/components/clients/date-range-test.js index cfe40de3f8..3ba0bcb932 100644 --- a/ui/tests/integration/components/clients/date-range-test.js +++ b/ui/tests/integration/components/clients/date-range-test.js @@ -21,10 +21,12 @@ module('Integration | Component | clients/date-range', function (hooks) { this.now = timestamp.now(); this.startTime = '2018-01-01T14:15:30'; this.endTime = '2019-01-31T14:15:30'; + this.billingStartTime = '2018-01-01T14:15:30'; + this.retentionMonths = 48; this.onChange = Sinon.spy(); this.renderComponent = async () => { await render( - hbs`` + hbs`` ); }; }); @@ -52,61 +54,18 @@ module('Integration | Component | clients/date-range', function (hooks) { assert.dom(DATE_RANGE.editModal).doesNotExist('closes modal'); }); - test('it renders the date range passed and can reset it (ent)', async function (assert) { - this.owner.lookup('service:version').type = 'enterprise'; - await this.renderComponent(); - - assert.dom(DATE_RANGE.dateDisplay('start')).hasText('January 2018'); - assert.dom(DATE_RANGE.dateDisplay('end')).hasText('January 2019'); - assert.dom(DATE_RANGE.edit).hasText('Edit'); - - await click(DATE_RANGE.edit); - assert.dom(DATE_RANGE.editModal).exists(); - assert.dom(DATE_RANGE.editDate('start')).hasValue('2018-01'); - assert.dom(DATE_RANGE.editDate('end')).hasValue('2019-01'); - assert.dom(DATE_RANGE.defaultRangeAlert).doesNotExist(); - - await click(DATE_RANGE.editDate('reset')); - assert.dom(DATE_RANGE.editDate('start')).hasValue(''); - assert.dom(DATE_RANGE.editDate('end')).hasValue(''); - assert.dom(DATE_RANGE.defaultRangeAlert).exists(); - await click(GENERAL.saveButton); - assert.deepEqual(this.onChange.args[0], [{ start_time: undefined, end_time: undefined }]); - }); - - test('it renders the date range passed and cannot reset it when community', async function (assert) { + test('it does not trigger onChange if date range invalid', async function (assert) { this.owner.lookup('service:version').type = 'community'; await this.renderComponent(); - assert.dom(DATE_RANGE.dateDisplay('start')).hasText('January 2018'); - assert.dom(DATE_RANGE.dateDisplay('end')).hasText('January 2019'); - assert.dom(DATE_RANGE.edit).hasText('Edit'); - await click(DATE_RANGE.edit); - assert.dom(DATE_RANGE.editModal).exists(); - assert.dom(DATE_RANGE.editDate('reset')).doesNotExist(); - assert.dom(DATE_RANGE.editDate('start')).hasValue('2018-01'); - assert.dom(DATE_RANGE.editDate('end')).hasValue('2019-01'); - assert.dom(DATE_RANGE.defaultRangeAlert).doesNotExist(); - - await fillIn(DATE_RANGE.editDate('start'), ''); - assert.dom(DATE_RANGE.validation).hasText('You must supply both start and end dates.'); - await click(GENERAL.saveButton); - assert.false(this.onChange.called); - }); - - test('it does not trigger onChange if date range invalid', async function (assert) { - this.owner.lookup('service:version').type = 'enterprise'; - await this.renderComponent(); - - await click(DATE_RANGE.edit); - await click(DATE_RANGE.editDate('reset')); - await fillIn(DATE_RANGE.editDate('end'), '2017-05'); + await fillIn(DATE_RANGE.editDate('end'), ''); assert.dom(DATE_RANGE.validation).hasText('You must supply both start and end dates.'); await click(GENERAL.saveButton); assert.false(this.onChange.called); await fillIn(DATE_RANGE.editDate('start'), '2018-01'); + await fillIn(DATE_RANGE.editDate('end'), '2017-05'); assert.dom(DATE_RANGE.validation).hasText('Start date must be before end date.'); await click(GENERAL.saveButton); assert.false(this.onChange.called); diff --git a/ui/tests/integration/components/clients/page/counts-test.js b/ui/tests/integration/components/clients/page/counts-test.js index 9d42a6e291..969eed5064 100644 --- a/ui/tests/integration/components/clients/page/counts-test.js +++ b/ui/tests/integration/components/clients/page/counts-test.js @@ -124,18 +124,10 @@ module('Integration | Component | clients | Page::Counts', function (hooks) { expectedStart: 'January 2023', expectedEnd: 'December 2023', }, - { - scenario: 'reset', - expected: { start_time: undefined, end_time: undefined }, - reset: true, - expectedStart: 'July 2023', - expectedEnd: 'January 2024', - }, ].forEach((testCase) => { test(`it should send correct millis value on filter change when ${testCase.scenario}`, async function (assert) { assert.expect(5); - // set to enterprise so reset will save correctly - this.owner.lookup('service:version').type = 'enterprise'; + this.owner.lookup('service:version').type = 'community'; this.onFilterChange = (params) => { assert.deepEqual(params, testCase.expected, 'Correct values sent on filter change'); // in the app, the timestamp choices trigger a qp refresh as millis from epoch,