vault/ui/app/components/clients/running-total.hbs
claire bontempo 19786e54b4
UI/fix stacked charts tooltip (#26592)
* update selector vertical bar basic

* WIP vertical bar stacked component

* css for bars

* update css

* remove test data

* abstract monthly data getter

* move shared functions to base component

* rename tick formatting helper

* Revert "move shared functions to base component"

This reverts commit 5f931ea6f048df204650f9b4c6ba86195fa668b4.

* fix merge conflicts

* finish typescript declarations

* update chart-helpers test with renamed method

* use timestamp instead of month

* finish typescript

* finish ts cleanup

* add charts to token tab;

* dont blow out scope

* add comments and tests

* update token test

* fix tooltip hover spacing

* cleanup selectors

* one last test!

* delete old chart
2024-04-24 21:47:07 +00:00

136 lines
5.5 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{#if (gt @byMonthActivityData.length 1)}}
<Clients::ChartContainer
@title="Vault client counts"
@description={{this.chartContainerText}}
@timestamp={{@responseTimestamp}}
@hasChartData={{true}}
>
<:subTitle>
<StatText
@label="Running client total"
@subText="The number of clients which interacted with Vault during this date range."
@value={{@runningTotals.clients}}
@size="l"
@tooltipText="This number is the total for the queried date range. The chart displays a monthly breakdown of total clients per month."
/>
</:subTitle>
<:stats>
<div class="data-details-top has-top-padding-l">
<div class="is-flex-row">
<StatText @label="Entity" @value={{@runningTotals.entity_clients}} @size="m" />
<StatText @label="Non-entity" @value={{@runningTotals.non_entity_clients}} @size="m" class="has-left-margin-l" />
</div>
</div>
<div class="data-details-bottom is-flex-row">
<StatText @label="ACME" @value={{@runningTotals.acme_clients}} @size="m" />
{{#if @isSecretsSyncActivated}}
<StatText @label="Secret sync" @value={{@runningTotals.secret_syncs}} @size="m" class="has-left-margin-l" />
{{/if}}
</div>
</:stats>
<:chart>
<Clients::Charts::Line
@dataset={{@byMonthActivityData}}
@upgradeData={{@upgradeData}}
@chartHeight="250"
@chartTitle="Vault client counts line chart"
/>
</:chart>
</Clients::ChartContainer>
{{else}}
{{#let (get @byMonthActivityData "0") as |singleMonthData|}}
{{#if (and @isHistoricalMonth singleMonthData.new_clients.clients)}}
<Clients::UsageStats @title="Vault client counts" @description={{this.chartContainerText}}>
<div class="column" data-test-new>
<StatText
@label="New clients"
@subText="This is the number of clients which were created in Vault for the first time in the selected month."
@value={{singleMonthData.new_clients.clients}}
@size="l"
class="has-bottom-margin-l"
/>
<div class="flex row-wrap gap-36">
<StatText @label="Entity" @value={{singleMonthData.new_clients.entity_clients}} @size="m" />
<StatText @label="Non-entity" @value={{singleMonthData.new_clients.non_entity_clients}} @size="m" />
<StatText @label="ACME" @value={{singleMonthData.new_clients.acme_clients}} @size="m" />
{{#if @isSecretsSyncActivated}}
<StatText @label="Secret sync" @value={{singleMonthData.new_clients.secret_syncs}} @size="m" />
{{/if}}
</div>
</div>
<div class="column" data-test-total>
<StatText
@label="Total monthly clients"
@subText="This is the number of total clients which used Vault for the given month, both new and previous."
@value={{singleMonthData.clients}}
@size="l"
class="has-bottom-margin-l"
/>
<div class="flex row-wrap gap-36">
<StatText @label="Entity" @value={{singleMonthData.entity_clients}} @size="m" />
<StatText @label="Non-entity" @value={{singleMonthData.non_entity_clients}} @size="m" />
<StatText @label="ACME" @value={{singleMonthData.acme_clients}} @size="m" />
{{#if @isSecretsSyncActivated}}
<StatText @label="Secret sync" @value={{singleMonthData.secret_syncs}} @size="m" class="column-start-4" />
{{/if}}
</div>
</div>
</Clients::UsageStats>
{{else}}
{{! Renders when viewing the current month or for activity log data that predates the monthly breakdown added in 1.11 }}
<Clients::UsageStats
@title="Total usage"
@description="These totals are within this {{or @mountPath 'namespace and all its children'}}. {{if
@isCurrentMonth
"Only totals are available when viewing the current month. To see a breakdown of new and total clients for this month, select the 'Current billing period' filter."
}}"
>
<StatText
class="column"
@label="Total clients"
@value={{@runningTotals.clients}}
@size="l"
@subText="The number of clients which interacted with Vault during this month. This is Vaults primary billing metric."
/>
<StatText
class="column"
@label="Entity"
@value={{@runningTotals.entity_clients}}
@size="l"
@subText="Representations of a particular user, client, or application that created a token via login."
/>
<StatText
class="column"
@label="Non-entity"
@value={{@runningTotals.non_entity_clients}}
@size="l"
@subText="Clients created with a shared set of permissions, but not associated with an entity."
/>
<StatText
class="column"
@label="ACME"
@value={{@runningTotals.acme_clients}}
@size="l"
@subText="Each ACME request counts as one client."
/>
{{#if @isSecretsSyncActivated}}
<StatText
class="column"
@label="Secret sync"
@value={{@runningTotals.secret_syncs}}
@size="l"
@subText="A secret with a configured sync destination qualifies as a unique and active client."
/>
{{/if}}
</Clients::UsageStats>
{{/if}}
{{/let}}
{{/if}}