chore(synthetics): Borealis support (elastic#204488)

CAWilson94 · Jan 10, 2025 · 868da41 · 868da41
1 parent bdb0d0d
commit 868da41
Show file tree

Hide file tree

Showing 23 changed files with 198 additions and 171 deletions.
diff --git a/x-pack/solutions/observability/plugins/synthetics/kibana.jsonc b/x-pack/solutions/observability/plugins/synthetics/kibana.jsonc
@@ -40,7 +40,8 @@
       "usageCollection",
       "uiActions",
       "unifiedSearch",
-      "presentationUtil"
+      "presentationUtil",
+      "charts"
     ],
     "optionalPlugins": [
       "cloud",

diff --git a/...s/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_data.ts b/...s/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_data.ts
@@ -83,7 +83,7 @@ export function getSkippedVizColor(euiTheme: EuiThemeComputed) {
 }
 
 export function getErrorVizColor(euiTheme: EuiThemeComputed) {
-  return euiTheme.colors.dangerText;
+  return euiTheme.colors.textDanger;
 }
 
 export function getXAxisLabelFormatter(interval: number) {

diff --git a/...ic/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx b/...ic/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 
-import React from 'react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
-import { AVAILABILITY_LABEL } from './availability_panel';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React from 'react';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
+import { AVAILABILITY_LABEL } from './availability_panel';
 
 interface AvailabilitySparklinesProps {
   from: string;
@@ -26,8 +26,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
     },
   } = useKibana<ClientPluginsStart>();
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
-
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   if (!queryIdFilter) {
     return null;
@@ -50,7 +49,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
           selectedMetricField: 'monitor_availability',
           reportDefinitions: queryIdFilter,
           filters: locationFilter,
-          color: theme.eui.euiColorVis1,
+          color: euiTheme.colors.vis.euiColorVis1,
         },
       ]}
     />

diff --git a/...public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx b/...public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 
-import React from 'react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
-import { MEDIAN_DURATION_LABEL } from './duration_panel';
-import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React from 'react';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
+import { MEDIAN_DURATION_LABEL } from './duration_panel';
 
 interface DurationSparklinesProps {
   from: string;
@@ -26,7 +26,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
     },
   } = useKibana<ClientPluginsStart>();
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   if (!queryIdFilter) {
     return null;
@@ -49,7 +49,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
             selectedMetricField: 'monitor.duration.us',
             reportDefinitions: queryIdFilter,
             filters: locationFilter,
-            color: theme.eui.euiColorVis1,
+            color: euiTheme.colors.vis.euiColorVis1,
           },
         ]}
       />

diff --git a/...tics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/...tics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -5,23 +5,24 @@
  * 2.0.
  */
 
-import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSkeletonText,
   EuiPanel,
+  EuiSkeletonText,
   EuiText,
   EuiTitle,
+  euiPaletteColorBlindBehindText,
+  useEuiTheme,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useSelectedLocation } from '../hooks/use_selected_location';
+import React from 'react';
+import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 import { AlertActions } from './alert_actions';
-import { ClientPluginsStart } from '../../../../../plugin';
 
 const MONITOR_STATUS_RULE = {
   'kibana.alert.rule.category': ['Synthetics monitor status'],
@@ -40,7 +41,8 @@ export const MonitorAlerts = ({
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
 
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
   const selectedLocation = useSelectedLocation();
@@ -145,7 +147,9 @@ export const MonitorAlerts = ({
                   { field: 'kibana.alert.status', values: ['active'] },
                   ...(locationFilter ?? []),
                 ],
-                color: theme.eui.euiColorVis7_behindText,
+                color: isAmsterdam
+                  ? euiPaletteColorBlindBehindText()[7]
+                  : euiTheme.colors.vis.euiColorVis7,
               },
             ]}
           />
@@ -198,7 +202,9 @@ export const MonitorAlerts = ({
                   { field: 'kibana.alert.status', values: ['recovered'] },
                   ...(locationFilter ?? []),
                 ],
-                color: theme.eui.euiColorVis0_behindText,
+                color: isAmsterdam
+                  ? euiPaletteColorBlindBehindText()[0]
+                  : euiTheme.colors.vis.euiColorVis0,
               },
             ]}
           />

diff --git a/...c/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx b/...c/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
@@ -7,7 +7,7 @@
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React, { useMemo } from 'react';
-import { useEuiTheme } from '@elastic/eui';
+import { euiPaletteColorBlindBehindText, useEuiTheme } from '@elastic/eui';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
 import { ERRORS_LABEL } from './monitor_errors_count';
 import { ClientPluginsStart } from '../../../../../plugin';
@@ -23,6 +23,7 @@ export const MonitorErrorSparklines = ({ from, to, id }: Props) => {
   } = useKibana<ClientPluginsStart>().services;
 
   const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
 
   const time = useMemo(() => ({ from, to }), [from, to]);
