[v18] feat: Bot instance service health

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

@@ -103,14 +103,7 @@ export const Happy: Story = {
       handlers: [
         listBotInstancesSuccess(listBotInstances, 'v1'),
         listBotInstancesSuccess(listBotInstances, 'v2'),
-        getBotInstanceSuccess({
-          bot_instance: {
-            spec: {
-              instance_id: 'a55259e8-9b17-466f-9d37-ab390ca4024e',
-            },
-          },
-          yaml: 'kind: bot_instance\nversion: v1\n',
-        }),
+        getBotInstanceSuccess(),
         getBotInstanceMetricsSuccess(),
       ],
     },

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

@@ -31,6 +31,7 @@ import {
   userEvent,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from 'design/utils/testing';
 import { InfoGuidePanelProvider } from 'shared/components/SlidingSidePanel/InfoGuide';
 
@@ -228,16 +229,7 @@ describe('BotInstances', () => {
     );
     server.use(getBotInstanceMetricsSuccess());
 
-    server.use(
-      getBotInstanceSuccess({
-        bot_instance: {
-          spec: {
-            instance_id: '3c3aae3e-de25-4824-a8e9-5a531862f19a',
-          },
-        },
-        yaml: 'kind: bot_instance\nversion: v1\n',
-      })
-    );
+    server.use(getBotInstanceSuccess());
 
     const { user } = renderComponent();
 
@@ -260,8 +252,13 @@ describe('BotInstances', () => {
       })
     ).toBeInTheDocument();
 
+    const summarySection = screen
+      .getByRole('heading', {
+        name: 'Summary',
+      })
+      .closest('section');
     expect(
-      screen.getByText('kind: bot_instance version: v1')
+      within(summarySection!).getByText('test-bot-name')
     ).toBeInTheDocument();
   });
 

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

