feat: Bot instances design review by nicholasmarais1158 · Pull Request #59897 · gravitational/teleport

nicholasmarais1158 · 2025-10-03T10:13:45Z

Summary

This change includes a variety of design tweaks as a result of a design review.

Updates: #57994

Changes

Tweak titles
Move details close button to the right
Use darker colour for YAML background
Various spacing and layout refinements
Allow list items to be selected by pressing ENTER (once in focus)
Use default browser style for scrollbar on the list (affects chrome and safari only)
Fix content jump on selected list item
Clarify messaging for delete bot behaviour
~~Use sort-specific icons for sort menu (optional override as this component is used elsewhere also)~~

Demo

after

before

bl-nero · 2025-10-09T09:52:15Z

  current: SortMenuSort<T>;
  fields: { value: SortMenuSort<T>['fieldName']; label: string }[];
  onChange: (value: SortMenuSort<T>) => void;
+  alternateIcons?: boolean;


Please add a doc comment explaining what "alternate" means.

Checking with design team if new icons should be used everywhere, nowhere, or somewhere in between...

I'll tackle the case of the alternate sort directions icons as a separate PR. There are broader UX improvements to be made to the SortMenu component, app-wide.

This reverts commit 4212dcd.

backport-bot-workflows · 2025-10-13T13:31:36Z

@nicholasmarais1158 See the table below for backport results.

Branch	Result
branch/v17	Failed
branch/v18	Failed

* Alternate sort menu icons * Titles and close button * Yaml background colour * Spacing * Keyboard selectable list items * Fix selected list item padding * Default scroll bars for list * Clarify delete bot messaging * Simplify `onClick` * Use `FlexProps` type * Revert "Alternate sort menu icons" This reverts commit 4212dcd.

