From 5f31d5b47ec674b068d72f821026310c3bd8a5ae Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 10 Dec 2024 17:20:25 +0100 Subject: [PATCH] use proper theme --- .../uptime/kibana.jsonc | 5 +- .../public/legacy_uptime/app/uptime_app.tsx | 52 +++++------- .../components/common/charts/donut_chart.tsx | 24 +++--- .../common/charts/donut_chart_legend.tsx | 12 +-- .../common/charts/duration_chart.tsx | 13 +-- .../common/charts/monitor_bar_series.tsx | 34 +++++--- .../common/charts/ping_histogram.tsx | 20 +++-- .../monitor/ping_list/columns/ping_status.tsx | 10 +-- .../location_status_tags.tsx | 10 +-- .../monitor_list/columns/status_badge.tsx | 10 +-- .../components/synthetics/console_event.tsx | 10 +-- .../components/synthetics/status_badge.tsx | 31 +++++-- .../synthetics/step_screenshot_display.tsx | 9 +- .../public/legacy_uptime/contexts/index.ts | 1 - .../contexts/uptime_theme_context.tsx | 85 ------------------- .../uptime/public/plugin.ts | 2 + 16 files changed, 131 insertions(+), 197 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx diff --git a/x-pack/plugins/observability_solution/uptime/kibana.jsonc b/x-pack/plugins/observability_solution/uptime/kibana.jsonc index c4c8b8b9d76de..25fd311a81f81 100644 --- a/x-pack/plugins/observability_solution/uptime/kibana.jsonc +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx index 3ce07ac9803f7..dc775e2295b9a 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx index e5fc97a52600a..1a5ff52eb10e6 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx index a1471dfe1715d..1bad832a87d07 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx +++ b/x-pack/plugins/observability_solution/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} /> { }; 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/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx index b50b84235dad7..f53636d5a753c 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx index 04311ff66aa8f..5abf56c0189e5 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/console_event.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/console_event.tsx index aeceef2477e28..fb37ff6804225 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/console_event.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx index a499f2f65885a..49c466e8daf51 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/status_badge.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx index b7d2f6d85fe2b..de493a00867fd 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/synthetics/step_screenshot_display.tsx +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/contexts/index.ts b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/contexts/index.ts index 8467691064bff..cd4f2b841e8ff 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/contexts/index.ts +++ b/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx deleted file mode 100644 index 97787ba9db4e9..0000000000000 --- a/x-pack/plugins/observability_solution/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/plugins/observability_solution/uptime/public/plugin.ts b/x-pack/plugins/observability_solution/uptime/public/plugin.ts index b2558fe83e33b..dca8c8baa19e3 100644 --- a/x-pack/plugins/observability_solution/uptime/public/plugin.ts +++ b/x-pack/plugins/observability_solution/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 {