mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
Merge remote-tracking branch 'elastic/6.7' into backport/6.7/pr-30153
This commit is contained in:
commit
d1b904c618
12 changed files with 451 additions and 48 deletions
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"upstream": "elastic/kibana",
|
||||
"branches": [{ "name": "6.7", "checked": true }, "6.6", "6.5", "6.4", "6.3", "6.2", "6.1", "6.0", "5.6"],
|
||||
"branches": [{ "name": "7.x", "checked": true }, "7.0", "6.7", "6.6", "6.5", "6.4", "6.3", "6.2", "6.1", "6.0", "5.6"],
|
||||
"labels": ["backport"]
|
||||
}
|
||||
|
|
|
@ -460,7 +460,7 @@ Do **not** add the agent as a dependency to your application.',
|
|||
-jar my-application.jar`.split('\n'),
|
||||
textPost: i18n.translate('kbn.server.tutorials.apm.javaClient.startApplication.textPost', {
|
||||
defaultMessage: 'See the [documentation]({documentationLink}) for configuration options and advanced \
|
||||
usage.\n\n**Warning: The Java agent is currently in Beta and not meant for production use.**',
|
||||
usage.',
|
||||
values: { documentationLink: '{config.docs.base_url}guide/en/apm/agent/java/current/index.html' },
|
||||
}),
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
.visualize {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// SASSTODO: Too risky to change to BEM naming
|
||||
|
@ -21,6 +21,7 @@
|
|||
* that it disappears entirely.
|
||||
*/
|
||||
.visChart__container {
|
||||
min-height: 0;
|
||||
flex: 1 1 0; /* 1 */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -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,9 +126,14 @@ exports[`Snapshot component renders without errors 1`] = `
|
|||
grow={true}
|
||||
hasShadow={false}
|
||||
paddingSize="s"
|
||||
style={
|
||||
Object {
|
||||
"maxHeight": "137px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Component
|
||||
dangerColor="danger"
|
||||
dangerColor="#F050F0"
|
||||
histogram={
|
||||
Array [
|
||||
Object {
|
||||
|
@ -425,7 +431,8 @@ exports[`Snapshot component renders without errors 1`] = `
|
|||
},
|
||||
]
|
||||
}
|
||||
primaryColor="primary"
|
||||
primaryColor="#000000"
|
||||
windowWidth={1600}
|
||||
/>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -0,0 +1,148 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SnapshotHistogram component renders the component without errors 1`] = `
|
||||
<FlexibleEuiSeriesChart
|
||||
height={120}
|
||||
stackBy="y"
|
||||
width={618.2857142857141}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
xType="time"
|
||||
>
|
||||
<EuiHistogramSeries
|
||||
color="#FEFEFE"
|
||||
data={
|
||||
Array [
|
||||
Object {
|
||||
"x": 1548698820000,
|
||||
"x0": 1548698520000,
|
||||
"y": 7,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699120000,
|
||||
"x0": 1548698820000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699420000,
|
||||
"x0": 1548699120000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699720000,
|
||||
"x0": 1548699420000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700020000,
|
||||
"x0": 1548699720000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700320000,
|
||||
"x0": 1548700020000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700620000,
|
||||
"x0": 1548700320000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700920000,
|
||||
"x0": 1548700620000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548701220000,
|
||||
"x0": 1548700920000,
|
||||
"y": 8,
|
||||
},
|
||||
Object {
|
||||
"x": 1548697920000,
|
||||
"x0": 1548697620000,
|
||||
"y": 7,
|
||||
},
|
||||
Object {
|
||||
"x": 1548698220000,
|
||||
"x0": 1548697920000,
|
||||
"y": 7,
|
||||
},
|
||||
Object {
|
||||
"x": 1548698520000,
|
||||
"x0": 1548698220000,
|
||||
"y": 7,
|
||||
},
|
||||
]
|
||||
}
|
||||
name="Up"
|
||||
/>
|
||||
<EuiHistogramSeries
|
||||
color="#FF00FF"
|
||||
data={
|
||||
Array [
|
||||
Object {
|
||||
"x": 1548697920000,
|
||||
"x0": 1548697620000,
|
||||
"y": 3,
|
||||
},
|
||||
Object {
|
||||
"x": 1548698220000,
|
||||
"x0": 1548697920000,
|
||||
"y": 3,
|
||||
},
|
||||
Object {
|
||||
"x": 1548698520000,
|
||||
"x0": 1548698220000,
|
||||
"y": 3,
|
||||
},
|
||||
Object {
|
||||
"x": 1548698820000,
|
||||
"x0": 1548698520000,
|
||||
"y": 3,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699120000,
|
||||
"x0": 1548698820000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699420000,
|
||||
"x0": 1548699120000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548699720000,
|
||||
"x0": 1548699420000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700020000,
|
||||
"x0": 1548699720000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700320000,
|
||||
"x0": 1548700020000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700620000,
|
||||
"x0": 1548700320000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548700920000,
|
||||
"x0": 1548700620000,
|
||||
"y": 2,
|
||||
},
|
||||
Object {
|
||||
"x": 1548701220000,
|
||||
"x0": 1548700920000,
|
||||
"y": 2,
|
||||
},
|
||||
]
|
||||
}
|
||||
name="Down"
|
||||
/>
|
||||
</FlexibleEuiSeriesChart>
|
||||
`;
|
|
@ -81,7 +81,7 @@ describe('Snapshot component', () => {
|
|||
it('renders without errors', () => {
|
||||
const { snapshot } = data;
|
||||
const wrapper = shallowWithIntl(
|
||||
<Snapshot danger="danger" primary="primary" snapshot={snapshot} />
|
||||
<Snapshot danger="#F050F0" primary="#000000" snapshot={snapshot} windowWidth={1600} />
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
@ -0,0 +1,194 @@
|
|||
/*
|
||||
* 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 { SnapshotHistogram } from '../snapshot_histogram';
|
||||
|
||||
describe('SnapshotHistogram component', () => {
|
||||
const props = {
|
||||
primaryColor: '#FEFEFE',
|
||||
dangerColor: '#FF00FF',
|
||||
windowWidth: 1200,
|
||||
histogram: [
|
||||
{
|
||||
monitorId: 'auto-tcp-0X81440A68E839814C',
|
||||
data: [
|
||||
{ upCount: 1, downCount: 293, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: null, downCount: 300, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 145, downCount: 155, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 300, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 77, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0XD9AE729FC1C1E04A',
|
||||
data: [
|
||||
{ upCount: 79, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 80, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 86, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 87, downCount: 1, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 81, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 100, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 100, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 99, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 96, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 81, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 80, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 20, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0XDD2D4E60FD4A61C3',
|
||||
data: [
|
||||
{ upCount: 79, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 80, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 86, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 88, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 81, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 95, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 94, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 98, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 93, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 81, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 80, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 20, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0X131221E73F825974',
|
||||
data: [
|
||||
{ upCount: 74, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 73, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 74, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 75, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 19, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0X3675F89EF0612091',
|
||||
data: [
|
||||
{ upCount: null, downCount: 74, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: null, downCount: 75, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: null, downCount: 19, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0X9CB71300ABD5A2A8',
|
||||
data: [
|
||||
{ upCount: 69, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 70, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 68, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 69, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 69, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 69, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 70, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 70, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 70, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 69, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 70, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 18, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0X970CBD2F2102BFA8',
|
||||
data: [
|
||||
{ upCount: 58, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 60, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 16, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0XA8096548ECEB85B7',
|
||||
data: [
|
||||
{ upCount: null, downCount: 57, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: null, downCount: 60, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: null, downCount: 61, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: null, downCount: 56, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: null, downCount: 45, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: null, downCount: 49, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: null, downCount: 60, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: null, downCount: 60, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: null, downCount: 64, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: null, downCount: 59, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: null, downCount: 60, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: null, downCount: 14, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0XC9CDA429418EDC2B',
|
||||
data: [
|
||||
{ upCount: 5, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 1, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
monitorId: 'auto-http-0XE3B163481423197D',
|
||||
data: [
|
||||
{ upCount: 5, downCount: null, x: 1548697920000, x0: 1548697620000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698220000, x0: 1548697920000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698520000, x0: 1548698220000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548698820000, x0: 1548698520000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699120000, x0: 1548698820000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699420000, x0: 1548699120000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548699720000, x0: 1548699420000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700020000, x0: 1548699720000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700320000, x0: 1548700020000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700620000, x0: 1548700320000, y: 1 },
|
||||
{ upCount: 5, downCount: null, x: 1548700920000, x0: 1548700620000, y: 1 },
|
||||
{ upCount: 1, downCount: null, x: 1548701220000, x0: 1548700920000, y: 1 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
it('renders the component without errors', () => {
|
||||
const component = shallowWithIntl(<SnapshotHistogram {...props} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -119,6 +119,7 @@ export const MonitorList = ({ dangerColor, loading, monitors, primaryColor }: Mo
|
|||
return (
|
||||
<EuiSeriesChart
|
||||
showDefaultAxis={false}
|
||||
width={180}
|
||||
height={70}
|
||||
stackBy="y"
|
||||
// TODO: style hack
|
||||
|
|
|
@ -28,15 +28,17 @@ interface SnapshotProps {
|
|||
danger: string;
|
||||
primary: string;
|
||||
snapshot: SnapshotType;
|
||||
windowWidth: number;
|
||||
}
|
||||
|
||||
export const Snapshot = ({
|
||||
danger,
|
||||
snapshot: { up, down, total, histogram },
|
||||
primary,
|
||||
windowWidth,
|
||||
}: SnapshotProps) => (
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="xl">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={4}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
|
@ -87,7 +89,7 @@ export const Snapshot = ({
|
|||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem style={{ paddingTop: '12px' }}>
|
||||
<EuiFlexItem grow={8} style={{ paddingTop: '12px', paddingRight: '12px' }}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
|
@ -97,9 +99,14 @@ 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={danger} primaryColor={primary} histogram={histogram} />
|
||||
<SnapshotHistogram
|
||||
dangerColor={danger}
|
||||
histogram={histogram}
|
||||
primaryColor={primary}
|
||||
windowWidth={windowWidth}
|
||||
/>
|
||||
)}
|
||||
{!histogram && (
|
||||
<EuiEmptyPrompt
|
||||
|
|
|
@ -12,22 +12,31 @@ 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.515238095238095;
|
||||
|
||||
export const SnapshotHistogram = ({
|
||||
dangerColor,
|
||||
histogram,
|
||||
primaryColor,
|
||||
windowWidth,
|
||||
}: SnapshotHistogramProps) => {
|
||||
const { upSeriesData, downSeriesData } = formatHistogramData(histogram);
|
||||
|
||||
return (
|
||||
<EuiSeriesChart
|
||||
width={600}
|
||||
height={107}
|
||||
width={windowWidth * windowRatio}
|
||||
height={120}
|
||||
stackBy="y"
|
||||
xType={EuiSeriesChartUtils.SCALE.TIME}
|
||||
xCrosshairFormat="YYYY-MM-DD hh:mmZ"
|
||||
|
|
|
@ -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 danger={danger} primary={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
|
||||
danger={danger}
|
||||
primary={primary}
|
||||
snapshot={snapshot}
|
||||
windowWidth={this.state.windowWidth}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Query>
|
||||
);
|
||||
}
|
||||
|
||||
private updateWindowSize = () => {
|
||||
this.setState({ windowWidth: window.innerWidth });
|
||||
};
|
||||
}
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
|
||||
require('@kbn/plugin-helpers').babelRegister();
|
||||
require('@kbn/test').runTestsCli([
|
||||
// require.resolve('../test/reporting/configs/chromium_api.js'),
|
||||
// require.resolve('../test/reporting/configs/chromium_functional.js'),
|
||||
// require.resolve('../test/reporting/configs/phantom_api.js'),
|
||||
// require.resolve('../test/reporting/configs/phantom_functional.js'),
|
||||
require.resolve('../test/reporting/configs/chromium_api.js'),
|
||||
require.resolve('../test/reporting/configs/chromium_functional.js'),
|
||||
//require.resolve('../test/reporting/configs/phantom_api.js'),
|
||||
//require.resolve('../test/reporting/configs/phantom_functional.js'),
|
||||
require.resolve('../test/functional/config.js'),
|
||||
require.resolve('../test/api_integration/config.js'),
|
||||
require.resolve('../test/plugin_api_integration/config.js'),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue