extend activity component from counts page

hashicorp · Jan 26, 2024 · 1d0e85c · 1d0e85c
1 parent e869b9e
commit 1d0e85c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 49 deletions.
diff --git a/ui/app/components/clients/activity.ts b/ui/app/components/clients/activity.ts
@@ -12,21 +12,24 @@ import { parseAPITimestamp } from 'core/utils/date-formatters';
 import { calculateAverage } from 'vault/utils/chart-helpers';
 
 import type ClientsActivityModel from 'vault/models/clients/activity';
+import ClientsConfigModel from 'vault/models/clients/config';
+import type ClientsVersionHistoryModel from 'vault/models/clients/version-history';
 import type {
   ClientActivityNewClients,
   ClientActivityMonthly,
   ClientActivityResourceByKey,
 } from 'vault/models/clients/activity';
-import type ClientsVersionHistoryModel from 'vault/models/clients/version-history';
 
 interface Args {
   activity: ClientsActivityModel;
+  config: ClientsConfigModel;
   versionHistory: ClientsVersionHistoryModel[];
   startTimestamp: number;
   endTimestamp: number;
   currentTimestamp: number;
   namespace: string;
   mountPath: string;
+  onFilterChange: CallableFunction; // only for CountsPageComponent
 }
 
 export default class ClientsActivityComponent extends Component<Args> {
@@ -42,11 +45,11 @@ export default class ClientsActivityComponent extends Component<Args> {
   };
 
   get startTimeISO() {
-    return fromUnixTime(this.args.startTimestamp).toISOString();
+    return this.args.startTimestamp ? fromUnixTime(this.args.startTimestamp).toISOString() : null;
   }
 
   get endTimeISO() {
-    return fromUnixTime(this.args.endTimestamp).toISOString();
+    return this.args.endTimestamp ? fromUnixTime(this.args.endTimestamp).toISOString() : null;
   }
 
   get byMonthActivityData() {

diff --git a/ui/app/components/clients/page/counts.hbs b/ui/app/components/clients/page/counts.hbs
@@ -63,8 +63,8 @@
         <Toolbar data-test-clients-filter-bar>
           <ToolbarFilters>
             <CalendarWidget
-              @startTimestamp={{this.startDate}}
-              @endTimestamp={{this.endDate}}
+              @startTimestamp={{this.startTimeISO}}
+              @endTimestamp={{this.endTimeISO}}
               @selectMonth={{this.onDateChange}}
             />
             {{#if (or @namespace this.namespaces)}}
@@ -101,7 +101,7 @@
       </div>
     {{/if}}
 
-    {{#if this.filteredActivity}}
+    {{#if this.totalUsageCounts}}
       {{#if this.startTimeDiscrepancy}}
         <Hds::Alert data-test-counts-start-discrepancy @type="inline" @color="warning" class="has-bottom-margin-s" as |A|>
           <A.Title>Warning</A.Title>

diff --git a/ui/app/components/clients/page/counts.ts b/ui/app/components/clients/page/counts.ts
@@ -3,56 +3,35 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@glimmer/component';
+import ActivityComponent from '../activity';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
-import { fromUnixTime, getUnixTime, isSameMonth, isAfter } from 'date-fns';
+import { getUnixTime, isSameMonth, isAfter } from 'date-fns';
 import { parseAPITimestamp } from 'core/utils/date-formatters';
 import { formatDateObject } from 'core/utils/client-count-utils';
 
 import type VersionService from 'vault/services/version';
-import type ClientsActivityModel from 'vault/models/clients/activity';
-import type ClientsConfigModel from 'vault/models/clients/config';
 import type StoreService from 'vault/services/store';
 
-interface Args {
-  activity: ClientsActivityModel;
-  config: ClientsConfigModel;
-  startTimestamp: number;
-  endTimestamp: number;
-  currentTimestamp: number;
-  namespace: string;
-  mountPath: string;
-  onFilterChange: CallableFunction;
-}
-
-export default class ClientsCountsPageComponent extends Component<Args> {
+export default class ClientsCountsPageComponent extends ActivityComponent {
   @service declare readonly version: VersionService;
   @service declare readonly store: StoreService;
 
-  get startDate() {
-    return this.args.startTimestamp ? fromUnixTime(this.args.startTimestamp).toISOString() : null;
-  }
-
-  get endDate() {
-    return this.args.endTimestamp ? fromUnixTime(this.args.endTimestamp).toISOString() : null;
-  }
-
   get formattedStartDate() {
-    return this.startDate ? parseAPITimestamp(this.startDate, 'MMMM yyyy') : null;
+    return this.startTimeISO ? parseAPITimestamp(this.startTimeISO, 'MMMM yyyy') : null;
   }
 
   // returns text for empty state message if noActivityData
   get dateRangeMessage() {
-    if (this.startDate && this.endDate) {
+    if (this.startTimeISO && this.endTimeISO) {
       const endMonth = isSameMonth(
-        parseAPITimestamp(this.startDate) as Date,
-        parseAPITimestamp(this.endDate) as Date
+        parseAPITimestamp(this.startTimeISO) as Date,
+        parseAPITimestamp(this.endTimeISO) as Date
       )
         ? ''
-        : `to ${parseAPITimestamp(this.endDate, 'MMMM yyyy')}`;
+        : `to ${parseAPITimestamp(this.endTimeISO, 'MMMM yyyy')}`;
       // completes the message 'No data received from { dateRangeMessage }'
-      return `from ${parseAPITimestamp(this.startDate, 'MMMM yyyy')} ${endMonth}`;
+      return `from ${parseAPITimestamp(this.startTimeISO, 'MMMM yyyy')} ${endMonth}`;
     }
     return null;
   }
@@ -100,9 +79,9 @@ export default class ClientsCountsPageComponent extends Component<Args> {
     // show banner if startTime returned from activity log (response) is after the queried startTime
     const { activity, config } = this.args;
     const activityStartDateObject = parseAPITimestamp(activity.startTime) as Date;
-    const queryStartDateObject = parseAPITimestamp(this.startDate) as Date;
+    const queryStartDateObject = parseAPITimestamp(this.startTimeISO) as Date;
     const isEnterprise =
-      this.startDate === config.billingStartTimestamp?.toISOString() && this.version.isEnterprise;
+      this.startTimeISO === config.billingStartTimestamp?.toISOString() && this.version.isEnterprise;
     const message = isEnterprise ? 'Your license start date is' : 'You requested data from';
 
     if (
@@ -122,17 +101,6 @@ export default class ClientsCountsPageComponent extends Component<Args> {
     return namespace ? activity.byNamespace.find((ns) => ns.label === namespace) : null;
   }
 
-  get filteredActivity() {
-    // return activity counts based on selected namespace and auth mount values
-    const { namespace, mountPath, activity } = this.args;
-    if (namespace) {
-      return mountPath
-        ? this.activityForNamespace?.mounts.find((mount) => mount.label === mountPath)
-        : this.activityForNamespace;
-    }
-    return activity.total;
-  }
-
   @action
   onDateChange(dateObject: { dateType: string; monthIdx: string; year: string }) {
     const { dateType, monthIdx, year } = dateObject;