UI: Convert client count utils to typescript (#26262)

* cleanup namespaceArrayToObject method

* WIP typescript conversion

* WIP typescripted destructured block

* slowly making progress....

* WIP move all types to util type file, separate returns in formatByMonths

* namespaceArrayToObject is working?!?

* fix mirage handler not generating months when queries are after upgrade

* wow, the types are actually working omg

* add comments and update client-count-utils test

* delete old js file

* remove types from activity model

* remove comment

* reuse totalclients type to minimize places we add types

* commit file with type changes for git diff

* delete util file again

* address PR feedback and move type declarations to util file

* remove unused types

* update tests, use client helper in dashboard clients test

* remove typo

* make modifications with updated combined activity response from the backend

ui/app/components/clients/activity.ts

@@ -10,15 +10,16 @@ import Component from '@glimmer/component';
 import { isSameMonth, fromUnixTime } from 'date-fns';
 import { parseAPITimestamp } from 'core/utils/date-formatters';
 import { calculateAverage } from 'vault/utils/chart-helpers';
-import { filterVersionHistory } from 'core/utils/client-count-utils';
+import { filterVersionHistory, hasMountsKey, hasNamespacesKey } from 'core/utils/client-count-utils';
 
 import type ClientsActivityModel from 'vault/models/clients/activity';
-import type {
-  ClientActivityNewClients,
-  ClientActivityMonthly,
-  ClientActivityResourceByKey,
-} from 'vault/models/clients/activity';
 import type ClientsVersionHistoryModel from 'vault/models/clients/version-history';
+import type {
+  ByMonthNewClients,
+  MountNewClients,
+  NamespaceByKey,
+  NamespaceNewClients,
+} from 'core/utils/client-count-utils';
 
 interface Args {
   isSecretsSyncActivated?: boolean;
@@ -33,10 +34,8 @@ interface Args {
 export default class ClientsActivityComponent extends Component<Args> {
   average = (
     data:
-      | ClientActivityMonthly[]
-      | (ClientActivityResourceByKey | undefined)[]
-      | (ClientActivityNewClients | undefined)[]
-      | undefined,
+      | (ByMonthNewClients | NamespaceNewClients | MountNewClients | undefined)[]
+      | (NamespaceByKey | undefined)[],
     key: string
   ) => {
     return calculateAverage(data, key);
@@ -65,18 +64,18 @@ export default class ClientsActivityComponent extends Component<Args> {
       return activity.byMonth;
     }
     const namespaceData = activity.byMonth
-      .map((m) => m.namespaces_by_key[namespace as keyof typeof m.namespaces_by_key])
+      ?.map((m) => m.namespaces_by_key[namespace])
       .filter((d) => d !== undefined);
 
     if (!mountPath) {
-      return namespaceData.length === 0 ? undefined : namespaceData;
+      return namespaceData || [];
     }
 
-    const mountData = mountPath
-      ? namespaceData.map((namespace) => namespace?.mounts_by_key[mountPath]).filter((d) => d !== undefined)
-      : namespaceData;
+    const mountData = namespaceData
+      ?.map((namespace) => namespace?.mounts_by_key[mountPath])
+      .filter((d) => d !== undefined);
 
-    return mountData.length === 0 ? undefined : mountData;
+    return mountData || [];
   }
 
   get filteredActivityByNamespace() {
@@ -119,11 +118,13 @@ export default class ClientsActivityComponent extends Component<Args> {
     return filterVersionHistory(versionHistory, activity.startTime, activity.endTime);
   }
 
-  // (object) single month new client data with total counts + array of namespace breakdown
+  // (object) single month new client data with total counts and array of
+  // either namespaces or mounts
   get newClientCounts() {
-    if (this.isDateRange || !this.byMonthActivityData) {
+    if (this.isDateRange || this.byMonthActivityData.length === 0) {
       return null;
     }
+
     return this.byMonthActivityData[0]?.new_clients;
   }
 
@@ -140,13 +141,14 @@ export default class ClientsActivityComponent extends Component<Args> {
   // new client data for horizontal bar chart
   get newClientAttribution() {
     // new client attribution only available in a single, historical month (not a date range or current month)
-    if (this.isDateRange || this.isCurrentMonth) return null;
+    if (this.isDateRange || this.isCurrentMonth || !this.newClientCounts) return null;
 
-    if (this.args.namespace) {
-      return this.newClientCounts?.mounts || null;
-    } else {
-      return this.newClientCounts?.namespaces || null;
-    }
+    const newCounts = this.newClientCounts;
+    if (this.args.namespace && hasMountsKey(newCounts)) return newCounts?.mounts;
+
+    if (hasNamespacesKey(newCounts)) return newCounts?.namespaces;
+
+    return null;
   }
 
   get hasAttributionData() {

ui/app/components/clients/charts/line.ts

@@ -9,8 +9,9 @@ import { parseAPITimestamp } from 'core/utils/date-formatters';
 import { format, isValid } from 'date-fns';
 import { debug } from '@ember/debug';
 
-import type { Count, MonthlyChartData, Timestamp } from 'vault/vault/charts/client-counts';
 import type ClientsVersionHistoryModel from 'vault/models/clients/version-history';
+import type { MonthlyChartData, Timestamp } from 'vault/vault/charts/client-counts';
+import type { TotalClients } from 'core/utils/client-count-utils';
 
 interface Args {
   dataset: MonthlyChartData[];
@@ -67,7 +68,7 @@ export default class LineChart extends Component<Args> {
         const upgradeMessage = this.getUpgradeMessage(datum);
         return {
           x: timestamp,
-          y: (datum[this.yKey as keyof Count] as number) ?? null,
+          y: (datum[this.yKey as keyof TotalClients] as number) ?? null,
           new: this.getNewClients(datum),
           tooltipUpgrade: upgradeMessage,
           month: datum.month,
@@ -123,7 +124,7 @@ export default class LineChart extends Component<Args> {
   }
   getNewClients(datum: MonthlyChartData) {
     if (!datum?.new_clients) return 0;
-    return (datum?.new_clients[this.yKey as keyof Count] as number) || 0;
+    return (datum?.new_clients[this.yKey as keyof TotalClients] as number) || 0;
   }
 
   hasValue = (count: number | null) => {

ui/app/components/clients/charts/vertical-bar-basic.ts

@@ -9,7 +9,8 @@ import { BAR_WIDTH, formatNumbers } from 'vault/utils/chart-helpers';
 import { formatNumber } from 'core/helpers/format-number';
 import { parseAPITimestamp } from 'core/utils/date-formatters';
 
-import type { Count, MonthlyChartData } from 'vault/vault/charts/client-counts';
+import type { MonthlyChartData } from 'vault/vault/charts/client-counts';
+import type { TotalClients } from 'core/utils/client-count-utils';
 
 interface Args {
   data: MonthlyChartData[];
@@ -51,7 +52,7 @@ export default class VerticalBarBasic extends Component<Args> {
   get chartData() {
     return this.args.data.map((d): ChartData => {
       const xValue = d.timestamp as string;
-      const yValue = (d[this.args.dataKey as keyof Count] as number) ?? null;
+      const yValue = (d[this.args.dataKey as keyof TotalClients] as number) ?? null;
       return {
         x: parseAPITimestamp(xValue, 'M/yy') as string,
         y: yValue,

ui/app/components/clients/page/counts.ts

@@ -162,7 +162,7 @@ export default class ClientsCountsPageComponent extends Component<Args> {
   }
 
   @action
-  onDateChange(dateObject: { dateType: string; monthIdx: string; year: string }) {
+  onDateChange(dateObject: { dateType: string; monthIdx: number; year: number }) {
     const { dateType, monthIdx, year } = dateObject;
     const { config } = this.args;
     const currentTimestamp = getUnixTime(timestamp.now());

ui/app/components/clients/page/token.ts

@@ -6,10 +6,11 @@
 import ActivityComponent from '../activity';
 
 import type {
-  ClientActivityNewClients,
-  ClientActivityMonthly,
-  ClientActivityResourceByKey,
-} from 'vault/vault/models/clients/activity';
+  ByMonthNewClients,
+  MountNewClients,
+  NamespaceByKey,
+  NamespaceNewClients,
+} from 'core/utils/client-count-utils';
 
 export default class ClientsTokenPageComponent extends ActivityComponent {
   legend = [
@@ -19,10 +20,8 @@ export default class ClientsTokenPageComponent extends ActivityComponent {
 
   calculateClientAverages(
     dataset:
-      | ClientActivityMonthly[]
-      | (ClientActivityResourceByKey | undefined)[]
-      | (ClientActivityNewClients | undefined)[]
-      | undefined
+      | (NamespaceByKey | undefined)[]
+      | (ByMonthNewClients | NamespaceNewClients | MountNewClients | undefined)[]
   ) {
     return ['entity_clients', 'non_entity_clients'].reduce((count, key) => {
       const average = this.average(dataset, key);