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

[Uptime] Responsive snapshot histogram chart (#29649)

Browse source 
* Resize snapshot histogram chart.

* Update busted tests.
This commit is contained in:
Justin Kambic 2019-02-05 16:47:00 -05:00 • committed by GitHub
parent b61f87f559
commit 529162a044
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 107 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`Snapshot component renders without errors 1`] = `
>
<EuiFlexItem
component="div"
grow={true}
grow={4}
>
<EuiTitle
size="xs"
@ -102,9 +102,10 @@ exports[`Snapshot component renders without errors 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={8}
style={
Object {
"paddingRight": "12px",
"paddingTop": "12px",
}
}
@ -125,6 +126,11 @@ exports[`Snapshot component renders without errors 1`] = `
grow={true}
hasShadow={false}
paddingSize="s"
style={
Object {
"maxHeight": "137px",
}
}
>
<Component
dangerColor="#F050F0"
@ -1023,6 +1029,7 @@ exports[`Snapshot component renders without errors 1`] = `
]
}
primaryColor="#000000"
windowWidth={1600}
/>
</EuiPanel>
</EuiFlexItem>

4
x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot_histogram.test.tsx.snap
View file

@ -2,9 +2,9 @@
exports[`SnapshotHistogram component renders the component without errors 1`] = `
<FlexibleEuiSeriesChart
height={107}
height={120}
stackBy="y"
width={600}
width={654.285714285714}
xType="time"
>
<EuiHistogramSeries

7
x-pack/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx
View file

@ -192,7 +192,12 @@ describe('Snapshot component', () => {
it('renders without errors', () => {
const { snapshot } = data;
const wrapper = shallowWithIntl(
<Snapshot dangerColor="#F050F0" primaryColor="#000000" snapshot={snapshot} />
<Snapshot
dangerColor="#F050F0"
primaryColor="#000000"
snapshot={snapshot}
windowWidth={1600}
/>
);
expect(wrapper).toMatchSnapshot();
});

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

@ -12,6 +12,7 @@ describe('SnapshotHistogram component', () => {
const props = {
primaryColor: '#FEFEFE',
dangerColor: '#FF00FF',
windowWidth: 1200,
histogram: [
{
monitorId: 'auto-tcp-0X81440A68E839814C',

1
x-pack/plugins/uptime/public/components/functional/monitor_list.tsx
View file

@ -121,6 +121,7 @@ export const MonitorList = ({ dangerColor, loading, monitors, primaryColor }: Mo
return (
<EuiSeriesChart
showDefaultAxis={false}
width={180}
height={70}
stackBy="y"
// TODO: style hack

11
x-pack/plugins/uptime/public/components/functional/snapshot.tsx
View file

@ -32,15 +32,17 @@ interface SnapshotProps {
dangerColor: string;
primaryColor: string;
snapshot: SnapshotType;
windowWidth: number;
}
export const Snapshot = ({
dangerColor,
primaryColor,
snapshot: { up, down, total, histogram },
windowWidth,
}: SnapshotProps) => (
<EuiFlexGroup alignItems="baseline" gutterSize="xl">
<EuiFlexItem>
<EuiFlexItem grow={4}>
<EuiTitle size="xs">
<h5>
<FormattedMessage
@ -91,7 +93,7 @@ export const Snapshot = ({
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem style={{ paddingTop: '12px' }}>
<EuiFlexItem grow={8} style={{ paddingTop: '12px', paddingRight: '12px' }}>
<EuiTitle size="xs">
<h5>
<FormattedMessage
@ -101,12 +103,13 @@ export const Snapshot = ({
</h5>
</EuiTitle>
{/* TODO: this is a UI hack that should be replaced */}
<EuiPanel paddingSize="s">
<EuiPanel paddingSize="s" style={{ maxHeight: '137px' }}>
{histogram && (
<SnapshotHistogram
dangerColor={dangerColor}
primaryColor={primaryColor}
histogram={histogram}
primaryColor={primaryColor}
windowWidth={windowWidth}
/>
)}
{!histogram && (

16
x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx
View file

@ -12,20 +12,34 @@ import { HistogramSeries } from '../../../common/graphql/types';
import { formatHistogramData } from '../../lib/adapters/monitors/format_histogram_data';
interface SnapshotHistogramProps {
windowWidth: number;
primaryColor: string;
dangerColor: string;
histogram: HistogramSeries[];
}
/**
* These charts are going to be deprecated. Their responsive feature isn't
* working with our app, so temporarily we will use this ratio to auto-resize
* the histogram. When we upgrade the charts we will delete this.
*/
const windowRatio = 0.545238095238095;
export const SnapshotHistogram = ({
dangerColor,
histogram,
primaryColor,
windowWidth,
}: SnapshotHistogramProps) => {
const { upSeriesData, downSeriesData } = formatHistogramData(histogram);
return (
<EuiSeriesChart width={600} height={107} stackBy="y" xType={EuiSeriesChartUtils.SCALE.TIME}>
<EuiSeriesChart
width={windowWidth * windowRatio}
height={120}
stackBy="y"
xType={EuiSeriesChartUtils.SCALE.TIME}
>
<EuiHistogramSeries
data={upSeriesData}
name={i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {

96
x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx
View file

@ -11,38 +11,74 @@ import { UptimeCommonProps } from '../../../uptime_app';
import { Snapshot, SnapshotLoading } from '../../functional';
import { getSnapshotQuery } from './get_snapshot';
interface SnapshotProps {
interface SnapshotQueryProps {
filters?: string;
}
type Props = SnapshotProps & UptimeCommonProps;
interface SnapshotQueryState {
windowWidth: number;
}
export const SnapshotQuery = ({
autorefreshIsPaused,
autorefreshInterval,
colors: { primary, danger },
dateRangeStart,
dateRangeEnd,
filters,
}: Props) => (
<Query
pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
query={getSnapshotQuery}
variables={{ dateRangeStart, dateRangeEnd, filters }}
>
{({ loading, error, data }) => {
if (loading) {
return <SnapshotLoading />;
}
if (error) {
return i18n.translate('xpack.uptime.snapshot.errorMessage', {
values: { message: error.message },
defaultMessage: 'Error {message}',
});
}
const { snapshot } = data;
type Props = SnapshotQueryProps & UptimeCommonProps;
return <Snapshot dangerColor={danger} primaryColor={primary} snapshot={snapshot} />;
}}
</Query>
);
export class SnapshotQuery extends React.Component<Props, SnapshotQueryState> {
constructor(props: Props) {
super(props);
this.state = {
windowWidth: window.innerWidth,
};
}
public componentDidMount() {
window.addEventListener('resize', this.updateWindowSize);
}
public componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowSize);
}
public render() {
const {
autorefreshIsPaused,
autorefreshInterval,
colors: { primary, danger },
dateRangeStart,
dateRangeEnd,
filters,
} = this.props;
return (
<Query
pollInterval={autorefreshIsPaused ? undefined : autorefreshInterval}
query={getSnapshotQuery}
variables={{ dateRangeStart, dateRangeEnd, filters }}
>
{({ loading, error, data }) => {
if (loading) {
return <SnapshotLoading />;
}
if (error) {
return i18n.translate('xpack.uptime.snapshot.errorMessage', {
values: { message: error.message },
defaultMessage: 'Error {message}',
});
}
const { snapshot } = data;
return (
<Snapshot
dangerColor={danger}
primaryColor={primary}
snapshot={snapshot}
windowWidth={this.state.windowWidth}
/>
);
}}
</Query>
);
}
private updateWindowSize = () => {
this.setState({ windowWidth: window.innerWidth });
};
}