UI: Vault update client count charts to show new clients only #30506

lane-wetmore · 2025-05-02T22:37:22Z

Description

This PR updates the client count vertical bar charts to reflect new clients only.

The bars reflecting total clients have been removed and only bars representing new clients are shown.
The color and width of the vertical bars has been updated to reflect latest designs.
The timestamp of the latest update has been moved. Previously, it was located alongside each chart and now it is in the page header.
Copy for empty state updated for CE to reflect need for both start and end dates.
Removes monthly new client chart view for individual client tabs - entity/non-entity, secrets sync, acme - as the main chart per tab now represents the same data.

Ent tests: ✅

Ent with data on overview:

CE without both dates selected:

CE with data on overview:

CE single historical month:

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

…pdate bar color

github-actions · 2025-05-02T22:41:10Z

Build Results:
All builds succeeded! ✅

github-actions · 2025-05-02T23:01:06Z

CI Results:
All Go tests succeeded! ✅

…end time

lane-wetmore · 2025-05-12T18:13:44Z

ui/app/components/clients/running-total.hbs

-        @legend={{this.chartLegend}}
-        @upgradeData={{@upgradeData}}
-        @chartHeight="250"
+      {{! TODO SLW switching to basic from group loses the upgrade data info on the tooltip, confirm whether this is acceptable and revert if not }}


Curious if anyone has a recommendation here - Assuming we want to keep the upgrade info shown in the tooltip, is it preferable to keep using VerticalBarGrouped which supported it even though we don't need to the grouping, or should we add support for it to VerticalBarBasic?

We can make a ticket to add support for it to VerticalBarBasic, but it can happen in a follow-on PR as it's not a major priority

lane-wetmore · 2025-05-12T20:00:08Z

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

-      {{! Empty state for community without start query param }}
+    {{else if (and this.version.isCommunity (or (not @startTimestamp) (not @endTimestamp)))}}
+      {{! Empty state for community without start or end query param }}
+      {{! TODO SLW check this copy with design considering user cannot select current month }}


Checking w/ design on whether this copy should be updated.

hellobontempo · 2025-05-12T22:30:09Z

ui/app/components/clients/activity.ts

Definitely double check me on this, but I think byMonthActivityData is obsolete now and uses of it can be replaced with byMonthNewClients (once the filter logic has moved to byMonthNewClients)

vault/ui/app/components/clients/activity.ts

Lines 60 to 72 in cd41cf5

get byMonthActivityData() {

const { activity, mountPath } = this.args;

const nsPath = this.namespacePathForFilter;

if (mountPath) {

// only do client-side filtering if we have a mountPath filter set

return filterByMonthDataForMount(activity.byMonth, nsPath, mountPath);

}

return activity.byMonth;

}

get byMonthNewClients() {

return this.byMonthActivityData ? this.byMonthActivityData?.map((m) => m?.new_clients) : [];

}

hellobontempo

Great start on this! Let me know if you have any questions - happy to pair through any of the feedback 😄

hellobontempo · 2025-05-12T22:35:02Z

ui/app/components/clients/running-total.hbs

      />
    </:chart>

-    <:legend>


I think we should probably keep this so users don't have to hover over the bars and read "new clients" via the tooltip (which isn't very accessible)

Plus this gap without it looks a little spacious

hellobontempo · 2025-05-12T22:38:09Z

ui/app/components/clients/page/acme.hbs

@@ -47,7 +41,6 @@
    <Clients::ChartContainer
      @title="Monthly new"
      @description="ACME clients which interacted with Vault for the first time each month. Each bar represents the total new ACME clients for that month."
-      @timestamp={{@activity.responseTimestamp}}


This whole chart should actually be deleted because I believe it's now a duplicate of the one above?

ui/app/components/clients/page/sync.hbs

hellobontempo · 2025-05-12T22:40:43Z

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

@@ -34,7 +33,6 @@
  <Clients::ChartContainer
    @title="Monthly new"
    @description="Entity or non-entity clients which interacted with Vault for the first time during this date range. Each bar represents the total new clients for that month."
-    @timestamp={{@activity.responseTimestamp}}


Now that these charts are the same, one should be deleted. It looks like a combination of the each chart descriptions would be the most accurate

hellobontempo · 2025-05-12T22:42:25Z

ui/app/components/clients/chart-container.hbs

@@ -48,11 +48,4 @@
      {{yield to="emptyState"}}
    </div>
  {{/if}}
-
-  {{#if @timestamp}}


Great job remembering this cleanup 🎉

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

…update tests

hellobontempo · 2025-05-15T22:42:41Z

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

@@ -8,8 +8,6 @@ import ActivityComponent from '../activity';
 export default class ClientsAcmePageComponent extends ActivityComponent {
  title = 'ACME usage';
  get description() {
-    return `This data can be used to understand how many ACME clients have been used for the queried ${
-      this.isDateRange ? 'date range' : 'month'


Seeing this removed makes me wonder if we can cleanup any of the isDateRange logic 🤔 I know CE users can still query a single month, but we might be able to clean some of this up for enterprise only views. Not for this PR, but perhaps something to make a ticket for - what do you think?

Yeah, definitely! I'll add a cleanup ticket for that

ui/app/components/clients/running-total.ts

hellobontempo · 2025-05-15T22:58:34Z

ui/app/components/clients/activity.ts

+    const data = mountPath
+      ? filterByMonthDataForMount(activity.byMonth, nsPath, mountPath)
+      : activity.byMonth;


hellobontempo · 2025-05-15T23:01:59Z

ui/app/components/clients/chart-container.hbs

@@ -48,11 +48,4 @@
      {{yield to="emptyState"}}
    </div>
  {{/if}}
-
-  {{#if @timestamp}}
-    <div class="timestamp" data-test-chart-container-timestamp>


Aha! I realized why the screenshot of the updated chart has such a large space. It looks like chart-container.scss needs to be updated now that the timestamp div is gone.

I think part of it is that the chart doesn't scale down well when the dev tools are open, which may be something to improve later, but even at full width that space does seem too large. I've updated the styles to make the final row smaller to remove that gapping.

hellobontempo

Great work! Really appreciate the attention to detail. 😍

One small import nit, but mostly want to figure out why there's such a large space between the running total chart and the legend. I think updating the grid css in chart-container should address that (and cleaning up the .timestamp class while there!) 🎉

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

hellobontempo · 2025-05-19T20:55:27Z

ui/app/styles/components/chart-container.scss

@@ -20,7 +20,7 @@
 .single-chart-grid {
  display: grid;
  grid-template-columns: 1fr 0.3fr 3.7fr;
-  grid-template-rows: 0.5fr 1fr 1fr 1fr 0.25fr;
+  grid-template-rows: 0.5fr 1fr 1fr 0.5fr 0.25fr;


I might be mis-remembering but I think a row here could be deleted all together since the timestamp lived in it's own row. But I trust your judgement if you think this looks fine in the app!

* 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>

lane-wetmore added 2 commits May 2, 2025 17:01

increase bar width, show new clients only, add timestamp to header, u…

dfb7fc0

…pdate bar color

remove extra timestamps, switch to basic bar chart

8314510

lane-wetmore requested a review from a team as a code owner May 2, 2025 22:37

lane-wetmore self-assigned this May 2, 2025

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 2, 2025

lane-wetmore added ui and removed hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed labels May 2, 2025

lane-wetmore added this to the 1.20.0-rc milestone May 2, 2025

update docs and styling

f9d820e

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 5, 2025

lane-wetmore added 5 commits May 5, 2025 13:34

remove unneeded timestamp args

ad7426c

show new client running totatls

45ab4ab

initial test updates

9a870c2

update test

47cc285

Merge branch 'main' into ui/VAULT-35488-Client-Count-New-Clients-Only

fdc6efb

vercel bot deployed to Preview May 9, 2025 18:05 View deployment

lane-wetmore added 9 commits May 9, 2025 17:06

clean up new client total calc into util fn

eba5966

bits of clean up and todos

c97e7c4

update tests

8257ec6

update to avoid activity call when in CE and missing either start or …

a2e4580

…end time

update todos

5ba2ed6

update tests

d43e608

tidying

81307d3

move new client total onto payload for easier access

cd41cf5

update more tests to align with copy changes and new client totals

06f94b2

lane-wetmore commented May 12, 2025

View reviewed changes

remove addressed TODOs

96bf632

lane-wetmore commented May 12, 2025

View reviewed changes

hellobontempo reviewed May 12, 2025

View reviewed changes

hellobontempo requested changes May 12, 2025

View reviewed changes

hellobontempo reviewed May 12, 2025

View reviewed changes

ui/app/components/clients/page/sync.hbs Show resolved Hide resolved

hellobontempo reviewed May 12, 2025

View reviewed changes

lane-wetmore removed the request for review from claudiac-m May 13, 2025 15:10

lane-wetmore and others added 4 commits May 15, 2025 12:14

revert to using total, update tests and clean up

6d42ad3

Update ui/app/components/clients/page/counts.hbs

f741d61

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

remove duplicate charts and update descriptions

99c798a

update tests after removing extra charts

576638b

lane-wetmore requested a review from hellobontempo May 15, 2025 21:23

lane-wetmore added 2 commits May 15, 2025 16:27

tidy

fd0255a

update instances of byMonthActivityData to use byMonthNewClients and …

e93a8e2

…update tests

hellobontempo reviewed May 15, 2025

View reviewed changes

ui/app/components/clients/running-total.ts Outdated Show resolved Hide resolved

hellobontempo reviewed May 15, 2025

View reviewed changes

lane-wetmore and others added 2 commits May 16, 2025 10:13

Update ui/app/components/clients/running-total.ts

f3d80dd

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

update chart styles

457a704

lane-wetmore requested a review from hellobontempo May 16, 2025 15:53

hellobontempo reviewed May 19, 2025

View reviewed changes

hellobontempo approved these changes May 19, 2025

View reviewed changes

lane-wetmore merged commit cdbb0c4 into main May 19, 2025
33 checks passed

lane-wetmore deleted the ui/VAULT-35488-Client-Count-New-Clients-Only branch May 19, 2025 20:57

lane-wetmore mentioned this pull request Jun 2, 2025

Docs: Update to Reflect Client Count Changes #30798

Merged

6 tasks

hc-github-team-secure-vault-core mentioned this pull request Jun 13, 2025

Backport of Docs: Update to Reflect Client Count Changes into release/1.20.x #30976

Merged

6 tasks

	get byMonthActivityData() {
	const { activity, mountPath } = this.args;
	const nsPath = this.namespacePathForFilter;
	if (mountPath) {
	// only do client-side filtering if we have a mountPath filter set
	return filterByMonthDataForMount(activity.byMonth, nsPath, mountPath);
	}
	return activity.byMonth;
	}

	get byMonthNewClients() {
	return this.byMonthActivityData ? this.byMonthActivityData?.map((m) => m?.new_clients) : [];
	}

UI: Vault update client count charts to show new clients only #30506

UI: Vault update client count charts to show new clients only #30506

Uh oh!

Conversation

lane-wetmore commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TODO only if you're a HashiCorp employee

Uh oh!

github-actions bot commented May 2, 2025

Uh oh!

github-actions bot commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hellobontempo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hellobontempo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lane-wetmore commented May 2, 2025 •

edited

Loading

github-actions bot commented May 2, 2025 •

edited

Loading

hellobontempo left a comment •

edited

Loading