From e11fac04a285b9e2ea939851e8b0e93ce970a923 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 3 Oct 2019 15:36:03 +0500 Subject: [PATCH] [Uptime] Update pings chart colors (#46780) * update pings chart colors * update snaps * update snaps * update snaps --- .../monitor_charts.test.tsx.snap | 2 -- .../__tests__/snapshot_histogram.test.tsx | 2 -- .../functional/charts/snapshot_histogram.tsx | 36 ++++++++----------- .../components/functional/monitor_charts.tsx | 6 +--- .../contexts/uptime_settings_context.ts | 1 + .../plugins/uptime/public/pages/overview.tsx | 2 -- .../plugins/uptime/public/uptime_app.tsx | 3 ++ 7 files changed, 20 insertions(+), 32 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap index 1272e939e4b43e..d915bcb72e05eb 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap @@ -67,9 +67,7 @@ exports[`MonitorCharts component renders the component without errors 1`] = ` { 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 index 54aa6f8cf16443..50ae8e49fe86b3 100644 --- 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 & 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 = ({ })} /> [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" /> [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 index 1d18919d5c473c..51c58a871d0e7a 100644 --- 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 = ({ 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 index 97b1555efdd1e8..0fd9be952ed401 100644 --- 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 index 150d74b196743d..618933cbaa1a14 100644 --- 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 = ({ diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 07a3d8ada6c7b5..284d46325ff0dd 100644 --- 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,