UI: Use Client Count export API

changelog/27455.txt

@@ -0,0 +1,3 @@
+```release-note:change
+ui: Uses the internal/counters/activity/export endpoint for client count export data.
+```

ui/app/adapters/clients/activity.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+import queryParamString from 'vault/utils/query-param-string';
 import ApplicationAdapter from '../application';
 import { formatDateObject } from 'core/utils/client-count-utils';
 
@@ -33,4 +34,20 @@ export default class ActivityAdapter extends ApplicationAdapter {
       });
     }
   }
+
+  async exportData(query) {
+    const url = `${this.buildURL()}/internal/counters/activity/export${queryParamString({
+      format: 'csv',
+      start_time: query?.start_time ?? undefined,
+      end_time: query?.end_time ?? undefined,
+    })}`;
+    try {
+      // This endpoint can only be called from root namespace
+      const resp = await this.rawRequest(url, 'GET', { namespace: undefined });
+      return resp.blob();
+    } catch (e) {
+      const { errors } = await e.json();
+      throw new Error(errors?.join('. '));
+    }
+  }
 }

ui/app/components/clients/attribution.hbs

@@ -17,7 +17,7 @@
       {{#if this.hasCsvData}}
         <Hds::Button
           data-test-attribution-export-button
-          @text="Export attribution data"
+          @text="Export activity data"
           @color="secondary"
           {{on "click" (fn (mut this.showCSVDownloadModal) true)}}
         />
@@ -83,25 +83,27 @@
 
 {{! MODAL FOR CSV DOWNLOAD }}
 {{#if this.showCSVDownloadModal}}
-  <Hds::Modal id="attribution-csv-download-modal" @onClose={{fn (mut this.showCSVDownloadModal) false}} as |M|>
+  <Hds::Modal id="attribution-csv-download-modal" @onClose={{this.resetModal}} as |M|>
     <M.Header @icon="info" data-test-export-modal-title>
-      Export attribution data
+      Export activity data
     </M.Header>
     <M.Body>
       <p class="has-bottom-margin-s">
-        {{this.modalExportText}}
-      </p>
-      <p class="has-bottom-margin-s">
-        The
-        <code>mount_path</code>
-        for entity/non-entity clients is the corresponding authentication method path
-        {{if @isSecretsSyncActivated "and for secrets sync clients is the KV v2 engine path"}}.
+        This file will include an export of the clients that had activity within the date range below. See the
+        <DocLink @path="/vault/api-docs/system/internal-counters#activity-export">activity export documentation</DocLink>
+        for more details.
       </p>
       <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p>
       <p class="has-bottom-margin-s" data-test-export-date-range>
         {{this.formattedStartDate}}
         {{if this.formattedEndDate "-"}}
         {{this.formattedEndDate}}</p>
+      {{#if this.downloadError}}
+        <Hds::Alert @type="inline" @color="critical" as |A|>
+          <A.Title>CSV export failed</A.Title>
+          <A.Description data-test-export-error>{{this.downloadError}}</A.Description>
+        </Hds::Alert>
+      {{/if}}
     </M.Body>
     <M.Footer as |F|>
       <Hds::ButtonSet>

ui/app/components/clients/attribution.js

@@ -44,7 +44,9 @@ import { format, isSameMonth } from 'date-fns';
 
 export default class Attribution extends Component {
   @service download;
+  @service store;
   @tracked showCSVDownloadModal = false;
+  @tracked downloadError = '';
 
   get attributionLegend() {
     const attributionLegend = [
@@ -130,99 +132,13 @@ export default class Attribution extends Component {
     }
   }
 
-  destructureCountsToArray(object) {
-    // destructure the namespace object  {label: 'some-namespace', entity_clients: 171, non_entity_clients: 20, acme_clients: 6, secret_syncs: 10, clients: 207}
-    // to get integers for CSV file
-    const { clients, entity_clients, non_entity_clients, acme_clients, secret_syncs } = object;
-    const { isSecretsSyncActivated } = this.args;
-
-    return [
-      clients,
-      entity_clients,
-      non_entity_clients,
-      acme_clients,
-      ...(isSecretsSyncActivated ? [secret_syncs] : []),
-    ];
-  }
-
-  constructCsvRow(namespaceColumn, mountColumn = null, totalColumns, newColumns = null) {
-    // if namespaceColumn is a string, then we're at mount level attribution, otherwise it is an object
-    // if constructing a namespace row, mountColumn=null so the column is blank, otherwise it is an object
-    const otherColumns = newColumns ? [...totalColumns, ...newColumns] : [...totalColumns];
-    return [
-      `${typeof namespaceColumn === 'string' ? namespaceColumn : namespaceColumn.label}`,
-      `${mountColumn ? mountColumn.label : '*'}`,
-      ...otherColumns,
-    ];
-  }
-
-  generateCsvData() {
-    const totalAttribution = this.args.totalClientAttribution;
-    const newAttribution = this.barChartNewClients ? this.args.newClientAttribution : null;
-    const { isSecretsSyncActivated } = this.args;
-    const csvData = [];
-    // added to clarify that the row of namespace totals without an auth method (blank) are not additional clients
-    // but indicate the total clients for that ns, including its auth methods
-    const upgrade = this.args.upgradesDuringActivity?.length
-      ? `\n **data contains an upgrade (mount summation may not equal namespace totals)`
-      : '';
-    const descriptionOfBlanks = this.isSingleNamespace
-      ? ''
-      : `\n *namespace totals, inclusive of mount clients${upgrade}`;
-    // client type order here should match array order returned by destructureCountsToArray
-    let csvHeader = [
-      'Namespace path',
-      `"Mount path${descriptionOfBlanks}"`, // double quotes necessary so description stays inside this cell
-      'Total clients',
-      'Entity clients',
-      'Non-entity clients',
-      'ACME clients',
-      ...(isSecretsSyncActivated ? ['Secrets sync clients'] : []),
-    ];
-
-    if (newAttribution) {
-      csvHeader = [
-        ...csvHeader,
-        'Total new clients',
-        'New entity clients',
-        'New non-entity clients',
-        'New ACME clients',
-        ...(isSecretsSyncActivated ? 'New secrets sync clients' : []),
-      ];
-    }
-
-    totalAttribution.forEach((totalClientsObject) => {
-      const namespace = this.isSingleNamespace ? this.args.selectedNamespace : totalClientsObject;
-      const mount = this.isSingleNamespace ? totalClientsObject : null;
-
-      // find new client data for namespace/mount object we're iterating over
-      const newClientsObject = newAttribution
-        ? newAttribution.find((d) => d.label === totalClientsObject.label)
-        : null;
-
-      const totalClients = this.destructureCountsToArray(totalClientsObject);
-      const newClients = newClientsObject ? this.destructureCountsToArray(newClientsObject) : null;
-
-      csvData.push(this.constructCsvRow(namespace, mount, totalClients, newClients));
-      // constructCsvRow returns an array that corresponds to a row in the csv file:
-      // ['ns label', 'mount label', total client #, entity #, non-entity #, acme #, secrets sync #, ...new client #'s]
-
-      // only iterate through mounts if NOT viewing a single namespace
-      if (!this.isSingleNamespace && namespace.mounts) {
-        namespace.mounts.forEach((mount) => {
-          const newMountData = newAttribution
-            ? newClientsObject?.mounts.find((m) => m.label === mount.label)
-            : null;
-          const mountTotalClients = this.destructureCountsToArray(mount);
-          const mountNewClients = newMountData ? this.destructureCountsToArray(newMountData) : null;
-          csvData.push(this.constructCsvRow(namespace, mount, mountTotalClients, mountNewClients));
-        });
-      }
+  async generateCsvData() {
+    const adapter = this.store.adapterFor('clients/activity');
+    const { startTimestamp, endTimestamp } = this.args;
+    return adapter.exportData({
+      start_time: startTimestamp,
+      end_time: endTimestamp,
     });
-
-    csvData.unshift(csvHeader);
-    // make each nested array a comma separated string, join each array "row" in csvData with line break (\n)
-    return csvData.map((d) => d.join()).join('\n');
   }
 
   get formattedCsvFileName() {
@@ -233,17 +149,19 @@ export default class Attribution extends Component {
       : `clients_by_namespace${csvDateRange}`;
   }
 
-  get modalExportText() {
-    const { isSecretsSyncActivated } = this.args;
-    return `This export will include the namespace path, mount path and associated total entity, non-entity${
-      isSecretsSyncActivated ? ', ACME and secrets sync clients' : ' and ACME clients'
-    } for the ${this.formattedEndDate ? 'date range' : 'month'} below.`;
+  @action
+  async exportChartData(filename) {
+    try {
+      const contents = await this.generateCsvData();
+      this.download.csv(filename, contents);
+      this.showCSVDownloadModal = false;
+    } catch (e) {
+      this.downloadError = e.message;
+    }
   }
 
-  @action
-  exportChartData(filename) {
-    const contents = this.generateCsvData();
-    this.download.csv(filename, contents);
+  @action resetModal() {
     this.showCSVDownloadModal = false;
+    this.downloadError = '';
   }
 }

ui/app/utils/query-param-string.js

@@ -0,0 +1,18 @@
+/**
+ * queryParamString converts an object to a query param string with URL encoded keys and values.
+ * It does not include values that are falsey.
+ * @param {object} queryObject with key-value pairs of desired URL params
+ * @returns string like ?key=val1&key2=val2
+ */
+export default function queryParamString(queryObject) {
+  if (typeof queryObject !== 'object') return '';
+  return Object.keys(queryObject).reduce((prev, key) => {
+    const value = queryObject[key];
+    if (!value) return prev;
+    const keyval = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    if (prev === '?') {
+      return `${prev}${keyval}`;
+    }
+    return `${prev}&${keyval}`;
+  }, '?');
+}

ui/tests/acceptance/oidc-provider-test.js

@@ -15,6 +15,7 @@ import enablePage from 'vault/tests/pages/settings/auth/enable';
 import { visit, settled, currentURL, waitFor, currentRouteName } from '@ember/test-helpers';
 import { clearRecord } from 'vault/tests/helpers/oidc-config';
 import { runCmd } from 'vault/tests/helpers/commands';
+import queryParamString from 'vault/utils/query-param-string';
 
 const authFormComponent = create(authForm);
 
@@ -82,18 +83,13 @@ const getAuthzUrl = (providerName, redirect, clientId, params) => {
   const queryParams = {
     client_id: clientId,
     nonce: 'abc123',
-    redirect_uri: encodeURIComponent(redirect),
+    redirect_uri: redirect,
     response_type: 'code',
     scope: 'openid',
     state: 'foobar',
     ...params,
   };
-  const queryString = Object.keys(queryParams).reduce((prev, key, idx) => {
-    if (idx === 0) {
-      return `${prev}${key}=${queryParams[key]}`;
-    }
-    return `${prev}&${key}=${queryParams[key]}`;
-  }, '?');
+  const queryString = queryParamString(queryParams);
   return `/vault/identity/oidc/provider/${providerName}/authorize${queryString}`;
 };