From 4e3d182058361dc7bd81589657a48b83f6cc64a0 Mon Sep 17 00:00:00 2001
From: Justin Kambic
Date: Fri, 12 Apr 2019 10:30:32 -0400
Subject: [PATCH] [Uptime] Add new context for uptime (#34006)
* Add new context for uptime.
* Implement Uptime context.
* Convert application class to functional component.
* Fix typings.
* Fix busted types.
* Update unit tests.
* Move query files. Update API/functional tests.
* Fix code formatting.
* Fix improper import syntax.
* Delete obsolete code.
* Add base path to app context.
* Add refresh tracker to app context.
* Clean up code.
* Fix unit conversion defect and add a unit test to check for incorrect values displayed.
* Fix broken code formatting.
* Clean up redundant code.
* Split context into separate contexts for refresh and settings.
* Fix unit test snapshot and props.
* Fix code formatting.
---
.../uptime/common/domain_types/index.ts | 1 -
.../monitor_charts.test.tsx.snap | 2 +-
.../__snapshots__/ping_list.test.tsx.snap | 14 +-
.../functional/__tests__/error_list.test.tsx | 4 +-
.../functional/__tests__/filter_bar.test.tsx | 11 +-
.../__tests__/monitor_charts.test.tsx | 12 +-
.../__tests__/monitor_list.test.tsx | 818 +++++++++---------
.../__tests__/monitor_status.bar.test.tsx | 38 +
.../functional/__tests__/ping_list.test.tsx | 11 +-
.../functional/__tests__/snapshot.test.tsx | 8 +-
.../__snapshots__/empty_state.test.tsx.snap | 337 +++++---
.../__tests__/empty_state.test.tsx | 40 +-
.../functional/empty_state/empty_state.tsx | 52 +-
.../components/functional/error_list.tsx | 16 +-
.../components/functional/filter_bar.tsx | 27 +-
.../components/functional/monitor_charts.tsx | 233 ++---
.../components/functional/monitor_list.tsx | 27 +-
.../functional/monitor_page_title.tsx | 35 +-
.../functional/monitor_status_bar.tsx | 163 ++--
.../components/functional/ping_list.tsx | 82 +-
.../public/components/functional/snapshot.tsx | 210 ++---
.../higher_order/uptime_graphql_query.tsx | 7 +-
.../queries/empty_state/empty_state_query.tsx | 47 -
.../components/queries/empty_state/index.ts | 7 -
.../queries/error_list/error_list_query.tsx | 28 -
.../components/queries/error_list/index.ts | 7 -
.../queries/filter_bar/filter_bar_query.tsx | 38 -
.../components/queries/filter_bar/index.ts | 7 -
.../uptime/public/components/queries/index.ts | 15 -
.../monitor_charts/monitor_charts_query.tsx | 60 --
.../components/queries/monitor_list/index.ts | 7 -
.../monitor_list/monitor_list_query.tsx | 40 -
.../queries/monitor_page_title/index.ts | 7 -
.../monitor_page_title_query.tsx | 38 -
.../queries/monitor_status_bar/index.ts | 7 -
.../monitor_status_bar_query.tsx | 57 --
.../components/queries/ping_list/index.ts | 7 -
.../queries/ping_list/ping_list_query.tsx | 87 --
.../components/queries/snapshot/index.ts | 7 -
.../queries/snapshot/snapshot_query.tsx | 31 -
.../monitor_charts => contexts}/index.ts | 3 +-
.../contexts/uptime_refresh_context.ts} | 12 +-
.../contexts/uptime_settings_context.ts | 46 +
.../plugins/uptime/public/pages/monitor.tsx | 128 +--
.../plugins/uptime/public/pages/overview.tsx | 123 ++-
.../doc_count_query.ts} | 6 +-
.../error_list_query.ts} | 6 +-
.../filter_bar_query.ts} | 6 +-
x-pack/plugins/uptime/public/queries/index.ts | 15 +
.../monitor_charts_query.ts} | 6 +-
.../monitor_list_query.ts} | 6 +-
.../monitor_page_title_query.ts} | 2 +-
.../monitor_status_bar_query.ts} | 6 +-
.../get_pings.ts => queries/pings_query.ts} | 6 +-
.../snapshot_query.ts} | 6 +-
x-pack/plugins/uptime/public/uptime_app.tsx | 328 ++++---
.../apis/uptime/graphql/doc_count.js | 4 +-
.../apis/uptime/graphql/error_list.js | 10 +-
.../apis/uptime/graphql/filter_bar.js | 4 +-
.../apis/uptime/graphql/monitor_charts.js | 6 +-
.../apis/uptime/graphql/monitor_list.js | 8 +-
.../apis/uptime/graphql/monitor_status_bar.js | 6 +-
.../apis/uptime/graphql/ping_list.js | 10 +-
.../apis/uptime/graphql/snapshot.js | 10 +-
64 files changed, 1613 insertions(+), 1795 deletions(-)
create mode 100644 x-pack/plugins/uptime/public/components/functional/__tests__/monitor_status.bar.test.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/empty_state/empty_state_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/empty_state/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/error_list/error_list_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/error_list/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/filter_bar/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_list/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_page_title/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_page_title/monitor_page_title_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_status_bar/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/monitor_status_bar/monitor_status_bar_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/ping_list/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/ping_list/ping_list_query.tsx
delete mode 100644 x-pack/plugins/uptime/public/components/queries/snapshot/index.ts
delete mode 100644 x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx
rename x-pack/plugins/uptime/public/{components/queries/monitor_charts => contexts}/index.ts (64%)
rename x-pack/plugins/uptime/{common/domain_types/pings.ts => public/contexts/uptime_refresh_context.ts} (51%)
create mode 100644 x-pack/plugins/uptime/public/contexts/uptime_settings_context.ts
rename x-pack/plugins/uptime/public/{components/queries/empty_state/get_doc_count.ts => queries/doc_count_query.ts} (75%)
rename x-pack/plugins/uptime/public/{components/queries/error_list/get_error_list.ts => queries/error_list_query.ts} (84%)
rename x-pack/plugins/uptime/public/{components/queries/filter_bar/get_filter_bar.ts => queries/filter_bar_query.ts} (83%)
create mode 100644 x-pack/plugins/uptime/public/queries/index.ts
rename x-pack/plugins/uptime/public/{components/queries/monitor_charts/get_monitor_charts.ts => queries/monitor_charts_query.ts} (85%)
rename x-pack/plugins/uptime/public/{components/queries/monitor_list/get_monitor_list.ts => queries/monitor_list_query.ts} (89%)
rename x-pack/plugins/uptime/public/{components/queries/monitor_page_title/get_monitor_page_title.ts => queries/monitor_page_title_query.ts} (90%)
rename x-pack/plugins/uptime/public/{components/queries/monitor_status_bar/get_monitor_status_bar.ts => queries/monitor_status_bar_query.ts} (83%)
rename x-pack/plugins/uptime/public/{components/queries/ping_list/get_pings.ts => queries/pings_query.ts} (90%)
rename x-pack/plugins/uptime/public/{components/queries/snapshot/get_snapshot.ts => queries/snapshot_query.ts} (84%)
diff --git a/x-pack/plugins/uptime/common/domain_types/index.ts b/x-pack/plugins/uptime/common/domain_types/index.ts
index ba59e8cc90d0..1cf72ca2dac0 100644
--- a/x-pack/plugins/uptime/common/domain_types/index.ts
+++ b/x-pack/plugins/uptime/common/domain_types/index.ts
@@ -4,5 +4,4 @@
* you may not use this file except in compliance with the Elastic License.
*/
-export * from './pings';
export * from './monitors';
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
index 65f9473168d0..03ddd9c75d9e 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
yDomain={
Array [
0,
- 75,
+ 6669,
]
}
>
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
index 58183d76e124..b4e91c7d74f1 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
@@ -62,20 +62,28 @@ exports[`PingList component renders sorted list without errors 1`] = `
compressed={false}
fullWidth={false}
isClearable={false}
- onChange={[MockFunction]}
+ onChange={[Function]}
options={
Array [
Object {
"label": "All",
"value": "",
},
+ Object {
+ "label": "Up",
+ "value": "up",
+ },
+ Object {
+ "label": "Down",
+ "value": "down",
+ },
]
}
selectedOptions={
Array [
Object {
- "label": "All",
- "value": "",
+ "label": "Down",
+ "value": "down",
},
]
}
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/error_list.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/error_list.test.tsx
index 086255165b35..6a25bda07e14 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/error_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/error_list.test.tsx
@@ -7,7 +7,7 @@
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { ErrorListItem } from '../../../../common/graphql/types';
-import { ErrorList } from '../error_list';
+import { ErrorListComponent } from '../error_list';
describe('ErrorList component', () => {
let getErrorListResponse: { errorList: ErrorListItem[] };
@@ -57,7 +57,7 @@ describe('ErrorList component', () => {
it('renders the error list without errors', () => {
const { errorList } = getErrorListResponse;
- const component = shallowWithIntl( );
+ const component = shallowWithIntl( );
expect(component).toMatchSnapshot();
});
});
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/filter_bar.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/filter_bar.test.tsx
index 44d2200da032..8c0e0f374ddd 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/filter_bar.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/filter_bar.test.tsx
@@ -6,7 +6,7 @@
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
-import { FilterBar } from '../filter_bar';
+import { FilterBarComponent } from '../filter_bar';
describe('FilterBar component', () => {
const data = {
@@ -28,10 +28,17 @@ describe('FilterBar component', () => {
schemes: ['tcp', 'http'],
},
};
+ let currentQuery;
it('renders the component without errors', () => {
+ currentQuery = undefined;
const component = shallowWithIntl(
-
+
);
expect(component).toMatchSnapshot();
});
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
index 40500d037470..0c4632e99c06 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx
@@ -6,10 +6,11 @@
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
-import { MonitorCharts } from '../monitor_charts';
+import { MonitorChartsComponent } from '../monitor_charts';
+import { MonitorChart } from '../../../../common/graphql/types';
describe('MonitorCharts component', () => {
- const chartResponse = {
+ const chartResponse: { monitorChartsData: MonitorChart } = {
monitorChartsData: {
durationArea: [
{ x: 1548697620000, yMin: 106421, yMax: 3120392 },
@@ -57,11 +58,10 @@ describe('MonitorCharts component', () => {
it('renders the component without errors', () => {
const component = shallowWithIntl(
- {
- let monitorResult: LatestMonitorsResult;
+ let monitors: LatestMonitor[];
beforeEach(() => {
- monitorResult = {
- monitors: [
- {
- id: { key: 'auto-http-0X131221E73F825974', url: 'https://www.google.com/' },
- ping: {
- timestamp: '2019-01-28T18:43:15.077Z',
- monitor: {
- duration: { us: 132169 },
- id: 'auto-http-0X131221E73F825974',
- ip: '172.217.12.132',
- name: '',
- status: 'up',
- },
- url: { full: 'https://www.google.com/' },
+ monitors = [
+ {
+ id: { key: 'auto-http-0X131221E73F825974', url: 'https://www.google.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:15.077Z',
+ monitor: {
+ duration: { us: 132169 },
+ id: 'auto-http-0X131221E73F825974',
+ ip: '172.217.12.132',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 74 },
- { x: 1548697920000, y: 75 },
- { x: 1548698220000, y: 75 },
- { x: 1548698520000, y: 73 },
- { x: 1548698820000, y: 75 },
- { x: 1548699120000, y: 74 },
- { x: 1548699420000, y: 75 },
- { x: 1548699720000, y: 75 },
- { x: 1548700020000, y: 75 },
- { x: 1548700320000, y: 75 },
- { x: 1548700620000, y: 75 },
- { x: 1548700920000, y: 19 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'https://www.google.com/' },
},
- {
- id: { key: 'auto-http-0X3675F89EF0612091', url: 'http://localhost:12349/' },
- ping: {
- timestamp: '2019-01-28T18:43:15.077Z',
- monitor: {
- duration: { us: 3331 },
- id: 'auto-http-0X3675F89EF0612091',
- ip: '127.0.0.1',
- name: '',
- status: 'down',
- },
- url: { full: 'http://localhost:12349/' },
+ upSeries: [
+ { x: 1548697620000, y: 74 },
+ { x: 1548697920000, y: 75 },
+ { x: 1548698220000, y: 75 },
+ { x: 1548698520000, y: 73 },
+ { x: 1548698820000, y: 75 },
+ { x: 1548699120000, y: 74 },
+ { x: 1548699420000, y: 75 },
+ { x: 1548699720000, y: 75 },
+ { x: 1548700020000, y: 75 },
+ { x: 1548700320000, y: 75 },
+ { x: 1548700620000, y: 75 },
+ { x: 1548700920000, y: 19 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0X3675F89EF0612091', url: 'http://localhost:12349/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:15.077Z',
+ monitor: {
+ duration: { us: 3331 },
+ id: 'auto-http-0X3675F89EF0612091',
+ ip: '127.0.0.1',
+ name: '',
+ status: 'down',
},
- upSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
- downSeries: [
- { x: 1548697620000, y: 74 },
- { x: 1548697920000, y: 75 },
- { x: 1548698220000, y: 75 },
- { x: 1548698520000, y: 75 },
- { x: 1548698820000, y: 75 },
- { x: 1548699120000, y: 75 },
- { x: 1548699420000, y: 75 },
- { x: 1548699720000, y: 75 },
- { x: 1548700020000, y: 75 },
- { x: 1548700320000, y: 75 },
- { x: 1548700620000, y: 75 },
- { x: 1548700920000, y: 19 },
- ],
+ url: { full: 'http://localhost:12349/' },
},
- {
- id: { key: 'auto-http-0X970CBD2F2102BFA8', url: 'http://www.google.com/' },
- ping: {
- timestamp: '2019-01-28T18:43:15.077Z',
- monitor: {
- duration: { us: 118727 },
- id: 'auto-http-0X970CBD2F2102BFA8',
- ip: '172.217.12.132',
- name: '',
- status: 'up',
- },
- url: { full: 'http://www.google.com/' },
+ upSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: 74 },
+ { x: 1548697920000, y: 75 },
+ { x: 1548698220000, y: 75 },
+ { x: 1548698520000, y: 75 },
+ { x: 1548698820000, y: 75 },
+ { x: 1548699120000, y: 75 },
+ { x: 1548699420000, y: 75 },
+ { x: 1548699720000, y: 75 },
+ { x: 1548700020000, y: 75 },
+ { x: 1548700320000, y: 75 },
+ { x: 1548700620000, y: 75 },
+ { x: 1548700920000, y: 19 },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0X970CBD2F2102BFA8', url: 'http://www.google.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:15.077Z',
+ monitor: {
+ duration: { us: 118727 },
+ id: 'auto-http-0X970CBD2F2102BFA8',
+ ip: '172.217.12.132',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 58 },
- { x: 1548697920000, y: 60 },
- { x: 1548698220000, y: 60 },
- { x: 1548698520000, y: 60 },
- { x: 1548698820000, y: 60 },
- { x: 1548699120000, y: 60 },
- { x: 1548699420000, y: 60 },
- { x: 1548699720000, y: 60 },
- { x: 1548700020000, y: 60 },
- { x: 1548700320000, y: 60 },
- { x: 1548700620000, y: 60 },
- { x: 1548700920000, y: 16 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'http://www.google.com/' },
},
- {
- id: { key: 'auto-http-0X9CB71300ABD5A2A8', url: 'https://www.github.com/' },
- ping: {
- timestamp: '2019-01-28T18:43:15.077Z',
- monitor: {
- duration: { us: 247244 },
- id: 'auto-http-0X9CB71300ABD5A2A8',
- ip: '192.30.253.112',
- name: '',
- status: 'up',
- },
- url: { full: 'https://www.github.com/' },
+ upSeries: [
+ { x: 1548697620000, y: 58 },
+ { x: 1548697920000, y: 60 },
+ { x: 1548698220000, y: 60 },
+ { x: 1548698520000, y: 60 },
+ { x: 1548698820000, y: 60 },
+ { x: 1548699120000, y: 60 },
+ { x: 1548699420000, y: 60 },
+ { x: 1548699720000, y: 60 },
+ { x: 1548700020000, y: 60 },
+ { x: 1548700320000, y: 60 },
+ { x: 1548700620000, y: 60 },
+ { x: 1548700920000, y: 16 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0X9CB71300ABD5A2A8', url: 'https://www.github.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:15.077Z',
+ monitor: {
+ duration: { us: 247244 },
+ id: 'auto-http-0X9CB71300ABD5A2A8',
+ ip: '192.30.253.112',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 69 },
- { x: 1548697920000, y: 70 },
- { x: 1548698220000, y: 68 },
- { x: 1548698520000, y: 69 },
- { x: 1548698820000, y: 69 },
- { x: 1548699120000, y: 69 },
- { x: 1548699420000, y: 70 },
- { x: 1548699720000, y: 70 },
- { x: 1548700020000, y: 70 },
- { x: 1548700320000, y: 69 },
- { x: 1548700620000, y: 70 },
- { x: 1548700920000, y: 18 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'https://www.github.com/' },
},
- {
- id: { key: 'auto-http-0XA8096548ECEB85B7', url: 'http://www.example.com/' },
- ping: {
- timestamp: '2019-01-28T18:43:07.078Z',
- monitor: {
- duration: { us: 4751074 },
- id: 'auto-http-0XA8096548ECEB85B7',
- ip: '198.71.248.67',
- name: '',
- status: 'down',
- },
- url: { full: 'http://www.example.com/' },
+ upSeries: [
+ { x: 1548697620000, y: 69 },
+ { x: 1548697920000, y: 70 },
+ { x: 1548698220000, y: 68 },
+ { x: 1548698520000, y: 69 },
+ { x: 1548698820000, y: 69 },
+ { x: 1548699120000, y: 69 },
+ { x: 1548699420000, y: 70 },
+ { x: 1548699720000, y: 70 },
+ { x: 1548700020000, y: 70 },
+ { x: 1548700320000, y: 69 },
+ { x: 1548700620000, y: 70 },
+ { x: 1548700920000, y: 18 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0XA8096548ECEB85B7', url: 'http://www.example.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:07.078Z',
+ monitor: {
+ duration: { us: 4751074 },
+ id: 'auto-http-0XA8096548ECEB85B7',
+ ip: '198.71.248.67',
+ name: '',
+ status: 'down',
},
- upSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
- downSeries: [
- { x: 1548697620000, y: 57 },
- { x: 1548697920000, y: 60 },
- { x: 1548698220000, y: 61 },
- { x: 1548698520000, y: 56 },
- { x: 1548698820000, y: 45 },
- { x: 1548699120000, y: 49 },
- { x: 1548699420000, y: 60 },
- { x: 1548699720000, y: 60 },
- { x: 1548700020000, y: 64 },
- { x: 1548700320000, y: 59 },
- { x: 1548700620000, y: 60 },
- { x: 1548700920000, y: 14 },
- ],
+ url: { full: 'http://www.example.com/' },
},
- {
- id: { key: 'auto-http-0XC9CDA429418EDC2B', url: 'https://www.wikipedia.org/' },
- ping: {
- timestamp: '2019-01-28T18:42:55.074Z',
- monitor: {
- duration: { us: 1164812 },
- id: 'auto-http-0XC9CDA429418EDC2B',
- ip: '208.80.154.224',
- name: '',
- status: 'up',
- },
- url: { full: 'https://www.wikipedia.org/' },
+ upSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: 57 },
+ { x: 1548697920000, y: 60 },
+ { x: 1548698220000, y: 61 },
+ { x: 1548698520000, y: 56 },
+ { x: 1548698820000, y: 45 },
+ { x: 1548699120000, y: 49 },
+ { x: 1548699420000, y: 60 },
+ { x: 1548699720000, y: 60 },
+ { x: 1548700020000, y: 64 },
+ { x: 1548700320000, y: 59 },
+ { x: 1548700620000, y: 60 },
+ { x: 1548700920000, y: 14 },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0XC9CDA429418EDC2B', url: 'https://www.wikipedia.org/' },
+ ping: {
+ timestamp: '2019-01-28T18:42:55.074Z',
+ monitor: {
+ duration: { us: 1164812 },
+ id: 'auto-http-0XC9CDA429418EDC2B',
+ ip: '208.80.154.224',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 5 },
- { x: 1548697920000, y: 5 },
- { x: 1548698220000, y: 5 },
- { x: 1548698520000, y: 5 },
- { x: 1548698820000, y: 5 },
- { x: 1548699120000, y: 5 },
- { x: 1548699420000, y: 5 },
- { x: 1548699720000, y: 5 },
- { x: 1548700020000, y: 5 },
- { x: 1548700320000, y: 5 },
- { x: 1548700620000, y: 5 },
- { x: 1548700920000, y: 1 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'https://www.wikipedia.org/' },
},
- {
- id: { key: 'auto-http-0XD9AE729FC1C1E04A', url: 'http://www.reddit.com/' },
- ping: {
- timestamp: '2019-01-28T18:43:13.074Z',
- monitor: {
- duration: { us: 299586 },
- id: 'auto-http-0XD9AE729FC1C1E04A',
- ip: '151.101.249.140',
- name: '',
- status: 'up',
- },
- url: { full: 'http://www.reddit.com/' },
+ upSeries: [
+ { x: 1548697620000, y: 5 },
+ { x: 1548697920000, y: 5 },
+ { x: 1548698220000, y: 5 },
+ { x: 1548698520000, y: 5 },
+ { x: 1548698820000, y: 5 },
+ { x: 1548699120000, y: 5 },
+ { x: 1548699420000, y: 5 },
+ { x: 1548699720000, y: 5 },
+ { x: 1548700020000, y: 5 },
+ { x: 1548700320000, y: 5 },
+ { x: 1548700620000, y: 5 },
+ { x: 1548700920000, y: 1 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0XD9AE729FC1C1E04A', url: 'http://www.reddit.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:43:13.074Z',
+ monitor: {
+ duration: { us: 299586 },
+ id: 'auto-http-0XD9AE729FC1C1E04A',
+ ip: '151.101.249.140',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 79 },
- { x: 1548697920000, y: 80 },
- { x: 1548698220000, y: 86 },
- { x: 1548698520000, y: 87 },
- { x: 1548698820000, y: 81 },
- { x: 1548699120000, y: 100 },
- { x: 1548699420000, y: 100 },
- { x: 1548699720000, y: 99 },
- { x: 1548700020000, y: 96 },
- { x: 1548700320000, y: 81 },
- { x: 1548700620000, y: 80 },
- { x: 1548700920000, y: 20 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: 1 },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'http://www.reddit.com/' },
},
- {
- id: { key: 'auto-http-0XDD2D4E60FD4A61C3', url: 'https://www.elastic.co' },
- ping: {
- timestamp: '2019-01-28T18:43:13.074Z',
- monitor: {
- duration: { us: 850870 },
- id: 'auto-http-0XDD2D4E60FD4A61C3',
- ip: '151.101.250.217',
- name: '',
- status: 'up',
- },
- url: { full: 'https://www.elastic.co' },
+ upSeries: [
+ { x: 1548697620000, y: 79 },
+ { x: 1548697920000, y: 80 },
+ { x: 1548698220000, y: 86 },
+ { x: 1548698520000, y: 87 },
+ { x: 1548698820000, y: 81 },
+ { x: 1548699120000, y: 100 },
+ { x: 1548699420000, y: 100 },
+ { x: 1548699720000, y: 99 },
+ { x: 1548700020000, y: 96 },
+ { x: 1548700320000, y: 81 },
+ { x: 1548700620000, y: 80 },
+ { x: 1548700920000, y: 20 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: 1 },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0XDD2D4E60FD4A61C3', url: 'https://www.elastic.co' },
+ ping: {
+ timestamp: '2019-01-28T18:43:13.074Z',
+ monitor: {
+ duration: { us: 850870 },
+ id: 'auto-http-0XDD2D4E60FD4A61C3',
+ ip: '151.101.250.217',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 79 },
- { x: 1548697920000, y: 80 },
- { x: 1548698220000, y: 86 },
- { x: 1548698520000, y: 88 },
- { x: 1548698820000, y: 81 },
- { x: 1548699120000, y: 95 },
- { x: 1548699420000, y: 94 },
- { x: 1548699720000, y: 98 },
- { x: 1548700020000, y: 93 },
- { x: 1548700320000, y: 81 },
- { x: 1548700620000, y: 80 },
- { x: 1548700920000, y: 20 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'https://www.elastic.co' },
},
- {
- id: { key: 'auto-http-0XE3B163481423197D', url: 'https://news.google.com/' },
- ping: {
- timestamp: '2019-01-28T18:42:55.074Z',
- monitor: {
- duration: { us: 2059606 },
- id: 'auto-http-0XE3B163481423197D',
- ip: '216.58.219.206',
- name: '',
- status: 'up',
- },
- url: { full: 'https://news.google.com/' },
+ upSeries: [
+ { x: 1548697620000, y: 79 },
+ { x: 1548697920000, y: 80 },
+ { x: 1548698220000, y: 86 },
+ { x: 1548698520000, y: 88 },
+ { x: 1548698820000, y: 81 },
+ { x: 1548699120000, y: 95 },
+ { x: 1548699420000, y: 94 },
+ { x: 1548699720000, y: 98 },
+ { x: 1548700020000, y: 93 },
+ { x: 1548700320000, y: 81 },
+ { x: 1548700620000, y: 80 },
+ { x: 1548700920000, y: 20 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-http-0XE3B163481423197D', url: 'https://news.google.com/' },
+ ping: {
+ timestamp: '2019-01-28T18:42:55.074Z',
+ monitor: {
+ duration: { us: 2059606 },
+ id: 'auto-http-0XE3B163481423197D',
+ ip: '216.58.219.206',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 5 },
- { x: 1548697920000, y: 5 },
- { x: 1548698220000, y: 5 },
- { x: 1548698520000, y: 5 },
- { x: 1548698820000, y: 5 },
- { x: 1548699120000, y: 5 },
- { x: 1548699420000, y: 5 },
- { x: 1548699720000, y: 5 },
- { x: 1548700020000, y: 5 },
- { x: 1548700320000, y: 5 },
- { x: 1548700620000, y: 5 },
- { x: 1548700920000, y: 1 },
- ],
- downSeries: [
- { x: 1548697620000, y: null },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: null },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'https://news.google.com/' },
},
- {
- id: { key: 'auto-tcp-0X81440A68E839814C', url: 'tcp://localhost:9200' },
- ping: {
- timestamp: '2019-01-28T18:43:16.078Z',
- monitor: {
- duration: { us: 3328 },
- id: 'auto-tcp-0X81440A68E839814C',
- ip: '127.0.0.1',
- name: '',
- status: 'up',
- },
- url: { full: 'tcp://localhost:9200' },
+ upSeries: [
+ { x: 1548697620000, y: 5 },
+ { x: 1548697920000, y: 5 },
+ { x: 1548698220000, y: 5 },
+ { x: 1548698520000, y: 5 },
+ { x: 1548698820000, y: 5 },
+ { x: 1548699120000, y: 5 },
+ { x: 1548699420000, y: 5 },
+ { x: 1548699720000, y: 5 },
+ { x: 1548700020000, y: 5 },
+ { x: 1548700320000, y: 5 },
+ { x: 1548700620000, y: 5 },
+ { x: 1548700920000, y: 1 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: null },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: null },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ {
+ id: { key: 'auto-tcp-0X81440A68E839814C', url: 'tcp://localhost:9200' },
+ ping: {
+ timestamp: '2019-01-28T18:43:16.078Z',
+ monitor: {
+ duration: { us: 3328 },
+ id: 'auto-tcp-0X81440A68E839814C',
+ ip: '127.0.0.1',
+ name: '',
+ status: 'up',
},
- upSeries: [
- { x: 1548697620000, y: 1 },
- { x: 1548697920000, y: null },
- { x: 1548698220000, y: 145 },
- { x: 1548698520000, y: 300 },
- { x: 1548698820000, y: 300 },
- { x: 1548699120000, y: 300 },
- { x: 1548699420000, y: 300 },
- { x: 1548699720000, y: 300 },
- { x: 1548700020000, y: 300 },
- { x: 1548700320000, y: 300 },
- { x: 1548700620000, y: 300 },
- { x: 1548700920000, y: 77 },
- ],
- downSeries: [
- { x: 1548697620000, y: 293 },
- { x: 1548697920000, y: 300 },
- { x: 1548698220000, y: 155 },
- { x: 1548698520000, y: null },
- { x: 1548698820000, y: null },
- { x: 1548699120000, y: null },
- { x: 1548699420000, y: null },
- { x: 1548699720000, y: null },
- { x: 1548700020000, y: null },
- { x: 1548700320000, y: null },
- { x: 1548700620000, y: null },
- { x: 1548700920000, y: null },
- ],
+ url: { full: 'tcp://localhost:9200' },
},
- ],
- };
+ upSeries: [
+ { x: 1548697620000, y: 1 },
+ { x: 1548697920000, y: null },
+ { x: 1548698220000, y: 145 },
+ { x: 1548698520000, y: 300 },
+ { x: 1548698820000, y: 300 },
+ { x: 1548699120000, y: 300 },
+ { x: 1548699420000, y: 300 },
+ { x: 1548699720000, y: 300 },
+ { x: 1548700020000, y: 300 },
+ { x: 1548700320000, y: 300 },
+ { x: 1548700620000, y: 300 },
+ { x: 1548700920000, y: 77 },
+ ],
+ downSeries: [
+ { x: 1548697620000, y: 293 },
+ { x: 1548697920000, y: 300 },
+ { x: 1548698220000, y: 155 },
+ { x: 1548698520000, y: null },
+ { x: 1548698820000, y: null },
+ { x: 1548699120000, y: null },
+ { x: 1548699420000, y: null },
+ { x: 1548699720000, y: null },
+ { x: 1548700020000, y: null },
+ { x: 1548700320000, y: null },
+ { x: 1548700620000, y: null },
+ { x: 1548700920000, y: null },
+ ],
+ },
+ ];
});
it('renders a monitor list without errors', () => {
- const { monitors } = monitorResult;
const component = shallowWithIntl(
-
);
expect(component).toMatchSnapshot();
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_status.bar.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_status.bar.test.tsx
new file mode 100644
index 000000000000..c80b2b867a4d
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/monitor_status.bar.test.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { renderWithIntl } from 'test_utils/enzyme_helpers';
+import { Ping } from '../../../../common/graphql/types';
+import { MonitorStatusBarComponent } from '../monitor_status_bar';
+
+describe('MonitorStatusBar component', () => {
+ let monitorStatus: Ping[];
+
+ beforeEach(() => {
+ monitorStatus = [
+ {
+ timestamp: '1554820772000',
+ monitor: {
+ duration: {
+ us: 1234567,
+ },
+ status: 'up',
+ },
+ url: {
+ full: 'https://www.example.com/',
+ },
+ },
+ ];
+ });
+
+ it('renders duration in ms, not us', () => {
+ const component = renderWithIntl(
+
+ );
+ expect(component.text()).toContain('1235ms');
+ });
+});
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx
index 45dd32b4f33e..c281e43a33a3 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx
@@ -7,7 +7,7 @@
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { PingResults } from '../../../../common/graphql/types';
-import { PingList } from '../ping_list';
+import { PingListComponent } from '../ping_list';
describe('PingList component', () => {
let pingList: { allPings: PingResults };
@@ -188,12 +188,11 @@ describe('PingList component', () => {
it('renders sorted list without errors', () => {
const { allPings } = pingList;
const component = shallowWithIntl(
-
);
expect(component).toMatchSnapshot();
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx b/x-pack/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx
index 71be36fb9ae4..2ce5fb89ec4c 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/snapshot.test.tsx
@@ -7,7 +7,7 @@
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { Snapshot as SnapshotType } from '../../../../common/graphql/types';
-import { Snapshot } from '../snapshot';
+import { SnapshotComponent } from '../snapshot';
describe('Snapshot component', () => {
const snapshot: SnapshotType = {
@@ -31,7 +31,11 @@ describe('Snapshot component', () => {
it('renders without errors', () => {
const wrapper = shallowWithIntl(
-
+
);
expect(wrapper).toMatchSnapshot();
});
diff --git a/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
index 5e34e2799042..01560a95af9c 100644
--- a/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EmptyState component doesn't render child components when count is falsey 1`] = `
-
-
+
`;
exports[`EmptyState component renders child components when count is truthy 1`] = `
@@ -189,124 +190,16 @@ exports[`EmptyState component renders child components when count is truthy 1`]
`;
-exports[`EmptyState component renders children while loading 1`] = `
-
-
- Should appear even while loading...
-
-
-`;
-
-exports[`EmptyState component renders empty state with appropriate base path 1`] = `
-
-
+
`;
-
-exports[`EmptyState component renders the message when an error occurs 1`] = `
-
- An error occurred
+ Error: An error occurred
+
}
iconColor="subdued"
@@ -811,7 +719,8 @@ exports[`EmptyState component renders the message when an error occurs 1`] = `
className="euiText euiText--medium"
>
- An error occurred
+ Error: An error occurred
+
@@ -822,5 +731,181 @@ exports[`EmptyState component renders the message when an error occurs 1`] = `
-
+
+`;
+
+exports[`EmptyState component renders loading state if no errors or doc count 1`] = `
+
+
+
+
+
+
+
+ Loading…
+
+
+
+ }
+ iconColor="subdued"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading…
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/empty_state.test.tsx b/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/empty_state.test.tsx
index aeecb5bff433..374c7debabd5 100644
--- a/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/empty_state.test.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/empty_state/__tests__/empty_state.test.tsx
@@ -6,48 +6,62 @@
import React from 'react';
import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
-import { EmptyState } from '../empty_state';
+import { EmptyStateComponent } from '../empty_state';
+import { GraphQLError } from 'graphql';
describe('EmptyState component', () => {
it('renders child components when count is truthy', () => {
const component = shallowWithIntl(
-
+
Foo
Bar
Baz
-
+
);
expect(component).toMatchSnapshot();
});
it(`doesn't render child components when count is falsey`, () => {
const component = mountWithIntl(
-
+
Shouldn't be rendered
-
+
);
expect(component).toMatchSnapshot();
});
- it(`renders the message when an error occurs`, () => {
+ it(`renders error message when an error occurs`, () => {
+ const errors: GraphQLError[] = [
+ {
+ message: 'An error occurred',
+ locations: undefined,
+ path: undefined,
+ nodes: undefined,
+ source: undefined,
+ positions: undefined,
+ originalError: undefined,
+ extensions: undefined,
+ name: 'foo',
+ },
+ ];
const component = mountWithIntl(
-
+
Shouldn't appear...
-
+
);
expect(component).toMatchSnapshot();
});
- it('renders children while loading', () => {
+ it('renders loading state if no errors or doc count', () => {
const component = mountWithIntl(
-
+
Should appear even while loading...
-
+
);
expect(component).toMatchSnapshot();
});
it('renders empty state with appropriate base path', () => {
const component = mountWithIntl(
-
+
If this is in the snapshot the test should fail
-
+
);
expect(component).toMatchSnapshot();
});
diff --git a/x-pack/plugins/uptime/public/components/functional/empty_state/empty_state.tsx b/x-pack/plugins/uptime/public/components/functional/empty_state/empty_state.tsx
index 746405f3f75b..a7b329a53128 100644
--- a/x-pack/plugins/uptime/public/components/functional/empty_state/empty_state.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/empty_state/empty_state.tsx
@@ -5,34 +5,50 @@
*/
import React, { Fragment } from 'react';
+import { formatUptimeGraphQLErrorList } from '../../../lib/helper/format_error_list';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
+import { docCountQuery } from '../../../queries';
import { EmptyIndex } from './empty_index';
import { EmptyStateError } from './empty_state_error';
import { EmptyStateLoading } from './empty_state_loading';
+interface EmptyStateQueryResult {
+ getDocCount?: {
+ count: number;
+ };
+}
+
interface EmptyStateProps {
basePath: string;
children: JSX.Element[] | JSX.Element;
- count?: number;
- error?: string;
- loading?: boolean;
}
-export const EmptyState = ({ basePath, children, count, error, loading }: EmptyStateProps) => {
- if (error) {
- return ;
+type Props = UptimeGraphQLQueryProps & EmptyStateProps;
+
+export const EmptyStateComponent = ({ basePath, children, data, errors }: Props) => {
+ if (errors) {
+ return ;
}
- /**
- * We choose to render the children any time the count > 0, even if
- * the component is loading. If we render the loading state for this component,
- * it will blow away the state of child components and trigger an ugly
- * jittery UX any time the components refresh. This way we'll keep the stale
- * state displayed during the fetching process.
- */
- if (count) {
- return {children} ;
- }
- if (count === 0) {
- return ;
+ if (data && data.getDocCount) {
+ const { count } = data.getDocCount;
+ /**
+ * We choose to render the children any time the count > 0, even if
+ * the component is loading. If we render the loading state for this component,
+ * it will blow away the state of child components and trigger an ugly
+ * jittery UX any time the components refresh. This way we'll keep the stale
+ * state displayed during the fetching process.
+ */
+ if (count) {
+ return {children} ;
+ }
+ if (count === 0) {
+ return ;
+ }
}
return ;
};
+
+export const EmptyState = withUptimeGraphQL(
+ EmptyStateComponent,
+ docCountQuery
+);
diff --git a/x-pack/plugins/uptime/public/components/functional/error_list.tsx b/x-pack/plugins/uptime/public/components/functional/error_list.tsx
index de549fe9fa13..246545f32cfb 100644
--- a/x-pack/plugins/uptime/public/components/functional/error_list.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/error_list.tsx
@@ -20,13 +20,16 @@ import moment from 'moment';
import React from 'react';
import { Link } from 'react-router-dom';
import { ErrorListItem, Ping } from '../../../common/graphql/types';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { errorListQuery } from '../../queries';
-interface ErrorListProps {
- loading: boolean;
+interface ErrorListQueryResult {
errorList?: ErrorListItem[];
}
-export const ErrorList = ({ loading, errorList }: ErrorListProps) => (
+type Props = UptimeGraphQLQueryProps;
+
+export const ErrorListComponent = ({ data, loading }: Props) => (
@@ -35,7 +38,7 @@ export const ErrorList = ({ loading, errorList }: ErrorListProps) => (
(
/>
);
+
+export const ErrorList = withUptimeGraphQL(
+ ErrorListComponent,
+ errorListQuery
+);
diff --git a/x-pack/plugins/uptime/public/components/functional/filter_bar.tsx b/x-pack/plugins/uptime/public/components/functional/filter_bar.tsx
index 400992f7d374..357fe3442be9 100644
--- a/x-pack/plugins/uptime/public/components/functional/filter_bar.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/filter_bar.tsx
@@ -10,21 +10,31 @@ import { i18n } from '@kbn/i18n';
import React from 'react';
import { FilterBar as FilterBarType, MonitorKey } from '../../../common/graphql/types';
import { UptimeSearchBarQueryChangeHandler } from '../../pages/overview';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { filterBarQuery } from '../../queries';
+import { FilterBarLoading } from './filter_bar_loading';
import { filterBarSearchSchema } from './search_schema';
+interface FilterBarQueryResult {
+ filterBar?: FilterBarType;
+}
+
interface FilterBarProps {
currentQuery?: object;
- filterBar: FilterBarType;
updateQuery: UptimeSearchBarQueryChangeHandler;
}
+type Props = FilterBarProps & UptimeGraphQLQueryProps;
+
const SEARCH_THRESHOLD = 2;
-export const FilterBar = ({
- currentQuery,
- filterBar: { names, ports, ids, schemes },
- updateQuery,
-}: FilterBarProps) => {
+export const FilterBarComponent = ({ currentQuery, data, updateQuery }: Props) => {
+ if (!data || !data.filterBar) {
+ return ;
+ }
+ const {
+ filterBar: { ids, names, ports, schemes },
+ } = data;
// TODO: add a factory function + type for these filter options
const filters = [
{
@@ -125,3 +135,8 @@ export const FilterBar = ({
/>
);
};
+
+export const FilterBar = withUptimeGraphQL(
+ FilterBarComponent,
+ filterBarQuery
+);
diff --git a/x-pack/plugins/uptime/public/components/functional/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/functional/monitor_charts.tsx
index ad96917c70ba..3af8cff0dfa1 100644
--- a/x-pack/plugins/uptime/public/components/functional/monitor_charts.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/monitor_charts.tsx
@@ -26,115 +26,142 @@ import { FormattedMessage } from '@kbn/i18n/react';
import React, { Fragment } from 'react';
import { MonitorChart } from '../../../common/graphql/types';
import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/helper';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { monitorChartsQuery } from '../../queries';
+
+interface MonitorChartsQueryResult {
+ monitorChartsData?: MonitorChart;
+}
interface MonitorChartsProps {
- checkDomainLimits: number[];
danger: string;
- durationDomainLimits: number[];
- monitorChartsData: MonitorChart;
mean: string;
range: string;
success: string;
}
-export const MonitorCharts = ({
- checkDomainLimits,
- danger,
- durationDomainLimits,
- monitorChartsData: { durationArea, durationLine, status },
- mean,
- range,
- success,
-}: MonitorChartsProps) => (
-
-
-
-
-
-
-
-
-
-
- ({
- x,
- y0: microsToMillis(yMin),
- y: microsToMillis(yMax),
- }))}
- curve="curveBasis"
- />
- ({
- x,
- y: microsToMillis(y),
- }))}
- />
-
-
-
-
-
-
-
-
-
-
-
- ({ x, y: up || 0 }))}
- color={success}
- />
- ({ x, y: down || 0 }))}
- color={danger}
- />
-
-
-
-
-
+type Props = MonitorChartsProps & UptimeGraphQLQueryProps;
+
+export const MonitorChartsComponent = ({ danger, data, mean, range, success }: Props) => {
+ if (data && data.monitorChartsData) {
+ const {
+ monitorChartsData: { durationArea, durationLine, status, durationMaxValue, statusMaxCount },
+ } = data;
+
+ const durationMax = microsToMillis(durationMaxValue);
+ // These limits provide domain sizes for the charts
+ const checkDomainLimits = [0, statusMaxCount];
+ const durationDomainLimits = [0, durationMax ? durationMax : 0];
+ return (
+
+
+
+
+
+
+
+
+
+
+ ({
+ x,
+ y0: microsToMillis(yMin),
+ y: microsToMillis(yMax),
+ }))}
+ curve="curveBasis"
+ />
+ ({
+ x,
+ y: microsToMillis(y),
+ }))}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ({ x, y: up || 0 }))}
+ color={success}
+ />
+ ({ x, y: down || 0 }))}
+ color={danger}
+ />
+
+
+
+
+
+ );
+ }
+ return (
+
+ {i18n.translate('xpack.uptime.monitorCharts.loadingMessage', {
+ defaultMessage: 'Loading…',
+ })}
+
+ );
+};
+
+export const MonitorCharts = withUptimeGraphQL(
+ MonitorChartsComponent,
+ monitorChartsQuery
);
diff --git a/x-pack/plugins/uptime/public/components/functional/monitor_list.tsx b/x-pack/plugins/uptime/public/components/functional/monitor_list.tsx
index 0c1bd0a45886..65ee29c62a45 100644
--- a/x-pack/plugins/uptime/public/components/functional/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/monitor_list.tsx
@@ -28,15 +28,23 @@ import moment from 'moment';
import React from 'react';
import { Link } from 'react-router-dom';
import { LatestMonitor, MonitorSeriesPoint } from '../../../common/graphql/types';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { monitorListQuery } from '../../queries';
import { MonitorSparkline } from './monitor_sparkline';
-interface MonitorListProps {
- successColor: string;
- dangerColor: string;
- loading: boolean;
- monitors: LatestMonitor[];
+interface MonitorListQueryResult {
+ // TODO: clean up this ugly result data shape, there should be no nesting
+ monitorStatus?: {
+ monitors: LatestMonitor[];
+ };
}
+interface MonitorListProps {
+ dangerColor: string;
+}
+
+type Props = UptimeGraphQLQueryProps & MonitorListProps;
+
const MONITOR_LIST_DEFAULT_PAGINATION = 10;
const monitorListPagination = {
@@ -44,7 +52,7 @@ const monitorListPagination = {
pageSizeOptions: [5, 10, 20, 50],
};
-export const MonitorList = ({ dangerColor, loading, monitors }: MonitorListProps) => (
+export const MonitorListComponent = ({ dangerColor, data, loading }: Props) => (
@@ -129,8 +137,13 @@ export const MonitorList = ({ dangerColor, loading, monitors }: MonitorListProps
},
]}
loading={loading}
- items={monitors}
+ items={(data && data.monitorStatus && data.monitorStatus.monitors) || undefined}
pagination={monitorListPagination}
/>
);
+
+export const MonitorList = withUptimeGraphQL(
+ MonitorListComponent,
+ monitorListQuery
+);
diff --git a/x-pack/plugins/uptime/public/components/functional/monitor_page_title.tsx b/x-pack/plugins/uptime/public/components/functional/monitor_page_title.tsx
index 170aa584696e..5571ff11e44c 100644
--- a/x-pack/plugins/uptime/public/components/functional/monitor_page_title.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/monitor_page_title.tsx
@@ -5,17 +5,34 @@
*/
import { EuiTextColor, EuiTitle } from '@elastic/eui';
+import { EuiLoadingSpinner } from '@elastic/eui';
import React from 'react';
import { MonitorPageTitle as TitleType } from '../../../common/graphql/types';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { monitorPageTitleQuery } from '../../queries';
-interface MonitorPageTitleProps {
- pageTitle: TitleType;
+interface MonitorPageTitleQueryResult {
+ monitorPageTitle?: TitleType;
}
-export const MonitorPageTitle = ({ pageTitle: { name, url, id } }: MonitorPageTitleProps) => (
-
-
- {id}
-
-
-);
+interface MonitorPageTitleProps {
+ monitorId: string;
+}
+
+type Props = MonitorPageTitleProps & UptimeGraphQLQueryProps;
+
+export const MonitorPageTitleComponent = ({ data }: Props) =>
+ data && data.monitorPageTitle ? (
+
+
+ {data.monitorPageTitle.id}
+
+
+ ) : (
+
+ );
+
+export const MonitorPageTitle = withUptimeGraphQL<
+ MonitorPageTitleQueryResult,
+ MonitorPageTitleProps
+>(MonitorPageTitleComponent, monitorPageTitleQuery);
diff --git a/x-pack/plugins/uptime/public/components/functional/monitor_status_bar.tsx b/x-pack/plugins/uptime/public/components/functional/monitor_status_bar.tsx
index e4f171d75a96..3617e7bfcde5 100644
--- a/x-pack/plugins/uptime/public/components/functional/monitor_status_bar.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/monitor_status_bar.tsx
@@ -7,72 +7,111 @@
import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiLink, EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
+import { get } from 'lodash';
import moment from 'moment';
import React from 'react';
+import { Ping } from '../../../common/graphql/types';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { monitorStatusBarQuery } from '../../queries';
+import { EmptyStatusBar } from './empty_status_bar';
+import { convertMicrosecondsToMilliseconds } from '../../lib/helper';
-interface Props {
- duration?: number | null;
- url?: string;
- status?: string;
- timestamp?: string;
+interface MonitorStatusBarQueryResult {
+ monitorStatus?: Ping[];
}
-export const MonitorStatusBar = ({ timestamp, url, duration, status }: Props) => (
-
-
-
-
- {status === 'up'
- ? i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel', {
- defaultMessage: 'Up',
- })
- : i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel', {
- defaultMessage: 'Down',
+interface MonitorStatusBarProps {
+ monitorId: string;
+}
+
+type Props = MonitorStatusBarProps & UptimeGraphQLQueryProps;
+
+export const MonitorStatusBarComponent = ({ data, monitorId }: Props) => {
+ if (data && data.monitorStatus && data.monitorStatus.length) {
+ const { monitor, timestamp } = data.monitorStatus[0];
+ const duration = get(monitor, 'duration.us', undefined);
+ const status = get<'up' | 'down'>(monitor, 'status', 'down');
+ const full = get(data.monitorStatus[0], 'url.full');
+ return (
+
+
+
+
+ {status === 'up'
+ ? i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel', {
+ defaultMessage: 'Up',
+ })
+ : i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel', {
+ defaultMessage: 'Down',
+ })}
+
+
+
+
+
+ {full}
+
+
+
+ {!!duration && (
+
-
-
-
-
+
+
+ )}
+
- {url}
-
-
-
- {!!duration && (
-
-
-
- )}
-
- {moment(timestamp).fromNow()}
-
-
-
-);
+ {moment(parseInt(timestamp, 10)).fromNow()}
+
+
+
+ );
+ }
+ return (
+
+ );
+};
+
+export const MonitorStatusBar = withUptimeGraphQL<
+ MonitorStatusBarQueryResult,
+ MonitorStatusBarProps
+>(MonitorStatusBarComponent, monitorStatusBarQuery);
diff --git a/x-pack/plugins/uptime/public/components/functional/ping_list.tsx b/x-pack/plugins/uptime/public/components/functional/ping_list.tsx
index be5109db0eee..57201da173f6 100644
--- a/x-pack/plugins/uptime/public/components/functional/ping_list.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/ping_list.tsx
@@ -22,25 +22,50 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { get } from 'lodash';
import moment from 'moment';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
import { Ping, PingResults } from '../../../common/graphql/types';
import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/helper';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { pingsQuery } from '../../queries';
-interface PingListProps {
- loading: boolean;
- pingResults?: PingResults;
- selectedOption: EuiComboBoxOptionProps;
- selectedOptionChanged: (selectedOptions: EuiComboBoxOptionProps[]) => void;
- statusOptions: EuiComboBoxOptionProps[];
+interface PingListQueryResult {
+ allPings?: PingResults;
}
-export const PingList = ({
+interface PingListProps {
+ onUpdateApp: () => void;
+ onSelectedStatusUpdate: (status: string | null) => void;
+}
+
+type Props = UptimeGraphQLQueryProps & PingListProps;
+
+export const PingListComponent = ({
+ data,
loading,
- pingResults,
- selectedOption,
- selectedOptionChanged,
- statusOptions,
-}: PingListProps) => {
+ onSelectedStatusUpdate,
+ onUpdateApp,
+}: Props) => {
+ const [statusOptions] = useState([
+ {
+ label: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
+ defaultMessage: 'All',
+ }),
+ value: '',
+ },
+ {
+ label: i18n.translate('xpack.uptime.pingList.statusOptions.upStatusOptionLabel', {
+ defaultMessage: 'Up',
+ }),
+ value: 'up',
+ },
+ {
+ label: i18n.translate('xpack.uptime.pingList.statusOptions.downStatusOptionLabel', {
+ defaultMessage: 'Down',
+ }),
+ value: 'down',
+ },
+ ]);
+ const [selectedOption, setSelectedOption] = useState(statusOptions[2]);
const columns = [
{
field: 'monitor.status',
@@ -112,11 +137,17 @@ export const PingList = ({
),
},
];
+ useEffect(
+ () => {
+ onUpdateApp();
+ },
+ [selectedOption]
+ );
let pings: Ping[] = [];
let total: number = 0;
- if (pingResults && pingResults.pings) {
- pings = pingResults.pings;
- total = pingResults.total;
+ if (data && data.allPings && data.allPings.pings) {
+ pings = data.allPings.pings;
+ total = data.allPings.total;
const hasStatus: boolean = pings.reduce(
(hasHttpStatus: boolean, currentPing: Ping) =>
hasHttpStatus || !!get(currentPing, 'http.response.status_code'),
@@ -164,12 +195,22 @@ export const PingList = ({
{
+ if (selectedOptions[0]) {
+ setSelectedOption(selectedOptions[0]);
+ }
+ if (typeof selectedOptions[0].value === 'string') {
+ // @ts-ignore it's definitely a string
+ onSelectedStatusUpdate(
+ selectedOptions[0].value !== '' ? selectedOptions[0].value : null
+ );
+ }
+ }}
/>
@@ -186,3 +227,8 @@ export const PingList = ({
);
};
+
+export const PingList = withUptimeGraphQL(
+ PingListComponent,
+ pingsQuery
+);
diff --git a/x-pack/plugins/uptime/public/components/functional/snapshot.tsx b/x-pack/plugins/uptime/public/components/functional/snapshot.tsx
index c5d683e9b499..3f3cce6fa7fa 100644
--- a/x-pack/plugins/uptime/public/components/functional/snapshot.tsx
+++ b/x-pack/plugins/uptime/public/components/functional/snapshot.tsx
@@ -23,112 +23,124 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import { Snapshot as SnapshotType } from '../../../common/graphql/types';
+import { UptimeAppColors } from '../../uptime_app';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
+import { snapshotQuery } from '../../queries';
import { SnapshotHistogram } from './snapshot_histogram';
+import { SnapshotLoading } from './snapshot_loading';
-interface SnapshotProps {
- dangerColor: string;
- successColor: string;
- snapshot: SnapshotType;
+interface SnapshotQueryResult {
+ snapshot?: SnapshotType;
}
-export const Snapshot = ({
- dangerColor,
- successColor,
- snapshot: { up, down, total, histogram },
-}: SnapshotProps) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {histogram && (
-
- )}
- {!histogram && (
-
+interface SnapshotProps {
+ colors: UptimeAppColors;
+}
+
+type Props = UptimeGraphQLQueryProps & SnapshotProps;
+
+export const SnapshotComponent = ({ colors: { danger, success }, data }: Props) =>
+ data && data.snapshot ? (
+
+
+
+
+
+
- }
- body={
-
-
-
- }
- />
- )}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.snapshot.histogram && (
+
+ )}
+ {!data.snapshot.histogram && (
+
+
+
+
+
+ }
+ body={
+
+
+
+ }
+ />
+ )}
+
+
+
+ ) : (
+
+ );
+
+export const Snapshot = withUptimeGraphQL(
+ SnapshotComponent,
+ snapshotQuery
);
diff --git a/x-pack/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx b/x-pack/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx
index 1976585fec6c..d0a34af787fa 100644
--- a/x-pack/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx
+++ b/x-pack/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx
@@ -6,9 +6,10 @@
import { OperationVariables } from 'apollo-client';
import { GraphQLError } from 'graphql';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useContext, useEffect, useState } from 'react';
import { withApollo, WithApolloClient } from 'react-apollo';
import { formatUptimeGraphQLErrorList } from '../../lib/helper/format_error_list';
+import { UptimeRefreshContext } from '../../contexts';
export interface UptimeGraphQLQueryProps {
loading: boolean;
@@ -18,7 +19,6 @@ export interface UptimeGraphQLQueryProps {
interface UptimeGraphQLProps {
implementsCustomErrorState?: boolean;
- lastRefresh?: number;
variables: OperationVariables;
}
@@ -35,10 +35,11 @@ export function withUptimeGraphQL(WrappedComponent: any, query: any)
type Props = UptimeGraphQLProps & WithApolloClient & P;
return withApollo((props: Props) => {
+ const { lastRefresh } = useContext(UptimeRefreshContext);
const [loading, setLoading] = useState(true);
const [data, setData] = useState(undefined);
const [errors, setErrors] = useState(undefined);
- const { client, implementsCustomErrorState, variables, lastRefresh } = props;
+ const { client, implementsCustomErrorState, variables } = props;
const fetch = () => {
setLoading(true);
client.query({ fetchPolicy: 'network-only', query, variables }).then((result: any) => {
diff --git a/x-pack/plugins/uptime/public/components/queries/empty_state/empty_state_query.tsx b/x-pack/plugins/uptime/public/components/queries/empty_state/empty_state_query.tsx
deleted file mode 100644
index d9a446230c4e..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/empty_state/empty_state_query.tsx
+++ /dev/null
@@ -1,47 +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 { get } from 'lodash';
-import React from 'react';
-import { formatUptimeGraphQLErrorList } from '../../../lib/helper/format_error_list';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { EmptyState } from '../../functional/empty_state';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getDocCountQuery } from './get_doc_count';
-
-interface EmptyStateQueryResult {
- data?: {
- getDocCount: {
- count: number;
- };
- };
-}
-
-interface EmptyStateProps {
- basePath: string;
- children: JSX.Element[];
-}
-
-type Props = EmptyStateProps & UptimeCommonProps & UptimeGraphQLQueryProps;
-
-export const makeEmptyStateQuery = ({ basePath, children, data, errors, loading }: Props) => {
- const count = get(data, 'getDocCount.count', 0);
- return (
-
- {children}
-
- );
-};
-
-export const EmptyStateQuery = withUptimeGraphQL(
- makeEmptyStateQuery,
- getDocCountQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/empty_state/index.ts b/x-pack/plugins/uptime/public/components/queries/empty_state/index.ts
deleted file mode 100644
index 59d35ffe84cc..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/empty_state/index.ts
+++ /dev/null
@@ -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 { EmptyStateQuery } from './empty_state_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/error_list/error_list_query.tsx b/x-pack/plugins/uptime/public/components/queries/error_list/error_list_query.tsx
deleted file mode 100644
index dd7fe829af0c..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/error_list/error_list_query.tsx
+++ /dev/null
@@ -1,28 +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 React from 'react';
-import { ErrorListItem } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { ErrorList } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getErrorListQuery } from './get_error_list';
-
-interface ErrorListQueryResult {
- errorList?: ErrorListItem[];
-}
-
-type Props = UptimeCommonProps & UptimeGraphQLQueryProps;
-
-export const makeErrorListQuery = ({ data, loading }: Props) => {
- const errorList: ErrorListItem[] | undefined = data ? data.errorList : undefined;
- return ;
-};
-
-export const ErrorListQuery = withUptimeGraphQL(
- makeErrorListQuery,
- getErrorListQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/error_list/index.ts b/x-pack/plugins/uptime/public/components/queries/error_list/index.ts
deleted file mode 100644
index f9ae11c9fc2c..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/error_list/index.ts
+++ /dev/null
@@ -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 { ErrorListQuery } from './error_list_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar_query.tsx b/x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar_query.tsx
deleted file mode 100644
index 8242bf63ff90..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar_query.tsx
+++ /dev/null
@@ -1,38 +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 React from 'react';
-import { FilterBar as FilterBarType } from '../../../../common/graphql/types';
-import { UptimeSearchBarQueryChangeHandler } from '../../../pages/overview';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { FilterBar, FilterBarLoading } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getFilterBarQuery } from './get_filter_bar';
-
-interface FilterBarQueryResult {
- filterBar?: FilterBarType;
-}
-
-interface FilterBarProps {
- currentQuery?: object;
- updateQuery: UptimeSearchBarQueryChangeHandler;
-}
-
-type Props = FilterBarProps & UptimeCommonProps & UptimeGraphQLQueryProps;
-
-export const makeFilterBarQuery = ({ currentQuery, data, updateQuery }: Props) => {
- if (data && data.filterBar) {
- return (
-
- );
- }
- return ;
-};
-
-export const FilterBarQuery = withUptimeGraphQL(
- makeFilterBarQuery,
- getFilterBarQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/filter_bar/index.ts b/x-pack/plugins/uptime/public/components/queries/filter_bar/index.ts
deleted file mode 100644
index fa61aacec9fa..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/filter_bar/index.ts
+++ /dev/null
@@ -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 { FilterBarQuery } from './filter_bar_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/index.ts b/x-pack/plugins/uptime/public/components/queries/index.ts
deleted file mode 100644
index 3630a45b19f0..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/index.ts
+++ /dev/null
@@ -1,15 +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 { EmptyStateQuery } from './empty_state';
-export { ErrorListQuery } from './error_list';
-export { FilterBarQuery } from './filter_bar';
-export { MonitorChartsQuery } from './monitor_charts';
-export { MonitorListQuery } from './monitor_list';
-export { MonitorPageTitleQuery } from './monitor_page_title';
-export { MonitorStatusBarQuery } from './monitor_status_bar';
-export { PingListQuery } from './ping_list';
-export { SnapshotQuery } from './snapshot';
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts_query.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts_query.tsx
deleted file mode 100644
index 275b0f1deea2..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts_query.tsx
+++ /dev/null
@@ -1,60 +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 { i18n } from '@kbn/i18n';
-import React from 'react';
-import { MonitorChart } from '../../../../common/graphql/types';
-import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { MonitorCharts } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getMonitorChartsQuery } from './get_monitor_charts';
-
-interface MonitorChartsQueryResult {
- monitorChartsData?: MonitorChart;
-}
-
-interface MonitorChartsProps {
- monitorId: string;
-}
-
-type Props = MonitorChartsProps &
- UptimeCommonProps &
- UptimeGraphQLQueryProps;
-
-const makeMonitorCharts = ({ colors: { success, range, mean, danger }, data }: Props) => {
- if (data && data.monitorChartsData) {
- const {
- monitorChartsData,
- monitorChartsData: { durationMaxValue, statusMaxCount },
- } = data;
-
- const durationMax = microsToMillis(durationMaxValue);
- // These limits provide domain sizes for the charts
- const checkDomainLimits = [0, statusMaxCount];
- const durationDomainLimits = [0, durationMax ? durationMax : 0];
-
- return (
-
- );
- }
- return i18n.translate('xpack.uptime.monitorCharts.loadingMessage', {
- defaultMessage: 'Loading…',
- });
-};
-
-export const MonitorChartsQuery = withUptimeGraphQL(
- makeMonitorCharts,
- getMonitorChartsQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_list/index.ts b/x-pack/plugins/uptime/public/components/queries/monitor_list/index.ts
deleted file mode 100644
index cc9abf8ea194..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_list/index.ts
+++ /dev/null
@@ -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 { MonitorListQuery } from './monitor_list_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list_query.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list_query.tsx
deleted file mode 100644
index 194e53a4ec7f..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list_query.tsx
+++ /dev/null
@@ -1,40 +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 { get } from 'lodash';
-import React from 'react';
-import { LatestMonitor } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { MonitorList } from '../../functional/monitor_list';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getMonitorListQuery } from './get_monitor_list';
-
-interface MonitorListQueryResult {
- // TODO: clean up this ugly result data shape, there should be no nesting
- monitorStatus?: {
- monitors: LatestMonitor[];
- };
-}
-
-type Props = UptimeCommonProps & UptimeGraphQLQueryProps;
-
-const makeMonitorListQuery = ({ colors: { success, danger }, data, loading }: Props) => {
- const monitors: LatestMonitor[] | undefined = get(data, 'monitorStatus.monitors');
-
- return (
-
- );
-};
-
-export const MonitorListQuery = withUptimeGraphQL(
- makeMonitorListQuery,
- getMonitorListQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/index.ts b/x-pack/plugins/uptime/public/components/queries/monitor_page_title/index.ts
deleted file mode 100644
index 58dcfc90555b..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/index.ts
+++ /dev/null
@@ -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 { MonitorPageTitleQuery } from './monitor_page_title_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/monitor_page_title_query.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_page_title/monitor_page_title_query.tsx
deleted file mode 100644
index 5c36793dfc46..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/monitor_page_title_query.tsx
+++ /dev/null
@@ -1,38 +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 { EuiLoadingSpinner } from '@elastic/eui';
-import React from 'react';
-import { MonitorPageTitle as TitleType } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { MonitorPageTitle } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getMonitorPageTitleQuery } from './get_monitor_page_title';
-
-interface MonitorPageTitleQueryResult {
- monitorPageTitle?: TitleType;
-}
-
-interface MonitorPageTitleProps {
- monitorId: string;
-}
-
-type Props = MonitorPageTitleProps &
- UptimeCommonProps &
- UptimeGraphQLQueryProps;
-
-export const makeMonitorPageTitleQuery = ({ data }: Props) => {
- if (data && data.monitorPageTitle) {
- const { monitorPageTitle } = data;
- return ;
- }
- return ;
-};
-
-export const MonitorPageTitleQuery = withUptimeGraphQL<
- MonitorPageTitleQueryResult,
- MonitorPageTitleProps
->(makeMonitorPageTitleQuery, getMonitorPageTitleQuery);
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/index.ts b/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/index.ts
deleted file mode 100644
index 2f3e459b7804..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/index.ts
+++ /dev/null
@@ -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 { MonitorStatusBarQuery } from './monitor_status_bar_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/monitor_status_bar_query.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/monitor_status_bar_query.tsx
deleted file mode 100644
index 7b40d5960e61..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/monitor_status_bar_query.tsx
+++ /dev/null
@@ -1,57 +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 { i18n } from '@kbn/i18n';
-import { get } from 'lodash';
-import React from 'react';
-import { Ping } from '../../../../common/graphql/types';
-import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { EmptyStatusBar, MonitorStatusBar } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getMonitorStatusBarQuery } from './get_monitor_status_bar';
-
-interface MonitorStatusBarQueryResult {
- monitorStatus?: Ping[];
-}
-
-interface MonitorStatusBarProps {
- monitorId: string;
-}
-
-type Props = MonitorStatusBarProps &
- UptimeCommonProps &
- UptimeGraphQLQueryProps;
-
-const makeMonitorStatusBar = ({ monitorId, data }: Props) => {
- if (data && data.monitorStatus) {
- const { monitorStatus } = data;
- if (!monitorStatus.length) {
- return ;
- }
- const { monitor, timestamp, url } = monitorStatus[0];
- const status = get(monitor, 'status', undefined);
- const duration = microsToMillis(get(monitor, 'duration.us', null));
- const full = get(url, 'full', undefined);
-
- return (
-
- );
- }
- return (
-
- );
-};
-
-export const MonitorStatusBarQuery = withUptimeGraphQL<
- MonitorStatusBarQueryResult,
- MonitorStatusBarProps
->(makeMonitorStatusBar, getMonitorStatusBarQuery);
diff --git a/x-pack/plugins/uptime/public/components/queries/ping_list/index.ts b/x-pack/plugins/uptime/public/components/queries/ping_list/index.ts
deleted file mode 100644
index f73469a7877d..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/ping_list/index.ts
+++ /dev/null
@@ -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 { PingListQuery } from './ping_list_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/ping_list/ping_list_query.tsx b/x-pack/plugins/uptime/public/components/queries/ping_list/ping_list_query.tsx
deleted file mode 100644
index f06aeaf38b06..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/ping_list/ping_list_query.tsx
+++ /dev/null
@@ -1,87 +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 { EuiComboBoxOptionProps } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { get } from 'lodash';
-import React from 'react';
-import { UMPingSortDirectionArg } from '../../../../common/domain_types';
-import { PingResults } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { PingList } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getPingsQuery } from './get_pings';
-
-interface PingListQueryResult {
- allPings?: PingResults;
-}
-
-interface PingListProps {
- monitorId?: string;
- selectedOption?: EuiComboBoxOptionProps;
- sort?: UMPingSortDirectionArg;
- size?: number;
- onStatusSelectionChange: (selectedOptions: EuiComboBoxOptionProps[]) => void;
-}
-
-type Props = PingListProps &
- UptimeCommonProps &
- UptimeGraphQLQueryProps &
- PingListProps;
-
-interface PingListState {
- statusOptions: EuiComboBoxOptionProps[];
-}
-
-export class Query extends React.Component {
- constructor(props: Props) {
- super(props);
-
- const statusOptions: EuiComboBoxOptionProps[] = [
- {
- label: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
- defaultMessage: 'All',
- }),
- value: '',
- },
- {
- label: i18n.translate('xpack.uptime.pingList.statusOptions.upStatusOptionLabel', {
- defaultMessage: 'Up',
- }),
- value: 'up',
- },
- {
- label: i18n.translate('xpack.uptime.pingList.statusOptions.downStatusOptionLabel', {
- defaultMessage: 'Down',
- }),
- value: 'down',
- },
- ];
- this.state = {
- statusOptions,
- };
- this.props.onStatusSelectionChange([this.state.statusOptions[2]]);
- }
-
- public render() {
- const { loading, data } = this.props;
- const allPings: PingResults | undefined = get(data, 'allPings', undefined);
- return (
-
- );
- }
-}
-
-export const PingListQuery = withUptimeGraphQL(
- Query,
- getPingsQuery
-);
diff --git a/x-pack/plugins/uptime/public/components/queries/snapshot/index.ts b/x-pack/plugins/uptime/public/components/queries/snapshot/index.ts
deleted file mode 100644
index 78a35da5c78b..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/snapshot/index.ts
+++ /dev/null
@@ -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 { SnapshotQuery } from './snapshot_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx b/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx
deleted file mode 100644
index 18ebea9594a5..000000000000
--- a/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx
+++ /dev/null
@@ -1,31 +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 React from 'react';
-import { Snapshot as SnapshotType } from '../../../../common/graphql/types';
-import { UptimeCommonProps } from '../../../uptime_app';
-import { Snapshot, SnapshotLoading } from '../../functional';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
-import { getSnapshotQuery } from './get_snapshot';
-
-interface SnapshotQueryResult {
- snapshot?: SnapshotType;
-}
-
-type Props = UptimeCommonProps & UptimeGraphQLQueryProps;
-
-const Query = (props: Props) => {
- const {
- colors: { success, danger },
- data,
- } = props;
- if (data && data.snapshot) {
- return ;
- }
- return ;
-};
-
-export const SnapshotQuery = withUptimeGraphQL(Query, getSnapshotQuery);
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/index.ts b/x-pack/plugins/uptime/public/contexts/index.ts
similarity index 64%
rename from x-pack/plugins/uptime/public/components/queries/monitor_charts/index.ts
rename to x-pack/plugins/uptime/public/contexts/index.ts
index 89498b8995c6..d54c29122809 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/index.ts
+++ b/x-pack/plugins/uptime/public/contexts/index.ts
@@ -4,4 +4,5 @@
* you may not use this file except in compliance with the Elastic License.
*/
-export { MonitorChartsQuery } from './monitor_charts_query';
+export { UptimeRefreshContext } from './uptime_refresh_context';
+export { UptimeSettingsContext } from './uptime_settings_context';
diff --git a/x-pack/plugins/uptime/common/domain_types/pings.ts b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.ts
similarity index 51%
rename from x-pack/plugins/uptime/common/domain_types/pings.ts
rename to x-pack/plugins/uptime/public/contexts/uptime_refresh_context.ts
index 7c33eddd05a5..5195ddd72e09 100644
--- a/x-pack/plugins/uptime/common/domain_types/pings.ts
+++ b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.ts
@@ -4,4 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/
-export type UMPingSortDirectionArg = 'asc' | 'desc';
+import { createContext } from 'react';
+
+interface UMRefreshContext {
+ lastRefresh: number;
+}
+
+const defaultContext: UMRefreshContext = {
+ lastRefresh: 0,
+};
+
+export const UptimeRefreshContext = createContext(defaultContext);
diff --git a/x-pack/plugins/uptime/public/contexts/uptime_settings_context.ts b/x-pack/plugins/uptime/public/contexts/uptime_settings_context.ts
new file mode 100644
index 000000000000..706c2adc631f
--- /dev/null
+++ b/x-pack/plugins/uptime/public/contexts/uptime_settings_context.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { createContext } from 'react';
+import { UptimeAppColors } from '../uptime_app';
+
+interface UMSettingsContext {
+ autorefreshIsPaused: boolean;
+ autorefreshInterval: number;
+ basePath: string;
+ colors: UptimeAppColors;
+ dateRangeStart: string;
+ dateRangeEnd: string;
+ refreshApp: () => void;
+ setHeadingText: (text: string) => void;
+}
+
+/**
+ * These are default values for the context. These defaults are typically
+ * overwritten by the Uptime App upon its invocation.
+ */
+const defaultContext: UMSettingsContext = {
+ autorefreshIsPaused: true,
+ autorefreshInterval: 10000,
+ basePath: '',
+ colors: {
+ success: euiLightVars.euiColorSuccess,
+ range: euiLightVars.euiFocusBackgroundColor,
+ mean: euiLightVars.euiColorPrimary,
+ danger: euiLightVars.euiColorDanger,
+ },
+ dateRangeStart: 'now-15m',
+ dateRangeEnd: 'now',
+ refreshApp: () => {
+ throw new Error('App refresh was not initialized, set it when you invoke the context');
+ },
+ setHeadingText: () => {
+ throw new Error('setHeadingText was not initialized on UMSettingsContext.');
+ },
+};
+
+export const UptimeSettingsContext = createContext(defaultContext);
diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx
index 25d4c3df0fde..4c500cca42ce 100644
--- a/x-pack/plugins/uptime/public/pages/monitor.tsx
+++ b/x-pack/plugins/uptime/public/pages/monitor.tsx
@@ -5,7 +5,6 @@
*/
import {
- EuiComboBoxOptionProps,
// @ts-ignore No typings for EuiSpacer
EuiSpacer,
// @ts-ignore No typings for EuiSuperSelect
@@ -13,15 +12,16 @@ import {
} from '@elastic/eui';
import { ApolloQueryResult, OperationVariables, QueryOptions } from 'apollo-client';
import gql from 'graphql-tag';
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext, useEffect, useState } from 'react';
import { getMonitorPageBreadcrumb } from '../breadcrumbs';
import {
- MonitorChartsQuery,
- MonitorPageTitleQuery,
- MonitorStatusBarQuery,
- PingListQuery,
-} from '../components/queries';
-import { UptimeCommonProps } from '../uptime_app';
+ MonitorCharts,
+ MonitorPageTitle,
+ MonitorStatusBar,
+ PingList,
+} from '../components/functional';
+import { UMUpdateBreadcrumbs } from '../lib/lib';
+import { UptimeSettingsContext } from '../contexts';
interface MonitorPageProps {
history: { push: any };
@@ -31,30 +31,16 @@ interface MonitorPageProps {
query: (
options: QueryOptions
) => Promise>;
+ setBreadcrumbs: UMUpdateBreadcrumbs;
}
-type Props = MonitorPageProps & UptimeCommonProps;
-
-interface MonitorPageState {
- monitorId: string;
- selectedPingListOption?: EuiComboBoxOptionProps;
-}
-
-export class MonitorPage extends React.Component {
- constructor(props: Props) {
- super(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
- this.state = {
- monitorId: this.props.location.pathname.replace(/^(\/monitor\/)/, ''),
- };
- }
-
- public componentDidMount() {
- const { query, setBreadcrumbs, setHeadingText } = this.props;
- const { monitorId } = this.state;
-
+export const MonitorPage = ({ location, query, setBreadcrumbs }: MonitorPageProps) => {
+ const [monitorId] = useState(location.pathname.replace(/^(\/monitor\/)/, ''));
+ const [selectedStatus, setSelectedStatus] = useState('down');
+ const { colors, dateRangeStart, dateRangeEnd, refreshApp, setHeadingText } = useContext(
+ UptimeSettingsContext
+ );
+ useEffect(() => {
query({
query: gql`
query MonitorPageTitle($monitorId: String!) {
@@ -70,58 +56,32 @@ export class MonitorPage extends React.Component {
const { name, url, id } = result.data.monitorPageTitle;
const heading: string = name || url || id;
setBreadcrumbs(getMonitorPageBreadcrumb(heading));
- setHeadingText(heading);
+ if (setHeadingText) {
+ setHeadingText(heading);
+ }
});
- }
-
- public render() {
- const { dateRangeStart, dateRangeEnd } = this.props;
- const { monitorId } = this.state;
-
- return (
-
-
-
-
-
-
-
-
-
- );
- }
-
- private onPingListStatusSelectionChange = (selectedOptions: EuiComboBoxOptionProps[]) => {
- if (selectedOptions[0]) {
- this.setState({ selectedPingListOption: selectedOptions[0] }, () => this.props.refreshApp());
- }
- };
-}
+ }, []);
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/pages/overview.tsx b/x-pack/plugins/uptime/public/pages/overview.tsx
index 761f305120d8..ebf9a572e57a 100644
--- a/x-pack/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/plugins/uptime/public/pages/overview.tsx
@@ -7,99 +7,74 @@
// @ts-ignore EuiSearchBar missing
import { EuiSearchBar, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext, useEffect, useState } from 'react';
import { getOverviewPageBreadcrumbs } from '../breadcrumbs';
-import {
- EmptyStateQuery,
- ErrorListQuery,
- FilterBarQuery,
- MonitorListQuery,
- SnapshotQuery,
-} from '../components/queries';
+import { EmptyState, ErrorList, FilterBar, MonitorList, Snapshot } from '../components/functional';
import { UMUpdateBreadcrumbs } from '../lib/lib';
-import { UptimeCommonProps } from '../uptime_app';
+import { UptimeSettingsContext } from '../contexts';
interface OverviewPageProps {
basePath: string;
setBreadcrumbs: UMUpdateBreadcrumbs;
}
-type Props = OverviewPageProps & UptimeCommonProps;
-
-interface OverviewPageState {
- currentFilterObj?: object;
- currentFilterQuery?: string;
-}
+type Props = OverviewPageProps;
export type UptimeSearchBarQueryChangeHandler = ({ query }: { query?: { text: string } }) => void;
-export class OverviewPage extends React.Component {
- constructor(props: Props) {
- super(props);
- this.state = {
- currentFilterQuery: undefined,
- };
- }
+export const OverviewPage = ({ basePath, setBreadcrumbs }: Props) => {
+ const { colors, dateRangeStart, dateRangeEnd, refreshApp, setHeadingText } = useContext(
+ UptimeSettingsContext
+ );
+ const [currentFilterQueryObj, setFilterQueryObj] = useState(undefined);
+ const [currentFilterQuery, setCurrentFilterQuery] = useState(undefined);
- public componentWillMount() {
- this.props.setBreadcrumbs(getOverviewPageBreadcrumbs());
- this.props.setHeadingText(
- i18n.translate('xpack.uptime.overviewPage.headerText', {
- defaultMessage: 'Overview',
- description: `The text that will be displayed in the app's heading when the Overview page loads.`,
- })
- );
- }
+ useEffect(() => {
+ setBreadcrumbs(getOverviewPageBreadcrumbs());
+ if (setHeadingText) {
+ setHeadingText(
+ i18n.translate('xpack.uptime.overviewPage.headerText', {
+ defaultMessage: 'Overview',
+ description: `The text that will be displayed in the app's heading when the Overview page loads.`,
+ })
+ );
+ }
+ }, []);
- public render() {
- const commonVariables = {
- dateRangeStart: this.props.dateRangeStart,
- dateRangeEnd: this.props.dateRangeEnd,
- filters: this.state.currentFilterQuery,
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+ const sharedProps = { dateRangeStart, dateRangeEnd, currentFilterQuery };
- private onFilterQueryChange: UptimeSearchBarQueryChangeHandler = ({
- query,
- }: {
- query?: { text: string };
- }) => {
+ const updateQuery: UptimeSearchBarQueryChangeHandler = ({ query }) => {
try {
let esQuery;
if (query && query.text) {
esQuery = EuiSearchBar.Query.toESQuery(query);
}
- this.setState(
- {
- currentFilterObj: query,
- currentFilterQuery: esQuery ? JSON.stringify(esQuery) : esQuery,
- },
- () => this.props.refreshApp()
- );
+ setFilterQueryObj(query);
+ setCurrentFilterQuery(esQuery ? JSON.stringify(esQuery) : esQuery);
+ if (refreshApp) {
+ refreshApp();
+ }
} catch (e) {
- this.setState({ currentFilterQuery: undefined });
+ setFilterQueryObj(undefined);
+ setCurrentFilterQuery(undefined);
}
};
-}
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/components/queries/empty_state/get_doc_count.ts b/x-pack/plugins/uptime/public/queries/doc_count_query.ts
similarity index 75%
rename from x-pack/plugins/uptime/public/components/queries/empty_state/get_doc_count.ts
rename to x-pack/plugins/uptime/public/queries/doc_count_query.ts
index ee813de84bae..2850727adc82 100644
--- a/x-pack/plugins/uptime/public/components/queries/empty_state/get_doc_count.ts
+++ b/x-pack/plugins/uptime/public/queries/doc_count_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getDocCountQueryString = `
+export const docCountQueryString = `
{
getDocCount {
count
@@ -14,6 +14,6 @@ export const getDocCountQueryString = `
}
`;
-export const getDocCountQuery = gql`
- ${getDocCountQueryString}
+export const docCountQuery = gql`
+ ${docCountQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/error_list/get_error_list.ts b/x-pack/plugins/uptime/public/queries/error_list_query.ts
similarity index 84%
rename from x-pack/plugins/uptime/public/components/queries/error_list/get_error_list.ts
rename to x-pack/plugins/uptime/public/queries/error_list_query.ts
index 328efe010b2f..bf70da0a473d 100644
--- a/x-pack/plugins/uptime/public/components/queries/error_list/get_error_list.ts
+++ b/x-pack/plugins/uptime/public/queries/error_list_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getErrorListQueryString = `
+export const errorListQueryString = `
query ErrorList($dateRangeStart: String!, $dateRangeEnd: String!, $filters: String) {
errorList: getErrorsList(
dateRangeStart: $dateRangeStart
@@ -24,6 +24,6 @@ query ErrorList($dateRangeStart: String!, $dateRangeEnd: String!, $filters: Stri
}
`;
-export const getErrorListQuery = gql`
- ${getErrorListQueryString}
+export const errorListQuery = gql`
+ ${errorListQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/filter_bar/get_filter_bar.ts b/x-pack/plugins/uptime/public/queries/filter_bar_query.ts
similarity index 83%
rename from x-pack/plugins/uptime/public/components/queries/filter_bar/get_filter_bar.ts
rename to x-pack/plugins/uptime/public/queries/filter_bar_query.ts
index fed59b15b686..cd830c050977 100644
--- a/x-pack/plugins/uptime/public/components/queries/filter_bar/get_filter_bar.ts
+++ b/x-pack/plugins/uptime/public/queries/filter_bar_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getFilterBarQueryString = `
+export const filterBarQueryString = `
query FilterBar($dateRangeStart: String!, $dateRangeEnd: String!) {
filterBar: getFilterBar(dateRangeStart: $dateRangeStart, dateRangeEnd: $dateRangeEnd) {
ports
@@ -20,6 +20,6 @@ query FilterBar($dateRangeStart: String!, $dateRangeEnd: String!) {
}
`;
-export const getFilterBarQuery = gql`
- ${getFilterBarQueryString}
+export const filterBarQuery = gql`
+ ${filterBarQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/queries/index.ts b/x-pack/plugins/uptime/public/queries/index.ts
new file mode 100644
index 000000000000..253fdf16e008
--- /dev/null
+++ b/x-pack/plugins/uptime/public/queries/index.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { docCountQuery, docCountQueryString } from './doc_count_query';
+export { errorListQuery, errorListQueryString } from './error_list_query';
+export { filterBarQuery, filterBarQueryString } from './filter_bar_query';
+export { monitorChartsQuery, monitorChartsQueryString } from './monitor_charts_query';
+export { monitorListQuery, monitorListQueryString } from './monitor_list_query';
+export { monitorPageTitleQuery } from './monitor_page_title_query';
+export { monitorStatusBarQuery, monitorStatusBarQueryString } from './monitor_status_bar_query';
+export { pingsQuery, pingsQueryString } from './pings_query';
+export { snapshotQuery, snapshotQueryString } from './snapshot_query';
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/get_monitor_charts.ts b/x-pack/plugins/uptime/public/queries/monitor_charts_query.ts
similarity index 85%
rename from x-pack/plugins/uptime/public/components/queries/monitor_charts/get_monitor_charts.ts
rename to x-pack/plugins/uptime/public/queries/monitor_charts_query.ts
index 03d7800ca9af..e86f43570f4b 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/get_monitor_charts.ts
+++ b/x-pack/plugins/uptime/public/queries/monitor_charts_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getMonitorChartsQueryString = `
+export const monitorChartsQueryString = `
query MonitorCharts($dateRangeStart: String!, $dateRangeEnd: String!, $monitorId: String!) {
monitorChartsData: getMonitorChartsData(
monitorId: $monitorId
@@ -34,6 +34,6 @@ query MonitorCharts($dateRangeStart: String!, $dateRangeEnd: String!, $monitorId
}
`;
-export const getMonitorChartsQuery = gql`
- ${getMonitorChartsQueryString}
+export const monitorChartsQuery = gql`
+ ${monitorChartsQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_list/get_monitor_list.ts b/x-pack/plugins/uptime/public/queries/monitor_list_query.ts
similarity index 89%
rename from x-pack/plugins/uptime/public/components/queries/monitor_list/get_monitor_list.ts
rename to x-pack/plugins/uptime/public/queries/monitor_list_query.ts
index af3a7f3fe703..8f843170a037 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_list/get_monitor_list.ts
+++ b/x-pack/plugins/uptime/public/queries/monitor_list_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getMonitorListQueryString = `
+export const monitorListQueryString = `
query MonitorList($dateRangeStart: String!, $dateRangeEnd: String!, $filters: String) {
monitorStatus: getMonitors(
dateRangeStart: $dateRangeStart
@@ -46,6 +46,6 @@ export const getMonitorListQueryString = `
}
`;
-export const getMonitorListQuery = gql`
- ${getMonitorListQueryString}
+export const monitorListQuery = gql`
+ ${monitorListQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/get_monitor_page_title.ts b/x-pack/plugins/uptime/public/queries/monitor_page_title_query.ts
similarity index 90%
rename from x-pack/plugins/uptime/public/components/queries/monitor_page_title/get_monitor_page_title.ts
rename to x-pack/plugins/uptime/public/queries/monitor_page_title_query.ts
index a54af690c37c..425f06d74a78 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_page_title/get_monitor_page_title.ts
+++ b/x-pack/plugins/uptime/public/queries/monitor_page_title_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getMonitorPageTitleQuery = gql`
+export const monitorPageTitleQuery = gql`
query MonitorPageTitle($monitorId: String!) {
monitorPageTitle: getMonitorPageTitle(monitorId: $monitorId) {
id
diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/get_monitor_status_bar.ts b/x-pack/plugins/uptime/public/queries/monitor_status_bar_query.ts
similarity index 83%
rename from x-pack/plugins/uptime/public/components/queries/monitor_status_bar/get_monitor_status_bar.ts
rename to x-pack/plugins/uptime/public/queries/monitor_status_bar_query.ts
index d8c6104e287d..564e48e59288 100644
--- a/x-pack/plugins/uptime/public/components/queries/monitor_status_bar/get_monitor_status_bar.ts
+++ b/x-pack/plugins/uptime/public/queries/monitor_status_bar_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getMonitorStatusBarQueryString = `
+export const monitorStatusBarQueryString = `
query MonitorStatus($dateRangeStart: String!, $dateRangeEnd: String!, $monitorId: String) {
monitorStatus: getLatestMonitors(
dateRangeStart: $dateRangeStart
@@ -28,6 +28,6 @@ query MonitorStatus($dateRangeStart: String!, $dateRangeEnd: String!, $monitorId
}
`;
-export const getMonitorStatusBarQuery = gql`
- ${getMonitorStatusBarQueryString}
+export const monitorStatusBarQuery = gql`
+ ${monitorStatusBarQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/ping_list/get_pings.ts b/x-pack/plugins/uptime/public/queries/pings_query.ts
similarity index 90%
rename from x-pack/plugins/uptime/public/components/queries/ping_list/get_pings.ts
rename to x-pack/plugins/uptime/public/queries/pings_query.ts
index 413141a4b5b1..6636e718934e 100644
--- a/x-pack/plugins/uptime/public/components/queries/ping_list/get_pings.ts
+++ b/x-pack/plugins/uptime/public/queries/pings_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getPingsQueryString = `
+export const pingsQueryString = `
query PingList(
$dateRangeStart: String!
$dateRangeEnd: String!
@@ -51,6 +51,6 @@ query PingList(
}
`;
-export const getPingsQuery = gql`
- ${getPingsQueryString}
+export const pingsQuery = gql`
+ ${pingsQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/components/queries/snapshot/get_snapshot.ts b/x-pack/plugins/uptime/public/queries/snapshot_query.ts
similarity index 84%
rename from x-pack/plugins/uptime/public/components/queries/snapshot/get_snapshot.ts
rename to x-pack/plugins/uptime/public/queries/snapshot_query.ts
index 3fe16b2c9005..4c3f2f4b17ca 100644
--- a/x-pack/plugins/uptime/public/components/queries/snapshot/get_snapshot.ts
+++ b/x-pack/plugins/uptime/public/queries/snapshot_query.ts
@@ -6,7 +6,7 @@
import gql from 'graphql-tag';
-export const getSnapshotQueryString = `
+export const snapshotQueryString = `
query Snapshot(
$dateRangeStart: String!
$dateRangeEnd: String!
@@ -31,6 +31,6 @@ snapshot: getSnapshot(
}
`;
-export const getSnapshotQuery = gql`
- ${getSnapshotQueryString}
+export const snapshotQuery = gql`
+ ${snapshotQueryString}
`;
diff --git a/x-pack/plugins/uptime/public/uptime_app.tsx b/x-pack/plugins/uptime/public/uptime_app.tsx
index fbaf27632f97..1927530ceb38 100644
--- a/x-pack/plugins/uptime/public/uptime_app.tsx
+++ b/x-pack/plugins/uptime/public/uptime_app.tsx
@@ -22,37 +22,22 @@ import {
} from '@elastic/eui';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { NormalizedCacheObject } from 'apollo-cache-inmemory';
-import ApolloClient from 'apollo-client';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { ApolloProvider } from 'react-apollo';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { I18nContext } from 'ui/i18n';
import { overviewBreadcrumb, UMBreadcrumb } from './breadcrumbs';
import { UMGraphQLClient, UMUpdateBreadcrumbs } from './lib/lib';
import { MonitorPage, OverviewPage } from './pages';
+import { UptimeRefreshContext, UptimeSettingsContext } from './contexts';
-interface UptimeAppColors {
+export interface UptimeAppColors {
danger: string;
success: string;
range: string;
mean: string;
}
-// TODO: these props are global to this app, we should put them in a context
-export interface UptimeCommonProps {
- autorefreshIsPaused: boolean;
- autorefreshInterval: number;
- client: ApolloClient;
- colors: UptimeAppColors;
- dateRangeStart: string;
- dateRangeEnd: string;
- lastRefresh?: number;
- refreshApp: () => void;
- setBreadcrumbs: UMUpdateBreadcrumbs;
- setHeadingText: (text: string) => void;
-}
-
export interface UptimePersistedState {
autorefreshIsPaused: boolean;
autorefreshInterval: number;
@@ -61,7 +46,6 @@ export interface UptimePersistedState {
}
export interface UptimeAppProps {
- // TODO: if we add a context to the Uptime UI, this should be included in it
basePath: string;
darkMode: boolean;
client: UMGraphQLClient;
@@ -76,17 +60,6 @@ export interface UptimeAppProps {
renderGlobalHelpControls(): void;
}
-interface UptimeAppState {
- autorefreshIsPaused: boolean;
- autorefreshInterval: number;
- breadcrumbs: UMBreadcrumb[];
- colors: UptimeAppColors;
- dateRangeStart: string;
- dateRangeEnd: string;
- headingText?: string;
- lastRefresh?: number;
-}
-
// TODO: when EUI exports types for this, this should be replaced
interface SuperDateRangePickerRangeChangedEvent {
start: string;
@@ -98,164 +71,155 @@ interface SuperDateRangePickerRefreshChangedEvent {
refreshInterval?: number;
}
-class Application extends React.Component {
- private setBreadcrumbs: UMUpdateBreadcrumbs;
- constructor(props: UptimeAppProps) {
- super(props);
+const Application = (props: UptimeAppProps) => {
+ const {
+ basePath,
+ client,
+ darkMode,
+ initialAutorefreshIsPaused,
+ initialAutorefreshInterval,
+ initialDateRangeStart,
+ initialDateRangeEnd,
+ persistState,
+ renderGlobalHelpControls,
+ routerBasename,
+ setBreadcrumbs,
+ } = props;
- const {
- darkMode,
- initialAutorefreshIsPaused: autorefreshIsPaused,
- initialAutorefreshInterval: autorefreshInterval,
- initialDateRangeStart: dateRangeStart,
- initialDateRangeEnd: dateRangeEnd,
- kibanaBreadcrumbs,
- setBreadcrumbs,
- } = props;
-
- this.setBreadcrumbs = setBreadcrumbs;
-
- let colors: UptimeAppColors;
- if (darkMode) {
- colors = {
- success: euiDarkVars.euiColorSuccess,
- range: euiDarkVars.euiFocusBackgroundColor,
- mean: euiDarkVars.euiColorPrimary,
- danger: euiDarkVars.euiColorDanger,
- };
- } else {
- colors = {
- success: euiLightVars.euiColorSuccess,
- range: euiLightVars.euiFocusBackgroundColor,
- mean: euiLightVars.euiColorPrimary,
- danger: euiLightVars.euiColorDanger,
- };
- }
-
- this.state = {
- autorefreshIsPaused,
- autorefreshInterval,
- breadcrumbs: kibanaBreadcrumbs,
- colors,
- dateRangeStart,
- dateRangeEnd,
+ let colors: UptimeAppColors;
+ if (darkMode) {
+ colors = {
+ success: euiDarkVars.euiColorSuccess,
+ range: euiDarkVars.euiFocusBackgroundColor,
+ mean: euiDarkVars.euiColorPrimary,
+ danger: euiDarkVars.euiColorDanger,
+ };
+ } else {
+ colors = {
+ success: euiLightVars.euiColorSuccess,
+ range: euiLightVars.euiFocusBackgroundColor,
+ mean: euiLightVars.euiColorPrimary,
+ danger: euiLightVars.euiColorDanger,
};
}
- public componentWillMount() {
- this.setBreadcrumbs([overviewBreadcrumb]);
- }
+ const [autorefreshIsPaused, setAutorefreshIsPaused] = useState(
+ initialAutorefreshIsPaused
+ );
+ const [autorefreshInterval, setAutorefreshInterval] = useState(
+ initialAutorefreshInterval
+ );
+ const [dateRangeStart, setDateRangeStart] = useState(initialDateRangeStart);
+ const [dateRangeEnd, setDateRangeEnd] = useState(initialDateRangeEnd);
+ const [lastRefresh, setLastRefresh] = useState(Date.now());
+ const [headingText, setHeadingText] = useState(undefined);
- public componentDidMount() {
- this.props.renderGlobalHelpControls();
- }
+ useEffect(() => {
+ setBreadcrumbs([overviewBreadcrumb]);
+ renderGlobalHelpControls();
+ }, []);
- public render() {
- const { basePath, routerBasename, client } = this.props;
- return (
-
-
-
-
-
-
-
-
- {this.state.headingText}
-
-
-
- {
- // @ts-ignore onRefresh is not defined on EuiSuperDatePicker's type yet
- {
- this.setState(
- { dateRangeStart: start, dateRangeEnd: end },
- this.persistState
- );
- this.refreshApp();
- }}
+ const refreshApp = () => {
+ setLastRefresh(Date.now());
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {headingText}
+
+
+
+ {
// @ts-ignore onRefresh is not defined on EuiSuperDatePicker's type yet
- onRefresh={() => this.refreshApp()}
- onRefreshChange={({
- isPaused,
- refreshInterval,
- }: SuperDateRangePickerRefreshChangedEvent) => {
- const autorefreshInterval =
- refreshInterval === undefined
- ? this.state.autorefreshInterval
- : refreshInterval;
- this.setState(
- { autorefreshIsPaused: isPaused, autorefreshInterval },
- this.persistState
- );
- }}
- />
- }
-
-
-
-
- (
-
- )}
- />
- (
-
- )}
- />
-
-
-
-
-
-
- );
- }
-
- private setHeadingText = (headingText: string): void => {
- this.setState({ headingText });
- };
-
- private persistState = (): void => {
- const { autorefreshIsPaused, autorefreshInterval, dateRangeStart, dateRangeEnd } = this.state;
- this.props.persistState({
- autorefreshIsPaused,
- autorefreshInterval,
- dateRangeStart,
- dateRangeEnd,
- });
- };
-
- private refreshApp = () => {
- this.setState(state => ({
- ...state,
- lastRefresh: Date.now(),
- }));
- };
-}
+ {
+ setDateRangeStart(start);
+ setDateRangeEnd(end);
+ persistState({
+ autorefreshInterval,
+ autorefreshIsPaused,
+ dateRangeStart,
+ dateRangeEnd,
+ });
+ refreshApp();
+ }}
+ // @ts-ignore onRefresh is not defined on EuiSuperDatePicker's type yet
+ onRefresh={refreshApp}
+ onRefreshChange={({
+ isPaused,
+ refreshInterval,
+ }: SuperDateRangePickerRefreshChangedEvent) => {
+ setAutorefreshInterval(
+ refreshInterval === undefined ? autorefreshInterval : refreshInterval
+ );
+ setAutorefreshIsPaused(isPaused);
+ persistState({
+ autorefreshInterval,
+ autorefreshIsPaused,
+ dateRangeStart,
+ dateRangeEnd,
+ });
+ }}
+ />
+ }
+
+
+
+
+ (
+
+ )}
+ />
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+
+ );
+};
export const UptimeApp = (props: UptimeAppProps) => ;
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/doc_count.js b/x-pack/test/api_integration/apis/uptime/graphql/doc_count.js
index 087697377ce8..b981ccef2f10 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/doc_count.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/doc_count.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getDocCountQueryString } from '../../../../../plugins/uptime/public/components/queries/empty_state/get_doc_count';
+import { docCountQueryString } from '../../../../../plugins/uptime/public/queries';
import docCount from './fixtures/doc_count';
export default function ({ getService }) {
@@ -15,7 +15,7 @@ export default function ({ getService }) {
it(`will fetch the index's count`, async () => {
const getDocCountQuery = {
operationName: null,
- query: getDocCountQueryString,
+ query: docCountQueryString,
variables: {},
};
const {
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/error_list.js b/x-pack/test/api_integration/apis/uptime/graphql/error_list.js
index 1efa04678e5b..ea59b4aa3846 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/error_list.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/error_list.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getErrorListQueryString } from '../../../../../plugins/uptime/public/components/queries/error_list/get_error_list';
+import { errorListQueryString } from '../../../../../plugins/uptime/public/queries';
import errorList from './fixtures/error_list';
import errorListFilteredById from './fixtures/error_list_filtered_by_id';
import errorListFilteredByPort from './fixtures/error_list_filtered_by_port';
@@ -18,7 +18,7 @@ export default function ({ getService }) {
it('returns expected error list', async () => {
const getErrorListQuery = {
operationName: 'ErrorList',
- query: getErrorListQueryString,
+ query: errorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -36,7 +36,7 @@ export default function ({ getService }) {
it('returns an error list filtered by monitor id', async () => {
const getErrorListQuery = {
operationName: 'ErrorList',
- query: getErrorListQueryString,
+ query: errorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -55,7 +55,7 @@ export default function ({ getService }) {
it('returns an error list filtered by port', async () => {
const getErrorListQuery = {
operationName: 'ErrorList',
- query: getErrorListQueryString,
+ query: errorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -74,7 +74,7 @@ export default function ({ getService }) {
it('returns an error list filtered by port/type', async () => {
const getErrorListQuery = {
operationName: 'ErrorList',
- query: getErrorListQueryString,
+ query: errorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/filter_bar.js b/x-pack/test/api_integration/apis/uptime/graphql/filter_bar.js
index 463b7b9bd9b2..d79185879b04 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/filter_bar.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/filter_bar.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getFilterBarQueryString } from '../../../../../plugins/uptime/public/components/queries/filter_bar/get_filter_bar';
+import { filterBarQueryString } from '../../../../../plugins/uptime/public/queries';
import filterList from './fixtures/filter_list';
export default function ({ getService }) {
@@ -15,7 +15,7 @@ export default function ({ getService }) {
it('returns the expected filters', async () => {
const getFilterBarQuery = {
operationName: 'FilterBar',
- query: getFilterBarQueryString,
+ query: filterBarQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/monitor_charts.js b/x-pack/test/api_integration/apis/uptime/graphql/monitor_charts.js
index 8e761557b1c7..06c8689b1d0c 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/monitor_charts.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/monitor_charts.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getMonitorChartsQueryString } from '../../../../../plugins/uptime/public/components/queries/monitor_charts/get_monitor_charts';
+import { monitorChartsQueryString } from '../../../../../plugins/uptime/public/queries';
import monitorCharts from './fixtures/monitor_charts';
import monitorChartsEmptySet from './fixtures/monitor_charts_empty_set';
@@ -16,7 +16,7 @@ export default function ({ getService }) {
it('will fetch a series of data points for monitor duration and status', async () => {
const getMonitorChartsQuery = {
operationName: 'MonitorCharts',
- query: getMonitorChartsQueryString,
+ query: monitorChartsQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -35,7 +35,7 @@ export default function ({ getService }) {
it('will fetch empty sets for a date range with no data', async () => {
const getMonitorChartsQuery = {
operationName: 'MonitorCharts',
- query: getMonitorChartsQueryString,
+ query: monitorChartsQueryString,
variables: {
dateRangeStart: '2002-01-28T17:40:08.078Z',
dateRangeEnd: '2002-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/monitor_list.js b/x-pack/test/api_integration/apis/uptime/graphql/monitor_list.js
index 6e190195f520..2ffb06d98c88 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/monitor_list.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/monitor_list.js
@@ -8,7 +8,7 @@ import expect from '@kbn/expect';
import monitorList from './fixtures/monitor_list';
import monitorListDownFiltered from './fixtures/monitor_list_down_filtered';
import monitorListUpFiltered from './fixtures/monitor_list_up_filtered';
-import { getMonitorListQueryString } from '../../../../../plugins/uptime/public/components/queries/monitor_list/get_monitor_list';
+import { monitorListQueryString } from '../../../../../plugins/uptime/public/queries';
export default function ({ getService }) {
describe('monitorList query', () => {
@@ -17,7 +17,7 @@ export default function ({ getService }) {
it('will fetch a list of all the monitors', async () => {
const getMonitorListQuery = {
operationName: 'MonitorList',
- query: getMonitorListQueryString,
+ query: monitorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -35,7 +35,7 @@ export default function ({ getService }) {
it('will fetch a filtered list of all down monitors', async () => {
const getMonitorListQuery = {
operationName: 'MonitorList',
- query: getMonitorListQueryString,
+ query: monitorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -54,7 +54,7 @@ export default function ({ getService }) {
it('will fetch a filtered list of all up monitors', async () => {
const getMonitorListQuery = {
operationName: 'MonitorList',
- query: getMonitorListQueryString,
+ query: monitorListQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/monitor_status_bar.js b/x-pack/test/api_integration/apis/uptime/graphql/monitor_status_bar.js
index 15399b058f9b..c11605261853 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/monitor_status_bar.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/monitor_status_bar.js
@@ -7,7 +7,7 @@
import { omit } from 'lodash';
import expect from '@kbn/expect';
// eslint-disable-next-line max-len
-import { getMonitorStatusBarQueryString } from '../../../../../plugins/uptime/public/components/queries/monitor_status_bar/get_monitor_status_bar';
+import { monitorStatusBarQueryString } from '../../../../../plugins/uptime/public/queries';
import monitorStatus from './fixtures/monitor_status';
import monitorStatusById from './fixtures/monitor_status_by_id';
@@ -18,7 +18,7 @@ export default function ({ getService }) {
it('returns the status for all monitors with no ID filtering', async () => {
const getMonitorStatusBarQuery = {
operationName: 'MonitorStatus',
- query: getMonitorStatusBarQueryString,
+ query: monitorStatusBarQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -40,7 +40,7 @@ export default function ({ getService }) {
it('returns the status for only the given monitor', async () => {
const getMonitorStatusBarQuery = {
operationName: 'MonitorStatus',
- query: getMonitorStatusBarQueryString,
+ query: monitorStatusBarQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/ping_list.js b/x-pack/test/api_integration/apis/uptime/graphql/ping_list.js
index 89d974353b7f..a3013b462545 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/ping_list.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/ping_list.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getPingsQueryString } from '../../../../../plugins/uptime/public/components/queries/ping_list/get_pings';
+import { pingsQueryString } from '../../../../../plugins/uptime/public/queries';
import pingList from './fixtures/ping_list';
import pingListCount from './fixtures/ping_list_count';
import pingListMonitorId from './fixtures/ping_list_monitor_id';
@@ -18,7 +18,7 @@ export default function ({ getService }) {
it('returns a list of pings for the given date range and default size', async () => {
const getPingsQuery = {
operationName: 'PingList',
- query: getPingsQueryString,
+ query: pingsQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -41,7 +41,7 @@ export default function ({ getService }) {
const SIZE = 50;
const getPingsQuery = {
operationName: 'PingList',
- query: getPingsQueryString,
+ query: pingsQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -66,7 +66,7 @@ export default function ({ getService }) {
const MONITOR_ID = 'auto-tcp-0X81440A68E839814C';
const getPingsQuery = {
operationName: 'PingList',
- query: getPingsQueryString,
+ query: pingsQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -88,7 +88,7 @@ export default function ({ getService }) {
const MONITOR_ID = 'auto-tcp-0X81440A68E839814C';
const getPingsQuery = {
operationName: 'PingList',
- query: getPingsQueryString,
+ query: pingsQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
diff --git a/x-pack/test/api_integration/apis/uptime/graphql/snapshot.js b/x-pack/test/api_integration/apis/uptime/graphql/snapshot.js
index 4e656e001ac9..789a0f3d8be8 100644
--- a/x-pack/test/api_integration/apis/uptime/graphql/snapshot.js
+++ b/x-pack/test/api_integration/apis/uptime/graphql/snapshot.js
@@ -5,7 +5,7 @@
*/
import expect from '@kbn/expect';
-import { getSnapshotQueryString } from '../../../../../plugins/uptime/public/components/queries/snapshot/get_snapshot';
+import { snapshotQueryString } from '../../../../../plugins/uptime/public/queries';
import snapshot from './fixtures/snapshot';
import snapshotFilteredByDown from './fixtures/snapshot_filtered_by_down';
import snapshotFilteredByUp from './fixtures/snapshot_filtered_by_up';
@@ -18,7 +18,7 @@ export default function ({ getService }) {
it('will fetch a monitor snapshot summary', async () => {
const getSnapshotQuery = {
operationName: 'Snapshot',
- query: getSnapshotQueryString,
+ query: snapshotQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -36,7 +36,7 @@ export default function ({ getService }) {
it('will fetch a monitor snapshot filtered by down status', async () => {
const getSnapshotQuery = {
operationName: 'Snapshot',
- query: getSnapshotQueryString,
+ query: snapshotQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -55,7 +55,7 @@ export default function ({ getService }) {
it('will fetch a monitor snapshot filtered by up status', async () => {
const getSnapshotQuery = {
operationName: 'Snapshot',
- query: getSnapshotQueryString,
+ query: snapshotQueryString,
variables: {
dateRangeStart: '2019-01-28T17:40:08.078Z',
dateRangeEnd: '2019-01-28T19:00:16.078Z',
@@ -74,7 +74,7 @@ export default function ({ getService }) {
it('returns null histogram data when no data present', async () => {
const getSnapshotQuery = {
operationName: 'Snapshot',
- query: getSnapshotQueryString,
+ query: snapshotQueryString,
variables: {
dateRangeStart: '2019-01-25T04:30:54.740Z',
dateRangeEnd: '2019-01-28T04:50:54.740Z',