947a00ccb3
* 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 <68122737+hellobontempo@users.noreply.github.com> * 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 <68122737+hellobontempo@users.noreply.github.com> * 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 <zofskeez@gmail.com> * 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: clairebontempo@gmail.com <clairebontempo@gmail.com> * 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 1d0e85c82faf88c4385a04b1a5841cdde7fd00e0. * 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: clairebontempo@gmail.com <clairebontempo@gmail.com> Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Table of Contents
Vault UI
This README outlines the details of collaborating on this Ember application.
Ember CLI Version Upgrade Matrix
| Vault Version | Ember Version |
|---|---|
| 1.15.x | 4.12.0 |
| 1.14.x | 4.4.0 |
| 1.13.x | 4.4.0 |
| 1.12.x | 3.28.5 |
| 1.11.x | 3.28.5 |
| 1.10.x | 3.28.5 |
| 1.9.x | 3.22.0 |
| 1.8.x | 3.22.0 |
| 1.7.x | 3.11.0 |
Prerequisites
You will need the following things properly installed on your computer.
In order to enforce the same version of yarn across installs, the yarn binary is included in the repo
in the .yarn/releases folder. To update to a different version of yarn, use the yarn policies set-version VERSION command. For more information on this, see the documentation.
Running a Vault Server
Before running Vault UI locally, a Vault server must be running. First, ensure
Vault dev is built according the the instructions in ../README.md.
- To start a single local Vault server:
yarn vault - To start a local Vault cluster:
yarn vault:cluster
These commands may also be aliased on your local device.
Running the UI locally
To spin up the UI, a Vault server must be running (see previous step).
All of the commands below assume you're in the ui/ directory.
These steps will start an Ember CLI server that proxies requests to port 8200, and enable live rebuilding of the application as you change the UI application code. Visit your app at http://localhost:4200.
- Install dependencies:
yarn
- Run Vault UI and proxy back to a Vault server running on the default port, 8200:
yarn start
If your Vault server is running on a different port you can use the long-form version of the npm script:
ember server --proxy=http://localhost:PORT
Mirage
Mirage can be helpful for mocking backend endpoints. Look in mirage/handlers for existing mocked backends.
Run yarn with mirage: yarn start:mirage handlername
Where handlername is one of the options exported in mirage/handlers/index
Building Vault UI into a Vault Binary
We use the embed package from Go >1.20 to build the static assets of the Ember application into a Vault binary.
This can be done by running these commands from the root directory:
make static-dist
make dev-ui
This will result in a Vault binary that has the UI built-in - though in
a non-dev setup it will still need to be enabled via the ui config or
setting VAULT_UI environment variable.
Development
Quick commands
| Command | Description |
|---|---|
yarn start |
start the app with live reloading |
yarn start:mirage <handler> |
start the app with the mocked mirage backend, with handler provided |
make static-dist && make dev-ui |
build a Vault binary with UI assets (run from root directory not /ui) |
ember g component foo -ir core |
generate a component in the /addon engine |
yarn test:quick -f='<test name>' -s |
run tests in the browser, filtering by test name |
yarn lint:js |
lint javascript files |
Code Generators
Make use of the many generators for code, try ember help generate for more details. If you're using a component that can be widely-used, consider making it an addon component instead (see this PR for more details)
eg. a reusable component named foo that you'd like in the core engine (read more about Ember engines here).
ember g component foo -ir core
The above command creates a template-only component by default. If you'd like to add a backing class, add the -gc flag:
ember g component foo -gc -ir core
Running Tests
Running tests will spin up a Vault dev server on port :9200 via a pretest script that testem (the test runner) executes. All of the acceptance tests then run, which proxy requests back to that server.
yarn run test:ossyarn run test:oss -sto keep the test server running after the initial run.yarn run test -f="policies"to filter the tests that are run.-fgets passed into QUnit'sfilterconfig
Linting
yarn lint:jsyarn lint:hbsyarn lint:fix
Contributing / Best Practices
Hello and thank you for contributing to the Vault UI! Below is a list of patterns we follow on the UI team to keep in mind when contributing to the UI codebase. This is an ever-evolving process, so we welcome any comments, questions or general feedback.
Remember prefixing your branch name with
ui/will run UI tests and skip the go tests. If your PR includes backend changes, do not prefix your branch, instead add theuilabel on github. This will trigger the UI test suite to run, in addition to the backend Go tests.