[8.9] [Infra UI] Fix theme passed in to charts (#162114) (#162301)

# Backport This will backport the following commits from `main` to `8.9`: - [[Infra UI] Fix theme passed in to charts (#162114)](#162114)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Jul 20, 2023 · 2af0d49 · 2af0d49
1 parent a5860bf
commit 2af0d49
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 78 deletions.
diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/expression_chart.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/expression_chart.tsx
@@ -10,8 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
-import { getChartTheme } from '../../../utils/get_chart_theme';
-import { useIsDarkMode } from '../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../utils/use_timeline_chart_theme';
 import { InventoryMetricConditions } from '../../../../common/alerting/metrics';
 import { Color } from '../../../../common/color_palette';
 import { MetricsExplorerAggregation, MetricsExplorerRow } from '../../../../common/http_api';
@@ -45,6 +44,7 @@ export const ExpressionChart: React.FC<Props> = ({
   nodeType,
   sourceId,
 }) => {
+  const chartTheme = useTimelineChartTheme();
   const timerange = useMemo(
     () => ({
       interval: `${expression.timeSize || 1}${expression.timeUnit}`,
@@ -77,7 +77,6 @@ export const ExpressionChart: React.FC<Props> = ({
     region: options.region,
     timerange,
   });
-  const isDarkMode = useIsDarkMode();
 
   const metric = {
     field: expression.metric,
@@ -192,7 +191,7 @@ export const ExpressionChart: React.FC<Props> = ({
             tickFormat={dateFormatter}
           />
           <Axis id={'values'} position={Position.Left} tickFormat={yAxisFormater} domain={domain} />
-          <Settings theme={getChartTheme(isDarkMode)} />
+          <Settings baseTheme={chartTheme.baseTheme} />
           <Tooltip {...tooltipProps} />
         </Chart>
       </ChartContainer>

diff --git a/...ra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx b/...ra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
@@ -21,9 +21,8 @@ import {
 } from '@elastic/charts';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { getChartTheme } from '../../../../utils/get_chart_theme';
-import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
 import { PersistedLogViewReference } from '../../../../../common/log_views';
+import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
 import { ExecutionTimeRange } from '../../../../types';
 import {
   ChartContainer,
@@ -143,7 +142,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
   annotations,
   filterSeriesByGroupName,
 }) => {
-  const isDarkMode = useIsDarkMode();
+  const chartTheme = useTimelineChartTheme();
   const timezone = useKibanaTimeZoneSetting();
 
   const {
@@ -331,7 +330,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
             tickFormat={yAxisFormatter}
             domain={chartDomain}
           />
-          <Settings theme={getChartTheme(isDarkMode)} />
+          <Settings baseTheme={chartTheme.baseTheme} />
           <Tooltip {...tooltipProps} />
         </Chart>
       </ChartContainer>

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx
@@ -24,6 +24,10 @@ jest.mock('../../../hooks/use_kibana', () => ({
       ...mockStartServices,
       charts: {
         activeCursor: jest.fn(),
+        theme: {
+          useChartsBaseTheme: jest.fn(() => ({})),
+          useChartsTheme: jest.fn(() => ({})),
+        },
       },
     },
   }),

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
@@ -22,8 +22,7 @@ import { useActiveCursor } from '@kbn/charts-plugin/public';
 import { DataViewBase } from '@kbn/es-query';
 import { first, last } from 'lodash';
 
-import { getChartTheme } from '../../../utils/get_chart_theme';
-import { useIsDarkMode } from '../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../utils/use_timeline_chart_theme';
 import { MetricsSourceConfiguration } from '../../../../common/metrics_sources';
 import { Color } from '../../../../common/color_palette';
 import { MetricsExplorerRow, MetricsExplorerAggregation } from '../../../../common/http_api';
@@ -72,7 +71,7 @@ export const ExpressionChart: React.FC<Props> = ({
   timeRange,
 }) => {
   const { charts } = useKibanaContextForPlugin().services;
-  const isDarkMode = useIsDarkMode();
+  const chartTheme = useTimelineChartTheme();
 
   const { isLoading, data } = useMetricsExplorerChartData(
     expression,
@@ -200,7 +199,7 @@ export const ExpressionChart: React.FC<Props> = ({
             externalPointerEvents={{
               tooltip: { visible: true },
             }}
-            theme={getChartTheme(isDarkMode)}
+            baseTheme={chartTheme.baseTheme}
           />
         </Chart>
       </ChartContainer>

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metrics/chart_section.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metrics/chart_section.tsx
@@ -21,10 +21,9 @@ import {
   MetricsExplorerChartType,
   type MetricsExplorerOptionsMetric,
 } from '../../../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options';
-import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
 import { MetricExplorerSeriesChart } from '../../../../pages/metrics/metrics_explorer/components/series_chart';
 import type { MetricsExplorerSeries } from '../../../../../common/http_api';
-import { getTimelineChartThemes } from '../../../../utils/get_chart_theme';
+import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
 
 import { ChartHeader } from './chart_header';
 
@@ -58,7 +57,7 @@ export const ChartSection = ({
   domain,
   stack = false,
 }: Props) => {
-  const isDarkMode = useIsDarkMode();
+  const chartTheme = useTimelineChartTheme();
   const metrics = series.map((chartSeries) => chartSeries.metric);
 
   return (
@@ -92,7 +91,11 @@ export const ChartSection = ({
           }}
         />
         <Tooltip headerFormatter={({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS')} />
-        <Settings {...getTimelineChartThemes(isDarkMode)} onPointerUpdate={onPointerUpdate} />
+        <Settings
+          onPointerUpdate={onPointerUpdate}
+          baseTheme={chartTheme.baseTheme}
+          theme={chartTheme.theme}
+        />
       </Chart>
     </>
   );

diff --git a/...ublic/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx b/...ublic/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
@@ -18,9 +18,8 @@ import {
 } from '@elastic/charts';
 import moment from 'moment';
 import React from 'react';
-import { useIsDarkMode } from '../../../../../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../../../../../utils/use_timeline_chart_theme';
 import { MetricsExplorerSeries } from '../../../../../../../../common/http_api';
-import { getTimelineChartThemes } from '../../../../../../../utils/get_chart_theme';
 import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
 import {
   MetricsExplorerChartType,
@@ -58,7 +57,7 @@ export const ChartSection = ({
   domain,
   stack = false,
 }: Props) => {
-  const isDarkMode = useIsDarkMode();
+  const chartTheme = useTimelineChartTheme();
   const metrics = series.map((chartSeries) => chartSeries.metric);
   const tooltipProps: TooltipProps = {
     headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
@@ -93,7 +92,11 @@ export const ChartSection = ({
           gridLine={{ visible: true }}
         />
         <Tooltip {...tooltipProps} />
-        <Settings onPointerUpdate={onPointerUpdate} {...getTimelineChartThemes(isDarkMode)} />
+        <Settings
+          onPointerUpdate={onPointerUpdate}
+          baseTheme={chartTheme.baseTheme}
+          theme={chartTheme.theme}
+        />
       </Chart>
     </>
   );

diff --git a/...ages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx b/...ages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx
@@ -19,11 +19,10 @@ import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useMemo } from 'react';
-import { useIsDarkMode } from '../../../../../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../../../../../utils/use_timeline_chart_theme';
 import { Color } from '../../../../../../../../common/color_palette';
 import { createFormatter } from '../../../../../../../../common/formatters';
 import { MetricsExplorerAggregation } from '../../../../../../../../common/http_api';
-import { getChartTheme } from '../../../../../../../utils/get_chart_theme';
 import { calculateDomain } from '../../../../../metrics_explorer/components/helpers/calculate_domain';
 import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
 import { MetricsExplorerChartType } from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
@@ -74,12 +73,12 @@ interface ProcessChartProps {
   label: string;
 }
 const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
+  const chartTheme = useTimelineChartTheme();
   const chartMetric = {
     color,
     aggregation: 'avg' as MetricsExplorerAggregation,
     label,
   };
-  const isDarkMode = useIsDarkMode();
 
   const dateFormatter = useMemo(() => {
     if (!timeseries) return () => '';
@@ -128,7 +127,7 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
           gridLine={{ visible: true }}
         />
         <Tooltip headerFormatter={({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS')} />
-        <Settings theme={getChartTheme(isDarkMode)} />
+        <Settings baseTheme={chartTheme.baseTheme} theme={chartTheme.theme} />
       </Chart>
     </ChartContainer>
   );

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -28,6 +28,7 @@ import { EuiFlexItem } from '@elastic/eui';
 import { EuiFlexGroup } from '@elastic/eui';
 import { EuiIcon } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import { useTimelineChartTheme } from '../../../../../utils/use_timeline_chart_theme';
 import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n';
 import { MetricsExplorerAggregation } from '../../../../../../common/http_api';
 import { colorTransformer, Color } from '../../../../../../common/color_palette';
@@ -38,12 +39,10 @@ import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
 import { useWaffleFiltersContext } from '../../hooks/use_waffle_filters';
 import { MetricExplorerSeriesChart } from '../../../metrics_explorer/components/series_chart';
 import { MetricsExplorerChartType } from '../../../metrics_explorer/hooks/use_metrics_explorer_options';
-import { getTimelineChartThemes } from '../../../../../utils/get_chart_theme';
 import { calculateDomain } from '../../../metrics_explorer/components/helpers/calculate_domain';
 import { InfraFormatter } from '../../../../../lib/lib';
 import { useMetricsHostsAnomaliesResults } from '../../hooks/use_metrics_hosts_anomalies';
 import { useMetricsK8sAnomaliesResults } from '../../hooks/use_metrics_k8s_anomalies';
-import { useIsDarkMode } from '../../../../../hooks/use_is_dark_mode';
 
 interface Props {
   interval: string;
@@ -57,6 +56,8 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
   const { currentTime, jumpToTime, stopAutoReload } = useWaffleTimeContext();
   const { filterQueryAsJson } = useWaffleFiltersContext();
 
+  const chartTheme = useTimelineChartTheme();
+
   const { loading, error, startTime, endTime, timeseries, reload } = useTimeline(
     filterQueryAsJson,
     [metric],
@@ -123,7 +124,6 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
     return niceTimeFormatter([firstTimestamp, lastTimestamp]);
   }, [timeseries]);
 
-  const isDarkMode = useIsDarkMode();
   const tooltipProps: TooltipProps = {
     headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
   };
@@ -295,7 +295,11 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
             gridLine={{ visible: true }}
           />
           <Tooltip {...tooltipProps} />
-          <Settings onElementClick={onClickPoint} {...getTimelineChartThemes(isDarkMode)} />
+          <Settings
+            onElementClick={onClickPoint}
+            baseTheme={chartTheme.baseTheme}
+            theme={chartTheme.theme}
+          />
         </Chart>
       </TimelineChartContainer>
     </TimelineContainer>

diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
@@ -19,7 +19,8 @@ import {
   Tooltip,
 } from '@elastic/charts';
 import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
-import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
+
 import { SeriesChart } from './series_chart';
 import {
   getFormatter,
@@ -30,7 +31,6 @@ import {
   seriesHasLessThen2DataPoints,
 } from './helpers';
 import { ErrorMessage } from './error_message';
-import { getChartTheme } from '../../../../utils/get_chart_theme';
 import { useKibanaUiSetting } from '../../../../utils/use_kibana_ui_setting';
 import { VisSectionProps } from '../types';
 
@@ -46,7 +46,8 @@ export const ChartSectionVis = ({
   seriesOverrides,
   type,
 }: VisSectionProps) => {
-  const isDarkMode = useIsDarkMode();
+  const chartTheme = useTimelineChartTheme();
+
   const [dateFormat] = useKibanaUiSetting('dateFormat');
   /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const valueFormatter = useCallback(getFormatter(formatter, formatterTemplate), [
@@ -135,7 +136,7 @@ export const ChartSectionVis = ({
           <Tooltip {...tooltipProps} />
           <Settings
             onBrushEnd={handleTimeChange}
-            theme={getChartTheme(isDarkMode)}
+            baseTheme={chartTheme.baseTheme}
             showLegend
             showLegendExtra
             legendPosition="right"

diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
@@ -17,14 +17,13 @@ import {
 } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
-import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
+import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
+import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
 import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer';
 import { MetricsSourceConfigurationProperties } from '../../../../../common/metrics_sources';
-import { getChartTheme } from '../../../../utils/get_chart_theme';
 import { useKibanaUiSetting } from '../../../../utils/use_kibana_ui_setting';
 import {
   MetricsExplorerChartOptions,
@@ -65,8 +64,13 @@ export const MetricsExplorerChart = ({
   timeRange,
   onTimeChange,
 }: Props) => {
-  const uiCapabilities = useKibana().services.application?.capabilities;
-  const isDarkMode = useIsDarkMode();
+  const {
+    services: {
+      application: { capabilities: uiCapabilities },
+    },
+  } = useKibanaContextForPlugin();
+
+  const chartTheme = useTimelineChartTheme();
   const { metrics } = options;
   const [dateFormat] = useKibanaUiSetting('dateFormat');
   const handleTimeChange: BrushEndListener = ({ x }) => {
@@ -160,7 +164,7 @@ export const MetricsExplorerChart = ({
               domain={domain}
             />
             <Tooltip {...tooltipProps} />
-            <Settings onBrushEnd={handleTimeChange} theme={getChartTheme(isDarkMode)} />
+            <Settings onBrushEnd={handleTimeChange} baseTheme={chartTheme.baseTheme} />
           </Chart>
         ) : options.metrics.length > 0 ? (
           <MetricsExplorerEmptyChart />

diff --git a/x-pack/plugins/infra/public/utils/get_chart_theme.ts b/x-pack/plugins/infra/public/utils/get_chart_theme.ts