[Uptime] Update pings chart colors (elastic#46780)

* update pings chart colors * update snaps * update snaps * update snaps
shahzad31 · Oct 11, 2019 · e11fac0 · e11fac0
1 parent 6c57768
commit e11fac0
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 32 deletions.
diff --git a/.../uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap b/.../uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
diff --git a/.../plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx b/.../plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx
@@ -12,8 +12,6 @@ describe('SnapshotHistogram component', () => {
   const props: SnapshotHistogramProps = {
     absoluteStartDate: 1548697920000,
     absoluteEndDate: 1548700920000,
-    successColor: '#FEFEFE',
-    dangerColor: '#FF00FF',
   };
 
   it('renders the component without errors', () => {

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/charts';
 import { EuiEmptyPrompt, EuiTitle, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import { HistogramDataPoint } from '../../../../common/graphql/types';
@@ -25,6 +25,7 @@ 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 {
   /**
@@ -35,14 +36,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 default charts takes height of 100%
@@ -59,8 +52,6 @@ type Props = UptimeGraphQLQueryProps<SnapshotHistogramQueryResult> & SnapshotHis
 export const SnapshotHistogramComponent = ({
   absoluteStartDate,
   absoluteEndDate,
-  dangerColor,
-  successColor,
   data,
   loading = false,
   height,
@@ -108,6 +99,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', {
@@ -166,10 +160,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}
@@ -178,12 +174,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}

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
@@ -6,12 +6,11 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment } from 'react';
 import { MonitorChart } from '../../../common/graphql/types';
 import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
 import { monitorChartsQuery } from '../../queries';
 import { DurationChart } from './charts';
-import { UptimeSettingsContext } from '../../contexts';
 import { SnapshotHistogram } from './charts/snapshot_histogram';
 import { useUrlParams } from '../../hooks';
 
@@ -45,7 +44,6 @@ export const MonitorChartsComponent = ({
       monitorChartsData: { locationDurationLines },
     } = data;
 
-    const { colors } = useContext(UptimeSettingsContext);
     const [getUrlParams] = useUrlParams();
     const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
 
@@ -64,8 +62,6 @@ export const MonitorChartsComponent = ({
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={{ dateRangeStart, dateRangeEnd, monitorId }}
               height="400px"
             />

diff --git a/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts b/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts
@@ -54,6 +54,7 @@ const defaultContext: UMSettingsContextValues = {
     range: euiLightVars.euiFocusBackgroundColor,
     success: euiLightVars.euiColorSuccess,
     warning: euiLightVars.euiColorWarning,
+    gray: euiLightVars.euiColorLightShade,
   },
   dateRangeStart: DATE_RANGE_START,
   dateRangeEnd: DATE_RANGE_END,

diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -161,8 +161,6 @@ export const OverviewPage = ({
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={sharedProps}
               height="120px"
             />

diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
@@ -25,6 +25,7 @@ import { store } from './state';
 export interface UptimeAppColors {
   danger: string;
   success: string;
+  gray: string;
   range: string;
   mean: string;
   warning: string;
@@ -73,6 +74,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiDarkVars.euiColorDanger,
       mean: euiDarkVars.euiColorPrimary,
+      gray: euiDarkVars.euiColorLightShade,
       range: euiDarkVars.euiFocusBackgroundColor,
       success: euiDarkVars.euiColorSuccess,
       warning: euiDarkVars.euiColorWarning,
@@ -81,6 +83,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiLightVars.euiColorDanger,
       mean: euiLightVars.euiColorPrimary,
+      gray: euiLightVars.euiColorLightShade,
       range: euiLightVars.euiFocusBackgroundColor,
       success: euiLightVars.euiColorSuccess,
       warning: euiLightVars.euiColorWarning,