@@ -47,8 +48,10 @@ export const MonitorErrorSparklines = ({ from, to, id }: Props) => {
           dataType: 'synthetics',
           selectedMetricField: 'monitor_errors',
           name: ERRORS_LABEL,
-          color: euiTheme.colors.danger,
           operationType: 'unique_count',
+          color: isAmsterdam
+            ? euiPaletteColorBlindBehindText()[1]
+            : euiTheme.colors.vis.euiColorVis6,
         },
       ]}
     />

diff --git a/...ublic/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx b/...ublic/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import React, { useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React, { useMemo } from 'react';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
 
 interface MonitorErrorsCountProps {
   from: string;
@@ -22,7 +23,8 @@ export const MonitorErrorsCount = ({ from, to, id }: MonitorErrorsCountProps) =>
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
-
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
 
   const time = useMemo(() => ({ from, to }), [from, to]);
@@ -45,6 +47,7 @@ export const MonitorErrorsCount = ({ from, to, id }: MonitorErrorsCountProps) =>
           selectedMetricField: 'monitor_errors',
           name: ERRORS_LABEL,
           filters: locationFilter,
+          color: isAmsterdam ? euiTheme.colors.vis.euiColorVis1 : euiTheme.colors.vis.euiColorVis6,
         },
       ]}
     />

diff --git a/...s/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx b/...s/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
+import { useEuiTheme } from '@elastic/eui';
 import React from 'react';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { OverviewStatusState, ServiceLocations } from '../../../../../../../common/runtime_types';
 import { LocationStatusBadges } from '../../../common/components/location_status_badges';
-import { ServiceLocations, OverviewStatusState } from '../../../../../../../common/runtime_types';
 
 interface Props {
   locations: ServiceLocations;
@@ -17,22 +17,21 @@ interface Props {
 }
 
 export const MonitorLocations = ({ locations, monitorId, overviewStatus }: Props) => {
-  const {
-    eui: { euiColorVis9, euiColorVis0, euiColorDisabled },
-  } = useTheme();
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
 
   const locationsToDisplay = locations.map((loc) => {
     const locById = `${monitorId}-${loc.id}`;
 
     let status: string = 'unknown';
-    let color = euiColorDisabled;
+    let color = euiTheme.colors.disabled;
 
     if (overviewStatus?.downConfigs[locById]) {
       status = 'down';
-      color = euiColorVis9;
+      color = isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.danger;
     } else if (overviewStatus?.upConfigs[locById]) {
       status = 'up';
-      color = euiColorVis0;
+      color = isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.success;
     }
 
     return {

diff --git a/...c/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx b/...c/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx
@@ -5,23 +5,21 @@
  * 2.0.
  */
 
-import React from 'react';
-
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
-
-import { useMonitorFilters } from '../../hooks/use_monitor_filters';
-import { useRefreshedRange } from '../../../../hooks';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React from 'react';
 import { ClientPluginsStart } from '../../../../../../plugin';
-import * as labels from '../labels';
+import { useRefreshedRange } from '../../../../hooks';
+import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
+import * as labels from '../labels';
 
 export const MonitorTestRunsCount = () => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const { from, to } = useRefreshedRange(30, 'days');
   const filters = useMonitorFilters({});
@@ -42,7 +40,7 @@ export const MonitorTestRunsCount = () => {
           dataType: 'synthetics',
           selectedMetricField: 'monitor_total_runs',
           name: labels.TEST_RUNS_LABEL,
-          color: theme.eui.euiColorVis1,
+          color: euiTheme.colors.vis.euiColorVis1,
         },
       ]}
     />

diff --git a/...thetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx b/...thetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx
@@ -5,23 +5,20 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
-
+import { useEuiTheme } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
-
-import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
-import { useMonitorFilters } from '../../hooks/use_monitor_filters';
-import { useRefreshedRange } from '../../../../hooks';
+import React, { useMemo } from 'react';
 import { ClientPluginsStart } from '../../../../../../plugin';
+import { useRefreshedRange } from '../../../../hooks';
+import { useMonitorFilters } from '../../hooks/use_monitor_filters';
+import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
 import * as labels from '../labels';
 
 export const MonitorTestRunsSparkline = () => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
-
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const { from, to } = useRefreshedRange(30, 'days');
   const filters = useMonitorFilters({});
@@ -39,12 +36,12 @@ export const MonitorTestRunsSparkline = () => {
         selectedMetricField: 'total_test_runs',
         filters,
         name: labels.TEST_RUNS_LABEL,
-        color: theme.eui.euiColorVis1,
+        color: euiTheme.colors.vis.euiColorVis1,
         operationType: 'count',
       },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [from, theme.eui.euiColorVis1, to]);
+  }, [from, euiTheme.colors.vis.euiColorVis1, to]);
 
   return (
     <ExploratoryViewEmbeddable