Client Count banner warnings for upgraded of minor 9 or 10 (#15103)

* handle current warning * handle history * match the two flows * clean up * Refactor to account for chart indicator (#15121) * refactor for charts * revert handler changes * clarify variable * add 1.10 to version history * woops add key * handle mock query end date * update current template * add date * fix tests * fix fake version response * address comments, cleanup * change word * add TODO * revert selector Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Co-authored-by: Claire Bontempo <cbontempo@hashicorp.com>
2025-11-02 03:27:54 +00:00 · 2022-04-25 11:23:12 -06:00
parent cf5f6fc8e3
commit 8843b7d0c7
8 changed files with 197 additions and 70 deletions
--- a/ui/app/components/clients/current.js
+++ b/ui/app/components/clients/current.js
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { isAfter, startOfMonth } from 'date-fns';
 import { action } from '@ember/object';
+
 export default class Current extends Component {
  chartLegend = [
    { key: 'entity_clients', label: 'entity clients' },
@@ -15,10 +16,31 @@ export default class Current extends Component {
  @tracked selectedAuthMethod = null;
  @tracked authMethodOptions = [];

-  get latestUpgradeData() {
-    // e.g. {id: '1.9.0', previousVersion: null, timestampInstalled: '2021-11-03T10:23:16Z'}
-    // version id is 1.9.0 or earliest upgrade post 1.9.0, timestamp is RFC3339
-    return this.args.model.versionHistory[0] || null;
+  get upgradeVersionHistory() {
+    const versionHistory = this.args.model.versionHistory;
+    if (!versionHistory || versionHistory.length === 0) {
+      return null;
+    }
+
+    // get upgrade data for initial upgrade to 1.9 and/or 1.10
+    let relevantUpgrades = [];
+    const importantUpgrades = ['1.9', '1.10'];
+    importantUpgrades.forEach((version) => {
+      let findUpgrade = versionHistory.find((versionData) => versionData.id.match(version));
+      if (findUpgrade) relevantUpgrades.push(findUpgrade);
+    });
+
+    // if no history for 1.9 or 1.10, customer skipped these releases so get first stored upgrade
+    // TODO account for customer STARTING on 1.11
+    if (relevantUpgrades.length === 0) {
+      relevantUpgrades.push({
+        id: versionHistory[0].id,
+        previousVersion: versionHistory[0].previousVersion,
+        timestampInstalled: versionHistory[0].timestampInstalled,
+      });
+    }
+    // array of upgrade data objects for noteworthy upgrades
+    return relevantUpgrades;
  }

  // Response total client count data by namespace for current/partial month
@@ -76,13 +98,47 @@ export default class Current extends Component {
      .mounts?.find((mount) => mount.label === auth);
  }

-  get countsIncludeOlderData() {
-    if (!this.latestUpgradeData) {
-      return false;
+  get upgradeDuringCurrentMonth() {
+    if (!this.upgradeVersionHistory) {
+      return null;
    }
-    let versionDate = new Date(this.latestUpgradeData.timestampInstalled);
-    // compare against this month and this year to show message or not.
-    return isAfter(versionDate, startOfMonth(new Date())) ? versionDate : false;
+    const upgradesWithinData = this.upgradeVersionHistory.filter((upgrade) => {
+      // TODO how do timezones affect this?
+      let upgradeDate = new Date(upgrade.timestampInstalled);
+      return isAfter(upgradeDate, startOfMonth(new Date()));
+    });
+    // return all upgrades that happened within date range of queried activity
+    return upgradesWithinData.length === 0 ? null : upgradesWithinData;
+  }
+
+  get upgradeVersionAndDate() {
+    if (!this.upgradeDuringCurrentMonth) {
+      return null;
+    }
+    if (this.upgradeDuringCurrentMonth.length === 2) {
+      let versions = this.upgradeDuringCurrentMonth.map((upgrade) => upgrade.id).join(' and ');
+      return `Vault was upgraded to ${versions} during this month`;
+    } else {
+      let version = this.upgradeDuringCurrentMonth[0];
+      return `Vault was upgraded to ${version.id} on this month`;
+    }
+  }
+
+  get versionSpecificText() {
+    if (!this.upgradeDuringCurrentMonth) {
+      return null;
+    }
+    if (this.upgradeDuringCurrentMonth.length === 1) {
+      let version = this.upgradeDuringCurrentMonth[0].id;
+      if (version.match('1.9')) {
+        return ' How we count clients changed in 1.9, so keep that in mind when looking at the data below.';
+      }
+      if (version.match('1.10')) {
+        return ' We added new client breakdowns starting in 1.10, so keep that in mind when looking at the data below.';
+      }
+    }
+    // return combined explanation if spans multiple upgrades, or customer skipped 1.9 and 1.10
+    return ' How we count clients changed in 1.9 and we added new client breakdowns starting in 1.10. Keep this in mind when looking at the data below.';
  }

  // top level TOTAL client counts for current/partial month
--- a/ui/app/components/clients/history.js
+++ b/ui/app/components/clients/history.js
@@ -2,9 +2,10 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { isSameMonth, isAfter } from 'date-fns';
+import { isSameMonth, isAfter, isBefore } from 'date-fns';
 import getStorage from 'vault/lib/token-storage';
 import { ARRAY_OF_MONTHS } from 'core/utils/date-formatters';
+import { dateFormat } from 'core/helpers/date-format';

 const INPUTTED_START_DATE = 'vault:ui-inputted-start-date';

@@ -89,10 +90,82 @@ export default class History extends Component {
    );
  }

-  get latestUpgradeData() {
-    // {id: '1.9.0', previousVersion: null, timestampInstalled: '2021-11-03T10:23:16Z'}
-    // version id is 1.9.0 or earliest upgrade post 1.9.0, timestamp is RFC3339
-    return this.args.model.versionHistory[0] || null;
+  get upgradeVersionHistory() {
+    const versionHistory = this.args.model.versionHistory;
+    if (!versionHistory || versionHistory.length === 0) {
+      return null;
+    }
+
+    // get upgrade data for initial upgrade to 1.9 and/or 1.10
+    let relevantUpgrades = [];
+    const importantUpgrades = ['1.9', '1.10'];
+    importantUpgrades.forEach((version) => {
+      let findUpgrade = versionHistory.find((versionData) => versionData.id.match(version));
+      if (findUpgrade) relevantUpgrades.push(findUpgrade);
+    });
+
+    // if no history for 1.9 or 1.10, customer skipped these releases so get first stored upgrade
+    // TODO account for customer STARTING on 1.11
+    if (relevantUpgrades.length === 0) {
+      relevantUpgrades.push({
+        id: versionHistory[0].id,
+        previousVersion: versionHistory[0].previousVersion,
+        timestampInstalled: versionHistory[0].timestampInstalled,
+      });
+    }
+    // array of upgrade data objects for noteworthy upgrades
+    return relevantUpgrades;
+  }
+
+  get upgradeDuringActivity() {
+    if (!this.upgradeVersionHistory) {
+      return null;
+    }
+    const activityStart = new Date(this.getActivityResponse.startTime);
+    const activityEnd = new Date(this.getActivityResponse.endTime);
+    const upgradesWithinData = this.upgradeVersionHistory.filter((upgrade) => {
+      // TODO how do timezones affect this?
+      let upgradeDate = new Date(upgrade.timestampInstalled);
+      return isAfter(upgradeDate, activityStart) && isBefore(upgradeDate, activityEnd);
+    });
+    // return all upgrades that happened within date range of queried activity
+    return upgradesWithinData.length === 0 ? null : upgradesWithinData;
+  }
+
+  get upgradeVersionAndDate() {
+    if (!this.upgradeDuringActivity) {
+      return null;
+    }
+    if (this.upgradeDuringActivity.length === 2) {
+      let firstUpgrade = this.upgradeDuringActivity[0];
+      let secondUpgrade = this.upgradeDuringActivity[1];
+      let firstDate = dateFormat([firstUpgrade.timestampInstalled, 'MMM d, yyyy'], { isFormatted: true });
+      let secondDate = dateFormat([secondUpgrade.timestampInstalled, 'MMM d, yyyy'], { isFormatted: true });
+      return `Vault was upgraded to ${firstUpgrade.id} (${firstDate}) and ${secondUpgrade.id} (${secondDate}) during this time range.`;
+    } else {
+      let upgrade = this.upgradeDuringActivity[0];
+      return `Vault was upgraded to ${upgrade.id} on ${dateFormat(
+        [upgrade.timestampInstalled, 'MMM d, yyyy'],
+        { isFormatted: true }
+      )}.`;
+    }
+  }
+
+  get versionSpecificText() {
+    if (!this.upgradeDuringActivity) {
+      return null;
+    }
+    if (this.upgradeDuringActivity.length === 1) {
+      let version = this.upgradeDuringActivity[0].id;
+      if (version.match('1.9')) {
+        return ' How we count clients changed in 1.9, so keep that in mind when looking at the data below.';
+      }
+      if (version.match('1.10')) {
+        return ' We added monthly breakdowns starting in 1.10, so keep that in mind when looking at the data below.';
+      }
+    }
+    // return combined explanation if spans multiple upgrades, or customer skipped 1.9 and 1.10
+    return ' How we count clients changed in 1.9 and we added monthly breakdowns starting in 1.10. Keep this in mind when looking at the data below.';
  }

  get startTimeDisplay() {
@@ -154,16 +227,6 @@ export default class History extends Component {
    return this.byMonthTotalClients.map((m) => m.new_clients);
  }

-  get countsIncludeOlderData() {
-    if (!this.latestUpgradeData) {
-      return false;
-    }
-    let versionDate = new Date(this.latestUpgradeData.timestampInstalled);
-    let startTimeFromResponse = new Date(this.getActivityResponse.startTime);
-    // compare against this start date returned from API to show message or not.
-    return isAfter(versionDate, startTimeFromResponse) ? versionDate : false;
-  }
-
  get filteredActivity() {
    const namespace = this.selectedNamespace;
    const auth = this.selectedAuthMethod;
--- a/ui/app/components/clients/line-chart.js
+++ b/ui/app/components/clients/line-chart.js
@@ -49,11 +49,11 @@ export default class LineChart extends Component {
  @action
  renderChart(element, args) {
    const dataset = args[0];
-    let upgradeMonth, currentVersion, previousVersion;
+    const upgradeData = [];
    if (args[1]) {
-      upgradeMonth = parseAPITimestamp(args[1].timestampInstalled, 'M/yy');
-      currentVersion = args[1].id;
-      previousVersion = args[1].previousVersion;
+      args[1].forEach((versionData) =>
+        upgradeData.push({ month: parseAPITimestamp(versionData.timestampInstalled, 'M/yy'), ...versionData })
+      );
    }
    const filteredData = dataset.filter((e) => Object.keys(e).includes(this.yKey)); // months with data will contain a 'clients' key (otherwise only a timestamp)
    const chartSvg = select(element);
@@ -90,6 +90,10 @@ export default class LineChart extends Component {

    chartSvg.selectAll('.domain').remove();

+    const findUpgradeData = (datum) => {
+      return upgradeData.find((upgrade) => upgrade[this.xKey] === datum[this.xKey]);
+    };
+
    // VERSION UPGRADE INDICATOR
    chartSvg
      .append('g')
@@ -99,7 +103,7 @@ export default class LineChart extends Component {
      .append('circle')
      .attr('class', 'upgrade-circle')
      .attr('fill', UPGRADE_WARNING)
-      .style('opacity', (d) => (d[this.xKey] === upgradeMonth ? '1' : '0'))
+      .style('opacity', (d) => (findUpgradeData(d) ? '1' : '0'))
      .attr('cy', (d) => `${100 - yScale(d[this.yKey])}%`)
      .attr('cx', (d) => xScale(d[this.xKey]))
      .attr('r', 10);
@@ -154,10 +158,14 @@ export default class LineChart extends Component {
      this.tooltipMonth = formatChartDate(data[this.xKey]);
      this.tooltipTotal = data[this.yKey] + ' total clients';
      this.tooltipNew = data?.new_clients[this.yKey] + ' new clients';
-      this.tooltipUpgradeText =
-        data[this.xKey] === upgradeMonth
-          ? `Vault was upgraded ${previousVersion ? 'from ' + previousVersion : ''} to ${currentVersion}`
-          : '';
+      this.tooltipUpgradeText = '';
+      let upgradeInfo = findUpgradeData(data);
+      if (upgradeInfo) {
+        let { id, previousVersion } = upgradeInfo;
+        this.tooltipUpgradeText = `Vault was upgraded 
+        ${previousVersion ? 'from ' + previousVersion : ''} to ${id}`;
+      }
+
      let node = hoverCircles.filter((plot) => plot[this.xKey] === data[this.xKey]).node();
      this.tooltipTarget = node;
    });
--- a/ui/app/templates/components/clients/current.hbs
+++ b/ui/app/templates/components/clients/current.hbs
@@ -54,18 +54,12 @@
        </ToolbarFilters>
      </Toolbar>
    </div>
-    {{! TODO CMB this warning should only show if an upgrade to 1.9 or 1.10 happened in current month }}
-    {{#if this.countsIncludeOlderData}}
+    {{#if this.upgradeDuringCurrentMonth}}
      <AlertBanner @type="warning" @title="Warning">
-        {{concat
-          "You upgraded to Vault "
-          this.latestUpgradeData.id
-          " on "
-          (date-format this.latestUpgradeData.timestampInstalled "MMMM d, yyyy.")
-        }}
-        How we count clients changed in 1.9, so please keep that in mind when looking at the data below, and you can
+        {{this.upgradeVersionAndDate}}
+        {{this.versionSpecificText}}
        <DocLink @path="/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts">
-          read more here.
+          Learn more here.
        </DocLink>
      </AlertBanner>
    {{/if}}
--- a/ui/app/templates/components/clients/history.hbs
+++ b/ui/app/templates/components/clients/history.hbs
@@ -102,26 +102,21 @@
          </ToolbarFilters>
        </Toolbar>
      </div>
-      {{#if (or this.countsIncludeOlderData this.responseRangeDiffMessage)}}
+
+      {{#if (or this.upgradeDuringActivity this.responseRangeDiffMessage)}}
        <AlertBanner @type="warning" @title="Warning">
-          <ul class={{if (and this.countsIncludeOlderData this.responseRangeDiffMessage) "bullet"}}>
+          <ul class={{if (and this.versionUpdateText this.responseRangeDiffMessage) "bullet"}}>
            {{#if this.responseRangeDiffMessage}}
              <li>{{this.responseRangeDiffMessage}}</li>
            {{/if}}
-            {{! TODO this warning should only show if data spans an upgrade to 1.9 or 1.10 }}
-            {{#if this.countsIncludeOlderData}}
+            {{#if this.upgradeDuringActivity}}
              <li>
-                {{concat
-                  "You upgraded to Vault "
-                  this.latestUpgradeData.id
-                  " on "
-                  (date-format this.latestUpgradeData.timestampInstalled "MMMM d, yyyy.")
-                }}
-                How we count clients changed in 1.9, so please keep that in mind when looking at the data below, and you can
+                {{this.upgradeVersionAndDate}}
+                {{this.versionSpecificText}}
                <DocLink
                  @path="/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
                >
-                  read more here.
+                  Learn more here.
                </DocLink>
              </li>
            {{/if}}
@@ -141,7 +136,7 @@
              @lineChartData={{this.byMonthTotalClients}}
              @barChartData={{this.byMonthNewClients}}
              @runningTotals={{this.totalUsageCounts}}
-              @upgradeData={{if this.countsIncludeOlderData this.latestUpgradeData}}
+              @upgradeData={{this.upgradeDuringActivity}}
              @timestamp={{this.responseTimestamp}}
            />
          {{/if}}
--- a/ui/mirage/handlers/clients.js
+++ b/ui/mirage/handlers/clients.js
@@ -654,11 +654,13 @@ const MOCK_MONTHLY_DATA = [
    },
  },
 ];
-const handleMockQuery = (queryStartTimestamp, monthlyData) => {
-  const queryDate = parseAPITimestamp(queryStartTimestamp);
+const handleMockQuery = (queryStartTimestamp, queryEndTimestamp, monthlyData) => {
+  const queryStartDate = parseAPITimestamp(queryStartTimestamp);
+  const queryEndDate = parseAPITimestamp(queryEndTimestamp);
  const startDateByMonth = parseAPITimestamp(monthlyData[monthlyData.length - 1].timestamp);
+  const endDateByMonth = parseAPITimestamp(monthlyData[0].timestamp);
  let transformedMonthlyArray = [...monthlyData];
-  if (isBefore(queryDate, startDateByMonth)) {
+  if (isBefore(queryStartDate, startDateByMonth)) {
    // no data for months before (upgraded to 1.10 during billing period)
    let i = 0;
    do {
@@ -666,19 +668,24 @@ const handleMockQuery = (queryStartTimestamp, monthlyData) => {
      let timestamp = formatRFC3339(sub(startDateByMonth, { months: i }));
      // TODO CMB update this when we confirm what combined data looks like
      transformedMonthlyArray.push({ timestamp });
-    } while (i < differenceInCalendarMonths(startDateByMonth, queryDate));
+    } while (i < differenceInCalendarMonths(startDateByMonth, queryStartDate));
  }
-  if (isAfter(queryDate, startDateByMonth)) {
-    let index = monthlyData.findIndex((e) => isSameMonth(queryDate, parseAPITimestamp(e.timestamp)));
+  if (isAfter(queryStartDate, startDateByMonth)) {
+    let index = monthlyData.findIndex((e) => isSameMonth(queryStartDate, parseAPITimestamp(e.timestamp)));
    transformedMonthlyArray = transformedMonthlyArray.slice(0, index + 1);
  }
+  if (isBefore(queryEndDate, endDateByMonth)) {
+    let index = monthlyData.findIndex((e) => isSameMonth(queryEndDate, parseAPITimestamp(e.timestamp)));
+    transformedMonthlyArray = transformedMonthlyArray.slice(index);
+  }
  return transformedMonthlyArray;
 };
+
 export default function (server) {
  // 1.10 API response
  server.get('sys/version-history', function () {
    return {
-      keys: ['1.10.0', '1.9.0', '1.9.1', '1.9.2'],
+      keys: ['1.9.0', '1.9.1', '1.9.2', '1.10.1'],
      key_info: {
        '1.9.0': {
          previous_version: null,
@@ -686,10 +693,14 @@ export default function (server) {
        },
        '1.9.1': {
          previous_version: '1.9.0',
+          timestamp_installed: '2021-08-03T10:23:16Z',
+        },
+        '1.9.2': {
+          previous_version: '1.9.1',
          timestamp_installed: '2021-09-03T10:23:16Z',
        },
-        '1.10.0': {
-          previous_version: '1.9.1',
+        '1.10.1': {
+          previous_version: '1.9.2',
          timestamp_installed: '2021-10-03T10:23:16Z',
        },
      },
@@ -861,7 +872,7 @@ export default function (server) {
          },
        ],
        end_time: end_time || formatISO(sub(new Date(), { months: 1 })),
-        months: handleMockQuery(start_time, MOCK_MONTHLY_DATA),
+        months: handleMockQuery(start_time, end_time, MOCK_MONTHLY_DATA),
        start_time: isBefore(new Date(start_time), new Date(counts_start)) ? counts_start : start_time,
        total: {
          distinct_entities: 37389,
--- a/ui/tests/acceptance/client-history-test.js
+++ b/ui/tests/acceptance/client-history-test.js
@@ -260,7 +260,7 @@ module('Acceptance | clients history tab', function (hooks) {
          keys: ['1.9.0'],
          key_info: {
            '1.9.0': {
-              previous_version: '1.8.3',
+              previous_version: null,
              timestamp_installed: formatRFC3339(addMonths(new Date(), -2)),
            },
          },
@@ -274,7 +274,7 @@ module('Acceptance | clients history tab', function (hooks) {
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history', 'clients/history URL is correct');
    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');
-    assert.dom('[data-test-alert-banner] .message-actions').containsText(`You upgraded to Vault 1.9.0`);
+    assert.dom('[data-test-alert-banner]').includesText('Vault was upgraded');
  });

  test('Shows empty if license start date is current month', async function (assert) {
--- a/ui/tests/integration/components/replication-dashboard-test.js
+++ b/ui/tests/integration/components/replication-dashboard-test.js
@@ -44,7 +44,7 @@ module('Integration | Component | replication-dashboard', function (hooks) {
    assert.dom('[data-test-table-rows]').exists();
    assert.dom('[data-test-selectable-card-container="secondary"]').exists();
    assert.dom('[data-test-replication-doc-link]').exists();
-    assert.dom('[data-test-alert-banner]').doesNotExist('no flash message is displayed on render');
+    assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
  });

  test('it updates the dashboard when the replication mode has changed', async function (assert) {