feat: Bot instance upgrade status dashboard

web/packages/teleport/src/BotInstances/BotInstances.story.tsx

@@ -30,6 +30,7 @@ import { TeleportProviderBasic } from 'teleport/mocks/providers';
 import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
 import {
   getBotInstanceError,
+  getBotInstanceMetricsSuccess,
   getBotInstanceSuccess,
   listBotInstancesError,
   listBotInstancesForever,
@@ -50,7 +51,7 @@ type Story = StoryObj<typeof meta>;
 
 export default meta;
 
-const listBotInstancesSuccessHandler = listBotInstancesSuccess({
+const listBotInstances = {
   bot_instances: [
     {
       bot_name: 'ansible-worker',
@@ -94,13 +95,14 @@ const listBotInstancesSuccessHandler = listBotInstancesSuccess({
     },
   ],
   next_page_token: '',
-});
+};
 
 export const Happy: Story = {
   parameters: {
     msw: {
       handlers: [
-        listBotInstancesSuccessHandler,
+        listBotInstancesSuccess(listBotInstances, 'v1'),
+        listBotInstancesSuccess(listBotInstances, 'v2'),
         getBotInstanceSuccess({
           bot_instance: {
             spec: {
@@ -109,6 +111,7 @@ export const Happy: Story = {
           },
           yaml: 'kind: bot_instance\nversion: v1\n',
         }),
+        getBotInstanceMetricsSuccess(),
       ],
     },
   },
@@ -117,15 +120,18 @@ export const Happy: Story = {
 export const ErrorLoadingList: Story = {
   parameters: {
     msw: {
-      handlers: [listBotInstancesError(500, 'something went wrong')],
+      handlers: [
+        listBotInstancesError(500, 'something went wrong'),
+        getBotInstanceMetricsSuccess(),
+      ],
     },
   },
 };
 
 export const StillLoadingList: Story = {
   parameters: {
     msw: {
-      handlers: [listBotInstancesForever()],
+      handlers: [listBotInstancesForever(), getBotInstanceMetricsSuccess()],
     },
   },
 };
@@ -141,6 +147,7 @@ export const NoListPermission: Story = {
           500,
           'this call should never be made without permissions'
         ),
+        getBotInstanceMetricsSuccess(),
       ],
     },
   },
@@ -153,11 +160,13 @@ export const NoReadPermission: Story = {
   parameters: {
     msw: {
       handlers: [
-        listBotInstancesSuccessHandler,
+        listBotInstancesSuccess(listBotInstances, 'v1'),
+        listBotInstancesSuccess(listBotInstances, 'v2'),
         getBotInstanceError(
           500,
           'this call should never be made without permissions'
         ),
+        getBotInstanceMetricsSuccess(),
       ],
     },
   },

web/packages/teleport/src/BotInstances/BotInstances.test.tsx

@@ -39,6 +39,7 @@ import { createTeleportContext } from 'teleport/mocks/contexts';
 import { listBotInstances } from 'teleport/services/bot/bot';
 import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
 import {
+  getBotInstanceMetricsSuccess,
   getBotInstanceSuccess,
   listBotInstancesError,
   listBotInstancesSuccess,
@@ -58,6 +59,9 @@ jest.mock('teleport/services/bot/bot', () => {
     getBotInstance: jest.fn((...all) => {
       return actual.getBotInstance(...all);
     }),
+    getBotInstanceMetrics: jest.fn((...all) => {
+      return actual.getBotInstanceMetrics(...all);
+    }),
   };
 });
 
@@ -67,10 +71,6 @@ beforeAll(() => {
   server.listen();
 });
 
-beforeEach(() => {
-  jest.useFakeTimers().setSystemTime(new Date('2025-05-19T08:00:00Z'));
-});
-
 afterEach(async () => {
   server.resetHandlers();
   await testQueryClient.resetQueries();
@@ -84,11 +84,15 @@ afterAll(() => server.close());
 describe('BotInstances', () => {
   it('Shows an empty state', async () => {
     server.use(
-      listBotInstancesSuccess({
-        bot_instances: [],
-        next_page_token: '',
-      })
+      listBotInstancesSuccess(
+        {
+          bot_instances: [],
+          next_page_token: '',
+        },
+        'v1'
+      )
     );
+    server.use(getBotInstanceMetricsSuccess());
 
     renderComponent();
 
@@ -104,6 +108,7 @@ describe('BotInstances', () => {
 
   it('Shows an error state', async () => {
     server.use(listBotInstancesError(500, 'something went wrong'));
+    server.use(getBotInstanceMetricsSuccess());
 
     renderComponent();
 
@@ -116,6 +121,7 @@ describe('BotInstances', () => {
     const testErrorMessage =
       'unsupported sort, only bot_name:asc is supported, but got "blah" (desc = true)';
     server.use(listBotInstancesError(400, testErrorMessage));
+    server.use(getBotInstanceMetricsSuccess());
 
     const { user } = renderComponent();
 
@@ -124,14 +130,15 @@ describe('BotInstances', () => {
     expect(screen.getByText(testErrorMessage)).toBeInTheDocument();
 
     server.use(
-      listBotInstancesSuccess({
-        bot_instances: [],
-        next_page_token: '',
-      })
+      listBotInstancesSuccess(
+        {
+          bot_instances: [],
+          next_page_token: '',
+        },
+        'v1'
+      )
     );
 
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
-
     const resetButton = screen.getByRole('button', { name: 'Reset sort' });
     await user.click(resetButton);
 
@@ -159,25 +166,31 @@ describe('BotInstances', () => {
   });
 
   it('Shows a list', async () => {
+    jest.useFakeTimers().setSystemTime(new Date('2025-05-19T08:00:00Z'));
+
     server.use(
-      listBotInstancesSuccess({
-        bot_instances: [
-          {
-            bot_name: 'test-bot-1',
-            instance_id: '5e885c66-1af3-4a36-987d-a604d8ee49d2',
-            active_at_latest: '2025-05-19T07:32:00Z',
-            host_name_latest: 'test-hostname',
-            join_method_latest: 'github',
-            version_latest: '1.0.0-dev-a12b3c',
-          },
-          {
-            bot_name: 'test-bot-2',
-            instance_id: '3c3aae3e-de25-4824-a8e9-5a531862f19a',
-          },
-        ],
-        next_page_token: '',
-      })
+      listBotInstancesSuccess(
+        {
+          bot_instances: [
+            {
+              bot_name: 'test-bot-1',
+              instance_id: '5e885c66-1af3-4a36-987d-a604d8ee49d2',
+              active_at_latest: '2025-05-19T07:32:00Z',
+              host_name_latest: 'test-hostname',
+              join_method_latest: 'github',
+              version_latest: '1.0.0-dev-a12b3c',
+            },
+            {
+              bot_name: 'test-bot-2',
+              instance_id: '3c3aae3e-de25-4824-a8e9-5a531862f19a',
+            },
+          ],
+          next_page_token: '',
+        },
+        'v1'
+      )
     );
+    server.use(getBotInstanceMetricsSuccess());
 
     renderComponent();
 
@@ -191,27 +204,29 @@ describe('BotInstances', () => {
   });
 
   it('Selects an item', async () => {
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
-
     server.use(
-      listBotInstancesSuccess({
-        bot_instances: [
-          {
-            bot_name: 'test-bot-1',
-            instance_id: '5e885c66-1af3-4a36-987d-a604d8ee49d2',
-            active_at_latest: '2025-05-19T07:32:00Z',
-            host_name_latest: 'test-hostname',
-            join_method_latest: 'github',
-            version_latest: '1.0.0-dev-a12b3c',
-          },
-          {
-            bot_name: 'test-bot-2',
-            instance_id: '3c3aae3e-de25-4824-a8e9-5a531862f19a',
-          },
-        ],
-        next_page_token: '',
-      })
+      listBotInstancesSuccess(
+        {
+          bot_instances: [
+            {
+              bot_name: 'test-bot-1',
+              instance_id: '5e885c66-1af3-4a36-987d-a604d8ee49d2',
+              active_at_latest: '2025-05-19T07:32:00Z',
+              host_name_latest: 'test-hostname',
+              join_method_latest: 'github',
+              version_latest: '1.0.0-dev-a12b3c',
+            },
+            {
+              bot_name: 'test-bot-2',
+              instance_id: '3c3aae3e-de25-4824-a8e9-5a531862f19a',
+            },
+          ],
+          next_page_token: '',
+        },
+        'v1'
+      )
     );
+    server.use(getBotInstanceMetricsSuccess());
 
     server.use(
       getBotInstanceSuccess({
@@ -251,7 +266,7 @@ describe('BotInstances', () => {
   });
 
   it('Allows paging', async () => {
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
+    server.use(getBotInstanceMetricsSuccess());
 
     jest.mocked(listBotInstances).mockImplementation(
       ({ pageToken }) =>
@@ -327,7 +342,7 @@ describe('BotInstances', () => {
   });
 
   it('Allows filtering (search)', async () => {
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
+    server.use(getBotInstanceMetricsSuccess());
 
     jest.mocked(listBotInstances).mockImplementation(
       ({ pageToken }) =>
@@ -407,7 +422,7 @@ describe('BotInstances', () => {
   });
 
   it('Allows filtering (query)', async () => {
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
+    server.use(getBotInstanceMetricsSuccess());
 
     jest.mocked(listBotInstances).mockImplementation(
       ({ pageToken }) =>
@@ -491,8 +506,62 @@ describe('BotInstances', () => {
     );
   });
 
+  it('Allows a filter to be applied from the dashboard', async () => {
+    server.use(getBotInstanceMetricsSuccess());
+
+    jest.mocked(listBotInstances).mockImplementation(
+      ({ pageToken }) =>
+        new Promise(resolve => {
+          resolve({
+            bot_instances: [],
+            next_page_token: pageToken + '.next',
+          });
+        })
+    );
+
+    const { user, history } = renderComponent();
+    jest.spyOn(history, 'push');
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('loading-dashboard')
+    );
+
+    expect(listBotInstances).toHaveBeenCalledTimes(1);
+    expect(listBotInstances).toHaveBeenLastCalledWith(
+      {
+        pageSize: 32,
+        pageToken: '',
+        searchTerm: '',
+        query: undefined,
+        sortDir: 'DESC',
+        sortField: 'active_at_latest',
+      },
+      expect.anything()
+    );
+
+    const item = screen.getByLabelText('Up to date');
+    await user.click(item);
+
+    expect(history.push).toHaveBeenLastCalledWith({
+      pathname: '/web/bots/instances',
+      search: 'query=up+to+date+filter+goes+here&is_advanced=1',
+    });
+    expect(listBotInstances).toHaveBeenCalledTimes(2);
+    expect(listBotInstances).toHaveBeenLastCalledWith(
+      {
+        pageSize: 32,
+        pageToken: '', // Should reset to the first page
+        searchTerm: undefined,
+        query: 'up to date filter goes here',
+        sortDir: 'DESC',
+        sortField: 'active_at_latest',
+      },
+      expect.anything()
+    );
+  });
+
   it('Allows sorting', async () => {
-    jest.useRealTimers(); // Required as userEvent.type() uses setTimeout internally
+    server.use(getBotInstanceMetricsSuccess());
 
     jest.mocked(listBotInstances).mockImplementation(
       ({ pageToken }) =>