mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-24 16:11:08 +02:00
cdbb0c49cc
* increase bar width, show new clients only, add timestamp to header, update bar color * remove extra timestamps, switch to basic bar chart * update docs and styling * remove unneeded timestamp args * show new client running totatls * initial test updates * update test * clean up new client total calc into util fn * bits of clean up and todos * update tests * update to avoid activity call when in CE and missing either start or end time * update todos * update tests * tidying * move new client total onto payload for easier access * update more tests to align with copy changes and new client totals * remove addressed TODOs * Update comment * add changelog entry * revert to using total, update tests and clean up * Update ui/app/components/clients/page/counts.hbs Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com> * remove duplicate charts and update descriptions * update tests after removing extra charts * tidy * update instances of byMonthActivityData to use byMonthNewClients and update tests * Update ui/app/components/clients/running-total.ts Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com> * update chart styles --------- Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import Component from '@glimmer/component';
|
|
|
|
/**
|
|
* @module Attribution
|
|
* Attribution components display the top 10 total client counts for namespaces or mounts during a billing period.
|
|
* A horizontal bar chart shows on the right, with the top namespace/mount and respective client totals on the left.
|
|
*
|
|
* @example
|
|
* <Clients::Attribution
|
|
* @noun="mount"
|
|
* @attribution={{array (hash label="my-kv" clients=100)}}
|
|
* @isSecretsSyncActivated={{true}}
|
|
* />
|
|
*
|
|
* @param {string} noun - noun which reflects the type of data and used in title. Should be "namespace" (default) or "mount"
|
|
* @param {array} attribution - array of objects containing a label and breakdown of client counts for total clients
|
|
* @param {boolean} isSecretsSyncActivated - boolean reflecting if secrets sync is activated. Determines the labels and data shown
|
|
*/
|
|
|
|
export default class Attribution extends Component {
|
|
get noun() {
|
|
return this.args.noun || 'namespace';
|
|
}
|
|
|
|
get attributionLegend() {
|
|
const attributionLegend = [
|
|
{ key: 'entity_clients', label: 'entity clients' },
|
|
{ key: 'non_entity_clients', label: 'non-entity clients' },
|
|
{ key: 'acme_clients', label: 'ACME clients' },
|
|
];
|
|
|
|
if (this.args.isSecretsSyncActivated) {
|
|
attributionLegend.push({ key: 'secret_syncs', label: 'secrets sync clients' });
|
|
}
|
|
return attributionLegend;
|
|
}
|
|
|
|
get sortedAttribution() {
|
|
if (this.args.attribution) {
|
|
// shallow copy so it doesn't mutate the data during tests
|
|
return this.args.attribution?.slice().sort((a, b) => b.clients - a.clients);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
// truncate data before sending to chart component
|
|
get topTenAttribution() {
|
|
return this.sortedAttribution.slice(0, 10);
|
|
}
|
|
|
|
get topAttribution() {
|
|
// get top namespace or mount
|
|
return this.sortedAttribution[0] ?? null;
|
|
}
|
|
|
|
get chartText() {
|
|
if (this.noun === 'namespace') {
|
|
return {
|
|
subtext: 'This data shows the top ten namespaces by total clients for the date range selected.',
|
|
description:
|
|
'This data shows the top ten namespaces by total clients and can be used to understand where clients are originating. Namespaces are identified by path.',
|
|
};
|
|
} else {
|
|
return {
|
|
subtext:
|
|
'The total clients used by the mounts for this date range. This number is useful for identifying overall usage volume.',
|
|
description:
|
|
'This data shows the top ten mounts by client count within this namespace, and can be used to understand where clients are originating. Mounts are organized by path.',
|
|
};
|
|
}
|
|
}
|
|
}
|