hashicorp · hellobontempo · May 2, 2024 · May 1, 2024 · May 1, 2024 · May 1, 2024
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui (enterprise): Update dashboard to make activity log query using the same start time as the metrics overview
+```
@@ -15,7 +15,7 @@
       <StatText
         @label="Total clients"
         @subText="The total number of entity and non-entity clients for this date range."
-        @value={{this.totalUsageCounts.clients}}
+        @value={{this.tokenStats.total}}
         @tooltipText="This number is the total for the queried date range. The chart displays a monthly breakdown of total clients per month."
         @size="l"
       />
@@ -100,21 +100,21 @@
     <StatText
       class="column"
       @label="Total clients"
-      @value={{this.tokenUsageCounts.clients}}
+      @value={{this.tokenStats.total}}
       @size="l"
       @subText="The number of clients which interacted with Vault during this month. This is Vault’s primary billing metric."
     />
     <StatText
       class="column"
       @label="Entity"
-      @value={{this.tokenUsageCounts.entity_clients}}
+      @value={{this.tokenStats.entity_clients}}
       @size="l"
       @subText="Representations of a particular user, client, or application that created a token via login."
     />
     <StatText
       class="column"
       @label="Non-entity"
-      @value={{this.tokenUsageCounts.non_entity_clients}}
+      @value={{this.tokenStats.non_entity_clients}}
       @size="l"
       @subText="Clients created with a shared set of permissions, but not associated with an entity."
     />

@@ -37,11 +37,11 @@ export default class ClientsTokenPageComponent extends ActivityComponent {
     return this.calculateClientAverages(this.byMonthNewClients);
   }
 
-  get tokenUsageCounts() {
+  get tokenStats() {
     if (this.totalUsageCounts) {
       const { entity_clients, non_entity_clients } = this.totalUsageCounts;
       return {
-        clients: entity_clients + non_entity_clients,
+        total: entity_clients + non_entity_clients,
         entity_clients,
         non_entity_clients,
       };

@@ -23,23 +23,8 @@
       <VaultLogoSpinner />
     {{else}}
       <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
-        <StatText
-          @label="Total"
-          @value={{this.activityData.total.clients}}
-          @size="l"
-          @subText="The number of clients in this billing period ({{date-format
-            this.licenseStartTime
-            'MMM yyyy'
-          }} - {{date-format this.updatedAt 'MMM yyyy'}})."
-          data-test-stat-text="total-clients"
-        />
-        <StatText
-          @label="New"
-          @value={{this.currentMonthActivityTotalCount}}
-          @size="l"
-          @subText="The number of clients new to Vault in the current month."
-          data-test-stat-text="new-clients"
-        />
+        <StatText @label="Total" @value={{this.activityData.total.clients}} @size="l" @subText={{this.statSubText.total}} />
+        <StatText @label="New" @value={{this.currentMonthActivityTotalCount}} @size="l" @subText={{this.statSubText.new}} />
       </div>
 
       <div class="has-top-margin-l is-flex-center">
@@ -55,7 +40,7 @@
         />
         <small class="has-left-margin-xs has-text-grey">
           Updated
-          {{date-format this.updatedAt "MMM dd, yyyy hh:mm:ss"}}
+          {{date-format this.updatedAt "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
         </small>
       </div>
     {{/if}}

@@ -4,50 +4,66 @@
  */
 
 import Component from '@glimmer/component';
-import getStorage from 'vault/lib/token-storage';
 import timestamp from 'core/utils/timestamp';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
+import { setStartTimeQuery } from 'core/utils/client-count-utils';
+import { dateFormat } from 'core/helpers/date-format';
 
 /**
  * @module DashboardClientCountCard
  * DashboardClientCountCard component are used to display total and new client count information
  *
  * @example
- * ```js
- * <Dashboard::ClientCountCard @license={{@model.license}}  />
- * ```
- *  @param {object} license - license object passed from the parent
+ *
+ * <Dashboard::ClientCountCard @isEnterprise={{@version.isEnterprise}} />
+ *
+ * @param {boolean} isEnterprise - used for setting the start time for the activity log query
  */
 
 export default class DashboardClientCountCard extends Component {
   @service store;
 
+  clientConfig = null;
+  licenseStartTime = null;
   @tracked activityData = null;
-  @tracked clientConfig = null;
   @tracked updatedAt = timestamp.now().toISOString();
 
   constructor() {
     super(...arguments);
     this.fetchClientActivity.perform();
-    this.clientConfig = this.store.queryRecord('clients/config', {}).catch(() => {});
   }
 
   get currentMonthActivityTotalCount() {
     return this.activityData?.byMonth?.lastObject?.new_clients.clients;
   }
 
-  get licenseStartTime() {
-    return this.args.license.startTime || getStorage().getItem('vault:ui-inputted-start-date') || null;
+  get statSubText() {
+    const format = (date) => dateFormat([date, 'MMM yyyy'], {});
+    return this.licenseStartTime
+      ? {
+          total: `The number of clients in this billing period (${format(this.licenseStartTime)} - ${format(
+            this.updatedAt
+          )}).`,
+          new: 'The number of clients new to Vault in the current month.',
+        }
+      : { total: 'No total client data available.', new: 'No new client data available.' };
   }
 
   @task
   @waitFor
   *fetchClientActivity(e) {
     if (e) e.preventDefault();
     this.updatedAt = timestamp.now().toISOString();
+
+    if (!this.clientConfig) {
+      // set config and license start time when component initializes
+      this.clientConfig = yield this.store.queryRecord('clients/config', {}).catch(() => {});
+      this.licenseStartTime = setStartTimeQuery(this.args.isEnterprise, this.clientConfig);
+    }
+
     // only make the network request if we have a start_time
     if (!this.licenseStartTime) return {};
     try {

@@ -7,11 +7,9 @@
 
 <div class="has-bottom-margin-xl">
   <div class="is-flex-row gap-24">
-    {{#if (and @version.isEnterprise (or @license @isRootNamespace))}}
+    {{#if (and @version.isEnterprise @isRootNamespace)}}
       <div class="is-flex-column is-flex-1 gap-24">
-        {{#if @license}}
-          <Dashboard::ClientCountCard @license={{@license}} />
-        {{/if}}
+        <Dashboard::ClientCountCard @isEnterprise={{@version.isEnterprise}} />
         {{#if
           (and @isRootNamespace (has-permission "status" routeParams="replication") (not (is-empty-value @replication)))
         }}

@@ -14,9 +14,10 @@ import type VersionService from 'vault/services/version';
 
 import type { ModelFrom } from 'vault/vault/route';
 import type ClientsRoute from '../clients';
-import type ClientsConfigModel from 'vault/models/clients/config';
 import type ClientsActivityModel from 'vault/models/clients/activity';
 import type ClientsCountsController from 'vault/controllers/vault/cluster/clients/counts';
+import { setStartTimeQuery } from 'core/utils/client-count-utils';
+
 export interface ClientsCountsRouteParams {
   start_time?: string | number | undefined;
   end_time?: string | number | undefined;
@@ -86,10 +87,7 @@ export default class ClientsCountsRoute extends Route {
   async model(params: ClientsCountsRouteParams) {
     const { config, versionHistory } = this.modelFor('vault.cluster.clients') as ModelFrom<ClientsRoute>;
     // only enterprise versions will have a relevant billing start date, if null users must select initial start time
-    let startTime = null;
-    if (this.version.isEnterprise && this._hasConfig(config)) {
-      startTime = getUnixTime(config.billingStartTimestamp);
-    }
+    const startTime = setStartTimeQuery(this.version.isEnterprise, config);
 
     const startTimestamp = Number(params.start_time) || startTime;
     const endTimestamp = Number(params.end_time) || getUnixTime(timestamp.now());
@@ -118,8 +116,4 @@ export default class ClientsCountsRoute extends Route {
       });
     }
   }
-
-  _hasConfig(model: ClientsConfigModel | object): model is ClientsConfigModel {
-    return 'billingStartTimestamp' in model;
-  }
 }
@@ -40,7 +40,6 @@ export default class VaultClusterDashboardRoute extends Route.extend(ClusterRout
     return hash({
       replication,
       secretsEngines: this.store.query('secret-engine', {}),
-      license: this.store.queryRecord('license', {}).catch(() => null),
       isRootNamespace: this.namespace.inRootNamespace && !hasChroot,
       version: this.version,
       vaultConfiguration: hasChroot ? null : this.getVaultConfiguration(),

@@ -6,7 +6,6 @@
 <Dashboard::Overview
   @replication={{this.model.replication}}
   @secretsEngines={{this.model.secretsEngines}}
-  @license={{this.model.license}}
   @isRootNamespace={{this.model.isRootNamespace}}
   @version={{this.model.version}}
   @vaultConfiguration={{this.model.vaultConfiguration}}

@@ -6,6 +6,7 @@
 import { parseAPITimestamp } from 'core/utils/date-formatters';
 import { compareAsc, getUnixTime, isWithinInterval } from 'date-fns';
 
+import type ClientsConfigModel from 'vault/models/clients/config';
 import type ClientsVersionHistoryModel from 'vault/vault/models/clients/version-history';
 
 /*
@@ -59,6 +60,18 @@ export const filterVersionHistory = (
   return [];
 };
 
+export const setStartTimeQuery = (
+  isEnterprise: boolean,
+  config: ClientsConfigModel | Record<string, never>
+) => {
+  // CE versions have no license and so the start time defaults to "0001-01-01T00:00:00Z"
+  if (isEnterprise && _hasConfig(config)) {
+    return getUnixTime(config.billingStartTimestamp);
+  }
+  return null;
+};
+
+// METHODS FOR SERIALIZING ACTIVITY RESPONSE
 export const formatDateObject = (dateObj: { monthIdx: number; year: number }, isEnd: boolean) => {
   const { year, monthIdx } = dateObj;
   // day=0 for Date.UTC() returns the last day of the month before
@@ -188,6 +201,11 @@ export const namespaceArrayToObject = (
 };
 
 // type guards for conditionals
+function _hasConfig(model: ClientsConfigModel | object): model is ClientsConfigModel {
+  if (!model) return false;
+  return 'billingStartTimestamp' in model;
+}
+
 export function hasMountsKey(
   obj: ByMonthNewClients | NamespaceNewClients | MountNewClients
 ): obj is NamespaceNewClients {
@@ -201,7 +219,6 @@ export function hasNamespacesKey(
 }
 
 // TYPES RETURNED BY UTILS (serialized)
-
 export interface TotalClients {
   clients: number;
   entity_clients: number;

@@ -404,16 +404,14 @@ module('Acceptance | landing page dashboard', function (hooks) {
       assert.dom(DASHBOARD.cardName('client-count')).exists();
       const response = await this.store.peekRecord('clients/activity', 'some-activity-id');
       assert.dom('[data-test-client-count-title]').hasText('Client count');
-      assert.dom('[data-test-stat-text="total-clients"] .stat-label').hasText('Total');
+      assert.dom('[data-test-stat-text="Total"] .stat-label').hasText('Total');
+      assert.dom('[data-test-stat-text="Total"] .stat-value').hasText(formatNumber([response.total.clients]));
+      assert.dom('[data-test-stat-text="New"] .stat-label').hasText('New');
       assert
-        .dom('[data-test-stat-text="total-clients"] .stat-value')
-        .hasText(formatNumber([response.total.clients]));
-      assert.dom('[data-test-stat-text="new-clients"] .stat-label').hasText('New');
-      assert
-        .dom('[data-test-stat-text="new-clients"] .stat-text')
+        .dom('[data-test-stat-text="New"] .stat-text')
         .hasText('The number of clients new to Vault in the current month.');
       assert
-        .dom('[data-test-stat-text="new-clients"] .stat-value')
+        .dom('[data-test-stat-text="New"] .stat-value')
         .hasText(formatNumber([response.byMonth.lastObject.new_clients.clients]));
     });
   });

@@ -69,21 +69,25 @@ module('Integration | Component | clients | Clients::Page::Token', function (hoo
 
   test('it should render monthly total chart', async function (assert) {
     const count = this.activity.byMonth.length;
-    assert.expect(count + 7);
+    const { entity_clients, non_entity_clients } = this.activity.total;
+    assert.expect(count + 8);
     const getAverage = (data) => {
       const average = ['entity_clients', 'non_entity_clients'].reduce((count, key) => {
         return (count += calculateAverage(data, key) || 0);
       }, 0);
       return formatNumber([average]);
     };
-    const expectedTotal = getAverage(this.activity.byMonth);
+    const expectedAvg = getAverage(this.activity.byMonth);
+    const expectedTotal = formatNumber([entity_clients + non_entity_clients]);
     const chart = CHARTS.container('Entity/Non-entity clients usage');
-
     await this.renderComponent();
 
     assert
-      .dom(CLIENT_COUNT.statTextValue('Average total clients per month'))
+      .dom(CLIENT_COUNT.statTextValue('Total clients'))
       .hasText(expectedTotal, 'renders correct total clients');
+    assert
+      .dom(CLIENT_COUNT.statTextValue('Average total clients per month'))
+      .hasText(expectedAvg, 'renders correct average clients');
 
     // assert bar chart is correct
     assert.dom(`${chart} ${CHARTS.xAxis}`).hasText('7/23 8/23 9/23 10/23 11/23 12/23 1/24');