@@ -54,6 +54,7 @@ export function BotInstances() {
   const sortField = queryParams.get('sort_field') || 'active_at_latest';
   const sortDir = queryParams.get('sort_dir') || 'DESC';
   const selectedItemId = queryParams.get('selected');
+  const activeTab = queryParams.get('tab');
 
   const listRef = useRef<BotInstancesListControls | null>(null);
 
@@ -144,6 +145,7 @@ export function BotInstances() {
         search.set('selected', `${item.bot_name}/${item.instance_id}`);
       } else {
         search.delete('selected');
+        search.delete('tab');
       }
 
       history.push({
@@ -154,6 +156,20 @@ export function BotInstances() {
     [history, location.pathname, location.search]
   );
 
+  const handleDetailsTabSelected = useCallback(
+    (tab: string) => {
+      const search = new URLSearchParams(location.search);
+
+      search.set('tab', tab);
+
+      history.push({
+        pathname: location.pathname,
+        search: search.toString(),
+      });
+    },
+    [history, location.pathname, location.search]
+  );
+
   const [selectedBotName, selectedInstanceId] =
     selectedItemId?.split('/') ?? [];
 
@@ -221,6 +237,8 @@ export function BotInstances() {
                 botName={selectedBotName}
                 instanceId={selectedInstanceId}
                 onClose={() => handleItemSelected(null)}
+                activeTab={activeTab}
+                onTabSelected={tab => handleDetailsTabSelected(tab)}
               />
             ) : undefined}
           </ListAndDetailsContainer>

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

@@ -18,6 +18,7 @@
 
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
 
 import { CardTile } from 'design/CardTile';
 
@@ -28,6 +29,7 @@ import {
   getBotInstanceError,
   getBotInstanceForever,
   getBotInstanceSuccess,
+  mockGetBotInstanceResponse,
 } from 'teleport/test/helpers/botInstances';
 
 import { BotInstanceDetails } from './BotInstanceDetails';
@@ -45,16 +47,26 @@ type Story = StoryObj<typeof meta>;
 export default meta;
 
 export const Happy: Story = {
+  parameters: {
+    msw: {
+      handlers: [getBotInstanceSuccess()],
+    },
+  },
+};
+
+export const ZeroServices: Story = {
   parameters: {
     msw: {
       handlers: [
         getBotInstanceSuccess({
+          ...mockGetBotInstanceResponse,
           bot_instance: {
-            spec: {
-              instance_id: 'a55259e8-9b17-466f-9d37-ab390ca4024e',
+            ...mockGetBotInstanceResponse.bot_instance,
+            status: {
+              ...mockGetBotInstanceResponse.bot_instance.status,
+              service_health: [],
             },
           },
-          yaml: 'kind: bot_instance\nversion: v1\n',
         }),
       ],
     },
@@ -100,6 +112,8 @@ const queryClient = new QueryClient({
 function Wrapper(props?: { hasBotInstanceReadPermission?: boolean }) {
   const { hasBotInstanceReadPermission = true } = props ?? {};
 
+  const [activeTab, setActiveTab] = useState('info');
+
   const customAcl = makeAcl({
     botInstances: {
       ...defaultAccess,
@@ -114,11 +128,13 @@ function Wrapper(props?: { hasBotInstanceReadPermission?: boolean }) {
   return (
     <QueryClientProvider client={queryClient}>
       <TeleportProviderBasic teleportCtx={ctx}>
-        <CardTile height={820} overflow={'auto'} p={0}>
+        <CardTile height={600} overflow={'auto'} p={0}>
           <BotInstanceDetails
             botName="ansible-worker"
             instanceId="a55259e8-9b17-466f-9d37-ab390ca4024e"
             onClose={() => {}}
+            activeTab={activeTab}
+            onTabSelected={tab => setActiveTab(tab)}
           />
         </CardTile>
       </TeleportProviderBasic>

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

@@ -28,6 +28,7 @@ import {
   testQueryClient,
   userEvent,
   waitForElementToBeRemoved,
+  within,
 } from 'design/utils/testing';
 
 import 'shared/components/TextEditor/TextEditor.mock';
@@ -62,7 +63,7 @@ describe('BotIntanceDetails', () => {
     const onClose = jest.fn();
     withSuccessResponse();
 
-    const { user } = renderComponent({ onClose });
+    const { user } = renderComponent({ props: { onClose } });
 
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
 
@@ -72,10 +73,63 @@ describe('BotIntanceDetails', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('Allows switching tab', async () => {
+    const onTabSelected = jest.fn();
+
+    withSuccessResponse();
+
+    const { user } = renderComponent({ props: { onTabSelected } });
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
+
+    const overviewTab = screen.getByRole('tab', { name: 'Overview' });
+    await user.click(overviewTab);
+    expect(onTabSelected).toHaveBeenCalledTimes(1);
+    expect(onTabSelected).toHaveBeenLastCalledWith('info');
+
+    const servicesTab = screen.getByRole('tab', { name: 'Services' });
+    await user.click(servicesTab);
+    expect(onTabSelected).toHaveBeenCalledTimes(2);
+    expect(onTabSelected).toHaveBeenLastCalledWith('health');
+
+    const yamlTab = screen.getByRole('tab', { name: 'YAML' });
+    await user.click(yamlTab);
+    expect(onTabSelected).toHaveBeenCalledTimes(3);
+    expect(onTabSelected).toHaveBeenLastCalledWith('yaml');
+  });
+
+  it('Shows instance info', async () => {
+    withSuccessResponse();
+
+    renderComponent({ props: { activeTab: 'info' } });
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
+
+    const summarySection = screen
+      .getByRole('heading', {
+        name: 'Summary',
+      })
+      .closest('section');
+    expect(
+      within(summarySection!).getByText('test-bot-name')
+    ).toBeInTheDocument();
+  });
+
+  it('Shows instance services', async () => {
+    withSuccessResponse();
+
+    renderComponent({ props: { activeTab: 'health' } });
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
+
+    const item = screen.getByTestId('application-tunnel-1');
+    expect(within(item!).getByText('application-tunnel-1')).toBeInTheDocument();
+  });
+
   it('Shows full yaml', async () => {
     withSuccessResponse();
 
-    renderComponent();
+    renderComponent({ props: { activeTab: 'yaml' } });
 
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
 
@@ -111,24 +165,29 @@ describe('BotIntanceDetails', () => {
   });
 });
 
-const renderComponent = (
-  options?: Partial<ComponentProps<typeof BotInstanceDetails>> & {
-    hasBotInstanceReadPermission?: boolean;
-  }
-) => {
+const renderComponent = (options?: {
+  props?: Partial<ComponentProps<typeof BotInstanceDetails>>;
+  hasBotInstanceReadPermission?: boolean;
+}) => {
+  const { props, ...rest } = options ?? {};
   const {
     botName = 'test-bot-name',
     instanceId = '4fa10e68-f2e0-4cf9-ad5b-1458febcd827',
     onClose = jest.fn(),
-    ...rest
-  } = options ?? {};
+    activeTab = 'info',
+    onTabSelected = jest.fn(),
+  } = props ?? {};
+
   const user = userEvent.setup();
+
   return {
     ...render(
       <BotInstanceDetails
         botName={botName}
         instanceId={instanceId}
         onClose={onClose}
+        activeTab={activeTab}
+        onTabSelected={onTabSelected}
       />,
       {
         wrapper: makeWrapper(rest),
@@ -165,16 +224,7 @@ function makeWrapper(options?: { hasBotInstanceReadPermission?: boolean }) {
 }
 
 const withSuccessResponse = () => {
-  server.use(
-    getBotInstanceSuccess({
-      bot_instance: {
-        spec: {
-          instance_id: '4fa10e68-f2e0-4cf9-ad5b-1458febcd827',
-        },
-      },
-      yaml: 'kind: bot_instance\nversion: v1\n',
-    })
-  );
+  server.use(getBotInstanceSuccess());
 };
 
 const withErrorResponse = () => {