github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add HOC for wrapping snapshot histogram component. (#49268) (#49789)

Browse source
This commit is contained in:
Justin Kambic 2019-10-30 21:18:14 -04:00 • committed by GitHub
parent ef4939d828
commit 37d3618d2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 401 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

151
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap generated
View file

@ -1,82 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonitorCharts component renders the component without errors 1`] = `
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<DurationChart
loading={false}
locationDurationLines={
Array [
Object {
"line": Array [
Object {
"x": 1548697620000,
"y": 743928.2027027027,
},
Object {
"x": 1548697920000,
"y": 766840.0133333333,
},
Object {
"x": 1548698220000,
"y": 786970.8266666667,
},
Object {
"x": 1548698520000,
"y": 781064.7808219178,
},
Object {
"x": 1548698820000,
"y": 741563.04,
},
Object {
"x": 1548699120000,
"y": 759354.6756756756,
},
Object {
"x": 1548699420000,
"y": 737533.3866666667,
},
Object {
"x": 1548699720000,
"y": 728669.0266666666,
},
Object {
"x": 1548700020000,
"y": 719951.64,
},
Object {
"x": 1548700320000,
"y": 769181.7866666666,
},
Object {
"x": 1548700620000,
"y": 740805.2666666667,
},
],
"name": "somewhere",
},
]
}
meanColor="mean"
rangeColor="range"
/>
</EuiFlexItem>
<EuiFlexItem>
<withApollo(Component)
absoluteEndDate={20}
absoluteStartDate={20}
height="400px"
variables={
<EuiFlexGroup>
<EuiFlexItem>
<DurationChart
loading={false}
locationDurationLines={
Array [
Object {
"dateRangeEnd": "2011-12-03T10:15:30+01:00",
"dateRangeStart": "2011-12-03T10:15:30+01:00",
"monitorId": "something",
}
"line": Array [
Object {
"x": 1548697620000,
"y": 743928.2027027027,
},
Object {
"x": 1548697920000,
"y": 766840.0133333333,
},
Object {
"x": 1548698220000,
"y": 786970.8266666667,
},
Object {
"x": 1548698520000,
"y": 781064.7808219178,
},
Object {
"x": 1548698820000,
"y": 741563.04,
},
Object {
"x": 1548699120000,
"y": 759354.6756756756,
},
Object {
"x": 1548699420000,
"y": 737533.3866666667,
},
Object {
"x": 1548699720000,
"y": 728669.0266666666,
},
Object {
"x": 1548700020000,
"y": 719951.64,
},
Object {
"x": 1548700320000,
"y": 769181.7866666666,
},
Object {
"x": 1548700620000,
"y": 740805.2666666667,
},
],
"name": "somewhere",
},
]
}
meanColor="mean"
rangeColor="range"
/>
</EuiFlexItem>
<EuiFlexItem>
<withApollo(Component)
absoluteEndDate={20}
absoluteStartDate={20}
height="400px"
isResponsive={false}
variables={
Object {
"dateRangeEnd": "2011-12-03T10:15:30+01:00",
"dateRangeStart": "2011-12-03T10:15:30+01:00",
"monitorId": "something",
}
/>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
}
/>
</EuiFlexItem>
</EuiFlexGroup>
`;

1
x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx
View file

@ -12,6 +12,7 @@ describe('SnapshotHistogram component', () => {
const props: SnapshotHistogramProps = {
absoluteStartDate: 1548697920000,
absoluteEndDate: 1548700920000,
isResponsive: false,
};
it('renders the component without errors', () => {

29
x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
View file

@ -19,27 +19,16 @@ import { i18n } from '@kbn/i18n';
import React, { useContext } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import moment from 'moment';
import styled from 'styled-components';
import { getColorsMap } from './get_colors_map';
import { getChartDateLabel } from '../../../lib/helper';
import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
import { ChartWrapper } from './chart_wrapper';
import { UptimeSettingsContext } from '../../../contexts';
import { ResponsiveWrapperProps, withResponsiveWrapper } from '../../higher_order';
import { HistogramResult } from '../../../../common/domain_types';
const SnapshotHistogramWrapper = styled.div`
margin-left: 120px;
@media (max-width: 950px) {
margin-left: 48px;
}
@media (max-width: 767px) {
margin-left: 12px;
margin-top: 40px;
}
`;
export interface SnapshotHistogramProps {
interface HistogramProps {
/**
* The date/time for the start of the timespan.
*/
@ -55,13 +44,17 @@ export interface SnapshotHistogramProps {
height?: string;
}
export type SnapshotHistogramProps = HistogramProps & ResponsiveWrapperProps;
interface SnapshotHistogramQueryResult {
queryResult?: HistogramResult;
}
type Props = UptimeGraphQLQueryProps<SnapshotHistogramQueryResult> & SnapshotHistogramProps;
type Props = UptimeGraphQLQueryProps<SnapshotHistogramQueryResult> &
SnapshotHistogramProps &
ResponsiveWrapperProps;
export const SnapshotHistogramComponent = ({
export const SnapshotHistogramComponent: React.FC<Props> = ({
absoluteStartDate,
absoluteEndDate,
data,
@ -126,7 +119,7 @@ export const SnapshotHistogramComponent = ({
});
const upSpecId = getSpecId(upMonitorsId);
return (
<SnapshotHistogramWrapper>
<>
<EuiTitle size="xs">
<h2>
<FormattedMessage
@ -207,11 +200,11 @@ export const SnapshotHistogramComponent = ({
/>
</Chart>
</ChartWrapper>
</SnapshotHistogramWrapper>
</>
);
};
export const SnapshotHistogram = withUptimeGraphQL<
SnapshotHistogramQueryResult,
SnapshotHistogramProps
>(SnapshotHistogramComponent, snapshotHistogramQuery);
>(withResponsiveWrapper<Props>(SnapshotHistogramComponent), snapshotHistogramQuery);

39
x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
View file

@ -48,26 +48,25 @@ export const MonitorChartsComponent = ({
const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
return (
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<DurationChart
locationDurationLines={locationDurationLines}
meanColor={mean}
rangeColor={range}
loading={loading}
/>
</EuiFlexItem>
<EuiFlexItem>
<SnapshotHistogram
absoluteStartDate={absoluteDateRangeStart}
absoluteEndDate={absoluteDateRangeEnd}
variables={{ dateRangeStart, dateRangeEnd, monitorId }}
height="400px"
/>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<DurationChart
locationDurationLines={locationDurationLines}
meanColor={mean}
rangeColor={range}
loading={loading}
/>
</EuiFlexItem>
<EuiFlexItem>
<SnapshotHistogram
absoluteStartDate={absoluteDateRangeStart}
absoluteEndDate={absoluteDateRangeEnd}
height="400px"
isResponsive={false}
variables={{ dateRangeStart, dateRangeEnd, monitorId }}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
}
return (

6
x-pack/legacy/plugins/uptime/public/components/functional/status_panel.tsx
View file

@ -8,19 +8,16 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
import React from 'react';
import { SnapshotHistogram } from './charts';
import { Snapshot } from './snapshot';
import { UptimeAppColors } from '../../uptime_app';
interface StatusPanelProps {
absoluteDateRangeStart: number;
absoluteDateRangeEnd: number;
colors: UptimeAppColors;
sharedProps: { [key: string]: any };
}
export const StatusPanel = ({
absoluteDateRangeStart,
absoluteDateRangeEnd,
colors: { danger, success },
sharedProps,
}: StatusPanelProps) => (
<EuiPanel>
@ -32,8 +29,9 @@ export const StatusPanel = ({
<SnapshotHistogram
absoluteStartDate={absoluteDateRangeStart}
absoluteEndDate={absoluteDateRangeEnd}
variables={sharedProps}
height="160px"
isResponsive={true}
variables={sharedProps}
/>
</EuiFlexItem>
</EuiFlexGroup>

221
x-pack/legacy/plugins/uptime/public/components/higher_order/__tests__/__snapshots__/responsive_wrapper.test.tsx.snap generated Normal file
View file

@ -0,0 +1,221 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ResponsiveWrapper HOC is not responsive when prop is false 1`] = `
<EuiPanel
paddingSize="m"
>
<Component
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {
"date": Object {
"full": Object {
"day": "numeric",
"month": "long",
"weekday": "long",
"year": "numeric",
},
"long": Object {
"day": "numeric",
"month": "long",
"year": "numeric",
},
"medium": Object {
"day": "numeric",
"month": "short",
"year": "numeric",
},
"short": Object {
"day": "numeric",
"month": "numeric",
"year": "2-digit",
},
},
"number": Object {
"currency": Object {
"style": "currency",
},
"percent": Object {
"style": "percent",
},
},
"relative": Object {
"days": Object {
"units": "day",
},
"hours": Object {
"units": "hour",
},
"minutes": Object {
"units": "minute",
},
"months": Object {
"units": "month",
},
"seconds": Object {
"units": "second",
},
"years": Object {
"units": "year",
},
},
"time": Object {
"full": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"long": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"medium": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
},
"short": Object {
"hour": "numeric",
"minute": "numeric",
},
},
},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"now": [Function],
"onError": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": null,
}
}
/>
</EuiPanel>
`;
exports[`ResponsiveWrapper HOC renders a responsive wrapper 1`] = `
<styled.div>
<Component
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {
"date": Object {
"full": Object {
"day": "numeric",
"month": "long",
"weekday": "long",
"year": "numeric",
},
"long": Object {
"day": "numeric",
"month": "long",
"year": "numeric",
},
"medium": Object {
"day": "numeric",
"month": "short",
"year": "numeric",
},
"short": Object {
"day": "numeric",
"month": "numeric",
"year": "2-digit",
},
},
"number": Object {
"currency": Object {
"style": "currency",
},
"percent": Object {
"style": "percent",
},
},
"relative": Object {
"days": Object {
"units": "day",
},
"hours": Object {
"units": "hour",
},
"minutes": Object {
"units": "minute",
},
"months": Object {
"units": "month",
},
"seconds": Object {
"units": "second",
},
"years": Object {
"units": "year",
},
},
"time": Object {
"full": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"long": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"medium": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
},
"short": Object {
"hour": "numeric",
"minute": "numeric",
},
},
},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"now": [Function],
"onError": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": null,
}
}
/>
</styled.div>
`;