* docs(rfd): Bot Instances at Scale (RFD0222) (#57888) * docs(rfd): Bot Instance at Scale (RFD0222) * Add Notion link * First draft for review * fix: Spell check * Fix protobuf code block * Make the document structure slightly clearer * Add a section on data aggregation * Add missing end of code block * Add a bit more context on bots and instances * Add plan for `tctl` * Add an explanation for each UX example * Rename semver functions * Remove activity visualisation and required complexity * cspell * Pre-populate isn't the correct term * Minor tweak * Test plan additions * Remove reference to activity visualization * Clarify use of pagination in `tctl bots instances ls` and remove filter summary * Refine predicate language functions * Restructure protos * Refine plans for resource storage and quantities * Add webapi support for config, health and notices * Expand backwards compatibility * cspell * State `tbot` config size limit * Reduce config max size to 32Kb * Add failsafe env var * Reduce max notices to 10 * Explain updating related record expiry in-line with the instance * Revert extracting service health records * Move notices to earlier in the delivery plan * Remove notices & config and expand the why and what * Expand aggregate data and metrics, and rearrange sections * Fix `version.between` snippet * Updated approach to calculating bot instance counts * Document `newer_than` predicate language function --------- Co-authored-by: Dan Upton <daniel.upton@goteleport.com> * feat: List bot instances version and hostname sort (#59263) * Add version and hostname indexes to cache * Add `ListBotInstancesV2` rpc and use request options * Add v2 bot instance list endpoint * Use v2 endpoint in web UI * Pass signal through to support aborting requests * Fix comment typo * Rename util func * Deprecate `ListBotInstances` rpc * Encode hostname in cache key * Address pre-release sorting in version numbers * Rename bot instance cache utils * Fix lint deprecation warnings * Extract filter fields to message * Replace `fmt.Sprintf("%06d", ...)` * Update invalid sort field error * Fallback to v1 endpoint if possible * Use `strcase` for case-insensitive compare * Backend results are filtered by bot name so no need to re-filter in `MatchBotInstance` * Revert "Replace `fmt.Sprintf("%06d", ...)`" This reverts commit 2fbd797. * feat: Bot instances advanced filter (#59374) * Add version and hostname indexes to cache * Add `ListBotInstancesV2` rpc and use request options * Add v2 bot instance list endpoint * Use v2 endpoint in web UI * Pass signal through to support aborting requests * Fix comment typo * Rename util func * Add expression parser * Contribute `to_string` function to default parser * Add API support for `query` filter * Fix `SearchPanel` submit with advanced toggle * Add advanced search to web UI * Deprecate `ListBotInstances` rpc * Encode hostname in cache key * Address pre-release sorting in version numbers * Rename bot instance cache utils * Fix lint deprecation warnings * Extract filter fields to message * Replace `fmt.Sprintf("%06d", ...)` * Update invalid sort field error * Fallback to v1 endpoint if possible * Use `strcase` for case-insensitive compare * Backend results are filtered by bot name so no need to re-filter in `MatchBotInstance` * Use `t.Context()` * Remove expression methods * Remove unnecessary fallback comments * Return early if only bot name filter is required (backend only) * Fix lint * replace `to_string` with `equals` (version type only) * Fix comment * Remove unnecessary `to_string` tests * Switch to a true equals function # Conflicts: # lib/cache/bot_instance.go # web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx # Conflicts: # web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx * fix: Rename bot instance version expression functions (#59819) * feat(webui): New bot instances experience (#59655) * Make `disableSearch` props optional for SearchPanel component * Add a shared mock for TextEditor * Make instance items selectable and include bot name * Remove old bot instance details page * Add new bot instances UI * Add stories * Add and amend tests * Switch to arrow function * Remove `null` from item selected callback * Fix info guide wording # Conflicts: # web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.test.tsx # web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx # web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx * feat: Bot instances design review (#59897) * Alternate sort menu icons * Titles and close button * Yaml background colour * Spacing * Keyboard selectable list items * Fix selected list item padding * Default scroll bars for list * Clarify delete bot messaging * Simplify `onClick` * Use `FlexProps` type * Revert "Alternate sort menu icons" This reverts commit 4212dcd. * feat: Add filtering and sort to `tctl bots instances ls` (#60273) * Fix missing `--format` flag * Use v2 rpc * Add `--search` flag * Add `--query` flag * Add `--sort-index` and `--sort-order` flags * Remove `generation` and add `version` fields to output * Allow enabling the auth cache for the test process * Add list bot instances tests * Sync join method access logic between tctl and web * Access `authentication.JoinMethod` safely * Unhide `--format` flag * Simplify version header label * Fallback to v1 ListBotInstances * Refactor to remove use of `authclient.ClientI` * A way better fallback implementation 🙌 * typo 🙄 * Refactor to single interface # Conflicts: # tool/tctl/common/bots_command.go * docs: Add filter, sort and format flags to `tctl bots instances ls` reference (#60508) * docs: Add filter, sort and format fields to `tctl bots instances ls` reference * Using consistent capitalization Co-authored-by: Paul Gottschling <paul.gottschling@goteleport.com> --------- Co-authored-by: Paul Gottschling <paul.gottschling@goteleport.com> * feat: Add service health to `tctl bots instances ls|show` (#60316) * Add `service_health` to bot instance protos * Add aggregated service health to `show` * Add services section to `show` * Add health status column to `ls` * Extra tabs are not welcome * Handle zero services when aggregating health status # Conflicts: # tool/tctl/common/bots_command.go * MWI: Add `/webapi/.../machine-id/bot-instance/metrics` endpoint (#59896) * Add `autoupdate_bot_instance_report` to the editor role preset * Add `/webapi/.../machine-id/bot-instance/metrics` endpoint * Add missing error check in test * Better error message when metrics aren't ready * Allow users with `bot_instance:list` to read the `autoupdate_bot_instance_report` * Move update timestamp onto upgrade statuses object * Fix predicate language function names * Remove erroneous comment * Fix tests * Add `refresh_after_seconds` to metrics response * Return an empty `upgrade_statuses` if there is no report * Replace `exact_version` helper with simple `==` operator * Use `trace.Aggregate` to return both auth errors * feat: Bot instance upgrade status dashboard (#60019) * Add plumbing for new metrics endpoint * Align version compatibility logic * Fix mocked responses in stories * Add new dashboard component * Wire-in dashboard component * Fix lint * Explain dynamic `refetchInterval` * docs: `onFilterSelected` * Use typography components from design package * Fix `onFilterSelected` naming inconsistencies * A better nbsp * Remove "control plane" terminology * Refactor `GetBotInstanceMetricsResponse` type * Handle out-of-date proxy * Make instance list messaging filter aware * Update chart title to "version compatibility" * Keep "Last updated x minutes ago" label current * Oops, forgot to update the test * Remove unused `TitleText` * Change dashboard title to "insights" * Version compatibility design changes * Fix tests after copy change, oops * feat: Bot instance service health (#60133) * Add tabs to instance details * Add `kind` to bot instance heartbeat proto * Extend `GetBotInstanceResponse` type * Add `InfoTab` component for Overview tab * Add `HealthTab` component for Services tab * Wire-up tabs content * Use `join_attrs.meta` for join token fields * Fix links style * Fix handling of unspecified health status * Fix tab spacing * Remove tab tooltips * Replace service item background * Add zero services story * Support tctl instance kind * Fix styled links * Fix test * Fix bot instances story * feat: Allow instances to be selectable from bot details (#60717) * Make instance items selectable from bot details * Add test * Fix mocked calls in stories * fix: Bot instance health status dot inconsistency (#60786) --------- Co-authored-by: Dan Upton <daniel.upton@goteleport.com> Co-authored-by: Paul Gottschling <paul.gottschling@goteleport.com>

* Alternate sort menu icons * Titles and close button * Yaml background colour * Spacing * Keyboard selectable list items * Fix selected list item padding * Default scroll bars for list * Clarify delete bot messaging * Simplify `onClick` * Use `FlexProps` type * Revert "Alternate sort menu icons" This reverts commit 4212dcd.

nicholasmarais1158 self-assigned this Oct 3, 2025

nicholasmarais1158 added machine-id backport/branch/v17 backport/branch/v18 labels Oct 3, 2025

nicholasmarais1158 added 7 commits October 3, 2025 12:31

Alternate sort menu icons

4212dcd

Titles and close button

a87d756

Yaml background colour

c9a63a4

Spacing

9995d4b

Keyboard selectable list items

8343b00

Fix selected list item padding

cfccb1f

Default scroll bars for list

796ffb2

nicholasmarais1158 force-pushed the nicholasmarais1158/feat/mwi-bot-instances-design branch from 2012897 to 796ffb2 Compare October 3, 2025 11:31

Clarify delete bot messaging

23cdd0c

nicholasmarais1158 force-pushed the nicholasmarais1158/feat/mwi-bot-instances-design branch from f139bc3 to 23cdd0c Compare October 3, 2025 13:34

nicholasmarais1158 marked this pull request as ready for review October 3, 2025 13:53

github-actions bot requested review from bl-nero and ryanclark October 3, 2025 13:54

github-actions bot added size/sm ui labels Oct 3, 2025

nicholasmarais1158 added the no-changelog Indicates that a PR does not require a changelog entry label Oct 3, 2025

bl-nero approved these changes Oct 9, 2025

View reviewed changes

ryanclark reviewed Oct 9, 2025

View reviewed changes

Comment thread web/packages/shared/components/Search/SearchPanel.tsx Outdated

Comment thread web/packages/teleport/src/Bots/Details/Instance.tsx Outdated

ryanclark approved these changes Oct 9, 2025

View reviewed changes

nicholasmarais1158 mentioned this pull request Oct 10, 2025

feat: Bot instance service health #60133

Merged

nicholasmarais1158 added 3 commits October 10, 2025 13:27

Simplify onClick

251813d

Use FlexProps type

1e7eb86

Revert "Alternate sort menu icons"

f4417c3

This reverts commit 4212dcd.

nicholasmarais1158 added this pull request to the merge queue Oct 13, 2025

Merged via the queue into master with commit 46bbcff Oct 13, 2025
41 checks passed

nicholasmarais1158 deleted the nicholasmarais1158/feat/mwi-bot-instances-design branch October 13, 2025 13:29

nicholasmarais1158 mentioned this pull request Oct 24, 2025

[v18] feat(webui): New bot instances experience #60562

Closed

nicholasmarais1158 mentioned this pull request Oct 29, 2025

[v18] feat: Bot instances at scale UI (RFD0222) #60761

Merged

14 tasks

nicholasmarais1158 mentioned this pull request Nov 18, 2025

[v17] feat: Bot instances at scale UI (RFD0222) #61466

Closed

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Bot instances design review#59897

feat: Bot instances design review#59897
nicholasmarais1158 merged 11 commits intomasterfrom
nicholasmarais1158/feat/mwi-bot-instances-design

nicholasmarais1158 commented Oct 3, 2025 •

edited

Loading

Uh oh!

bl-nero Oct 9, 2025

Uh oh!

nicholasmarais1158 Oct 10, 2025

Uh oh!

nicholasmarais1158 Oct 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

backport-bot-workflows bot commented Oct 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

nicholasmarais1158 commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Demo

Uh oh!

bl-nero Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

nicholasmarais1158 Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

nicholasmarais1158 Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

backport-bot-workflows bot commented Oct 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nicholasmarais1158 commented Oct 3, 2025 •

edited

Loading