[Uptime] Update pings chart colors

x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx

@@ -16,14 +16,15 @@ import {
 } from '@elastic/charts';
 import { EuiEmptyPrompt, EuiTitle, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { HistogramDataPoint } from '../../../../common/graphql/types';
 import { getColorsMap } from './get_colors_map';
 import { getChartDateLabel } from '../../../lib/helper';
 import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
 import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
 import { ChartWrapper } from './chart_wrapper';
+import { UptimeSettingsContext } from '../../../contexts';
 
 export interface SnapshotHistogramProps {
   /**
@@ -34,14 +35,6 @@ export interface SnapshotHistogramProps {
    * The date/time for the end of the timespan.
    */
   absoluteEndDate: number;
-  /**
-   * The color value that is used to represent up checks.
-   */
-  successColor: string;
-  /**
-   * The color value that is used to represent down checks.
-   */
-  dangerColor: string;
 
   /**
    * Height is needed, since by defauly charts takes height of 100%
@@ -58,8 +51,6 @@ type Props = UptimeGraphQLQueryProps<SnapshotHistogramQueryResult> & SnapshotHis
 export const SnapshotHistogramComponent = ({
   absoluteStartDate,
   absoluteEndDate,
-  dangerColor,
-  successColor,
   data,
   loading = false,
   height,
@@ -107,6 +98,9 @@ export const SnapshotHistogramComponent = ({
   const downMonitorsName = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
     defaultMessage: 'Down Monitors',
   });
+
+  const { colors } = useContext(UptimeSettingsContext);
+
   const downSpecId = getSpecId(downMonitorsName);
 
   const upMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {
@@ -154,10 +148,12 @@ export const SnapshotHistogramComponent = ({
               })}
             />
             <BarSeries
-              customSeriesColors={getColorsMap(successColor, upSpecId)}
-              data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
-              id={upSpecId}
-              name={upMonitorsId}
+              customSeriesColors={getColorsMap(colors.danger, downSpecId)}
+              data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
+              id={downSpecId}
+              name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
+                defaultMessage: 'Down',
+              })}
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}
@@ -166,12 +162,10 @@ export const SnapshotHistogramComponent = ({
               yScaleType="linear"
             />
             <BarSeries
-              customSeriesColors={getColorsMap(dangerColor, downSpecId)}
-              data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
-              id={downSpecId}
-              name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
-                defaultMessage: 'Down',
-              })}
+              customSeriesColors={getColorsMap(colors.gray, upSpecId)}
+              data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
+              id={upSpecId}
+              name={upMonitorsId}
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}

x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx

@@ -64,8 +64,6 @@ export const MonitorChartsComponent = ({
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={{ dateRangeStart, dateRangeEnd, monitorId }}
               height="400px"
             />

x-pack/legacy/plugins/uptime/public/pages/overview.tsx

@@ -153,8 +153,6 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={sharedProps}
               height="120px"
             />

x-pack/legacy/plugins/uptime/public/uptime_app.tsx

@@ -26,6 +26,7 @@ import { store } from './state';
 export interface UptimeAppColors {
   danger: string;
   success: string;
+  gray: string;
   range: string;
   mean: string;
   warning: string;
@@ -67,6 +68,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiDarkVars.euiColorDanger,
       mean: euiDarkVars.euiColorPrimary,
+      gray: euiDarkVars.euiColorLightShade,
       range: euiDarkVars.euiFocusBackgroundColor,
       success: euiDarkVars.euiColorSuccess,
       warning: euiDarkVars.euiColorWarning,
@@ -75,6 +77,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiLightVars.euiColorDanger,
       mean: euiLightVars.euiColorPrimary,
+      gray: euiLightVars.euiColorLightShade,
       range: euiLightVars.euiFocusBackgroundColor,
       success: euiLightVars.euiColorSuccess,
       warning: euiLightVars.euiColorWarning,