Uptime Monitor Management - Adjust monitor details page href for moni…

…tor management table (#122533) Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 17, 2022 · ba60155 · ba60155
1 parent b95cbeb
commit ba60155
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 5 deletions.
diff --git a/...ck/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.test.tsx b/...ck/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.test.tsx
@@ -9,11 +9,11 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '../../../lib/helper/rtl_helpers';
-import { DataStream, HTTPFields, ScheduleUnit } from '../../../../common/runtime_types';
+import { ConfigKey, DataStream, HTTPFields, ScheduleUnit } from '../../../../common/runtime_types';
 import { MonitorManagementList } from './monitor_list';
 import { MonitorManagementList as MonitorManagementListState } from '../../../state/reducers/monitor_management';
 
-describe('<ActionBar />', () => {
+describe('<MonitorManagementList />', () => {
   const setRefresh = jest.fn();
   const setPageSize = jest.fn();
   const setPageIndex = jest.fn();
@@ -110,4 +110,64 @@ describe('<ActionBar />', () => {
     expect(setPageIndex).toBeCalledWith(2);
     expect(setRefresh).toBeCalledWith(true);
   });
+
+  it.each([
+    [DataStream.BROWSER, ConfigKey.SOURCE_INLINE],
+    [DataStream.HTTP, ConfigKey.URLS],
+    [DataStream.TCP, ConfigKey.HOSTS],
+    [DataStream.ICMP, ConfigKey.HOSTS],
+  ])(
+    'appends inline to the monitor id for browser monitors and omits for lightweight checks',
+    (type, configKey) => {
+      const id = '123456';
+      const name = 'sample monitor';
+      const browserState = {
+        monitorManagementList: {
+          ...state.monitorManagementList,
+          list: {
+            ...state.monitorManagementList.list,
+            monitors: [
+              {
+                id,
+                attributes: {
+                  name,
+                  schedule: {
+                    unit: ScheduleUnit.MINUTES,
+                    number: '1',
+                  },
+                  [configKey]: 'test',
+                  type,
+                  tags: [`tag-1`],
+                },
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <MonitorManagementList
+          setRefresh={setRefresh}
+          setPageSize={setPageSize}
+          setPageIndex={setPageIndex}
+          monitorList={browserState.monitorManagementList as unknown as MonitorManagementListState}
+        />,
+        { state: browserState }
+      );
+
+      const link = screen.getByText(name) as HTMLAnchorElement;
+
+      expect(link.href).toEqual(
+        expect.stringContaining(
+          `/app/uptime/monitor/${Buffer.from(
+            `${id}${type === DataStream.BROWSER ? `-inline` : ''}`,
+            'utf8'
+          ).toString('base64')}`
+        )
+      );
+
+      expect(setPageIndex).toBeCalledWith(2);
+      expect(setRefresh).toBeCalledWith(true);
+    }
+  );
 });
diff --git a/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiBasicTable, EuiPanel, EuiSpacer, EuiLink } from '@elastic/eui';
 import { SyntheticsMonitorSavedObject } from '../../../../common/types';
 import { MonitorManagementList as MonitorManagementListState } from '../../../state/reducers/monitor_management';
-import { MonitorFields, SyntheticsMonitor } from '../../../../common/runtime_types';
+import { DataStream, MonitorFields, SyntheticsMonitor } from '../../../../common/runtime_types';
 import { UptimeSettingsContext } from '../../../contexts';
 import { Actions } from './actions';
 import { MonitorLocations } from './monitor_locations';
@@ -66,14 +66,19 @@ export const MonitorManagementList = ({
         defaultMessage: 'Monitor name',
       }),
       render: ({
-        attributes: { name },
+        attributes: { name, type },
         id,
       }: {
         attributes: Partial<MonitorFields>;
         id: string;
       }) => (
         <EuiLink
-          href={`${basePath}/app/uptime/monitor/${Buffer.from(id, 'utf8').toString('base64')}`}
+          href={`${basePath}/app/uptime/monitor/${Buffer.from(
+            /* Monitor Management currently only supports inline browser monitors.
+             * Inline browser monitors append `inline` to the monitor id */
+            `${id}${type === DataStream.BROWSER ? `-inline` : ''}`,
+            'utf8'
+          ).toString('base64')}`}
         >
           {name}
         </EuiLink>