\ No newline at end of file
diff --git a/ui/app/templates/components/clients/running-total.hbs b/ui/app/templates/components/clients/running-total.hbs
index 9266f308a9..d20289d41d 100644
--- a/ui/app/templates/components/clients/running-total.hbs
+++ b/ui/app/templates/components/clients/running-total.hbs
@@ -7,7 +7,7 @@
The total client count number is an important consideration for Vault billing.
{{/if}}
\ No newline at end of file
diff --git a/ui/app/templates/components/clients/vertical-bar-chart.hbs b/ui/app/templates/components/clients/vertical-bar-chart.hbs
index 4cb369f113..ffe03d75c2 100644
--- a/ui/app/templates/components/clients/vertical-bar-chart.hbs
+++ b/ui/app/templates/components/clients/vertical-bar-chart.hbs
@@ -8,9 +8,7 @@
>
{{else}}
-
-
-
+
{{/if}}
{{! TOOLTIP }}
diff --git a/ui/app/utils/chart-helpers.js b/ui/app/utils/chart-helpers.js
index c35d591888..25dc57460e 100644
--- a/ui/app/utils/chart-helpers.js
+++ b/ui/app/utils/chart-helpers.js
@@ -27,9 +27,11 @@ export function formatTooltipNumber(value) {
return new Intl.NumberFormat().format(value);
}
-export function calculateAverageClients(dataset, objectKey) {
- // dataset is an array of objects (consumed by the chart components)
- // objectKey is the key of the integer we want to calculate, ex: 'entity_clients', 'non_entity_clients', 'clients'
- let getIntegers = dataset.map((d) => (d[objectKey] ? d[objectKey] : 0)); // if undefined no data, so return 0
- return getIntegers.length !== 0 ? Math.round(mean(getIntegers)) : null;
+export function calculateAverage(dataset, objectKey) {
+ if (!Array.isArray(dataset) || dataset?.length === 0) return null;
+ // if an array of objects, objectKey of the integer we want to calculate, ex: 'entity_clients'
+ // if d[objectKey] is undefined there is no value, so return 0
+ const getIntegers = objectKey ? dataset?.map((d) => (d[objectKey] ? d[objectKey] : 0)) : dataset;
+ let checkIntegers = getIntegers.every((n) => Number.isInteger(n)); // decimals will be false
+ return checkIntegers ? Math.round(mean(getIntegers)) : null;
}
diff --git a/ui/lib/core/addon/templates/components/stat-text.hbs b/ui/lib/core/addon/templates/components/stat-text.hbs
index 805bafc747..66eb70db9e 100644
--- a/ui/lib/core/addon/templates/components/stat-text.hbs
+++ b/ui/lib/core/addon/templates/components/stat-text.hbs
@@ -1,6 +1,6 @@
{{@label}}
diff --git a/ui/lib/core/addon/utils/date-formatters.js b/ui/lib/core/addon/utils/date-formatters.js
index a768949f06..25736d3f4f 100644
--- a/ui/lib/core/addon/utils/date-formatters.js
+++ b/ui/lib/core/addon/utils/date-formatters.js
@@ -34,7 +34,7 @@ export const parseRFC3339 = (timestamp) => {
return date ? [`${date.getFullYear()}`, date.getMonth()] : null;
};
-// convert MM/yy (format of dates in charts) to 'Month yyyy' (format in tooltip)
+// convert M/yy (format of dates in charts) to 'Month yyyy' (format in tooltip)
export function formatChartDate(date) {
let array = date.split('/');
array.splice(1, 0, '01');
diff --git a/ui/mirage/handlers/clients.js b/ui/mirage/handlers/clients.js
index 68249c5f44..ebb6009c55 100644
--- a/ui/mirage/handlers/clients.js
+++ b/ui/mirage/handlers/clients.js
@@ -1684,6 +1684,7 @@ const MOCK_MONTHLY_DATA = [
},
},
{
+ timestamp: formatISO(addMonths(UPGRADE_DATE, 3)),
counts: {
distinct_entities: 0,
entity_clients: 10873,
@@ -2236,7 +2237,7 @@ const MOCK_MONTHLY_DATA = [
},
},
{
- timestamp: formatISO(addMonths(UPGRADE_DATE, 3)),
+ timestamp: formatISO(addMonths(UPGRADE_DATE, 4)),
counts: {
distinct_entities: 0,
entity_clients: 10342,
diff --git a/ui/tests/acceptance/client-history-test.js b/ui/tests/acceptance/client-history-test.js
index b73c0a4de1..148f9fbb79 100644
--- a/ui/tests/acceptance/client-history-test.js
+++ b/ui/tests/acceptance/client-history-test.js
@@ -9,6 +9,8 @@ import { SELECTORS, overrideResponse } from '../helpers/clients';
import { create } from 'ember-cli-page-object';
import ss from 'vault/tests/pages/components/search-select';
import { clickTrigger } from 'ember-power-select/test-support/helpers';
+import { ARRAY_OF_MONTHS } from 'core/utils/date-formatters';
+
const searchSelect = create(ss);
const NEW_DATE = new Date();
@@ -133,18 +135,47 @@ module('Acceptance | clients history tab', function (hooks) {
});
test('updates correctly when querying date ranges', async function (assert) {
- assert.expect(17);
+ assert.expect(26);
// TODO CMB: wire up dynamically generated activity to mirage clients handler
// const activity = generateActivityResponse(5, LICENSE_START, LAST_MONTH);
await visit('/vault/clients/history');
assert.equal(currentURL(), '/vault/clients/history');
- // change billing start month
+ // query for single, historical month with no new counts
+ await click(SELECTORS.rangeDropdown);
+ await click('[data-test-show-calendar]');
+ if (parseInt(find('[data-test-display-year]').innerText) > LICENSE_START.getFullYear()) {
+ await click('[data-test-previous-year]');
+ }
+ await click(find(`[data-test-calendar-month=${ARRAY_OF_MONTHS[LICENSE_START.getMonth()]}]`));
+
+ assert.dom('[data-test-usage-stats]').exists('total usage stats show');
+ assert
+ .dom(SELECTORS.runningTotalMonthStats)
+ .doesNotExist('running total single month stat boxes do not show');
+ assert
+ .dom(SELECTORS.runningTotalMonthlyCharts)
+ .doesNotExist('running total month over month charts do not show');
+ assert.dom(SELECTORS.monthlyUsageBlock).doesNotExist('does not show monthly usage block');
+ assert.dom(SELECTORS.attributionBlock).exists('attribution area shows');
+ assert
+ .dom('[data-test-chart-container="new-clients"] [data-test-component="empty-state"]')
+ .exists('new client attribution has empty state');
+ assert
+ .dom('[data-test-empty-state-subtext]')
+ .hasText('There are no new clients for this namespace during this time period. ');
+ assert.dom('[data-test-chart-container="total-clients"]').exists('total client attribution chart shows');
+
+ // reset to billing period
+ await click('[data-test-popup-menu-trigger]');
+ await click('[data-test-current-billing-period]');
+
+ // change billing start to month/year of first upgrade
await click('[data-test-start-date-editor] button');
await click(SELECTORS.monthDropdown);
- await click(find('.menu-list button:not([disabled])'));
+ await click(find(`[data-test-date-modal-month="${ARRAY_OF_MONTHS[UPGRADE_DATE.getMonth()]}"]`));
await click(SELECTORS.yearDropdown);
- await click(find('.menu-list button:not([disabled])'));
+ await click(find(`[data-test-date-modal-year="${UPGRADE_DATE.getFullYear()}`));
await click('[data-test-modal-save]');
assert.dom(SELECTORS.attributionBlock).exists('Shows attribution area');
@@ -154,7 +185,7 @@ module('Acceptance | clients history tab', function (hooks) {
.exists('Shows running totals with monthly breakdown charts');
assert
.dom(find('[data-test-line-chart="x-axis-labels"] g.tick text'))
- .hasText('1/22', 'x-axis labels start with updated billing start month');
+ .hasText(`${format(UPGRADE_DATE, 'M/yy')}`, 'x-axis labels start with updated billing start month');
assert.equal(
findAll('[data-test-line-chart="plot-point"]').length,
5,
@@ -164,9 +195,10 @@ module('Acceptance | clients history tab', function (hooks) {
// query custom end month
await click(SELECTORS.rangeDropdown);
await click('[data-test-show-calendar]');
- let readOnlyMonths = findAll('[data-test-calendar-month].is-readOnly');
- let clickableMonths = findAll('[data-test-calendar-month]').filter((m) => !readOnlyMonths.includes(m));
- await click(clickableMonths[1]);
+ if (parseInt(find('[data-test-display-year]').innerText) < NEW_DATE.getFullYear()) {
+ await click('[data-test-future-year]');
+ }
+ await click(find(`[data-test-calendar-month=${ARRAY_OF_MONTHS[LAST_MONTH.getMonth() - 2]}]`));
assert.dom(SELECTORS.attributionBlock).exists('Shows attribution area');
assert.dom(SELECTORS.monthlyUsageBlock).exists('Shows monthly usage block');
@@ -175,23 +207,27 @@ module('Acceptance | clients history tab', function (hooks) {
.exists('Shows running totals with monthly breakdown charts');
assert.equal(
findAll('[data-test-line-chart="plot-point"]').length,
- 2,
- `line chart plots 2 points to match query`
+ 3,
+ `line chart plots 3 points to match query`
);
+ let xAxisLabels = findAll('[data-test-line-chart="x-axis-labels"] g.tick text');
assert
- .dom(findAll('[data-test-line-chart="x-axis-labels"] g.tick text')[1])
- .hasText('2/22', 'x-axis labels start with updated billing start month');
+ .dom(xAxisLabels[xAxisLabels.length - 1])
+ .hasText(`${format(subMonths(LAST_MONTH, 2), 'M/yy')}`, 'x-axis labels end with queried end month');
// query for single, historical month
await click(SELECTORS.rangeDropdown);
await click('[data-test-show-calendar]');
- readOnlyMonths = findAll('[data-test-calendar-month].is-readOnly');
- clickableMonths = findAll('[data-test-calendar-month]').filter((m) => !readOnlyMonths.includes(m));
- await click(clickableMonths[0]);
+ if (parseInt(find('[data-test-display-year]').innerText) < NEW_DATE.getFullYear()) {
+ await click('[data-test-future-year]');
+ }
+ await click(find(`[data-test-calendar-month=${ARRAY_OF_MONTHS[UPGRADE_DATE.getMonth()]}]`));
+
assert.dom(SELECTORS.runningTotalMonthStats).exists('running total single month stat boxes show');
assert
.dom(SELECTORS.runningTotalMonthlyCharts)
.doesNotExist('running total month over month charts do not show');
+ assert.dom(SELECTORS.monthlyUsageBlock).doesNotExist('Does not show monthly usage block');
assert.dom(SELECTORS.attributionBlock).exists('attribution area shows');
assert.dom('[data-test-chart-container="new-clients"]').exists('new client attribution chart shows');
assert.dom('[data-test-chart-container="total-clients"]').exists('total client attribution chart shows');
@@ -203,8 +239,7 @@ module('Acceptance | clients history tab', function (hooks) {
// query month older than count start date
await click('[data-test-start-date-editor] button');
await click(SELECTORS.yearDropdown);
- let years = findAll('.menu-list button:not([disabled])');
- await click(years[years.length - 1]);
+ await click(find(`[data-test-date-modal-year="${LICENSE_START.getFullYear() - 3}`));
await click('[data-test-modal-save]');
assert
diff --git a/ui/tests/helpers/clients.js b/ui/tests/helpers/clients.js
index 4e9acbca66..f2f9dbcaa1 100644
--- a/ui/tests/helpers/clients.js
+++ b/ui/tests/helpers/clients.js
@@ -8,20 +8,14 @@ import { Response } from 'miragejs';
Filtering (data with mounts)
Filtering (data without mounts)
Filtering (data without mounts)
-
- * -- HISTORY ONLY --
+ * -- HISTORY ONLY --
+ Filtering different date ranges (hist only)
+ Upgrade warning
No permissions for license
Version
queries available
queries unavailable
License start date this month
- */
-
-// TODO
-/*
-Filtering different date ranges (hist only)
-Upgrade warning
-
*/
export const SELECTORS = {
currentMonthActiveTab: '.active[data-test-current-month]',
diff --git a/ui/tests/integration/components/clients/line-chart-test.js b/ui/tests/integration/components/clients/line-chart-test.js
index 1129a7f431..013e763367 100644
--- a/ui/tests/integration/components/clients/line-chart-test.js
+++ b/ui/tests/integration/components/clients/line-chart-test.js
@@ -1,12 +1,15 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { find, render, findAll, triggerEvent } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
-
+import { format, formatRFC3339, subMonths } from 'date-fns';
+import { formatChartDate } from 'core/utils/date-formatters';
module('Integration | Component | clients/line-chart', function (hooks) {
setupRenderingTest(hooks);
-
+ const CURRENT_DATE = new Date();
hooks.beforeEach(function () {
+ this.set('xKey', 'foo');
+ this.set('yKey', 'bar');
this.set('dataset', [
{
foo: 1,
@@ -30,11 +33,179 @@ module('Integration | Component | clients/line-chart', function (hooks) {
test('it renders', async function (assert) {
await render(hbs`