30
x-pack/legacy/plugins/uptime/public/components/higher_order/__tests__/responsive_wrapper.test.tsx Normal file
View file

@ -0,0 +1,30 @@
/*
* 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 React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { withResponsiveWrapper } from '../responsive_wrapper';
interface Prop {
isResponsive: boolean;
}
describe('ResponsiveWrapper HOC', () => {
let WrappedByHOC: React.FC<Prop>;
beforeEach(() => {
WrappedByHOC = withResponsiveWrapper<Prop>(() => <div>Should be responsive</div>);
});
it('renders a responsive wrapper', () => {
const component = shallowWithIntl(<WrappedByHOC isResponsive={true} />);
expect(component).toMatchSnapshot();
});
it('is not responsive when prop is false', () => {
const component = shallowWithIntl(<WrappedByHOC isResponsive={false} />);
expect(component).toMatchSnapshot();
});
});

1
x-pack/legacy/plugins/uptime/public/components/higher_order/index.ts
View file

@ -5,3 +5,4 @@
*/
export { UptimeGraphQLQueryProps, withUptimeGraphQL } from './uptime_graphql_query';
export { ResponsiveWrapperProps, withResponsiveWrapper } from './responsive_wrapper';

41
x-pack/legacy/plugins/uptime/public/components/higher_order/responsive_wrapper.tsx Normal file
View file

