diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 303ce5f0c172..c3765fdca434 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -27,6 +27,8 @@ export { METRIC_TYPE, } from './hooks/use_track_metric'; +export { useFetcher } from './hooks/use_fetcher'; + export * from './typings'; export { useChartTheme } from './hooks/use_chart_theme'; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index f5ef1874c766..e96aa0d0a6bb 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -20558,8 +20558,6 @@ "xpack.uptime.featureRegistry.uptimeFeatureName": "アップタイム", "xpack.uptime.filterBar.ariaLabel": "概要ページのインプットフィルター基準", "xpack.uptime.filterBar.filterAllLabel": "すべて", - "xpack.uptime.filterBar.filterDownLabel": "ダウン", - "xpack.uptime.filterBar.filterUpLabel": "アップ", "xpack.uptime.filterBar.options.location.name": "場所", "xpack.uptime.filterBar.options.portLabel": "ポート", "xpack.uptime.filterBar.options.schemeLabel": "スキーム", @@ -20660,8 +20658,6 @@ "xpack.uptime.monitorList.tlsColumnLabel": "TLS証明書", "xpack.uptime.monitorList.viewCertificateTitle": "証明書ステータス", "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "ミリ秒単位の監視時間", - "xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel": "ダウン", - "xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel": "アップ", "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "監視ステータス", "xpack.uptime.monitorStatusBar.loadingMessage": "読み込み中…", "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "{loc}場所での{status}", @@ -20714,17 +20710,10 @@ "xpack.uptime.pingList.expandedRow.truncated": "初めの {contentBytes} バイトを表示中。", "xpack.uptime.pingList.expandRow": "拡張", "xpack.uptime.pingList.ipAddressColumnLabel": "IP", - "xpack.uptime.pingList.locationLabel": "場所", "xpack.uptime.pingList.locationNameColumnLabel": "場所", "xpack.uptime.pingList.recencyMessage": "最終確認 {fromNow}", "xpack.uptime.pingList.responseCodeColumnLabel": "応答コード", - "xpack.uptime.pingList.statusColumnHealthDownLabel": "ダウン", - "xpack.uptime.pingList.statusColumnHealthUpLabel": "アップ", "xpack.uptime.pingList.statusColumnLabel": "ステータス", - "xpack.uptime.pingList.statusLabel": "ステータス", - "xpack.uptime.pingList.statusOptions.allStatusOptionLabel": "すべて", - "xpack.uptime.pingList.statusOptions.downStatusOptionLabel": "ダウン", - "xpack.uptime.pingList.statusOptions.upStatusOptionLabel": "アップ", "xpack.uptime.pluginDescription": "アップタイム監視", "xpack.uptime.settings.blank.error": "空白にすることはできません。", "xpack.uptime.settings.blankNumberField.error": "数値でなければなりません。", @@ -20737,17 +20726,13 @@ "xpack.uptime.settings.saveSuccess": "設定が保存されました。", "xpack.uptime.settingsBreadcrumbText": "設定", "xpack.uptime.snapshot.donutChart.ariaLabel": "現在のステータスを表す円グラフ、{total}個中{down}個のモニターがダウンしています。", - "xpack.uptime.snapshot.donutChart.legend.downRowLabel": "ダウン", - "xpack.uptime.snapshot.donutChart.legend.upRowLabel": "アップ", "xpack.uptime.snapshot.monitor": "監視", "xpack.uptime.snapshot.monitors": "監視", "xpack.uptime.snapshot.noDataDescription": "選択した時間範囲に ping はありません。", "xpack.uptime.snapshot.noDataTitle": "利用可能な ping データがありません", "xpack.uptime.snapshot.pingsOverTimeTitle": "一定時間のピング", "xpack.uptime.snapshotHistogram.description": "{startTime} から {endTime} までの期間のアップタイムステータスを表示する棒グラフです。", - "xpack.uptime.snapshotHistogram.series.downLabel": "ダウン", "xpack.uptime.snapshotHistogram.series.pings": "モニター接続確認", - "xpack.uptime.snapshotHistogram.series.upLabel": "アップ", "xpack.uptime.snapshotHistogram.xAxisId": "ピングX軸", "xpack.uptime.snapshotHistogram.yAxis.title": "ピング", "xpack.uptime.snapshotHistogram.yAxisId": "ピングY軸", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 890065ac4207..dbfc45deb8dd 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -20578,8 +20578,6 @@ "xpack.uptime.featureRegistry.uptimeFeatureName": "运行时间", "xpack.uptime.filterBar.ariaLabel": "概览页面的输入筛选条件", "xpack.uptime.filterBar.filterAllLabel": "全部", - "xpack.uptime.filterBar.filterDownLabel": "关闭", - "xpack.uptime.filterBar.filterUpLabel": "运行", "xpack.uptime.filterBar.options.location.name": "位置", "xpack.uptime.filterBar.options.portLabel": "端口", "xpack.uptime.filterBar.options.schemeLabel": "方案", @@ -20680,8 +20678,6 @@ "xpack.uptime.monitorList.tlsColumnLabel": "TLS 证书", "xpack.uptime.monitorList.viewCertificateTitle": "证书状态", "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间(毫秒)", - "xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel": "关闭", - "xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel": "运行", "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "检测状态", "xpack.uptime.monitorStatusBar.loadingMessage": "正在加载……", "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "在 {loc} 位置处于 {status}", @@ -20734,17 +20730,10 @@ "xpack.uptime.pingList.expandedRow.truncated": "显示前 {contentBytes} 字节。", "xpack.uptime.pingList.expandRow": "展开", "xpack.uptime.pingList.ipAddressColumnLabel": "IP", - "xpack.uptime.pingList.locationLabel": "位置", "xpack.uptime.pingList.locationNameColumnLabel": "位置", "xpack.uptime.pingList.recencyMessage": "{fromNow}已检查", "xpack.uptime.pingList.responseCodeColumnLabel": "响应代码", - "xpack.uptime.pingList.statusColumnHealthDownLabel": "关闭", - "xpack.uptime.pingList.statusColumnHealthUpLabel": "运行", "xpack.uptime.pingList.statusColumnLabel": "状态", - "xpack.uptime.pingList.statusLabel": "状态", - "xpack.uptime.pingList.statusOptions.allStatusOptionLabel": "全部", - "xpack.uptime.pingList.statusOptions.downStatusOptionLabel": "关闭", - "xpack.uptime.pingList.statusOptions.upStatusOptionLabel": "运行", "xpack.uptime.pluginDescription": "运行时间监测", "xpack.uptime.settings.blank.error": "不能为空。", "xpack.uptime.settings.blankNumberField.error": "必须为数字。", @@ -20757,17 +20746,13 @@ "xpack.uptime.settings.saveSuccess": "设置已保存!", "xpack.uptime.settingsBreadcrumbText": "设置", "xpack.uptime.snapshot.donutChart.ariaLabel": "显示当前状态的饼图。{total} 个监测中有 {down} 个已关闭。", - "xpack.uptime.snapshot.donutChart.legend.downRowLabel": "关闭", - "xpack.uptime.snapshot.donutChart.legend.upRowLabel": "运行", "xpack.uptime.snapshot.monitor": "监测", "xpack.uptime.snapshot.monitors": "监测", "xpack.uptime.snapshot.noDataDescription": "选定的时间范围中没有 ping。", "xpack.uptime.snapshot.noDataTitle": "没有可用的 ping 数据", "xpack.uptime.snapshot.pingsOverTimeTitle": "时移 Ping 数", "xpack.uptime.snapshotHistogram.description": "显示从 {startTime} 到 {endTime} 的运行时间时移状态的条形图。", - "xpack.uptime.snapshotHistogram.series.downLabel": "关闭", "xpack.uptime.snapshotHistogram.series.pings": "监测 Ping", - "xpack.uptime.snapshotHistogram.series.upLabel": "运行", "xpack.uptime.snapshotHistogram.xAxisId": "Ping X 轴", "xpack.uptime.snapshotHistogram.yAxis.title": "Ping", "xpack.uptime.snapshotHistogram.yAxisId": "Ping Y 轴", diff --git a/x-pack/plugins/uptime/common/constants/client_defaults.ts b/x-pack/plugins/uptime/common/constants/client_defaults.ts index a5db67ae3b58..5e58724b9abd 100644 --- a/x-pack/plugins/uptime/common/constants/client_defaults.ts +++ b/x-pack/plugins/uptime/common/constants/client_defaults.ts @@ -38,6 +38,5 @@ export const CLIENT_DEFAULTS = { MONITOR_LIST_SORT_DIRECTION: 'asc', MONITOR_LIST_SORT_FIELD: 'monitor_id', SEARCH: '', - SELECTED_PING_LIST_STATUS: '', STATUS_FILTER: '', }; diff --git a/x-pack/plugins/uptime/common/constants/ui.ts b/x-pack/plugins/uptime/common/constants/ui.ts index 3bf3e3cc0a2c..2fc7c33e7163 100644 --- a/x-pack/plugins/uptime/common/constants/ui.ts +++ b/x-pack/plugins/uptime/common/constants/ui.ts @@ -15,6 +15,16 @@ export const CERTIFICATES_ROUTE = '/certificates'; export enum STATUS { UP = 'up', DOWN = 'down', + COMPLETE = 'complete', + FAILED = 'failed', + SKIPPED = 'skipped', +} + +export enum MONITOR_TYPES { + HTTP = 'http', + TCP = 'tcp', + ICMP = 'icmp', + BROWSER = 'browser', } export const ML_JOB_ID = 'high_latency_by_geo'; diff --git a/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts b/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts index f9dde011b25f..17b2d143eeab 100644 --- a/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts +++ b/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts @@ -232,6 +232,7 @@ export const PingType = t.intersection([ full: t.string, port: t.number, scheme: t.string, + path: t.string, }), service: t.partial({ name: t.string, @@ -280,7 +281,6 @@ export const makePing = (f: { export const PingsResponseType = t.type({ total: t.number, - locations: t.array(t.string), pings: t.array(PingType), }); @@ -293,7 +293,7 @@ export const GetPingsParamsType = t.intersection([ t.partial({ index: t.number, size: t.number, - location: t.string, + locations: t.string, monitorId: t.string, sort: t.string, status: t.string, diff --git a/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/location_link.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/location_link.test.tsx.snap index 877f1fc6d7c8..ba7a1c72a959 100644 --- a/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/location_link.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/location_link.test.tsx.snap @@ -6,11 +6,6 @@ exports[`LocationLink component renders a help link when location not present 1` target="_blank" > Add location -   - `; diff --git a/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap index cf00a8da3534..1a18cf5651be 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__tests__/__snapshots__/donut_chart.test.tsx.snap @@ -491,7 +491,7 @@ exports[`DonutChart component renders a donut chart 1`] = ` - Down + Up - Up + Down - Down + Up - Up + Down `; diff --git a/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx b/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx index cbbffdff745f..f3b50895fff6 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { i18n } from '@kbn/i18n'; import { EuiSpacer } from '@elastic/eui'; import React, { useContext } from 'react'; import styled from 'styled-components'; import { DonutChartLegendRow } from './donut_chart_legend_row'; import { UptimeThemeContext } from '../../../contexts'; +import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../translations'; const LegendContainer = styled.div` max-width: 150px; @@ -34,18 +34,14 @@ export const DonutChartLegend = ({ down, up }: Props) => { diff --git a/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx b/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx index 9e0b3a394ba7..46971b2b6d34 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx @@ -28,6 +28,7 @@ import { HistogramResult } from '../../../../common/runtime_types'; import { useUrlParams } from '../../../hooks'; import { ChartEmptyState } from './chart_empty_state'; import { getDateRangeFromChartElement } from './utils'; +import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../translations'; export interface PingHistogramComponentProps { /** @@ -84,14 +85,6 @@ export const PingHistogramComponent: React.FC = ({ } else { const { histogram, minInterval } = data; - const downSpecId = i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', { - defaultMessage: 'Down', - }); - - const upMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', { - defaultMessage: 'Up', - }); - const onBrushEnd: BrushEndListener = ({ x }) => { if (!x) { return; @@ -113,8 +106,8 @@ export const PingHistogramComponent: React.FC = ({ histogram.forEach(({ x, upCount, downCount }) => { barData.push( - { x, y: downCount ?? 0, type: downSpecId }, - { x, y: upCount ?? 0, type: upMonitorsId } + { x, y: downCount ?? 0, type: STATUS_DOWN_LABEL }, + { x, y: upCount ?? 0, type: STATUS_UP_LABEL } ); }); @@ -168,7 +161,7 @@ export const PingHistogramComponent: React.FC = ({ { description: 'Text that instructs the user to navigate to our docs to add a geographic location to their data', })} -   - ); }; diff --git a/x-pack/plugins/uptime/public/components/common/translations.ts b/x-pack/plugins/uptime/public/components/common/translations.ts index d2c466ddf0c8..cbab5d1d4f21 100644 --- a/x-pack/plugins/uptime/public/components/common/translations.ts +++ b/x-pack/plugins/uptime/public/components/common/translations.ts @@ -9,3 +9,25 @@ import { i18n } from '@kbn/i18n'; export const URL_LABEL = i18n.translate('xpack.uptime.monitorList.table.url.name', { defaultMessage: 'Url', }); + +export const STATUS_UP_LABEL = i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', { + defaultMessage: 'Up', +}); + +export const STATUS_DOWN_LABEL = i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', { + defaultMessage: 'Down', +}); + +export const STATUS_COMPLETE_LABEL = i18n.translate( + 'xpack.uptime.monitorList.statusColumn.completeLabel', + { + defaultMessage: 'Complete', + } +); + +export const STATUS_FAILED_LABEL = i18n.translate( + 'xpack.uptime.monitorList.statusColumn.failedLabel', + { + defaultMessage: 'Failed', + } +); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap index a23879b72996..7d7da0b7dd74 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap @@ -2,92 +2,7 @@ exports[`PingList component renders sorted list without errors 1`] = ` - -

