UI: Set up client charts for incoming sync data #24852

hellobontempo · 2024-01-13T02:00:23Z

…T-23257/remove-totals-token-client-charts

github-actions · 2024-01-17T18:59:14Z

Build Results:
All builds succeeded! ✅

…nent instead of token.js

hellobontempo · 2024-01-17T19:48:39Z

ui/app/components/clients/attribution.js

@@ -47,6 +45,11 @@ import { format, isSameMonth } from 'date-fns';
 export default class Attribution extends Component {
  @tracked showCSVDownloadModal = false;
  @service download;
+  attributionLegend = [


Now that charts will be displaying different data depending on the tab, it made more sense to move the legend definition from the token.js parent file to the components rendering the charts

Are we planning for this to be used in other places other than the overview?

For now, no. I think ideally in the future each tab has an attribution chart but that relies on the backend sorting the counts in descending order for each sub-key (i.e secret_syncs or entity_clients+non_entiy_clients)

It's a pretty easy refactor to change how/where this array is passed so I wanted it to be in the easiest to find location for now.

hellobontempo · 2024-01-17T19:49:29Z

ui/app/components/clients/horizontal-bar-chart.js

@@ -218,11 +195,6 @@ export default class HorizontalBarChart extends Component {
        } else {
          this.tooltipTarget = null;
        }
-        dataBars


discussed with design that we no longer need to change the bar color on hover, the grey bar background is sufficient

hellobontempo · 2024-01-17T19:51:44Z

ui/app/styles/core/charts.scss

@@ -337,7 +328,7 @@ p.data-details {
  }

  .legend-center {
-    grid-column-start: 1;
+    grid-column-start: 2;


This change was necessary for the dual chart view so the legend doesn't cut off sync clients

hellobontempo · 2024-01-17T20:14:04Z

ui/app/components/clients/horizontal-bar-chart.js

@@ -183,28 +173,15 @@ export default class HorizontalBarChart extends Component {
        const hoveredElement = actionBars.filter((bar) => bar[labelKey] === data[labelKey]).node();
        this.tooltipTarget = hoveredElement;
        this.isLabel = false;
-        this.tooltipText = this.total


removed percent because tooltip is getting pretty full with added sync counts

zofskeez

👏 great work thanks for this!

zofskeez · 2024-01-17T20:24:37Z

ui/app/components/clients/attribution.js

@@ -47,6 +45,11 @@ import { format, isSameMonth } from 'date-fns';
 export default class Attribution extends Component {
  @tracked showCSVDownloadModal = false;
  @service download;
+  attributionLegend = [


Are we planning for this to be used in other places other than the overview?

zofskeez · 2024-01-17T20:27:47Z

ui/app/components/clients/monthly-usage.js

+  monthlyUsageLegend = [
+    { key: 'entity_clients', label: 'entity clients' },
+    { key: 'non_entity_clients', label: 'non-entity clients' },
+  ];


If this component is only intended for token type maybe we should rename it to something like token-monthly-usage?

I didn't want to rename anything until we moved everything around

zofskeez · 2024-01-17T20:28:21Z

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

+  runningTotalLegend = [
+    { key: 'entity_clients', label: 'entity clients' },
+    { key: 'non_entity_clients', label: 'non-entity clients' },
+  ];


Same comment as previous. Perhaps we should consider renaming if it's a token specific component.

This component houses the two charts, the line graph (which will stay in the overview page) and new monthly bar chart (which will move to the token tab). For now the legends match the component names so things are clearer when we divide up the components

* Client Count Routing Updates (#24733) * updates client count routing for sync and future additions * adds copyright header to clients sync template * adds missing copyright headers * UI: Adds secret_syncs to mirage /activity endpoint (#24846) * add secret_syncs to mirage endpoint * import clients handler * UI: Set up client charts for incoming sync data (#24852) * sum stacked bar values for tooltip total * make tooltip dynamic based on chartLegend * remove redundant helper * add secret_syncs to client count utils * move sum function to helper * update horizontal bar chart to include sync_clients * calculate sum of bars in tooltip * rename color palette const, define chart legends in each parent component instead of token.js * update tooltips * update mirage handler to add sys/ namespace * update mirage handler to add sys/ namespace * use pushObject * update test * UI: Secret sync bar chart (#24926) * install lineal * add ember-style-modifier dep * Add client count types for serialized data * Add sync bar chart component with tests * Chart is responsive * address comments * Clients Counts Parent Route (#24899) * adds interfaces for clients models * moves date formatting logic from clients activity adapter to utils file * adds clients counts route * updates links to clients route to point to top level and updates redirect to counts overview route * removes clients base route and moves overview and sync routes under counts * adds clients counts page component * converts clients route to ts * adds billing start timestamp to clients config mirage response and updates counts route to always attempt to fetch activity * fixes issue with updating namespace and auth mount query params always triggering client counts route model hook * adds tests for clients counts page component * adds missing copyright header to client-counts type file * Update ui/app/components/clients/page/counts.hbs Co-authored-by: claire bontempo <[email protected]> * fixes bad import in sync-bar-chart * updates clients counts route to bypass query if there is not start_time * pins d3-shape to 1.3.7 for now -- makes lineal play nice with old charts * fixes sync bar chart tooltip assertion --------- Co-authored-by: claire bontempo <[email protected]> * UI: convert line-chart to lineal (#24961) * lineal chart alongside svg * Add version-history to sync handler for testing * line chart is TS, test updated * remove d3-shape resolution * fix clients/token-test * use chartHeight in running-total template * use M/yy key instead of timestamp, chart is responsive * Add test for swapping datasets * add more edge case tests * more test * remove untrue assertion * fix weird decimal when between 1.1k and 2k * address feedback * Update line-chart to use timestamp instead of month key * Add timestamp to all places where month is on the clients activity response * Client Counts Overview (#24969) * adds counts base component for use in client counts child routes * adds clients counts overview page component * splits out monthly new chart from clients running total component * adds missing copyright headers * moves running total related assertions from token to overview acceptance test * removes new client assertions from running-total test and adds tests for monthly-new component * updates copy in running-total component * fixes clients overview tests * fixes timestamp stub not being restored in monthly-new test * fixes mfa-login test * renames counts component to activity * removes unused selectedAuthMethod arg from running-total component * adds timestamp back to running-total component * Secrets sync UI: add sync page component (#24982) * adds counts base component for use in client counts child routes * adds clients counts overview page component * splits out monthly new chart from clients running total component * adds missing copyright headers * move sync-bar-chart to charts/ folder * update types and rename chart * rename template file * moves running total related assertions from token to overview acceptance test * removes new client assertions from running-total test and adds tests for monthly-new component * updates copy in running-total component * fixes clients overview tests * fixes timestamp stub not being restored in monthly-new test * fixes mfa-login test * fix 0 values erroring charts * separate timestamp again * address merge conflicts * finish building sync chart component WIP css * renames counts component to activity * update import * revert name to dataKey * update styling for charts without legends * use monthly stat chart component for layout * use monthly chart stats in monthly new * implement stat wrapper; * remove extra grid div * rename component * fix legend css; * update test[ * remove arbitrarily setting max * add single month view * use stat text * update line chart tests * rename line chart * update tests --------- Co-authored-by: Jordan Reimer <[email protected]> * update selectors * add sync page tests * Secrets Sync UI: Add secrets syncs to csv export (#25056) * update mirage and add sync clients to export csv * fix sync legend label * remove word * update copy in modal * update mirage * fix attribution tooltip text * Clients Counts Token Route (#25019) * renames token route and page component back to dashboard * adds client counts token route and page component * updates charts in token page to use ChartContainer component * adds tests for clients token page component * restore clients dashboard test * use var for chart title sync page * updates clients token page to show usage stats when querying single month * updates token page clients averages to only include entity and non-entity clients in calculation * fixes monthly total counts lower than new clients in mirage handler * fixes token test --------- Co-authored-by: [email protected] <[email protected]> * Clients Usage Stats/Running Total Updates (#25094) * updates clients usage counts and running totals * updates usage stats total copy * fixes client counts overview tests * Secrets sync UI: cleanup and consolidation of components (#25090) * rename authMethod to mountPath * generalize count template copy * add todo to delete monthly new component * rename to tokenTab * wrap filters in conditional checking for start timestamp * some users may not have access to /config endpoint * fix querying when user has no billing date permissions and clicks current billing period * extend activity component from counts page * Revert "extend activity component from counts page" This reverts commit 1d0e85c. * rename to startTimestampISO * remove timestamp from route and just use activity model responseTimestamp * fix chart y domain max * fix typos in usage stat and running totals component * delete backing class for display only template; * updates tests * adds comment for fetching license to get start date for billing * cleans up unused client counts files (#25157) * adds changelog * fix assertion copy * adds changelog description * updates enterprise sidebar nav test --------- Co-authored-by: [email protected] <[email protected]> Co-authored-by: claire bontempo <[email protected]> Co-authored-by: Chelsea Shaw <[email protected]>

hellobontempo added 3 commits January 12, 2024 17:58

sum stacked bar values for tooltip total

61f72ba

make tooltip dynamic based on chartLegend

4cb3026

remove redundant helper

719105f

hellobontempo added the ui label Jan 13, 2024

hellobontempo added this to the 1.16.0-rc1 milestone Jan 13, 2024

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Jan 13, 2024

hellobontempo added 5 commits January 16, 2024 13:42

Merge branch 'ui/VAULT-23095/secrets-sync-client-counts' into ui/VAUL…

9d9e41b

…T-23257/remove-totals-token-client-charts

add secret_syncs to client count utils

0c4b6f2

move sum function to helper

2dc0fc2

update horizontal bar chart to include sync_clients

8ba84e8

calculate sum of bars in tooltip

a8a4d72

hellobontempo marked this pull request as ready for review January 17, 2024 18:43

hellobontempo added 2 commits January 17, 2024 10:59

rename color palette const, define chart legends in each parent compo…

c854fcd

…nent instead of token.js

update tooltips

9367f8b

hellobontempo commented Jan 17, 2024

View reviewed changes

hellobontempo added 2 commits January 17, 2024 12:11

update mirage handler to add sys/ namespace

d9927e4

update mirage handler to add sys/ namespace

0d7541e

hellobontempo commented Jan 17, 2024

View reviewed changes

zofskeez approved these changes Jan 17, 2024

View reviewed changes

hellobontempo added 2 commits January 17, 2024 12:44

use pushObject

e113078

update test

65cc748

hellobontempo merged commit c1b5efc into ui/VAULT-23095/secrets-sync-client-counts Jan 18, 2024
64 checks passed

hellobontempo deleted the ui/VAULT-23257/remove-totals-token-client-charts branch January 18, 2024 00:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Set up client charts for incoming sync data #24852

UI: Set up client charts for incoming sync data #24852

hellobontempo commented Jan 13, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2024

hellobontempo Jan 17, 2024

zofskeez Jan 17, 2024

hellobontempo Jan 17, 2024

hellobontempo Jan 17, 2024

hellobontempo Jan 17, 2024

hellobontempo Jan 17, 2024

zofskeez left a comment

zofskeez Jan 17, 2024

zofskeez Jan 17, 2024

hellobontempo Jan 17, 2024

zofskeez Jan 17, 2024

hellobontempo Jan 17, 2024

UI: Set up client charts for incoming sync data #24852

UI: Set up client charts for incoming sync data #24852

Conversation

hellobontempo commented Jan 13, 2024 • edited Loading

github-actions bot commented Jan 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zofskeez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo commented Jan 13, 2024 •

edited

Loading