vault/ui/app/components/clients/running-total.ts
claire bontempo f04fe92b89
UI: Remove tabs for each client count type (#31393)
* delete vertical bar grouped

* delete individual routes and tabs for client count types

* add nav-bar component to hide tab in production

* first round of test updates

* skip client list tests for now

* reogranize overview tests

* fix css color for chart

* change chart styling from grid to flex

* add split view for running total chart

* update latest colors from designs

* add changelog

* rename yield blocks to be more flexible

* add conditional for description

* delete routes
2025-08-01 11:02:06 -07:00

52 lines
1.7 KiB
TypeScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import type { ByMonthNewClients, TotalClients } from 'core/utils/client-count-utils';
import type ClientsVersionHistoryModel from 'vault/vault/models/clients/version-history';
interface Args {
isSecretsSyncActivated: boolean;
byMonthNewClients: ByMonthNewClients[];
isHistoricalMonth: boolean;
isCurrentMonth: boolean;
runningTotals: TotalClients;
upgradesDuringActivity: ClientsVersionHistoryModel[];
responseTimestamp: string;
mountPath: string;
}
export default class RunningTotal extends Component<Args> {
@tracked showStacked = false;
get chartContainerText() {
const { isSecretsSyncActivated } = this.args;
return `The total clients in the specified date range, displayed per month. This includes entity, non-entity${
isSecretsSyncActivated ? ', ACME and secrets sync clients' : ' and ACME clients'
}. The total client count number is an important consideration for Vault billing.`;
}
get runningTotalData() {
return this.args.byMonthNewClients.map((monthly) => ({
...monthly,
new_clients: monthly.clients,
}));
}
get chartLegend() {
if (this.showStacked) {
return [
{ key: 'entity_clients', label: 'entity clients' },
{ key: 'non_entity_clients', label: 'non-entity clients' },
...(this.args.isSecretsSyncActivated ? [{ key: 'secret_syncs', label: 'secret sync clients' }] : []),
{ key: 'acme_clients', label: 'acme clients' },
];
}
return [{ key: 'new_clients', label: 'new clients' }];
}
}