- -

-
- - - - - - - - - - - - - + @@ -112,24 +27,16 @@ exports[`PingList component renders sorted list without errors 1`] = ` "name": "IP", }, Object { - "align": "right", + "align": "center", "field": "monitor.duration.us", "name": "Duration", "render": [Function], }, Object { - "align": "right", "field": "error.type", - "name": "Error type", - "render": [Function], - }, - Object { - "align": "right", - "field": "http.response.status_code", - "name": - Response code - , + "name": "Error", "render": [Function], + "width": "30%", }, Object { "align": "right", @@ -181,148 +88,6 @@ exports[`PingList component renders sorted list without errors 1`] = ` }, "timestamp": "2019-01-28T17:47:09.075Z", }, - Object { - "docId": "fejjio21", - "monitor": Object { - "duration": Object { - "us": 1452, - }, - "id": "auto-tcp-0X81440A68E839814D", - "ip": "127.0.0.1", - "name": "", - "status": "up", - "type": "tcp", - }, - "timestamp": "2019-01-28T17:47:06.077Z", - }, - Object { - "docId": "fewzio21", - "error": Object { - "message": "dial tcp 127.0.0.1:9200: connect: connection refused", - "type": "io", - }, - "monitor": Object { - "duration": Object { - "us": 1094, - }, - "id": "auto-tcp-0X81440A68E839814E", - "ip": "127.0.0.1", - "name": "", - "status": "down", - "type": "tcp", - }, - "timestamp": "2019-01-28T17:47:07.075Z", - }, - Object { - "docId": "fewpi321", - "error": Object { - "message": "Get http://localhost:12349/: dial tcp 127.0.0.1:12349: connect: connection refused", - "type": "io", - }, - "monitor": Object { - "duration": Object { - "us": 1597, - }, - "id": "auto-http-0X3675F89EF061209G", - "ip": "127.0.0.1", - "name": "", - "status": "down", - "type": "http", - }, - "timestamp": "2019-01-28T17:47:07.074Z", - }, - Object { - "docId": "0ewjio21", - "error": Object { - "message": "dial tcp 127.0.0.1:9200: connect: connection refused", - "type": "io", - }, - "monitor": Object { - "duration": Object { - "us": 1699, - }, - "id": "auto-tcp-0X81440A68E839814H", - "ip": "127.0.0.1", - "name": "", - "status": "down", - "type": "tcp", - }, - "timestamp": "2019-01-28T17:47:18.080Z", - }, - Object { - "docId": "3ewjio21", - "error": Object { - "message": "dial tcp 127.0.0.1:9200: connect: connection refused", - "type": "io", - }, - "monitor": Object { - "duration": Object { - "us": 5384, - }, - "id": "auto-tcp-0X81440A68E839814I", - "ip": "127.0.0.1", - "name": "", - "status": "down", - "type": "tcp", - }, - "timestamp": "2019-01-28T17:47:19.076Z", - }, - Object { - "docId": "fewjip21", - "error": Object { - "message": "Get http://localhost:12349/: dial tcp 127.0.0.1:12349: connect: connection refused", - "type": "io", - }, - "monitor": Object { - "duration": Object { - "us": 5397, - }, - "id": "auto-http-0X3675F89EF061209J", - "ip": "127.0.0.1", - "name": "", - "status": "down", - "type": "http", - }, - "timestamp": "2019-01-28T17:47:19.076Z", - }, - Object { - "docId": "fewjio21", - "http": Object { - "response": Object { - "status_code": 200, - }, - }, - "monitor": Object { - "duration": Object { - "us": 127511, - }, - "id": "auto-tcp-0X81440A68E839814C", - "ip": "172.217.7.4", - "name": "", - "status": "up", - "type": "http", - }, - "timestamp": "2019-01-28T17:47:19.077Z", - }, - Object { - "docId": "fewjik81", - "http": Object { - "response": Object { - "status_code": 200, - }, - }, - "monitor": Object { - "duration": Object { - "us": 287543, - }, - "id": "auto-http-0X131221E73F825974", - "ip": "192.30.253.112", - "name": "", - "status": "up", - "type": "http", - }, - "timestamp": "2019-01-28T17:47:19.077Z", - }, ] } loading={false} @@ -339,11 +104,11 @@ exports[`PingList component renders sorted list without errors 1`] = ` 50, 100, ], - "totalItemCount": 10, + "totalItemCount": 9231, } } responsive={true} - tableLayout="fixed" + tableLayout="auto" />
`; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_list.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_list.test.tsx index db8012dbf067..fe101c04e997 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_list.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_list.test.tsx @@ -6,17 +6,21 @@ import React from 'react'; import { shallowWithIntl } from '@kbn/test/jest'; -import { PingListComponent, rowShouldExpand, toggleDetails } from '../ping_list'; +import { PingList } from '../ping_list'; import { Ping, PingsResponse } from '../../../../../common/runtime_types'; import { ExpandedRowMap } from '../../../overview/monitor_list/types'; +import { rowShouldExpand, toggleDetails } from '../columns/expand_row'; +import * as pingListHook from '../use_pings'; +import { mockReduxHooks } from '../../../../lib/helper/test_helpers'; + +mockReduxHooks(); describe('PingList component', () => { let response: PingsResponse; - beforeEach(() => { + beforeAll(() => { response = { total: 9231, - locations: ['nyc'], pings: [ { docId: 'fewjio21', @@ -50,147 +54,19 @@ describe('PingList component', () => { type: 'tcp', }, }, - { - docId: 'fejjio21', - timestamp: '2019-01-28T17:47:06.077Z', - monitor: { - duration: { us: 1452 }, - id: 'auto-tcp-0X81440A68E839814D', - ip: '127.0.0.1', - name: '', - status: 'up', - type: 'tcp', - }, - }, - { - docId: 'fewzio21', - timestamp: '2019-01-28T17:47:07.075Z', - error: { - message: 'dial tcp 127.0.0.1:9200: connect: connection refused', - type: 'io', - }, - monitor: { - duration: { us: 1094 }, - id: 'auto-tcp-0X81440A68E839814E', - ip: '127.0.0.1', - name: '', - status: 'down', - type: 'tcp', - }, - }, - { - docId: 'fewpi321', - timestamp: '2019-01-28T17:47:07.074Z', - error: { - message: - 'Get http://localhost:12349/: dial tcp 127.0.0.1:12349: connect: connection refused', - type: 'io', - }, - monitor: { - duration: { us: 1597 }, - id: 'auto-http-0X3675F89EF061209G', - ip: '127.0.0.1', - name: '', - status: 'down', - type: 'http', - }, - }, - { - docId: '0ewjio21', - timestamp: '2019-01-28T17:47:18.080Z', - error: { - message: 'dial tcp 127.0.0.1:9200: connect: connection refused', - type: 'io', - }, - monitor: { - duration: { us: 1699 }, - id: 'auto-tcp-0X81440A68E839814H', - ip: '127.0.0.1', - name: '', - status: 'down', - type: 'tcp', - }, - }, - { - docId: '3ewjio21', - timestamp: '2019-01-28T17:47:19.076Z', - error: { - message: 'dial tcp 127.0.0.1:9200: connect: connection refused', - type: 'io', - }, - monitor: { - duration: { us: 5384 }, - id: 'auto-tcp-0X81440A68E839814I', - ip: '127.0.0.1', - name: '', - status: 'down', - type: 'tcp', - }, - }, - { - docId: 'fewjip21', - timestamp: '2019-01-28T17:47:19.076Z', - error: { - message: - 'Get http://localhost:12349/: dial tcp 127.0.0.1:12349: connect: connection refused', - type: 'io', - }, - monitor: { - duration: { us: 5397 }, - id: 'auto-http-0X3675F89EF061209J', - ip: '127.0.0.1', - name: '', - status: 'down', - type: 'http', - }, - }, - { - docId: 'fewjio21', - timestamp: '2019-01-28T17:47:19.077Z', - http: { response: { status_code: 200 } }, - monitor: { - duration: { us: 127511 }, - id: 'auto-tcp-0X81440A68E839814C', - ip: '172.217.7.4', - name: '', - status: 'up', - type: 'http', - }, - }, - { - docId: 'fewjik81', - timestamp: '2019-01-28T17:47:19.077Z', - http: { response: { status_code: 200 } }, - monitor: { - duration: { us: 287543 }, - id: 'auto-http-0X131221E73F825974', - ip: '192.30.253.112', - name: '', - status: 'up', - type: 'http', - }, - }, ], }; + + jest.spyOn(pingListHook, 'usePingsList').mockReturnValue({ + ...response, + error: undefined, + loading: false, + failedSteps: { steps: [], checkGroup: '1-f-4d-4f' }, + }); }); it('renders sorted list without errors', () => { - const component = shallowWithIntl( - - ); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/__snapshots__/ping_timestamp.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/__snapshots__/ping_timestamp.test.tsx.snap new file mode 100644 index 000000000000..64e245d1eddc --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/__snapshots__/ping_timestamp.test.tsx.snap @@ -0,0 +1,182 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Ping Timestamp component render without errors 1`] = ` +.c0 { + position: relative; +} + +.c0 figure.euiImage div.stepArrowsFullScreen { + display: none; +} + +.c0 figure.euiImage-isFullScreen div.stepArrowsFullScreen { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 div.stepArrows { + display: none; +} + +.c0:hover div.stepArrows { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c1 { + width: 120px; + text-align: center; + border: 1px solid #d3dae6; +} + +
+
+
+
+ + No image available + +
+
+
+ + +
+
+ +
+
+ +
+
+
+`; + +exports[`Ping Timestamp component shallow render without errors 1`] = ` + + + + + + + +
+ + Nov 26, 2020 10:28:56 AM + + + + + + + + + + + + + +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/ping_timestamp.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/ping_timestamp.test.tsx new file mode 100644 index 000000000000..c9302685a2aa --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/__tests__/ping_timestamp.test.tsx @@ -0,0 +1,67 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallowWithIntl, renderWithIntl } from '@kbn/test/jest'; +import { PingTimestamp } from '../ping_timestamp'; +import { mockReduxHooks } from '../../../../../lib/helper/test_helpers'; +import { Ping } from '../../../../../../common/runtime_types/ping'; +import { EuiThemeProvider } from '../../../../../../../observability/public'; + +mockReduxHooks(); + +describe('Ping Timestamp component', () => { + let response: Ping; + + beforeAll(() => { + response = { + ecs: { version: '1.6.0' }, + agent: { + ephemeral_id: '52ce1110-464f-4d74-b94c-3c051bf12589', + id: '3ebcd3c2-f5c3-499e-8d86-80f98e5f4c08', + name: 'docker-desktop', + type: 'heartbeat', + version: '7.10.0', + hostname: 'docker-desktop', + }, + monitor: { + status: 'up', + check_group: 'f58a484f-2ffb-11eb-9b35-025000000001', + duration: { us: 1528598 }, + id: 'basic addition and completion of single task', + name: 'basic addition and completion of single task', + type: 'browser', + timespan: { lt: '2020-11-26T15:29:56.820Z', gte: '2020-11-26T15:28:56.820Z' }, + }, + url: { + full: 'file:///opt/elastic-synthetics/examples/todos/app/index.html', + scheme: 'file', + domain: '', + path: '/opt/elastic-synthetics/examples/todos/app/index.html', + }, + synthetics: { type: 'heartbeat/summary' }, + summary: { up: 1, down: 0 }, + timestamp: '2020-11-26T15:28:56.896Z', + docId: '0WErBXYB0mvWTKLO-yQm', + }; + }); + + it('shallow render without errors', () => { + const component = shallowWithIntl( + + ); + expect(component).toMatchSnapshot(); + }); + + it('render without errors', () => { + const component = renderWithIntl( + + + + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/expand_row.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/expand_row.tsx new file mode 100644 index 000000000000..799a61c0d2b7 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/expand_row.tsx @@ -0,0 +1,60 @@ +/* + * 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 { i18n } from '@kbn/i18n'; +import { EuiButtonIcon } from '@elastic/eui'; +import { Ping } from '../../../../../common/runtime_types/ping'; +import { PingListExpandedRowComponent } from '../expanded_row'; + +export const toggleDetails = ( + ping: Ping, + expandedRows: Record, + setExpandedRows: (update: Record) => any +) => { + // If already expanded, collapse + if (expandedRows[ping.docId]) { + delete expandedRows[ping.docId]; + setExpandedRows({ ...expandedRows }); + return; + } + + // Otherwise expand this row + setExpandedRows({ + ...expandedRows, + [ping.docId]: , + }); +}; + +export function rowShouldExpand(item: Ping) { + const errorPresent = !!item.error; + const httpBodyPresent = item.http?.response?.body?.bytes ?? 0 > 0; + const isBrowserMonitor = item.monitor.type === 'browser'; + return errorPresent || httpBodyPresent || isBrowserMonitor; +} + +interface Props { + item: Ping; + expandedRows: Record; + setExpandedRows: (val: Record) => void; +} +export const ExpandRowColumn = ({ item, expandedRows, setExpandedRows }: Props) => { + return ( + toggleDetails(item, expandedRows, setExpandedRows)} + disabled={!rowShouldExpand(item)} + aria-label={ + expandedRows[item.docId] + ? i18n.translate('xpack.uptime.pingList.collapseRow', { + defaultMessage: 'Collapse', + }) + : i18n.translate('xpack.uptime.pingList.expandRow', { defaultMessage: 'Expand' }) + } + iconType={expandedRows[item.docId] ? 'arrowUp' : 'arrowDown'} + /> + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/failed_step.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/failed_step.tsx new file mode 100644 index 000000000000..1a9a9eb5b006 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/failed_step.tsx @@ -0,0 +1,28 @@ +/* + * 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 { Ping, SyntheticsJourneyApiResponse } from '../../../../../common/runtime_types/ping'; + +interface Props { + ping: Ping; + failedSteps?: SyntheticsJourneyApiResponse; +} + +export const FailedStep = ({ ping, failedSteps }: Props) => { + const thisFailedStep = failedSteps?.steps?.find( + (fs) => fs.monitor.check_group === ping.monitor.check_group + ); + + if (!thisFailedStep) { + return <>--; + } + return ( +
+ {thisFailedStep.synthetics?.step?.index}. {thisFailedStep.synthetics?.step?.name} +
+ ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_error.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_error.tsx new file mode 100644 index 000000000000..928f86304f22 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_error.tsx @@ -0,0 +1,32 @@ +/* + * 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 styled from 'styled-components'; +import { Ping } from '../../../../../common/runtime_types/ping'; + +const StyledSpan = styled.span` + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +`; + +interface Props { + errorType: string; + ping: Ping; +} + +export const PingErrorCol = ({ errorType, ping }: Props) => { + if (!errorType) { + return <>--; + } + return ( + + {errorType}:{ping.error?.message} + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_status.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_status.tsx new file mode 100644 index 000000000000..7232ea9d6ba0 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_status.tsx @@ -0,0 +1,67 @@ +/* + * 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, { useContext } from 'react'; +import { i18n } from '@kbn/i18n'; +import moment from 'moment'; +import { EuiBadge, EuiSpacer, EuiText } from '@elastic/eui'; +import { Ping } from '../../../../../common/runtime_types/ping'; +import { MONITOR_TYPES, STATUS } from '../../../../../common/constants'; +import { UptimeThemeContext } from '../../../../contexts'; +import { + STATUS_COMPLETE_LABEL, + STATUS_DOWN_LABEL, + STATUS_FAILED_LABEL, + STATUS_UP_LABEL, +} from '../../../common/translations'; + +interface Props { + pingStatus: string; + item: Ping; +} + +const getPingStatusLabel = (status: string, ping: Ping) => { + if (ping.monitor.type === MONITOR_TYPES.BROWSER) { + return status === 'up' ? STATUS_COMPLETE_LABEL : STATUS_FAILED_LABEL; + } + return status === 'up' ? STATUS_UP_LABEL : STATUS_DOWN_LABEL; +}; + +export const PingStatusColumn = ({ pingStatus, item }: Props) => { + const { + colors: { dangerBehindText }, + } = useContext(UptimeThemeContext); + + const timeStamp = moment(item.timestamp); + + let checkedTime = ''; + + if (moment().diff(timeStamp, 'd') > 1) { + checkedTime = timeStamp.format('ll LTS'); + } else { + checkedTime = timeStamp.format('LTS'); + } + + return ( +
+ + {getPingStatusLabel(pingStatus, item)} + + + + {i18n.translate('xpack.uptime.pingList.recencyMessage', { + values: { fromNow: checkedTime }, + defaultMessage: 'Checked {fromNow}', + description: + 'A string used to inform our users how long ago Heartbeat pinged the selected host.', + })} + +
+ ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.tsx new file mode 100644 index 000000000000..366110c0e919 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.tsx @@ -0,0 +1,213 @@ +/* + * 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, { useContext, useEffect, useState } from 'react'; +import { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiImage, + EuiLink, + EuiSpacer, + EuiText, +} from '@elastic/eui'; +import useIntersection from 'react-use/lib/useIntersection'; +import moment from 'moment'; +import styled from 'styled-components'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { Ping } from '../../../../../common/runtime_types/ping'; +import { getShortTimeStamp } from '../../../overview/monitor_list/columns/monitor_status_column'; +import { euiStyled, useFetcher } from '../../../../../../observability/public'; +import { getJourneyScreenshot } from '../../../../state/api/journey'; +import { UptimeSettingsContext } from '../../../../contexts'; + +const StepImage = styled(EuiImage)` + &&& { + display: flex; + figcaption { + white-space: nowrap; + align-self: center; + margin-left: 8px; + margin-top: 8px; + } + } +`; + +const StepDiv = styled.div` + figure.euiImage { + div.stepArrowsFullScreen { + display: none; + } + } + + figure.euiImage-isFullScreen { + div.stepArrowsFullScreen { + display: flex; + } + } + position: relative; + div.stepArrows { + display: none; + } + :hover { + div.stepArrows { + display: flex; + } + } +`; + +interface Props { + timestamp: string; + ping: Ping; +} + +export const PingTimestamp = ({ timestamp, ping }: Props) => { + const [stepNo, setStepNo] = useState(1); + + const [stepImages, setStepImages] = useState([]); + + const intersectionRef = React.useRef(null); + + const { basePath } = useContext(UptimeSettingsContext); + + const imgPath = basePath + `/api/uptime/journey/screenshot/${ping.monitor.check_group}/${stepNo}`; + + const intersection = useIntersection(intersectionRef, { + root: null, + rootMargin: '0px', + threshold: 1, + }); + + const { data } = useFetcher(() => { + if (intersection && intersection.intersectionRatio === 1 && !stepImages[stepNo - 1]) + return getJourneyScreenshot(imgPath); + }, [intersection?.intersectionRatio, stepNo]); + + useEffect(() => { + if (data) { + setStepImages((prevState) => [...prevState, data?.src]); + } + }, [data]); + + const imgSrc = stepImages[stepNo] || data?.src; + + const ImageCaption = ( + <> +
+ {imgSrc && ( + + + { + setStepNo(stepNo - 1); + }} + iconType="arrowLeft" + aria-label="Next" + /> + + + + Step:{stepNo} {data?.stepName} + + + + { + setStepNo(stepNo + 1); + }} + iconType="arrowRight" + aria-label="Next" + /> + + + )} +
+ + {getShortTimeStamp(moment(timestamp))} + + + + ); + + return ( + + {imgSrc ? ( + + ) : ( + + + + + {ImageCaption} + + )} + + + { + setStepNo(stepNo - 1); + }} + iconType="arrowLeft" + aria-label="Next" + /> + + + { + setStepNo(stepNo + 1); + }} + iconType="arrowRight" + aria-label="Next" + /> + + + + ); +}; + +const BorderedText = euiStyled(EuiText)` + width: 120px; + text-align: center; + border: 1px solid ${(props) => props.theme.eui.euiColorLightShade}; +`; + +export const NoImageAvailable = () => { + return ( + + + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx new file mode 100644 index 000000000000..da3200753bac --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx @@ -0,0 +1,25 @@ +/* + * 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 styled from 'styled-components'; + +import { EuiBadge } from '@elastic/eui'; + +const SpanWithMargin = styled.span` + margin-right: 16px; +`; + +interface Props { + statusCode: string; +} +export const ResponseCodeColumn = ({ statusCode }: Props) => { + return ( + + {statusCode} + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/index.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/index.tsx index da82d025f478..30d3783dd683 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/index.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/index.tsx @@ -4,5 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PingListComponent } from './ping_list'; export { PingList } from './ping_list'; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/location_name.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/location_name.tsx index e9c5b243f7a0..a6a6773ab225 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/location_name.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/location_name.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiIcon, EuiLink, EuiText } from '@elastic/eui'; +import { EuiLink, EuiText } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; @@ -24,7 +24,5 @@ export const LocationName = ({ location }: LocationNameProps) => description: 'Text that instructs the user to navigate to our docs to add a geographic location to their data', })} -   - ); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx index 590b2f787bac..75f261f1e42f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx @@ -4,192 +4,56 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - EuiBadge, - EuiBasicTable, - EuiFlexGroup, - EuiFlexItem, - EuiHealth, - EuiPanel, - EuiSelect, - EuiSpacer, - EuiText, - EuiTitle, - EuiFormRow, - EuiButtonIcon, -} from '@elastic/eui'; +import { EuiBasicTable, EuiPanel, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; -import moment from 'moment'; -import React, { useCallback, useContext, useState, useEffect } from 'react'; +import React, { useCallback, useState, useEffect } from 'react'; import styled from 'styled-components'; -import { useDispatch, useSelector } from 'react-redux'; -import { Ping, GetPingsParams, DateRange } from '../../../../common/runtime_types'; +import { useDispatch } from 'react-redux'; +import { Ping } from '../../../../common/runtime_types'; import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper'; import { LocationName } from './location_name'; import { Pagination } from '../../overview/monitor_list'; -import { PingListExpandedRowComponent } from './expanded_row'; -// import { PingListProps } from './ping_list_container'; import { pruneJourneyState } from '../../../state/actions/journey'; -import { selectPingList } from '../../../state/selectors'; -import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts'; -import { getPings as getPingsAction } from '../../../state/actions'; +import { PingStatusColumn } from './columns/ping_status'; +import * as I18LABELS from './translations'; +import { MONITOR_TYPES } from '../../../../common/constants'; +import { ResponseCodeColumn } from './columns/response_code'; +import { ERROR_LABEL, LOCATION_LABEL, RES_CODE_LABEL, TIMESTAMP_LABEL } from './translations'; +import { ExpandRowColumn } from './columns/expand_row'; +import { PingErrorCol } from './columns/ping_error'; +import { PingTimestamp } from './columns/ping_timestamp'; +import { FailedStep } from './columns/failed_step'; +import { usePingsList } from './use_pings'; +import { PingListHeader } from './ping_list_header'; -export interface PingListProps { - monitorId: string; -} +export const SpanWithMargin = styled.span` + margin-right: 16px; +`; -export const PingList = (props: PingListProps) => { - const { - error, - loading, - pingList: { locations, pings, total }, - } = useSelector(selectPingList); +const DEFAULT_PAGE_SIZE = 10; - const { lastRefresh } = useContext(UptimeRefreshContext); - - const { dateRangeStart: drs, dateRangeEnd: dre } = useContext(UptimeSettingsContext); +export const PingList = () => { + const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE); + const [pageIndex, setPageIndex] = useState(0); const dispatch = useDispatch(); - const getPingsCallback = useCallback( - (params: GetPingsParams) => dispatch(getPingsAction(params)), - [dispatch] - ); + const pruneJourneysCallback = useCallback( (checkGroups: string[]) => dispatch(pruneJourneyState(checkGroups)), [dispatch] ); - return ( - - ); -}; - -export const AllLocationOption = { - 'data-test-subj': 'xpack.uptime.pingList.locationOptions.all', - text: 'All', - value: '', -}; - -export const toggleDetails = ( - ping: Ping, - expandedRows: Record, - setExpandedRows: (update: Record) => any -) => { - // If already expanded, collapse - if (expandedRows[ping.docId]) { - delete expandedRows[ping.docId]; - setExpandedRows({ ...expandedRows }); - return; - } - - // Otherwise expand this row - setExpandedRows({ - ...expandedRows, - [ping.docId]: , + const { error, loading, pings, total, failedSteps } = usePingsList({ + pageSize, + pageIndex, }); -}; - -const SpanWithMargin = styled.span` - margin-right: 16px; -`; - -interface Props extends PingListProps { - dateRange: DateRange; - error?: Error; - getPings: (props: GetPingsParams) => void; - pruneJourneysCallback: (checkGroups: string[]) => void; - lastRefresh: number; - loading: boolean; - locations: string[]; - pings: Ping[]; - total: number; -} - -const DEFAULT_PAGE_SIZE = 10; - -const statusOptions = [ - { - 'data-test-subj': 'xpack.uptime.pingList.statusOptions.all', - text: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', { - defaultMessage: 'All', - }), - value: '', - }, - { - 'data-test-subj': 'xpack.uptime.pingList.statusOptions.up', - text: i18n.translate('xpack.uptime.pingList.statusOptions.upStatusOptionLabel', { - defaultMessage: 'Up', - }), - value: 'up', - }, - { - 'data-test-subj': 'xpack.uptime.pingList.statusOptions.down', - text: i18n.translate('xpack.uptime.pingList.statusOptions.downStatusOptionLabel', { - defaultMessage: 'Down', - }), - value: 'down', - }, -]; - -export function rowShouldExpand(item: Ping) { - const errorPresent = !!item.error; - const httpBodyPresent = item.http?.response?.body?.bytes ?? 0 > 0; - const isBrowserMonitor = item.monitor.type === 'browser'; - return errorPresent || httpBodyPresent || isBrowserMonitor; -} - -export const PingListComponent = (props: Props) => { - const [selectedLocation, setSelectedLocation] = useState(''); - const [status, setStatus] = useState(''); - const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE); - const [pageIndex, setPageIndex] = useState(0); - const { - dateRange: { from, to }, - error, - getPings, - pruneJourneysCallback, - lastRefresh, - loading, - locations, - monitorId, - pings, - total, - } = props; - - useEffect(() => { - getPings({ - dateRange: { - from, - to, - }, - location: selectedLocation, - monitorId, - index: pageIndex, - size: pageSize, - status: status !== 'all' ? status : '', - }); - }, [from, to, getPings, monitorId, lastRefresh, selectedLocation, pageIndex, pageSize, status]); const [expandedRows, setExpandedRows] = useState>({}); const expandedIdsToRemove = JSON.stringify( Object.keys(expandedRows).filter((e) => !pings.some(({ docId }) => docId === e)) ); + useEffect(() => { const parsed = JSON.parse(expandedIdsToRemove); if (parsed.length) { @@ -203,73 +67,62 @@ export const PingListComponent = (props: Props) => { const expandedCheckGroups = pings .filter((p: Ping) => Object.keys(expandedRows).some((f) => p.docId === f)) .map(({ monitor: { check_group: cg } }) => cg); + const expandedCheckGroupsStr = JSON.stringify(expandedCheckGroups); + useEffect(() => { pruneJourneysCallback(JSON.parse(expandedCheckGroupsStr)); }, [pruneJourneysCallback, expandedCheckGroupsStr]); - const locationOptions = !locations - ? [AllLocationOption] - : [AllLocationOption].concat( - locations.map((name) => ({ - text: name, - 'data-test-subj': `xpack.uptime.pingList.locationOptions.${name}`, - value: name, - })) - ); - const hasStatus = pings.reduce( (hasHttpStatus: boolean, currentPing) => hasHttpStatus || !!currentPing.http?.response?.status_code, false ); + const monitorType = pings?.[0]?.monitor.type; + const columns: any[] = [ { field: 'monitor.status', - name: i18n.translate('xpack.uptime.pingList.statusColumnLabel', { - defaultMessage: 'Status', - }), + name: I18LABELS.STATUS_LABEL, render: (pingStatus: string, item: Ping) => ( -
- - {pingStatus === 'up' - ? i18n.translate('xpack.uptime.pingList.statusColumnHealthUpLabel', { - defaultMessage: 'Up', - }) - : i18n.translate('xpack.uptime.pingList.statusColumnHealthDownLabel', { - defaultMessage: 'Down', - })} - - - {i18n.translate('xpack.uptime.pingList.recencyMessage', { - values: { fromNow: moment(item.timestamp).fromNow() }, - defaultMessage: 'Checked {fromNow}', - description: - 'A string used to inform our users how long ago Heartbeat pinged the selected host.', - })} - -
+ ), }, { align: 'left', field: 'observer.geo.name', - name: i18n.translate('xpack.uptime.pingList.locationNameColumnLabel', { - defaultMessage: 'Location', - }), + name: LOCATION_LABEL, render: (location: string) => , }, + ...(monitorType === MONITOR_TYPES.BROWSER + ? [ + { + align: 'left', + field: 'timestamp', + name: TIMESTAMP_LABEL, + render: (timestamp: string, item: Ping) => ( + + ), + }, + ] + : []), + // ip column not needed for browser type + ...(monitorType !== MONITOR_TYPES.BROWSER + ? [ + { + align: 'right', + dataType: 'number', + field: 'monitor.ip', + name: i18n.translate('xpack.uptime.pingList.ipAddressColumnLabel', { + defaultMessage: 'IP', + }), + }, + ] + : []), { - align: 'right', - dataType: 'number', - field: 'monitor.ip', - name: i18n.translate('xpack.uptime.pingList.ipAddressColumnLabel', { - defaultMessage: 'IP', - }), - }, - { - align: 'right', + align: 'center', field: 'monitor.duration.us', name: i18n.translate('xpack.uptime.pingList.durationMsColumnLabel', { defaultMessage: 'Duration', @@ -281,31 +134,33 @@ export const PingListComponent = (props: Props) => { }), }, { - align: hasStatus ? 'right' : 'center', field: 'error.type', - name: i18n.translate('xpack.uptime.pingList.errorTypeColumnLabel', { - defaultMessage: 'Error type', - }), - render: (errorType: string) => errorType ?? '-', + name: ERROR_LABEL, + width: '30%', + render: (errorType: string, item: Ping) => , }, + ...(monitorType === MONITOR_TYPES.BROWSER + ? [ + { + field: 'monitor.status', + align: 'left', + name: i18n.translate('xpack.uptime.pingList.columns.failedStep', { + defaultMessage: 'Failed step', + }), + render: (timestamp: string, item: Ping) => ( + + ), + }, + ] + : []), // Only add this column is there is any status present in list ...(hasStatus ? [ { field: 'http.response.status_code', align: 'right', - name: ( - - {i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { - defaultMessage: 'Response code', - })} - - ), - render: (statusCode: string) => ( - - {statusCode} - - ), + name: {RES_CODE_LABEL}, + render: (statusCode: string) => , }, ] : []), @@ -313,23 +168,13 @@ export const PingListComponent = (props: Props) => { align: 'right', width: '24px', isExpander: true, - render: (item: Ping) => { - return ( - toggleDetails(item, expandedRows, setExpandedRows)} - disabled={!rowShouldExpand(item)} - aria-label={ - expandedRows[item.docId] - ? i18n.translate('xpack.uptime.pingList.collapseRow', { - defaultMessage: 'Collapse', - }) - : i18n.translate('xpack.uptime.pingList.expandRow', { defaultMessage: 'Expand' }) - } - iconType={expandedRows[item.docId] ? 'arrowUp' : 'arrowDown'} - /> - ); - }, + render: (item: Ping) => ( + + ), }, ]; @@ -338,63 +183,12 @@ export const PingListComponent = (props: Props) => { pageIndex, pageSize, pageSizeOptions: [10, 25, 50, 100], - /** - * we're not currently supporting pagination in this component - * so the first page is the only page - */ totalItemCount: total, }; return ( - -

- -

-
- - - - - { - setStatus(selected.target.value); - }} - /> - - - - - { - setSelectedLocation(selected.target.value); - }} - /> - - - + { setPageSize(criteria.page!.size); setPageIndex(criteria.page!.index); }} + tableLayout={'auto'} />
); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_header.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_header.tsx new file mode 100644 index 000000000000..2912191c6eac --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_header.tsx @@ -0,0 +1,34 @@ +/* + * 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 { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; +import { StatusFilter } from '../../overview/monitor_list/status_filter'; +import { FilterGroup } from '../../overview/filter_group'; + +export const PingListHeader = () => { + return ( + + + +

+ +

+
+
+ + + + + + +
+ ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/translations.ts b/x-pack/plugins/uptime/public/components/monitor/ping_list/translations.ts new file mode 100644 index 000000000000..575d1f0d2590 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/translations.ts @@ -0,0 +1,29 @@ +/* + * 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'; + +export const STATUS_LABEL = i18n.translate('xpack.uptime.pingList.statusColumnLabel', { + defaultMessage: 'Status', +}); + +export const RES_CODE_LABEL = i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', { + defaultMessage: 'Response code', +}); +export const ERROR_TYPE_LABEL = i18n.translate('xpack.uptime.pingList.errorTypeColumnLabel', { + defaultMessage: 'Error type', +}); +export const ERROR_LABEL = i18n.translate('xpack.uptime.pingList.errorColumnLabel', { + defaultMessage: 'Error', +}); + +export const LOCATION_LABEL = i18n.translate('xpack.uptime.pingList.locationNameColumnLabel', { + defaultMessage: 'Location', +}); + +export const TIMESTAMP_LABEL = i18n.translate('xpack.uptime.pingList.timestampColumnLabel', { + defaultMessage: 'Timestamp', +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/use_pings.ts b/x-pack/plugins/uptime/public/components/monitor/ping_list/use_pings.ts new file mode 100644 index 000000000000..0f970b83be4c --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/use_pings.ts @@ -0,0 +1,79 @@ +/* + * 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 { useDispatch, useSelector } from 'react-redux'; +import { useCallback, useContext, useEffect } from 'react'; +import { selectPingList } from '../../../state/selectors'; +import { GetPingsParams, Ping } from '../../../../common/runtime_types/ping'; +import { getPings as getPingsAction } from '../../../state/actions'; +import { useGetUrlParams, useMonitorId } from '../../../hooks'; +import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts'; +import { useFetcher } from '../../../../../observability/public'; +import { fetchJourneysFailedSteps } from '../../../state/api/journey'; +import { useSelectedFilters } from '../../../hooks/use_selected_filters'; +import { MONITOR_TYPES } from '../../../../common/constants'; + +interface Props { + pageSize: number; + pageIndex: number; +} + +export const usePingsList = ({ pageSize, pageIndex }: Props) => { + const { + error, + loading, + pingList: { pings, total }, + } = useSelector(selectPingList); + + const { lastRefresh } = useContext(UptimeRefreshContext); + + const { dateRangeStart: from, dateRangeEnd: to } = useContext(UptimeSettingsContext); + + const { statusFilter } = useGetUrlParams(); + + const { selectedLocations } = useSelectedFilters(); + + const dispatch = useDispatch(); + + const monitorId = useMonitorId(); + + const getPings = useCallback((params: GetPingsParams) => dispatch(getPingsAction(params)), [ + dispatch, + ]); + + useEffect(() => { + getPings({ + monitorId, + dateRange: { + from, + to, + }, + locations: JSON.stringify(selectedLocations), + index: pageIndex, + size: pageSize, + status: statusFilter !== 'all' ? statusFilter : '', + }); + }, [ + from, + to, + getPings, + monitorId, + lastRefresh, + pageIndex, + pageSize, + statusFilter, + selectedLocations, + ]); + + const { data } = useFetcher(() => { + if (pings?.length > 0 && pings.find((ping) => ping.monitor.type === MONITOR_TYPES.BROWSER)) + return fetchJourneysFailedSteps({ + checkGroups: pings.map((ping: Ping) => ping.monitor.check_group!), + }); + }, [pings]); + + return { error, loading, pings, total, failedSteps: data }; +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap index 7cc96a42411d..d722ed34388e 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap @@ -13,17 +13,17 @@ Array [ class="euiSpacer euiSpacer--l" />, .c0.c0.c0 { - width: 35%; + width: 30%; + max-width: 250px; } .c1.c1.c1 { - width: 65%; + width: 70%; overflow-wrap: anywhere; }
- - , .c0.c0.c0 { - width: 65%; + width: 70%; overflow-wrap: anywhere; } @@ -57,7 +58,8 @@ Array [ exports[`SSL Certificate component renders null if invalid date 1`] = ` Array [ .c0.c0.c0 { - width: 35%; + width: 30%; + max-width: 250px; }
, .c0.c0.c0 { - width: 65%; + width: 70%; overflow-wrap: anywhere; } diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap index 316188eebf65..f76f37a6e7fa 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap @@ -105,7 +105,7 @@ Array [ > - -

- au-heartbeat -

-
+ au-heartbeat
@@ -182,7 +176,7 @@ Array [ > - -

- nyc-heartbeat -

-
+ nyc-heartbeat
@@ -259,7 +247,7 @@ Array [ > - -

- spa-heartbeat -

-
+ spa-heartbeat
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap index 84290ec02a64..6dde46fe1895 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap @@ -11,21 +11,21 @@ exports[`LocationStatusTags component renders properly against props 1`] = ` "color": "#d3dae6", "label": "Berlin", "status": "up", - "timestamp": "1 Mon ago", + "timestamp": "Sept 4, 2020 9:31:38 AM", }, Object { "availability": 100, "color": "#bd271e", "label": "Berlin", "status": "down", - "timestamp": "1 Mon ago", + "timestamp": "Sept 4, 2020 9:31:38 AM", }, Object { "availability": 100, "color": "#d3dae6", "label": "Islamabad", "status": "up", - "timestamp": "1 Mon ago", + "timestamp": "Sept 4, 2020 9:31:38 AM", }, ] } @@ -142,7 +142,7 @@ exports[`LocationStatusTags component renders when all locations are down 1`] = > - -

- Berlin -

-
+ Berlin
@@ -195,7 +189,7 @@ exports[`LocationStatusTags component renders when all locations are down 1`] = - 5m ago + Sept 4, 2020 9:31:38 AM
@@ -219,7 +213,7 @@ exports[`LocationStatusTags component renders when all locations are down 1`] = > - -

- Islamabad -

-
+ Islamabad
@@ -272,7 +260,7 @@ exports[`LocationStatusTags component renders when all locations are down 1`] = - 5s ago + Sept 4, 2020 9:31:38 AM
@@ -392,7 +380,7 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = ` > - -

- Berlin -

-
+ Berlin
@@ -445,7 +427,7 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = ` - 5d ago + Sept 4, 2020 9:31:38 AM
@@ -469,7 +451,7 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = ` > - -

- Islamabad -

-
+ Islamabad
@@ -522,7 +498,7 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = ` - 5s ago + Sept 4, 2020 9:31:38 AM @@ -642,7 +618,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = > - -

- Berlin -

-
+ Berlin
@@ -695,7 +665,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = - 5m ago + Sept 4, 2020 9:31:38 AM @@ -719,7 +689,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = > - -

- Islamabad -

-
+ Islamabad
@@ -772,7 +736,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = - 5s ago + Sept 4, 2020 9:31:38 AM @@ -796,7 +760,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = > - -

- New York -

-
+ New York
@@ -849,7 +807,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = - 1 Mon ago + Sept 4, 2020 9:31:38 AM @@ -873,7 +831,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = > - -

- Paris -

-
+ Paris
@@ -926,7 +878,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = - 5 Yr ago + Sept 4, 2020 9:31:38 AM @@ -950,7 +902,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = > - -

- Sydney -

-
+ Sydney
@@ -1003,7 +949,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] = - 5 Yr ago + Sept 4, 2020 9:31:38 AM diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap index 28f1f433648c..2e55e7024f44 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap @@ -18,7 +18,7 @@ exports[`TagLabel component renders correctly against snapshot 1`] = ` > - -

- US-East -

-
+ US-East
@@ -42,15 +36,9 @@ exports[`TagLabel component renders correctly against snapshot 1`] = ` exports[`TagLabel component shallow render correctly against snapshot 1`] = ` - -

- US-East -

-
+ US-East
`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx index 72919ff3c41b..265b7f7459e2 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx @@ -5,10 +5,12 @@ */ import React from 'react'; -import moment from 'moment'; import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; import { MonitorLocation } from '../../../../../../common/runtime_types/monitor'; import { LocationStatusTags } from '../index'; +import { mockMoment } from '../../../../../lib/helper/test_helpers'; + +mockMoment(); jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { return { @@ -24,21 +26,21 @@ describe('LocationStatusTags component', () => { { summary: { up: 4, down: 0 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'w').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'w').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'w').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, @@ -52,56 +54,56 @@ describe('LocationStatusTags component', () => { { summary: { up: 0, down: 1 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 's').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'm').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'h').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'd').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'New York', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'w').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Toronto', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'M').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Sydney', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'y').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Paris', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'y').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, @@ -115,14 +117,14 @@ describe('LocationStatusTags component', () => { { summary: { up: 4, down: 0 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 's').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'd').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, @@ -136,14 +138,14 @@ describe('LocationStatusTags component', () => { { summary: { up: 0, down: 2 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 's').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, - timestamp: moment().subtract('5', 'm').toISOString(), + timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, down_history: 0, }, diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx index b48252d4208d..c02251e0a8ca 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx @@ -11,6 +11,7 @@ import { UptimeThemeContext } from '../../../../contexts'; import { MonitorLocation } from '../../../../../common/runtime_types'; import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../common/constants'; import { AvailabilityReporting } from '../index'; +import { getShortTimeStamp } from '../../../overview/monitor_list/columns/monitor_status_column'; // Set height so that it remains within panel, enough height to display 7 locations tags const TagContainer = styled.div` @@ -46,7 +47,7 @@ export const LocationStatusTags = ({ locations }: Props) => { locations.forEach((item: MonitorLocation) => { allLocations.push({ label: item.geo.name!, - timestamp: moment(new Date(item.timestamp).valueOf()).fromNow(), + timestamp: getShortTimeStamp(moment(new Date(item.timestamp).valueOf())), color: item.summary.down === 0 ? gray : danger, availability: (item.up_history / (item.up_history + item.down_history)) * 100, status: item.summary.down === 0 ? 'up' : 'down', diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx index ec5718415595..67b025555afb 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx @@ -6,8 +6,9 @@ import React from 'react'; import styled from 'styled-components'; -import { EuiBadge, EuiTextColor } from '@elastic/eui'; +import { EuiBadge } from '@elastic/eui'; import { StatusTag } from './location_status_tags'; +import { STATUS } from '../../../../../common/constants'; const BadgeItem = styled.div` white-space: nowrap; @@ -21,11 +22,7 @@ const BadgeItem = styled.div` export const TagLabel: React.FC = ({ color, label, status }) => { return ( - - -

{label}

-
-
+ {label}
); }; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx index 029ca98ae6fc..704a79462efc 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx @@ -8,7 +8,6 @@ import React from 'react'; import styled from 'styled-components'; import { EuiLink, - EuiIcon, EuiSpacer, EuiDescriptionList, EuiDescriptionListTitle, @@ -27,13 +26,14 @@ import { MonitorRedirects } from './monitor_redirects'; export const MonListTitle = styled(EuiDescriptionListTitle)` &&& { - width: 35%; + width: 30%; + max-width: 250px; } `; export const MonListDescription = styled(EuiDescriptionListDescription)` &&& { - width: 65%; + width: 70%; overflow-wrap: anywhere; } `; @@ -53,12 +53,7 @@ export const MonitorStatusBar: React.FC = () => { - + {OverallAvailability} { {URL_LABEL} - - {full} + + {full} {MonitorIDLabel} diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts index 53c4a9eaeae4..618a88f2bf67 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts @@ -13,17 +13,6 @@ export const healthStatusMessageAriaLabel = i18n.translate( } ); -export const upLabel = i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel', { - defaultMessage: 'Up', -}); - -export const downLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel', - { - defaultMessage: 'Down', - } -); - export const typeLabel = i18n.translate('xpack.uptime.monitorStatusBar.type.label', { defaultMessage: 'Type', }); diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx index 8a14dfd2ef4b..45268977a543 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx @@ -7,10 +7,13 @@ import React, { useState } from 'react'; import { EuiFilterGroup } from '@elastic/eui'; import styled from 'styled-components'; +import { useRouteMatch } from 'react-router-dom'; import { FilterPopoverProps, FilterPopover } from './filter_popover'; import { OverviewFilters } from '../../../../common/runtime_types/overview_filters'; import { filterLabels } from './translations'; import { useFilterUpdate } from '../../../hooks/use_filter_update'; +import { MONITOR_ROUTE } from '../../../../common/constants'; +import { useSelectedFilters } from '../../../hooks/use_selected_filters'; interface PresentationalComponentProps { loading: boolean; @@ -32,15 +35,16 @@ export const FilterGroupComponent: React.FC = ({ values: string[]; }>({ fieldName: '', values: [] }); - const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useFilterUpdate( - updatedFieldValues.fieldName, - updatedFieldValues.values - ); + useFilterUpdate(updatedFieldValues.fieldName, updatedFieldValues.values); + + const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useSelectedFilters(); const onFilterFieldChange = (fieldName: string, values: string[]) => { setUpdatedFieldValues({ fieldName, values }); }; + const isMonitorPage = useRouteMatch(MONITOR_ROUTE); + const filterPopoverProps: FilterPopoverProps[] = [ { loading, @@ -51,36 +55,41 @@ export const FilterGroupComponent: React.FC = ({ selectedItems: selectedLocations, title: filterLabels.LOCATION, }, - { - loading, - onFilterFieldChange, - fieldName: 'url.port', - id: 'port', - disabled: ports.length === 0, - items: ports.map((p: number) => p.toString()), - selectedItems: selectedPorts, - title: filterLabels.PORT, - }, - { - loading, - onFilterFieldChange, - fieldName: 'monitor.type', - id: 'scheme', - disabled: schemes.length === 0, - items: schemes, - selectedItems: selectedSchemes, - title: filterLabels.SCHEME, - }, - { - loading, - onFilterFieldChange, - fieldName: 'tags', - id: 'tags', - disabled: tags.length === 0, - items: tags, - selectedItems: selectedTags, - title: filterLabels.TAGS, - }, + // on monitor page we only display location filter in ping list + ...(!isMonitorPage + ? [ + { + loading, + onFilterFieldChange, + fieldName: 'url.port', + id: 'port', + disabled: ports.length === 0, + items: ports.map((p: number) => p.toString()), + selectedItems: selectedPorts, + title: filterLabels.PORT, + }, + { + loading, + onFilterFieldChange, + fieldName: 'monitor.type', + id: 'scheme', + disabled: schemes.length === 0, + items: schemes, + selectedItems: selectedSchemes, + title: filterLabels.SCHEME, + }, + { + loading, + onFilterFieldChange, + fieldName: 'tags', + id: 'tags', + disabled: tags.length === 0, + items: tags, + selectedItems: selectedTags, + title: filterLabels.TAGS, + }, + ] + : []), ]; return ( diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx index 5b76e6c5e371..c758f7d2c107 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx @@ -18,9 +18,9 @@ import { SHORT_TS_LOCALE, } from '../../../../../common/constants'; -import * as labels from '../translations'; import { UptimeThemeContext } from '../../../../contexts'; import { euiStyled } from '../../../../../../observability/public'; +import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../../../common/translations'; interface MonitorListStatusColumnProps { status: string; @@ -37,9 +37,9 @@ const StatusColumnFlexG = styled(EuiFlexGroup)` export const getHealthMessage = (status: string): string | null => { switch (status) { case STATUS.UP: - return labels.UP; + return STATUS_UP_LABEL; case STATUS.DOWN: - return labels.DOWN; + return STATUS_DOWN_LABEL; default: return null; } diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/most_recent_error.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/most_recent_error.test.tsx.snap index 0392e0dc879e..ec980595abbf 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/most_recent_error.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/most_recent_error.test.tsx.snap @@ -18,7 +18,7 @@ exports[`MostRecentError component renders properly with mock data 1`] = ` > Get https://expired.badssl.com: x509: certificate has expired or is not yet valid diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/most_recent_error.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/most_recent_error.tsx index d611278d9103..7cf24d447316 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/most_recent_error.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/most_recent_error.tsx @@ -35,7 +35,7 @@ interface MostRecentErrorProps { export const MostRecentError = ({ error, monitorId, timestamp }: MostRecentErrorProps) => { const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); - params.selectedPingStatus = 'down'; + params.statusFilter = 'down'; const linkParameters = stringifyUrlParams(params, true); const timestampStr = timestamp ? moment(new Date(timestamp).valueOf()).fromNow() : ''; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx index 266735be7749..995ca13da0b5 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx @@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n'; import { EuiFilterGroup } from '@elastic/eui'; import { FilterStatusButton } from './filter_status_button'; import { useGetUrlParams } from '../../../hooks'; +import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../../common/translations'; export const StatusFilter: React.FC = () => { const { statusFilter } = useGetUrlParams(); @@ -28,18 +29,14 @@ export const StatusFilter: React.FC = () => { isActive={statusFilter === ''} />
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo","focusConnectorField":false} + {"pagination":"foo","absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","statusFilter":"","focusConnectorField":false}