diff --git a/x-pack/solutions/observability/plugins/uptime/kibana.jsonc b/x-pack/solutions/observability/plugins/uptime/kibana.jsonc index c4c8b8b9d76de..25fd311a81f81 100644 --- a/x-pack/solutions/observability/plugins/uptime/kibana.jsonc +++ b/x-pack/solutions/observability/plugins/uptime/kibana.jsonc @@ -38,7 +38,8 @@ "triggersActionsUi", "usageCollection", "unifiedSearch", - "bfetch" + "bfetch", + "charts" ], "optionalPlugins": [ "cloud", @@ -57,4 +58,4 @@ "observability" ] } -} \ No newline at end of file +} diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx index 3ce07ac9803f7..dc775e2295b9a 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/app/uptime_app.tsx @@ -22,7 +22,6 @@ import { UMUpdateBadge } from '../lib/lib'; import { UptimeRefreshContextProvider, UptimeSettingsContextProvider, - UptimeThemeContextProvider, UptimeStartupPluginsContextProvider, } from '../contexts'; import { CommonlyUsedRange } from '../components/common/uptime_date_picker'; @@ -34,17 +33,6 @@ import { kibanaService } from '../state/kibana_service'; import { ActionMenu } from '../components/common/header/action_menu'; import { UptimeDataViewContextProvider } from '../contexts/uptime_data_view_context'; -export interface UptimeAppColors { - danger: string; - dangerBehindText: string; - success: string; - gray: string; - range: string; - mean: string; - warning: string; - lightestShade: string; -} - export interface UptimeAppProps { basePath: string; canSave: boolean; @@ -131,27 +119,25 @@ const Application = (props: UptimeAppProps) => { - - - - -
- - - - - - - -
- - - - + + + +
+ + + + + + + +
+ + + diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_monitors.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_monitors.test.tsx.snap index 57a90f0081b56..3a7233b307176 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_monitors.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_monitors.test.tsx.snap @@ -50,39 +50,28 @@ exports[`CertMonitors renders expected elements for valid props 1`] = ` `; exports[`CertMonitors shallow renders expected elements for valid props 1`] = ` - - - - - - - + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_search.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_search.test.tsx.snap index 663ef61fc87db..a08dc4b2286dc 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_search.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_search.test.tsx.snap @@ -41,39 +41,28 @@ exports[`CertificatesSearch renders expected elements for valid props 1`] = ` `; exports[`CertificatesSearch shallow renders expected elements for valid props 1`] = ` - - - - - - - + + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_status.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_status.test.tsx.snap index 6849d2066b11d..0a870ef6ea321 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_status.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/certificates/__snapshots__/cert_status.test.tsx.snap @@ -37,39 +37,28 @@ exports[`CertStatus renders expected elements for valid props 1`] = ` `; exports[`CertStatus shallow renders expected elements for valid props 1`] = ` - - - - - - - + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/__snapshots__/monitor_tags.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/__snapshots__/monitor_tags.test.tsx.snap index 196f90fb8ecae..0ec6421383602 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/__snapshots__/monitor_tags.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/__snapshots__/monitor_tags.test.tsx.snap @@ -102,39 +102,28 @@ exports[`MonitorTags component it shows expand tag on too many tags 1`] = ` `; exports[`MonitorTags component render against summary 1`] = ` - - - - - - - + ], + "timestamp": "2020-12-09T17:08:22.200Z", + "tls": Object { + "certificate_not_valid_after": "2021-01-26T07:38:14.000Z", + "certificate_not_valid_before": "2020-11-03T07:38:14.000Z", + "cipher": "TLS-AES-128-GCM-SHA256", + "established": true, + "rtt": Object { + "handshake": Object { + "us": 39344, + }, + }, + "version": "1.3", + "version_protocol": "tls", + }, + "url": Object { + "domain": "www.android.com", + "full": "https://www.android.com", + "port": 443, + "scheme": "https", + }, + }, + } + } + /> + `; exports[`MonitorTags component renders against ping 1`] = ` - - - - - - - + }, + }, + "url": Object { + "domain": "www.android.com", + "full": "https://www.android.com", + "port": 443, + "scheme": "https", + }, + } + } + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 15f8ad666dced..a21a15116ccf7 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -578,7 +578,6 @@ exports[`DonutChart component passes correct props without errors for valid prop "outerSizeRatio": 0.9, }, }, - Object {}, ] } /> @@ -697,7 +696,7 @@ exports[`DonutChart component renders a donut chart 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" > @@ -739,7 +738,7 @@ exports[`DonutChart component renders a donut chart 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" > @@ -856,7 +855,7 @@ exports[`DonutChart component renders a green check when all monitors are up 1`] class="euiFlexItem emotion-euiFlexItem-growZero" > @@ -898,7 +897,7 @@ exports[`DonutChart component renders a green check when all monitors are up 1`] class="euiFlexItem emotion-euiFlexItem-growZero" > diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap index 7b5da3fc31599..230fe13e10720 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap @@ -32,39 +32,28 @@ exports[`MonitorBarSeries component renders if the data series is present 1`] = `; exports[`MonitorBarSeries component shallow renders a series when there are down items 1`] = ` - - - - - - - + minInterval={10} + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/chart_wrapper.test.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/chart_wrapper.test.tsx index 1a1a74ab753b1..adeb1d00facc4 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/chart_wrapper.test.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/chart_wrapper.test.tsx @@ -13,7 +13,15 @@ import { shallowWithIntl } from '@kbn/test-jest-helpers'; import { ChartWrapper } from './chart_wrapper'; import { SnapshotHeading } from '../../overview/snapshot/snapshot_heading'; import { DonutChart } from './donut_chart'; +import { mockCore } from '../../../lib/helper/rtl_helpers'; const SNAPSHOT_CHART_HEIGHT = 144; + +jest.mock('@kbn/kibana-react-plugin/public', () => ({ + useKibana: jest.fn().mockImplementation(() => ({ + services: mockCore(), + })), +})); + describe('ChartWrapper component', () => { it('renders the component with loading false', () => { const component = shallowWithIntl( diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.test.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.test.tsx index ff83c51900cdf..d74a7ba7e4372 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.test.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.test.tsx @@ -8,6 +8,13 @@ import { DonutChart } from './donut_chart'; import { renderWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { mockCore } from '../../../lib/helper/rtl_helpers'; + +jest.mock('@kbn/kibana-react-plugin/public', () => ({ + useKibana: jest.fn().mockImplementation(() => ({ + services: mockCore(), + })), +})); describe('DonutChart component', () => { it('passes correct props without errors for valid props', () => { diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx index e5fc97a52600a..1a5ff52eb10e6 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx @@ -5,13 +5,14 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; -import React, { useContext } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, useEuiTheme } from '@elastic/eui'; +import React from 'react'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; import { Chart, Datum, Partition, Settings, PartitionLayout, PartialTheme } from '@elastic/charts'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { ClientPluginsStart } from '../../../../plugin'; import { DonutChartLegend } from './donut_chart_legend'; -import { UptimeThemeContext } from '../../../contexts'; interface DonutChartProps { down: number; @@ -42,11 +43,14 @@ const themeOverrides: PartialTheme = { }; export const DonutChart = ({ height, down, up }: DonutChartProps) => { - const { - colors: { danger, gray }, - chartTheme, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; + const gray = theme.euiTheme.colors.lightShade; + const { + services: { charts }, + } = useKibana(); + const baseTheme = charts.theme.useChartsBaseTheme(); return ( @@ -58,11 +62,7 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => { values: { down, total: up + down }, })} > - + { - const { - colors: { gray, danger }, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; + const gray = theme.euiTheme.colors.lightShade; + return ( ([]); - const { chartTheme } = useContext(UptimeThemeContext); + const { + services: { charts }, + } = useKibana(); + const baseTheme = charts.theme.useChartsBaseTheme(); const onBrushEnd: BrushEndListener = ({ x }) => { if (!x) { @@ -110,8 +114,7 @@ export const DurationChartComponent = ({ onBrushEnd={onBrushEnd} onLegendItemClick={legendToggleVisibility} locale={i18n.getLocale()} - // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md - {...chartTheme} + baseTheme={baseTheme} /> { const { - colors: { danger }, - chartTheme, - } = useContext(UptimeThemeContext); + services: { charts }, + } = useKibana(); + const baseTheme = charts.theme.useChartsBaseTheme(); + + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; + const [getUrlParams, updateUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams(); @@ -79,8 +84,7 @@ export const MonitorBarSeries = ({ histogramSeries, minInterval }: MonitorBarSer onBrushEnd={onBrushEnd} onElementClick={onBarClicked} locale={i18n.getLocale()} - // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md - {...chartTheme} + baseTheme={baseTheme} /> down }} + values={{ + emphasizedText: ( + + {i18n.translate('xpack.uptime.monitorBarSeries.strong.downLabel', { + defaultMessage: 'down', + })} + + ), + }} /> } > - -- + + {i18n.translate('xpack.uptime.monitorBarSeries.TextLabel', { defaultMessage: '--' })} + ); }; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx index a1471dfe1715d..1bad832a87d07 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx @@ -17,15 +17,15 @@ import { ElementClickListener, ScaleType, } from '@elastic/charts'; -import { EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiTitle, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React, { useContext } from 'react'; +import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import numeral from '@elastic/numeral'; import moment from 'moment'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; import { getChartDateLabel } from '../../../lib/helper'; import { ChartWrapper } from './chart_wrapper'; -import { UptimeThemeContext } from '../../../contexts'; import { HistogramResult } from '../../../../../common/runtime_types'; import { useUrlParams } from '../../../hooks'; import { ChartEmptyState } from './chart_empty_state'; @@ -34,6 +34,7 @@ import { STATUS_DOWN_LABEL, STATUS_UP_LABEL, } from '../../../../../common/translations/translations'; +import { ClientPluginsStart } from '../../../../plugin'; export interface PingHistogramComponentProps { /** @@ -72,9 +73,13 @@ export const PingHistogramComponent: React.FC = ({ timeZone, }) => { const { - colors: { danger, gray }, - chartTheme, - } = useContext(UptimeThemeContext); + services: { charts }, + } = useKibana(); + const baseTheme = charts.theme.useChartsBaseTheme(); + + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; + const gray = theme.euiTheme.colors.lightShade; const [_getUrlParams, updateUrlParams] = useUrlParams(); @@ -143,8 +148,7 @@ export const PingHistogramComponent: React.FC = ({ onBrushEnd={onBrushEnd} onElementClick={onBarClicked} locale={i18n.getLocale()} - // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md - {...chartTheme} + baseTheme={baseTheme} /> - - - - - - + + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ml/__snapshots__/ml_integerations.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ml/__snapshots__/ml_integerations.test.tsx.snap index 5b8d20ae63ba0..1edd320bcc715 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ml/__snapshots__/ml_integerations.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ml/__snapshots__/ml_integerations.test.tsx.snap @@ -29,39 +29,28 @@ exports[`ML Integrations renders without errors 1`] = ` `; exports[`ML Integrations shallow renders without errors 1`] = ` - - - - - - - + + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx index e63bc4f08e6a5..9e5fef631507c 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx @@ -5,13 +5,12 @@ * 2.0. */ -import React, { useContext } from 'react'; +import React from 'react'; import { i18n } from '@kbn/i18n'; import moment from 'moment'; -import { EuiBadge, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiBadge, EuiSpacer, EuiText, useEuiTheme } 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, @@ -32,9 +31,8 @@ const getPingStatusLabel = (status: string, ping: Ping) => { }; export const PingStatusColumn = ({ pingStatus, item }: Props) => { - const { - colors: { dangerBehindText }, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const dangerBehindText = theme.euiTheme.colors.textDanger; const timeStamp = moment(item.timestamp); diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap index d8acb8a3cd715..84360ef93c8fc 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap @@ -59,7 +59,7 @@ Array [ diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap index 1e50379a09553..4729f1942f4c3 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap @@ -65,39 +65,28 @@ Array [ `; exports[`SSL Certificate component shallow renders 1`] = ` - - - - - - - + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx index b50b84235dad7..f53636d5a753c 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx @@ -5,10 +5,10 @@ * 2.0. */ -import React, { useContext } from 'react'; +import React from 'react'; import moment from 'moment'; import styled from 'styled-components'; -import { UptimeThemeContext } from '../../../../contexts'; +import { useEuiTheme } from '@elastic/eui'; import { MonitorLocation } from '../../../../../../common/runtime_types'; import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../../common/constants'; import { AvailabilityReporting } from '..'; @@ -33,9 +33,9 @@ export interface StatusTag { } export const LocationStatusTags = ({ locations }: Props) => { - const { - colors: { gray, danger }, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; + const gray = theme.euiTheme.colors.lightShade; const allLocations: StatusTag[] = []; const prevLocal: string = moment.locale() ?? 'en'; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap index 8a2095bfdfdf8..dd4e3c9ff1e7c 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap @@ -21,39 +21,28 @@ exports[`FilterStatusButton renders without errors for valid props 1`] = ` `; exports[`FilterStatusButton shallow renders without errors for valid props 1`] = ` - - - - - - - + + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap index d25aecb486f62..a9d2b7baf2cc9 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap @@ -59,39 +59,28 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = ` `; exports[`StatusFilterComponent shallow renders without errors for valid props 1`] = ` - - - - - - - + + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx index 04311ff66aa8f..5abf56c0189e5 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiBadge, EuiToolTip } from '@elastic/eui'; -import React, { useContext } from 'react'; +import { EuiBadge, EuiToolTip, useEuiTheme } from '@elastic/eui'; +import React from 'react'; import { STATUS } from '../../../../../../common/constants'; import { getHealthMessage } from './monitor_status_column'; -import { UptimeThemeContext } from '../../../../contexts'; import { PingError } from '../../../../../../common/runtime_types'; export const StatusBadge = ({ @@ -19,9 +18,8 @@ export const StatusBadge = ({ status: string; summaryError?: PingError; }) => { - const { - colors: { dangerBehindText }, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const dangerBehindText = theme.euiTheme.colors.textDanger; if (status === STATUS.UP) { return ( diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_list_drawer.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_list_drawer.test.tsx.snap index c596dbb57eaa7..ac50a33f03afe 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_list_drawer.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/monitor_list_drawer.test.tsx.snap @@ -1,39 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MonitorListDrawer component renders a MonitorListDrawer when there are many checks 1`] = ` - - - - - - - + ], + "timestamp": "123", + "url": Object { + "domain": "expired.badssl.com", + "full": "https://expired.badssl.com", + }, + }, + } + } + /> + `; exports[`MonitorListDrawer component renders a MonitorListDrawer when there is only one check 1`] = ` - - - - - - - + ], + "timestamp": "123", + "url": Object { + "domain": "expired.badssl.com", + "full": "https://expired.badssl.com", + }, + }, + } + } + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/certificate_form.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/certificate_form.test.tsx.snap index aa44f05e3763e..c5ba5f3d0bcf6 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/certificate_form.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/certificate_form.test.tsx.snap @@ -1,39 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CertificateForm shallow renders expected elements for valid props 1`] = ` - - - - - - - + isDisabled={false} + loading={false} + onChange={[MockFunction]} + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/indices_form.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/indices_form.test.tsx.snap index e12ec38a52d86..4b7dc3cc1dec4 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/indices_form.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/settings/__snapshots__/indices_form.test.tsx.snap @@ -1,39 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CertificateForm shallow renders expected elements for valid props 1`] = ` - - - - - - - + isDisabled={false} + loading={false} + onChange={[MockFunction]} + /> + `; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.test.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.test.tsx index 6a3c6d02151ed..2db3b2ec004fc 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.test.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.test.tsx @@ -46,7 +46,7 @@ describe('ConsoleEvent component', () => { grow={false} style={ Object { - "color": "#bd271e", + "color": "#BD271E", } } > diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.tsx index aeceef2477e28..fb37ff6804225 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/console_event.tsx @@ -5,9 +5,8 @@ * 2.0. */ -import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; -import React, { useContext, FC } from 'react'; -import { UptimeThemeContext } from '../../contexts'; +import { EuiFlexItem, EuiFlexGroup, useEuiTheme } from '@elastic/eui'; +import React, { FC } from 'react'; import { JourneyStep } from '../../../../common/runtime_types/ping'; interface Props { @@ -15,9 +14,8 @@ interface Props { } export const ConsoleEvent: FC = ({ event }) => { - const { - colors: { danger }, - } = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + const danger = theme.euiTheme.colors.danger; let typeColor: string | undefined; if (event.synthetics?.type === 'stderr') { diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx index a499f2f65885a..49c466e8daf51 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx @@ -5,11 +5,9 @@ * 2.0. */ -import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React, { useContext, FC } from 'react'; -import { UptimeAppColors } from '../../app/uptime_app'; -import { UptimeThemeContext } from '../../contexts'; +import React, { FC } from 'react'; interface StatusBadgeProps { isMobile?: boolean; @@ -17,12 +15,18 @@ interface StatusBadgeProps { stepNo: number; } -export function colorFromStatus(color: UptimeAppColors, status?: string) { +export function colorFromStatus( + color: { + success: string; + danger: string; + }, + status?: string +) { switch (status) { case 'succeeded': return color.success; case 'failed': - return color.dangerBehindText; + return color.danger; default: return 'default'; } @@ -48,7 +52,8 @@ export function textFromStatus(status?: string) { } export const StatusBadge: FC = ({ status, stepNo, isMobile }) => { - const theme = useContext(UptimeThemeContext); + const theme = useEuiTheme(); + return ( {!isMobile && ( @@ -59,7 +64,17 @@ export const StatusBadge: FC = ({ status, stepNo, isMobile }) )} - {textFromStatus(status)} + + {textFromStatus(status)} + ); diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx index 2e5b8aac0d720..8c158c86fd05b 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx @@ -12,6 +12,7 @@ import { EuiImage, EuiLoadingSpinner, EuiText, + useEuiTheme, } from '@elastic/eui'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; @@ -23,7 +24,7 @@ import { isScreenshotRef as isAScreenshotRef, ScreenshotRefImageData, } from '../../../../common/runtime_types'; -import { UptimeRefreshContext, UptimeSettingsContext, UptimeThemeContext } from '../../contexts'; +import { UptimeRefreshContext, UptimeSettingsContext } from '../../contexts'; import { getJourneyScreenshot } from '../../state/api/journey'; import { useCompositeImage } from '../../hooks'; @@ -103,9 +104,9 @@ export const StepScreenshotDisplay: FC = ({ lazyLoad = true, }) => { const containerRef = useRef(null); - const { - colors: { lightestShade: pageBackground }, - } = useContext(UptimeThemeContext); + + const theme = useEuiTheme(); + const pageBackground = theme.euiTheme.colors.lightestShade; const { basePath } = useContext(UptimeSettingsContext); diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/index.ts b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/index.ts index 8467691064bff..cd4f2b841e8ff 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/index.ts +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/index.ts @@ -8,7 +8,6 @@ export { UptimeRefreshContext, UptimeRefreshContextProvider } from './uptime_refresh_context'; export type { UptimeSettingsContextValues } from './uptime_settings_context'; export { UptimeSettingsContext, UptimeSettingsContextProvider } from './uptime_settings_context'; -export { UptimeThemeContextProvider, UptimeThemeContext } from './uptime_theme_context'; export { UptimeStartupPluginsContext, UptimeStartupPluginsContextProvider, diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx deleted file mode 100644 index 97787ba9db4e9..0000000000000 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx +++ /dev/null @@ -1,85 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; -import React, { createContext, useMemo, FC, PropsWithChildren } from 'react'; -import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; -import { UptimeAppColors } from '../app/uptime_app'; - -export interface UptimeThemeContextValues { - colors: UptimeAppColors; - chartTheme: { - baseTheme?: Theme; - theme?: PartialTheme; - }; -} - -/** - * These are default values for the context. These defaults are typically - * overwritten by the Uptime App upon its invocation. - */ -const defaultContext: UptimeThemeContextValues = { - colors: { - danger: euiLightVars.euiColorDanger, - dangerBehindText: euiDarkVars.euiColorVis9_behindText, - mean: euiLightVars.euiColorPrimary, - range: euiLightVars.euiFocusBackgroundColor, - success: euiLightVars.euiColorSuccess, - warning: euiLightVars.euiColorWarning, - gray: euiLightVars.euiColorLightShade, - lightestShade: euiLightVars.euiColorLightestShade, - }, - chartTheme: { - baseTheme: LIGHT_THEME, - }, -}; - -export const UptimeThemeContext = createContext(defaultContext); - -interface ThemeContextProps { - darkMode: boolean; -} - -export const UptimeThemeContextProvider: FC> = ({ - darkMode, - children, -}) => { - let colors: UptimeAppColors; - if (darkMode) { - colors = { - danger: euiDarkVars.euiColorVis9, - dangerBehindText: euiDarkVars.euiColorVis9_behindText, - mean: euiDarkVars.euiColorPrimary, - gray: euiDarkVars.euiColorLightShade, - range: euiDarkVars.euiFocusBackgroundColor, - success: euiDarkVars.euiColorSuccess, - warning: euiDarkVars.euiColorWarning, - lightestShade: euiDarkVars.euiColorLightestShade, - }; - } else { - colors = { - danger: euiLightVars.euiColorVis9, - dangerBehindText: euiLightVars.euiColorVis9_behindText, - mean: euiLightVars.euiColorPrimary, - gray: euiLightVars.euiColorLightShade, - range: euiLightVars.euiFocusBackgroundColor, - success: euiLightVars.euiColorSuccess, - warning: euiLightVars.euiColorWarning, - lightestShade: euiLightVars.euiColorLightestShade, - }; - } - const value = useMemo(() => { - return { - colors, - chartTheme: { - baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, - }, - }; - }, [colors, darkMode]); - - return ; -}; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/enzyme_helpers.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/enzyme_helpers.tsx index 984344de2e5e2..540e0fdac2c6c 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/enzyme_helpers.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/enzyme_helpers.tsx @@ -10,10 +10,11 @@ import { Router } from '@kbn/shared-ux-router'; import { MemoryHistory } from 'history/createMemoryHistory'; import { createMemoryHistory, History } from 'history'; import { mountWithIntl, renderWithI18nProvider, shallowWithIntl } from '@kbn/test-jest-helpers'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { MountWithReduxProvider } from './helper_with_redux'; import { AppState } from '../../state'; import { mockState } from '../__mocks__/uptime_store.mock'; -import { KibanaProviderOptions, MockRouter } from './rtl_helpers'; +import { KibanaProviderOptions, mockCore, MockRouter } from './rtl_helpers'; interface RenderRouterOptions extends KibanaProviderOptions { history?: History; @@ -31,7 +32,11 @@ const helperWithRouter: ( history.location.key = 'TestKeyForTesting'; - const routerWrapper = {component}; + const routerWrapper = ( + + {component} + + ); if (wrapReduxStore) { return helper( diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/rtl_helpers.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/rtl_helpers.tsx index 8f9264f4671b6..395c9d8bfb23a 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/rtl_helpers.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/lib/helper/rtl_helpers.tsx @@ -6,6 +6,7 @@ */ import React, { ReactElement, ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; import { of } from 'rxjs'; // eslint-disable-next-line import/no-extraneous-dependencies import { @@ -22,14 +23,16 @@ import { createMemoryHistory, History } from 'history'; import { CoreStart } from '@kbn/core/public'; import { I18nProvider } from '@kbn/i18n-react'; import { coreMock } from '@kbn/core/public/mocks'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public'; import { KibanaContextProvider, KibanaServices } from '@kbn/kibana-react-plugin/public'; + import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks'; import { dataPluginMock } from '@kbn/data-plugin/public/mocks'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; import { Store } from 'redux'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; +import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; +import { chartPluginMock } from '@kbn/charts-plugin/public/mocks'; import { stringifyUrlParams } from './url_params/stringify_url_params'; import { mockState } from '../__mocks__/uptime_store.mock'; import { MountWithReduxProvider } from './helper_with_redux'; @@ -158,9 +161,16 @@ export const mockCore: () => Partial = () => { exploratoryView: { createExploratoryViewUrl: jest.fn(), getAppDataView: jest.fn(), - ExploratoryViewEmbeddable: () =>
Embeddable exploratory view
, + ExploratoryViewEmbeddable: () => ( +
+ {i18n.translate('xpack.uptime.core.div.embeddableExploratoryViewLabel', { + defaultMessage: 'Embeddable exploratory view', + })} +
+ ), }, unifiedSearch: unifiedSearchPluginMock.createStartContract(), + charts: chartPluginMock.createStartContract(), }; return core; diff --git a/x-pack/solutions/observability/plugins/uptime/public/plugin.ts b/x-pack/solutions/observability/plugins/uptime/public/plugin.ts index b2558fe83e33b..dca8c8baa19e3 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/plugin.ts +++ b/x-pack/solutions/observability/plugins/uptime/public/plugin.ts @@ -55,6 +55,7 @@ import { ObservabilityAIAssistantPublicStart, ObservabilityAIAssistantPublicSetup, } from '@kbn/observability-ai-assistant-plugin/public'; +import type { ChartsPluginStart } from '@kbn/charts-plugin/public'; import { PLUGIN } from '../common/constants/plugin'; import { UptimeConfig } from '../common/config'; import { @@ -105,6 +106,7 @@ export interface ClientPluginsStart { docLinks: DocLinksStart; uiSettings: CoreStart['uiSettings']; usageCollection: UsageCollectionStart; + charts: ChartsPluginStart; } export interface UptimePluginServices extends Partial { diff --git a/x-pack/solutions/observability/plugins/uptime/tsconfig.json b/x-pack/solutions/observability/plugins/uptime/tsconfig.json index 5de407dc03b8c..6761601deb208 100644 --- a/x-pack/solutions/observability/plugins/uptime/tsconfig.json +++ b/x-pack/solutions/observability/plugins/uptime/tsconfig.json @@ -36,7 +36,6 @@ "@kbn/core-http-browser", "@kbn/es-query", "@kbn/data-views-plugin", - "@kbn/ui-theme", "@kbn/rule-data-utils", "@kbn/kibana-utils-plugin", "@kbn/data-plugin", @@ -79,6 +78,7 @@ "@kbn/deeplinks-observability", "@kbn/ebt-tools", "@kbn/core-rendering-browser", + "@kbn/charts-plugin", ], "exclude": ["target/**/*"] }