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

This commit is contained in:
Andrew Cholakian 2019-02-05 12:00:06 -06:00 committed by GitHub
parent e0af67bcf9
commit ab664506d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 1 additions and 181 deletions

View file

@ -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';

View file

@ -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}
`;

View file

@ -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';

View file

@ -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>
);

View file

@ -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 {
MonitorChartsQuery,
MonitorSelectQuery,
MonitorStatusBarQuery,
PingListQuery,
} from '../components/queries';
import { MonitorChartsQuery, 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 />

View file

@ -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/" } }
]
}

View file

@ -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'));

View file

@ -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);
});
});
}