From e981b55d9c1bfe51deec4a05849530baa0d6c458 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Wed, 11 Sep 2019 00:00:42 +0500 Subject: [PATCH] [Uptime]Fix/issue 40584 section headline should be inside panel (#43468) (#44879) * move title inside panel * fix monitor list title * update title in each panel and paddings * update unit tests snapshots * make section titles symmeteric * update snapshots * Add chart wrapper to improve UX experience and padding arounds charts * removed ping list count * removed unnecessary spacer * update test snaps --- .../monitor_charts.test.tsx.snap | 10 +- .../__snapshots__/ping_list.test.tsx.snap | 46 ++---- .../__snapshots__/snapshot.test.tsx.snap | 27 ++-- .../charts/chart_wrapper/chart_wrapper.tsx | 42 ++++++ .../functional/charts/chart_wrapper/index.ts | 6 + .../functional/charts/duration_chart.tsx | 81 ++++++----- .../functional/charts/snapshot_histogram.tsx | 137 ++++++++++-------- .../components/functional/monitor_charts.tsx | 15 +- .../__snapshots__/monitor_list.test.tsx.snap | 54 ++++--- .../functional/monitor_list/monitor_list.tsx | 20 +-- .../components/functional/ping_list.tsx | 30 ++-- .../public/components/functional/snapshot.tsx | 22 +-- .../plugins/uptime/public/pages/overview.tsx | 1 + 13 files changed, 275 insertions(+), 216 deletions(-) create mode 100644 x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx create mode 100644 x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts 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 623edbfbb07e..6f17de1e26c2 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 @@ -3,14 +3,9 @@ exports[`MonitorCharts component renders the component without errors 1`] = ` - + - - - -

- -

- - - - - 9231 - - - + +

+ +

+ + diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap index ee5dbe2817a3..416f2ab4e21d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap @@ -2,30 +2,31 @@ exports[`Snapshot component renders without errors 1`] = ` - -
- -
- + +
+ +
+ diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx new file mode 100644 index 000000000000..44b3cfba5d76 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx @@ -0,0 +1,42 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC, Fragment } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart } from '@elastic/eui'; + +interface Props { + height?: string; + loading?: boolean; +} + +export const ChartWrapper: FC = ({ loading = false, height = '100%', children }) => { + const opacity = loading === true ? 0.3 : 1; + + return ( + +
+ {children} +
+ {loading === true && ( + + + + + + )} + + ); +}; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts new file mode 100644 index 000000000000..249ebf0aa6d7 --- /dev/null +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +export { ChartWrapper } from './chart_wrapper'; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx index c140cf55dd6a..db0b0645d3a9 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx @@ -27,6 +27,7 @@ import { import { LocationDurationLine } from '../../../../common/graphql/types'; import { UptimeSettingsContext } from '../../../contexts'; import { getColorsMap } from './get_colors_map'; +import { ChartWrapper } from './chart_wrapper'; interface DurationChartProps { /** @@ -42,6 +43,11 @@ interface DurationChartProps { * The color to be used for the range duration series. */ rangeColor: string; + + /** + * To represent the loading spinner on chart + */ + loading: boolean; } /** @@ -54,6 +60,7 @@ export const DurationChart = ({ locationDurationLines, meanColor, rangeColor, + loading, }: DurationChartProps) => { const { absoluteStartDate, absoluteEndDate } = useContext(UptimeSettingsContext); // this id is used for the line chart representing the average duration length @@ -80,42 +87,44 @@ export const DurationChart = ({ return ( - -

- -

- - - - - - Number(d).toFixed(0)} - title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', { - defaultMessage: 'Duration ms', - })} - /> - {lineSeries} - + + +

+ +

+ + + + + + Number(d).toFixed(0)} + title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', { + defaultMessage: 'Duration ms', + })} + /> + {lineSeries} + + ); 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 032264a7d21a..e748f3797031 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 @@ -24,6 +24,7 @@ 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'; export interface SnapshotHistogramProps { /** @@ -42,6 +43,11 @@ export interface SnapshotHistogramProps { * The color value that is used to represent down checks. */ dangerColor: string; + + /** + * Height is needed, since by defauly charts takes height of 100% + */ + height?: string; } interface SnapshotHistogramQueryResult { @@ -56,6 +62,8 @@ export const SnapshotHistogramComponent = ({ dangerColor, successColor, data, + loading = false, + height, }: Props) => { if (!data || !data.histogram) /** @@ -108,68 +116,73 @@ export const SnapshotHistogramComponent = ({ const upSpecId = getSpecId(upMonitorsId); return ( - -
- -
- - - - - - - [x, upCount || 0])} - id={upSpecId} - name={upMonitorsId} - stackAccessors={[0]} - timeZone="local" - xAccessor={0} - xScaleType={ScaleType.Time} - yAccessors={[1]} - yScaleType={ScaleType.Linear} - /> - [x, downCount || 0])} - id={downSpecId} - name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', { - defaultMessage: 'Down', - })} - stackAccessors={[0]} - timeZone="local" - xAccessor={0} - xScaleType={ScaleType.Time} - yAccessors={[1]} - yScaleType={ScaleType.Linear} - /> - + + +
+ +
+ + + + + + + [x, upCount || 0])} + id={upSpecId} + name={upMonitorsId} + stackAccessors={[0]} + timeZone="local" + xAccessor={0} + xScaleType={ScaleType.Time} + yAccessors={[1]} + yScaleType={ScaleType.Linear} + /> + [x, downCount || 0])} + id={downSpecId} + name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', { + defaultMessage: 'Down', + })} + stackAccessors={[0]} + timeZone="local" + xAccessor={0} + xScaleType={ScaleType.Time} + yAccessors={[1]} + yScaleType={ScaleType.Linear} + /> + + ); 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 d32c5c053b0e..5dffe94045fb 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 @@ -32,8 +32,15 @@ interface MonitorChartsProps { type Props = MonitorChartsProps & UptimeGraphQLQueryProps; -export const MonitorChartsComponent = (props: Props) => { - const { data, mean, range, monitorId, dateRangeStart, dateRangeEnd } = props; +export const MonitorChartsComponent = ({ + data, + mean, + range, + monitorId, + dateRangeStart, + dateRangeEnd, + loading, +}: Props) => { if (data && data.monitorChartsData) { const { monitorChartsData: { locationDurationLines }, @@ -47,11 +54,12 @@ export const MonitorChartsComponent = (props: Props) => { return ( - + @@ -61,6 +69,7 @@ export const MonitorChartsComponent = (props: Props) => { successColor={colors.success} dangerColor={colors.danger} variables={{ dateRangeStart, dateRangeEnd, monitorId }} + height="400px" /> diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap index d83117dd538b..4af52c20678d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap +++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap @@ -2,22 +2,25 @@ exports[`MonitorList component renders a no items message when no data is provided 1`] = ` - -
- -
- + +
+ +
+ + - -
- -
- + +
+ +
+ + { return ( - -
- -
- - + + +
+ +
+ + hasHttpStatus || !!get(currentPing, 'http.response.status_code'), @@ -233,24 +231,16 @@ export const PingListComponent = ({ return ( - - - -

- -

- - - {!!total && ( - - {total} - - )} - - + + +

+ +

+ + diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx index c990146ceb62..1097e2e9f28c 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx @@ -26,18 +26,18 @@ interface SnapshotQueryResult { export const SnapshotComponent = ({ data }: UptimeGraphQLQueryProps) => data && data.snapshot ? ( - -
- -
- - - + + +
+ +
+ + - + diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index 4dd50f3e0338..8adad609e059 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx @@ -129,6 +129,7 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }: successColor={colors.success} dangerColor={colors.danger} variables={sharedProps} + height="120px" />