From 27eb4ae93a50b866260217c140c9d206265b8d6b Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Tue, 13 Aug 2019 21:02:22 +0200
Subject: [PATCH 1/2] update monitor list configs for mobile view

---
 .../functional/monitor_list/monitor_list.tsx  | 76 +++++++++++--------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
index a5c902af34b5d..fcbf3766a9d33 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
@@ -103,7 +103,8 @@ export const MonitorListComponent = (props: Props) => {
         <EuiBasicTable
           error={errors ? formatUptimeGraphQLErrorList(errors) : errors}
           loading={loading}
-          isExpandable
+          isExpandable={true}
+          hasActions={true}
           itemId="monitor_id"
           itemIdToExpandedRowMap={drawerIds.reduce((map: ExpandedRowMap, id: string) => {
             return {
@@ -133,38 +134,6 @@ export const MonitorListComponent = (props: Props) => {
           // TODO: reintegrate sorting in future release
           // sorting={sorting}
           columns={[
-            {
-              align: 'left',
-              field: 'monitor_id',
-              name: '',
-              sortable: true,
-              width: '40px',
-              render: (id: string) => {
-                return (
-                  <EuiButtonIcon
-                    aria-label={i18n.translate(
-                      'xpack.uptime.monitorList.expandDrawerButton.ariaLabel',
-                      {
-                        defaultMessage: 'Expand row for monitor with ID {id}',
-                        description:
-                          'The user can click a button on this table and expand further details.',
-                        values: {
-                          id,
-                        },
-                      }
-                    )}
-                    iconType={drawerIds.find(item => item === id) ? 'arrowUp' : 'arrowDown'}
-                    onClick={() => {
-                      if (drawerIds.find(i => id === i)) {
-                        updateDrawerIds(drawerIds.filter(p => p !== id));
-                      } else {
-                        updateDrawerIds([...drawerIds, id]);
-                      }
-                    }}
-                  />
-                );
-              },
-            },
             {
               align: 'left',
               field: 'state.monitor.status',
@@ -212,6 +181,9 @@ export const MonitorListComponent = (props: Props) => {
               name: i18n.translate('xpack.uptime.monitorList.monitorHistoryColumnLabel', {
                 defaultMessage: 'Downtime history',
               }),
+              mobileOptions: {
+                show: false,
+              },
               render: (histogramSeries: SummaryHistogramPoint[] | null) => (
                 <MonitorBarSeries
                   absoluteStartDate={absoluteStartDate}
@@ -222,8 +194,13 @@ export const MonitorListComponent = (props: Props) => {
               ),
             },
             {
+              id: 'actions',
               align: 'right',
               field: 'state',
+              hasActions: true,
+              mobileOptions: {
+                header: false,
+              },
               name: i18n.translate(
                 'xpack.uptime.monitorList.observabilityIntegrationsColumnLabel',
                 {
@@ -236,6 +213,39 @@ export const MonitorListComponent = (props: Props) => {
                 <MonitorListActionsPopover summary={summary} />
               ),
             },
+            {
+              align: 'left',
+              field: 'monitor_id',
+              name: '',
+              sortable: true,
+              width: '40px',
+              isExpander: true,
+              render: (id: string) => {
+                return (
+                  <EuiButtonIcon
+                    aria-label={i18n.translate(
+                      'xpack.uptime.monitorList.expandDrawerButton.ariaLabel',
+                      {
+                        defaultMessage: 'Expand row for monitor with ID {id}',
+                        description:
+                          'The user can click a button on this table and expand further details.',
+                        values: {
+                          id,
+                        },
+                      }
+                    )}
+                    iconType={drawerIds.find(item => item === id) ? 'arrowUp' : 'arrowDown'}
+                    onClick={() => {
+                      if (drawerIds.find(i => id === i)) {
+                        updateDrawerIds(drawerIds.filter(p => p !== id));
+                      } else {
+                        updateDrawerIds([...drawerIds, id]);
+                      }
+                    }}
+                  />
+                );
+              },
+            },
           ]}
         />
       </EuiPanel>

From e3991a7f6f72c1a54db6dbdff828a14e9dc18af0 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Wed, 14 Aug 2019 12:16:46 +0200
Subject: [PATCH 2/2] [uptime] update unit test snapshot

---
 .../__snapshots__/monitor_list.test.tsx.snap  | 52 +++++++++++++------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index d83117dd538b6..a8aa1963190e4 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -21,14 +21,6 @@ exports[`MonitorList component renders a no items message when no data is provid
     <EuiBasicTable
       columns={
         Array [
-          Object {
-            "align": "left",
-            "field": "monitor_id",
-            "name": "",
-            "render": [Function],
-            "sortable": true,
-            "width": "40px",
-          },
           Object {
             "align": "left",
             "field": "state.monitor.status",
@@ -51,17 +43,35 @@ exports[`MonitorList component renders a no items message when no data is provid
           },
           Object {
             "field": "histogram.points",
+            "mobileOptions": Object {
+              "show": false,
+            },
             "name": "Downtime history",
             "render": [Function],
           },
           Object {
             "align": "right",
             "field": "state",
+            "hasActions": true,
+            "id": "actions",
+            "mobileOptions": Object {
+              "header": false,
+            },
             "name": "Integrations",
             "render": [Function],
           },
+          Object {
+            "align": "left",
+            "field": "monitor_id",
+            "isExpander": true,
+            "name": "",
+            "render": [Function],
+            "sortable": true,
+            "width": "40px",
+          },
         ]
       }
+      hasActions={true}
       isExpandable={true}
       itemId="monitor_id"
       itemIdToExpandedRowMap={Object {}}
@@ -95,14 +105,6 @@ exports[`MonitorList component renders the monitor list 1`] = `
     <EuiBasicTable
       columns={
         Array [
-          Object {
-            "align": "left",
-            "field": "monitor_id",
-            "name": "",
-            "render": [Function],
-            "sortable": true,
-            "width": "40px",
-          },
           Object {
             "align": "left",
             "field": "state.monitor.status",
@@ -125,17 +127,35 @@ exports[`MonitorList component renders the monitor list 1`] = `
           },
           Object {
             "field": "histogram.points",
+            "mobileOptions": Object {
+              "show": false,
+            },
             "name": "Downtime history",
             "render": [Function],
           },
           Object {
             "align": "right",
             "field": "state",
+            "hasActions": true,
+            "id": "actions",
+            "mobileOptions": Object {
+              "header": false,
+            },
             "name": "Integrations",
             "render": [Function],
           },
+          Object {
+            "align": "left",
+            "field": "monitor_id",
+            "isExpander": true,
+            "name": "",
+            "render": [Function],
+            "sortable": true,
+            "width": "40px",
+          },
         ]
       }
+      hasActions={true}
       isExpandable={true}
       itemId="monitor_id"
       itemIdToExpandedRowMap={Object {}}