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

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

@@ -9,7 +9,6 @@ export { ErrorListQuery } from './error_list';
 export { FilterBarQuery } from './filter_bar';
 export { MonitorChartsQuery } from './monitor_charts';
 export { MonitorListQuery } from './monitor_list';
-export { MonitorSelectQuery } from './monitor_select';
 export { MonitorStatusBarQuery } from './monitor_status_bar';
 export { PingListQuery } from './ping_list';
 export { SnapshotQuery } from './snapshot';

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

@@ -1,25 +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 getLatestMonitorsQueryString = `
-query GetLatestMonitorQuery($dateRangeStart: String!, $dateRangeEnd: String!) {
-  latestMonitors: getLatestMonitors(
-    dateRangeStart: $dateRangeStart
-    dateRangeEnd: $dateRangeEnd
-  ) {
-    monitor {
-      status
-      id
-    }
-  }
-}
-`;
-
-export const getLatestMonitorsQuery = gql`
-  ${getLatestMonitorsQueryString}
-`;

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 { MonitorSelectQuery } from './monitor_select_query';

x-pack/plugins/uptime/public/components/queries/monitor_select/monitor_select_query.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 { getLatestMonitorsQuery } from './get_latest_monitors';
-
-interface MonitorSelectProps {
-  valueOfSelectedMonitor?: string;
-  onChange: (path: string, state: object) => void;
-}
-
-type Props = MonitorSelectProps & UptimeCommonProps;
-
-export const MonitorSelectQuery = ({
-  dateRangeStart,
-  dateRangeEnd,
-  valueOfSelectedMonitor,
-  autorefreshInterval,
-  autorefreshIsPaused,
-  onChange,
-}: Props) => (
-  <Query
-    pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
-    query={getLatestMonitorsQuery}
-    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,23 +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 {
+import { MonitorChartsQuery, MonitorStatusBarQuery, PingListQuery } from '../components/queries';
-  MonitorChartsQuery,
-  MonitorSelectQuery,
-  MonitorStatusBarQuery,
-  PingListQuery,
-} from '../components/queries';
 import { UMUpdateBreadcrumbs } from '../lib/lib';
 import { UptimeCommonProps } from '../uptime_app';
 
@@ -44,7 +36,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\/)/, '');
@@ -54,23 +45,6 @@ export class MonitorPage extends React.Component<Props> {
           <h2>{id}</h2>
         </EuiTitle>
         <EuiSpacer size="l" />
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <span>
-              <FormattedMessage
-                id="xpack.uptime.monitorPage.header.salutation"
-                defaultMessage="Monitor:"
-              />
-            </span>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <MonitorSelectQuery
-              valueOfSelectedMonitor={id}
-              onChange={history.push}
-              {...this.props}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
         <EuiSpacer />
         <MonitorStatusBarQuery monitorId={id} {...this.props} />
         <EuiSpacer />

x-pack/test/api_integration/apis/uptime/graphql/fixtures/monitor_select.json

@@ -1,14 +0,0 @@
-{
-  "latestMonitors": [
-    { "monitor": { "status": "up", "id": "tcp-tcp@localhost:9200" } },
-    { "monitor": { "status": "up", "id": "http@https://www.elastic.co" } },
-    { "monitor": { "status": "up", "id": "http@http://localhost:12349/" } },
-    { "monitor": { "status": "up", "id": "http@http://www.google.com/" } },
-    { "monitor": { "status": "up", "id": "http@https://www.google.com/" } },
-    { "monitor": { "status": "up", "id": "http@https://www.github.com/" } },
-    { "monitor": { "status": "down", "id": "http@http://www.example.com" } },
-    { "monitor": { "status": "up", "id": "http@https://news.google.com/" } },
-    { "monitor": { "status": "up", "id": "http@https://www.wikipedia.org/" } }
-  ]
-}
-

x-pack/test/api_integration/apis/uptime/graphql/index.js

@@ -19,7 +19,6 @@ export default function ({ getService, loadTestFile }) {
     loadTestFile(require.resolve('./error_list'));
     loadTestFile(require.resolve('./filter_bar'));
     loadTestFile(require.resolve('./monitor_list'));
-    loadTestFile(require.resolve('./monitor_select'));
     loadTestFile(require.resolve('./monitor_status_bar'));
     loadTestFile(require.resolve('./ping_list'));
     loadTestFile(require.resolve('./snapshot'));

x-pack/test/api_integration/apis/uptime/graphql/monitor_select.js

@@ -1,30 +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 expect from 'expect.js';
-import { getLatestMonitorsQueryString } from '../../../../../plugins/uptime/public/components/queries/monitor_select/get_latest_monitors';
-import monitorSelect from './fixtures/monitor_select';
-
-export default function ({ getService }) {
-  describe('monitorSelect query', () => {
-    const supertest = getService('supertest');
-
-    it('returns a list of the monitors for the given date range', async () => {
-      const getMonitorSelectQuery = {
-        operationName: 'GetLatestMonitorQuery',
-        query: getLatestMonitorsQueryString,
-        variables: { dateRangeStart: 1547805782000, dateRangeEnd: 1547852582000 },
-      };
-      const {
-        body: { data },
-      } = await supertest
-        .post('/api/uptime/graphql')
-        .set('kbn-xsrf', 'foo')
-        .send({ ...getMonitorSelectQuery });
-      expect(data).to.eql(monitorSelect);
-    });
-  });
-}