[Uptime] update monitor list configs for mobile view (#43218)

* update monitor list configs for mobile view * [uptime] update unit test snapshot
elastic · Aug 15, 2019 · dbb140d · dbb140d
1 parent 4b05fd9
commit dbb140d
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 49 deletions.
diff --git a/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
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
@@ -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>