use proper theme

elastic · Dec 10, 2024 · 5f31d5b · 5f31d5b
1 parent 3d46ead
commit 5f31d5b
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 197 deletions.
diff --git 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"
     ]
   }
-}
+}
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
@@ -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) => {
               <EuiThemeProvider darkMode={darkMode}>
                 <UptimeRefreshContextProvider>
                   <UptimeSettingsContextProvider {...props}>
-                    <UptimeThemeContextProvider darkMode={darkMode}>
-                      <UptimeStartupPluginsContextProvider {...startPlugins}>
-                        <UptimeDataViewContextProvider dataViews={startPlugins.dataViews}>
-                          <PerformanceContextProvider>
-                            <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
-                              <RedirectAppLinks
-                                coreStart={{
-                                  application: core.application,
-                                }}
-                              >
-                                <InspectorContextProvider>
-                                  <UptimeAlertsFlyoutWrapper />
-                                  <PageRouter />
-                                  <ActionMenu appMountParameters={appMountParameters} />
-                                </InspectorContextProvider>
-                              </RedirectAppLinks>
-                            </div>
-                          </PerformanceContextProvider>
-                        </UptimeDataViewContextProvider>
-                      </UptimeStartupPluginsContextProvider>
-                    </UptimeThemeContextProvider>
+                    <UptimeStartupPluginsContextProvider {...startPlugins}>
+                      <UptimeDataViewContextProvider dataViews={startPlugins.dataViews}>
+                        <PerformanceContextProvider>
+                          <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
+                            <RedirectAppLinks
+                              coreStart={{
+                                application: core.application,
+                              }}
+                            >
+                              <InspectorContextProvider>
+                                <UptimeAlertsFlyoutWrapper />
+                                <PageRouter />
+                                <ActionMenu appMountParameters={appMountParameters} />
+                              </InspectorContextProvider>
+                            </RedirectAppLinks>
+                          </div>
+                        </PerformanceContextProvider>
+                      </UptimeDataViewContextProvider>
+                    </UptimeStartupPluginsContextProvider>
                   </UptimeSettingsContextProvider>
                 </UptimeRefreshContextProvider>
               </EuiThemeProvider>

diff --git a/...servability_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart.tsx b/...servability_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<ClientPluginsStart>();
+  const baseTheme = charts.theme.useChartsBaseTheme();
   return (
     <EuiFlexGroup alignItems="center" responsive={false}>
       <EuiFlexItem grow={false} style={{ position: 'relative' }}>
@@ -58,11 +62,7 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => {
             values: { down, total: up + down },
           })}
         >
-          <Settings
-            theme={[themeOverrides, chartTheme.theme ?? {}]}
-            baseTheme={chartTheme.baseTheme}
-            locale={i18n.getLocale()}
-          />
+          <Settings theme={[themeOverrides]} baseTheme={baseTheme} locale={i18n.getLocale()} />
           <Partition
             id="spec_1"
             data={[

diff --git a/...lity_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart_legend.tsx b/...lity_solution/uptime/public/legacy_uptime/components/common/charts/donut_chart_legend.tsx
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import { EuiSpacer } from '@elastic/eui';
-import React, { useContext } from 'react';
+import { EuiSpacer, useEuiTheme } from '@elastic/eui';
+import React 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,
@@ -30,9 +29,10 @@ interface Props {
 }
 
 export const DonutChartLegend = ({ down, up }: Props) => {
-  const {
-    colors: { gray, danger },
-  } = useContext(UptimeThemeContext);
+  const theme = useEuiTheme();
+  const danger = theme.euiTheme.colors.danger;
+  const gray = theme.euiTheme.colors.lightShade;
+
   return (
     <LegendContainer>
       <DonutChartLegendRow

diff --git a/...vability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx b/...vability_solution/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -19,6 +19,7 @@ import {
   LegendItemListener,
 } from '@elastic/charts';
 import { useSelector } from 'react-redux';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { getChartDateLabel } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../../common/types';
 import { DurationLineSeriesList } from './duration_line_series_list';
@@ -28,11 +29,11 @@ import { getTickFormat } from './get_tick_format';
 import { ChartEmptyState } from './chart_empty_state';
 import { DurationAnomaliesBar } from './duration_line_bar_list';
 import { AnomalyRecords } from '../../../state/actions';
-import { UptimeThemeContext } from '../../../contexts';
 import { MONITOR_CHART_HEIGHT } from '../../monitor';
 import { monitorStatusSelector } from '../../../state/selectors';
 import { microToMilli, microToSec } from '../../../lib/formatting';
 import { MS_LABEL, SECONDS_LABEL } from '../../../../../common/translations/translations';
+import { ClientPluginsStart } from '../../../../plugin';
 
 interface DurationChartProps {
   /**
@@ -66,7 +67,10 @@ export const DurationChartComponent = ({
 
   const [hiddenLegends, setHiddenLegends] = useState<string[]>([]);
 
-  const { chartTheme } = useContext(UptimeThemeContext);
+  const {
+    services: { charts },
+  } = useKibana<ClientPluginsStart>();
+  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}
           />
           <Axis
             id="bottom"

diff --git a/...lity_solution/uptime/public/legacy_uptime/components/common/charts/monitor_bar_series.tsx b/...lity_solution/uptime/public/legacy_uptime/components/common/charts/monitor_bar_series.tsx
@@ -18,15 +18,16 @@ import {
   ElementClickListener,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import React, { useContext } from 'react';
+import React from 'react';
 import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HistogramPoint } from '../../../../../common/runtime_types';
 import { getChartDateLabel, seriesHasDownValues } from '../../../lib/helper';
 import { useUrlParams } from '../../../hooks';
-import { UptimeThemeContext } from '../../../contexts';
 import { getDateRangeFromChartElement } from './utils';
+import { ClientPluginsStart } from '../../../../plugin';
 
 export interface MonitorBarSeriesProps {
   /**
@@ -44,9 +45,13 @@ export interface MonitorBarSeriesProps {
  */
 export const MonitorBarSeries = ({ histogramSeries, minInterval }: MonitorBarSeriesProps) => {
   const {
-    colors: { danger },
-    chartTheme,
-  } = useContext(UptimeThemeContext);
+    services: { charts },
+  } = useKibana<ClientPluginsStart>();
+  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}
         />
         <Axis
           hide
@@ -112,11 +116,21 @@ export const MonitorBarSeries = ({ histogramSeries, minInterval }: MonitorBarSer
         <FormattedMessage
           id="xpack.uptime.monitorList.noDownHistory"
           defaultMessage="This monitor has never been {emphasizedText} during the selected time range."
-          values={{ emphasizedText: <strong>down</strong> }}
+          values={{
+            emphasizedText: (
+              <strong>
+                {i18n.translate('xpack.uptime.monitorBarSeries.strong.downLabel', {
+                  defaultMessage: 'down',
+                })}
+              </strong>
+            ),
+          }}
         />
       }
     >
-      <EuiText color="success">--</EuiText>
+      <EuiText color="success">
+        {i18n.translate('xpack.uptime.monitorBarSeries.TextLabel', { defaultMessage: '--' })}
+      </EuiText>
     </EuiToolTip>
   );
 };
diff --git a/...vability_solution/uptime/public/legacy_uptime/components/common/charts/ping_histogram.tsx b/...vability_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<PingHistogramComponentProps> = ({
   timeZone,
 }) => {
   const {
-    colors: { danger, gray },
-    chartTheme,
-  } = useContext(UptimeThemeContext);
+    services: { charts },
+  } = useKibana<ClientPluginsStart>();
+  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<PingHistogramComponentProps> = ({
             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}
           />
           <Axis
             id={i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {

diff --git a/...solution/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx b/...solution/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/..._uptime/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/..._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';