[Uptime] monitor list layout fix (#106159)

* update monitor list component to hide downtown history and accordion toggle in medium and large screens

* force page headings with flex content to wrap

* adjust types

* adjust variable naming for uptime monitor list

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import {
   MonitorSummariesResult,
   CursorDirection,
@@ -20,6 +21,7 @@ import * as redux from 'react-redux';
 import moment from 'moment';
 import { IHttpFetchError } from '../../../../../../../src/core/public';
 import { mockMoment } from '../../../lib/helper/test_helpers';
+import { render } from '../../../lib/helper/rtl_helpers';
 import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
@@ -112,6 +114,10 @@ describe('MonitorList component', () => {
 
   beforeAll(() => {
     mockMoment();
+    global.innerWidth = 1200;
+
+    // Trigger the window resize event.
+    global.dispatchEvent(new Event('resize'));
   });
 
   const getMonitorList = (timestamp?: string): MonitorSummariesResult => {
@@ -275,6 +281,67 @@ describe('MonitorList component', () => {
     });
   });
 
+  describe('responsive behavior', () => {
+    describe('xl screens', () => {
+      beforeAll(() => {
+        global.innerWidth = 1200;
+
+        // Trigger the window resize event.
+        global.dispatchEvent(new Event('resize'));
+      });
+
+      it('shows ping histogram and expand button on xl and xxl screens', async () => {
+        const list = getMonitorList(moment().subtract(5, 'minute').toISOString());
+        const { getByTestId, getByText } = render(
+          <MonitorListComponent
+            monitorList={{
+              list,
+              loading: false,
+            }}
+            pageSize={10}
+            setPageSize={jest.fn()}
+          />
+        );
+
+        await waitFor(() => {
+          expect(
+            getByTestId(
+              `xpack.uptime.monitorList.${list.summaries[0].monitor_id}.expandMonitorDetail`
+            )
+          ).toBeInTheDocument();
+          expect(getByText('Downtime history')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('large and medium screens', () => {
+      it('hides ping histogram and expand button on extra large screens', async () => {
+        global.innerWidth = 1199;
+
+        // Trigger the window resize event.
+        global.dispatchEvent(new Event('resize'));
+
+        const { queryByTestId, queryByText } = render(
+          <MonitorListComponent
+            monitorList={{
+              list: getMonitorList(moment().subtract(5, 'minute').toISOString()),
+              loading: false,
+            }}
+            pageSize={10}
+            setPageSize={jest.fn()}
+          />
+        );
+
+        await waitFor(() => {
+          expect(
+            queryByTestId('xpack.uptime.monitorList.always-down.expandMonitorDetail')
+          ).not.toBeInTheDocument();
+          expect(queryByText('Downtime history')).not.toBeInTheDocument();
+        });
+      });
+    });
+  });
+
   describe('noItemsMessage', () => {
     it('returns loading message while loading', () => {
       expect(noItemsMessage(true)).toEqual(`Loading...`);

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx

@@ -4,7 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import React, { useState } from 'react';
+import useWindowSize from 'react-use/lib/useWindowSize';
+import useDebounce from 'react-use/lib/useDebounce';
 import {
   EuiButtonIcon,
   EuiBasicTable,
@@ -13,8 +15,8 @@ import {
   EuiLink,
   EuiPanel,
   EuiSpacer,
+  getBreakpoint,
 } from '@elastic/eui';
-import React, { useState } from 'react';
 import { HistogramPoint, X509Expiry } from '../../../../common/runtime_types';
 import { MonitorSummary } from '../../../../common/runtime_types';
 import { MonitorListStatusColumn } from './columns/monitor_status_column';
@@ -51,15 +53,33 @@ export const MonitorListComponent: ({
   pageSize,
   setPageSize,
 }: Props) => any = ({ filters, monitorList: { list, error, loading }, pageSize, setPageSize }) => {
-  const [drawerIds, updateDrawerIds] = useState<string[]>([]);
+  const [expandedDrawerIds, updateExpandedDrawerIds] = useState<string[]>([]);
+  const { width } = useWindowSize();
+  const [hideExtraColumns, setHideExtraColumns] = useState(false);
+
+  useDebounce(
+    () => {
+      setHideExtraColumns(['m', 'l'].includes(getBreakpoint(width) ?? ''));
+    },
+    50,
+    [width]
+  );
 
   const items = list.summaries ?? [];
 
   const nextPagePagination = list.nextPagePagination ?? '';
   const prevPagePagination = list.prevPagePagination ?? '';
 
+  const toggleDrawer = (id: string) => {
+    if (expandedDrawerIds.includes(id)) {
+      updateExpandedDrawerIds(expandedDrawerIds.filter((p) => p !== id));
+    } else {
+      updateExpandedDrawerIds([...expandedDrawerIds, id]);
+    }
+  };
+
   const getExpandedRowMap = () => {
-    return drawerIds.reduce((map: ExpandedRowMap, id: string) => {
+    return expandedDrawerIds.reduce((map: ExpandedRowMap, id: string) => {
       return {
         ...map,
         [id]: (
@@ -72,104 +92,113 @@ export const MonitorListComponent: ({
   };
 
   const columns = [
-    {
-      align: 'left' as const,
-      field: 'state.summary.status',
-      name: labels.STATUS_COLUMN_LABEL,
-      mobileOptions: {
-        fullWidth: true,
+    ...[
+      {
+        align: 'left' as const,
+        field: 'state.summary.status',
+        name: labels.STATUS_COLUMN_LABEL,
+        mobileOptions: {
+          fullWidth: true,
+        },
+        render: (status: string, { state: { timestamp, summaryPings } }: MonitorSummary) => {
+          return (
+            <MonitorListStatusColumn
+              status={status}
+              timestamp={timestamp}
+              summaryPings={summaryPings ?? []}
+            />
+          );
+        },
       },
-      render: (status: string, { state: { timestamp, summaryPings } }: MonitorSummary) => {
-        return (
-          <MonitorListStatusColumn
-            status={status}
-            timestamp={timestamp}
-            summaryPings={summaryPings ?? []}
-          />
-        );
+      {
+        align: 'left' as const,
+        field: 'state.monitor.name',
+        name: labels.NAME_COLUMN_LABEL,
+        mobileOptions: {
+          fullWidth: true,
+        },
+        render: (_name: string, summary: MonitorSummary) => <MonitorNameColumn summary={summary} />,
+        sortable: true,
       },
-    },
-    {
-      align: 'left' as const,
-      field: 'state.monitor.name',
-      name: labels.NAME_COLUMN_LABEL,
-      mobileOptions: {
-        fullWidth: true,
+      {
+        align: 'left' as const,
+        field: 'state.url.full',
+        name: URL_LABEL,
+        width: '30%',
+        render: (url: string) => (
+          <EuiLink href={url} target="_blank" color="text" external>
+            {url}
+          </EuiLink>
+        ),
       },
-      render: (name: string, summary: MonitorSummary) => <MonitorNameColumn summary={summary} />,
-      sortable: true,
-    },
-    {
-      align: 'left' as const,
-      field: 'state.url.full',
-      name: URL_LABEL,
-      width: '30%',
-      render: (url: string) => (
-        <EuiLink href={url} target="_blank" color="text" external>
-          {url}
-        </EuiLink>
-      ),
-    },
-    {
-      align: 'left' as const,
-      field: 'state.monitor.name',
-      name: TAGS_LABEL,
-      width: '12%',
-      render: (_name: string, summary: MonitorSummary) => <MonitorTags summary={summary} />,
-    },
-    {
-      align: 'left' as const,
-      field: 'state.tls.server.x509',
-      name: labels.TLS_COLUMN_LABEL,
-      render: (x509: X509Expiry) => <CertStatusColumn expiry={x509} />,
-    },
-    {
-      align: 'center' as const,
-      field: 'histogram.points',
-      name: labels.HISTORY_COLUMN_LABEL,
-      mobileOptions: {
-        show: false,
+      {
+        align: 'left' as const,
+        field: 'state.monitor.name',
+        name: TAGS_LABEL,
+        width: '12%',
+        render: (_name: string, summary: MonitorSummary) => <MonitorTags summary={summary} />,
       },
-      render: (histogramSeries: HistogramPoint[] | null, summary: MonitorSummary) => (
-        <MonitorBarSeries histogramSeries={histogramSeries} minInterval={summary.minInterval!} />
-      ),
-    },
-    {
-      align: 'center' as const,
-      field: '',
-      name: STATUS_ALERT_COLUMN,
-      width: '100px',
-      render: (item: MonitorSummary) => (
-        <EnableMonitorAlert
-          monitorId={item.monitor_id}
-          selectedMonitor={item.state.summaryPings[0]}
-        />
-      ),
-    },
-    {
-      align: 'right' as const,
-      field: 'monitor_id',
-      name: '',
-      sortable: true,
-      isExpander: true,
-      width: '40px',
-      render: (id: string) => {
-        return (
-          <EuiButtonIcon
-            aria-label={labels.getExpandDrawerLabel(id)}
-            data-test-subj={`xpack.uptime.monitorList.${id}.expandMonitorDetail`}
-            iconType={drawerIds.includes(id) ? 'arrowUp' : 'arrowDown'}
-            onClick={() => {
-              if (drawerIds.includes(id)) {
-                updateDrawerIds(drawerIds.filter((p) => p !== id));
-              } else {
-                updateDrawerIds([...drawerIds, id]);
-              }
-            }}
+      {
+        align: 'left' as const,
+        field: 'state.tls.server.x509',
+        name: labels.TLS_COLUMN_LABEL,
+        render: (x509: X509Expiry) => <CertStatusColumn expiry={x509} />,
+      },
+    ],
+    ...(!hideExtraColumns
+      ? [
+          {
+            align: 'left' as const,
+            field: 'histogram.points',
+            name: labels.HISTORY_COLUMN_LABEL,
+            mobileOptions: {
+              show: false,
+            },
+            render: (histogramSeries: HistogramPoint[] | null, summary: MonitorSummary) => (
+              <MonitorBarSeries
+                histogramSeries={histogramSeries}
+                minInterval={summary.minInterval!}
+              />
+            ),
+          },
+        ]
+      : []),
+    ...[
+      {
+        align: 'center' as const,
+        field: '',
+        name: STATUS_ALERT_COLUMN,
+        width: '100px',
+        render: (item: MonitorSummary) => (
+          <EnableMonitorAlert
+            monitorId={item.monitor_id}
+            selectedMonitor={item.state.summaryPings[0]}
           />
-        );
+        ),
       },
-    },
+    ],
+    ...(!hideExtraColumns
+      ? [
+          {
+            align: 'right' as const,
+            field: 'monitor_id',
+            name: '',
+            sortable: true,
+            isExpander: true,
+            width: '40px',
+            render: (id: string) => {
+              return (
+                <EuiButtonIcon
+                  aria-label={labels.getExpandDrawerLabel(id)}
+                  data-test-subj={`xpack.uptime.monitorList.${id}.expandMonitorDetail`}
+                  iconType={expandedDrawerIds.includes(id) ? 'arrowUp' : 'arrowDown'}
+                  onClick={() => toggleDrawer(id)}
+                />
+              );
+            },
+          },
+        ]
+      : []),
   ];
 
   return (
@@ -188,6 +217,14 @@ export const MonitorListComponent: ({
         noItemsMessage={noItemsMessage(loading, filters)}
         columns={columns}
         tableLayout={'auto'}
+        rowProps={
+          hideExtraColumns
+            ? ({ monitor_id: monitorId }) => ({
+                onClick: () => toggleDrawer(monitorId),
+                'aria-label': labels.getExpandDrawerLabel(monitorId),
+              })
+            : undefined
+        }
       />
       <EuiSpacer size="m" />
       <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>