From c9cd9878d4f53d5d1bacb8afe24599a58702279b 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 1272e939e4b43..d915bcb72e05e 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 54aa6f8cf1644..50ae8e49fe86b 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 1d18919d5c473..51c58a871d0e7 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 97b1555efdd1e..0fd9be952ed40 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 86bd98195ca88..3bd09bcba143c 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx @@ -153,8 +153,6 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }: diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 4255fdf99aa5c..9df173378d16e 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/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,