@ -0,0 +1,41 @@
/*
* 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 { EuiPanel } from '@elastic/eui';
import React, { FC } from 'react';
import styled from 'styled-components';
const ResponsiveWrapper = styled.div`
margin-left: 120px;
@media (max-width: 950px) {
margin-left: 48px;
}
@media (max-width: 767px) {
margin-left: 12px;
margin-top: 40px;
}
`;
export interface ResponsiveWrapperProps {
isResponsive: boolean;
}
/**
* HOC that wraps a component in either a responsive div or an EuiPanel.
* @param Component The component to wrap.
*/
export const withResponsiveWrapper = <P extends {} & ResponsiveWrapperProps>(
Component: FC<P>
): FC<ResponsiveWrapperProps & P> => ({ isResponsive, ...rest }: ResponsiveWrapperProps) =>
isResponsive ? (
<ResponsiveWrapper>
<Component {...(rest as P)} />
</ResponsiveWrapper>
) : (
<EuiPanel paddingSize="m">
<Component {...(rest as P)} />
</EuiPanel>
);

1
x-pack/legacy/plugins/uptime/public/pages/overview.tsx
View file

@ -151,7 +151,6 @@ export const OverviewPage = ({
<StatusPanel
absoluteDateRangeStart={absoluteDateRangeStart}
absoluteDateRangeEnd={absoluteDateRangeEnd}
colors={colors}
sharedProps={sharedProps}
/>
<EuiSpacer size="s" />