[Uptime] Remove non-scaleable monitor select box. (#29217)

* [Uptime] Remove non-scaleable monitor select box.

This widget was not scaleable to more than a handful of monitors. For now users can navigate more completely with the overview page. We can add a more scaleable quick-jump widget at a later point.

* Fix unused

x-pack/plugins/uptime/public/components/queries/monitor_select/get_latest_monitors.ts

@@ -1,21 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import gql from 'graphql-tag';
-
-export const createGetLatestMonitorsQuery = gql`
-  query GetLatestMonitorQuery($dateRangeStart: String!, $dateRangeEnd: String!) {
-    latestMonitors: getLatestMonitors(
-      dateRangeStart: $dateRangeStart
-      dateRangeEnd: $dateRangeEnd
-    ) {
-      monitor {
-        status
-        id
-      }
-    }
-  }
-`;

x-pack/plugins/uptime/public/components/queries/monitor_select/index.ts

@@ -1,7 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export { MonitorSelect } from './monitor_select';

x-pack/plugins/uptime/public/components/queries/monitor_select/monitor_select.tsx

@@ -1,76 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-// @ts-ignore No typing for EuiSuperSelect
-import { EuiHealth, EuiSuperSelect } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React, { Fragment } from 'react';
-import { Query } from 'react-apollo';
-import { Monitor } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { createGetLatestMonitorsQuery } from './get_latest_monitors';
-
-interface MonitorSelectProps {
-  valueOfSelectedMonitor?: string;
-  onChange: (path: string, state: object) => void;
-}
-
-type Props = MonitorSelectProps & UptimeCommonProps;
-
-export const MonitorSelect = ({
-  dateRangeStart,
-  dateRangeEnd,
-  valueOfSelectedMonitor,
-  autorefreshInterval,
-  autorefreshIsPaused,
-  onChange,
-}: Props) => (
-  <Query
-    pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
-    query={createGetLatestMonitorsQuery}
-    variables={{ dateRangeStart, dateRangeEnd }}
-  >
-    {({ loading, error, data }) => {
-      if (loading) {
-        return i18n.translate('xpack.uptime.monitorSelect.loadingMessage', {
-          defaultMessage: 'Loading…',
-        });
-      }
-      if (error) {
-        return i18n.translate('xpack.uptime.monitorSelect.errorMessage', {
-          values: { message: error.message },
-          defaultMessage: 'Error {message}',
-        });
-      }
-      const { latestMonitors } = data;
-      const options = latestMonitors.map(({ monitor }: { monitor: Monitor }) => ({
-        value: monitor.id,
-        inputDisplay: (
-          <EuiHealth
-            color={monitor.status === 'up' ? 'success' : 'danger'}
-            style={{ lineHeight: 'inherit' }}
-          >
-            {monitor.id}
-          </EuiHealth>
-        ),
-      }));
-      return (
-        <Fragment>
-          {options.length > 0 && (
-            <EuiSuperSelect
-              options={options}
-              valueOfSelected={valueOfSelectedMonitor}
-              onChange={(e: string) => onChange(`/monitor/${e}`, {})}
-            />
-          )}
-          {options.length === 0 && (
-            <h4>There is no monitor data available for the selected time range</h4>
-          )}
-        </Fragment>
-      );
-    }}
-  </Query>
-);

x-pack/plugins/uptime/public/pages/monitor.tsx

@@ -5,19 +5,15 @@
  */
 
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
   // @ts-ignore No typings for EuiSpacer
   EuiSpacer,
   // @ts-ignore No typings for EuiSuperSelect
   EuiSuperSelect,
   EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Fragment } from 'react';
 import { getMonitorPageBreadcrumb } from '../breadcrumbs';
 import { MonitorCharts } from '../components/queries/monitor_charts';
-import { MonitorSelect } from '../components/queries/monitor_select';
 import { MonitorStatusBar } from '../components/queries/monitor_status_bar';
 import { Pings } from '../components/queries/ping_list';
 import { UMUpdateBreadcrumbs } from '../lib/lib';
@@ -42,7 +38,6 @@ export class MonitorPage extends React.Component<Props> {
   }
 
   public render() {
-    const { history } = this.props;
     // TODO: this is a hack because the id field's characters mess up react router's
     // inner params parsing, when we add a synthetic ID for monitors this problem should go away
     const id = this.props.location.pathname.replace(/^(\/monitor\/)/, '');
@@ -51,20 +46,6 @@ export class MonitorPage extends React.Component<Props> {
         <EuiTitle>
           <h2>{id}</h2>
         </EuiTitle>
-        <EuiSpacer size="l" />
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <span>
-              <FormattedMessage
-                id="xpack.uptime.monitorPage.header.salutation"
-                defaultMessage="Monitor:"
-              />
-            </span>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <MonitorSelect valueOfSelectedMonitor={id} onChange={history.push} {...this.props} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
         <EuiSpacer />
         <MonitorStatusBar monitorId={id} {...this.props} />
         <EuiSpacer />