github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Uptime]Fix/issue 40584 section headline should be inside panel (#43468) (#44879)

Browse source 
* 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
This commit is contained in:
Shahzad 2019-09-11 00:00:42 +05:00 • committed by GitHub
parent bb2a156b21
commit e981b55d9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 275 additions and 216 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap generated
View file

@ -3,14 +3,9 @@
exports[`MonitorCharts component renders the component without errors 1`] = `
<Fragment>
<EuiFlexGroup>
<EuiFlexItem
style={
Object {
"height": 400,
}
}
>
<EuiFlexItem>
<DurationChart
loading={false}
locationDurationLines={
Array [
Object {
@ -73,6 +68,7 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
absoluteEndDate={1322903730000}
absoluteStartDate={1322903730000}
dangerColor="#bd271e"
height="400px"
successColor="#017d73"
variables={
Object {

46
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap generated
View file

@ -2,41 +2,25 @@
exports[`PingList component renders sorted list without errors 1`] = `
<Fragment>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
responsive={false}
>
<EuiFlexItem
grow={false}
>
<EuiTitle
size="xs"
>
<h4>
<FormattedMessage
defaultMessage="History"
id="xpack.uptime.pingList.checkHistoryTitle"
values={Object {}}
/>
</h4>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiBadge
color="hollow"
>
9231
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="s"
paddingSize="m"
>
<EuiTitle
size="xs"
>
<h4>
<FormattedMessage
defaultMessage="History"
id="xpack.uptime.pingList.checkHistoryTitle"
values={Object {}}
/>
</h4>
</EuiTitle>
<EuiSpacer
size="s"
/>
<EuiFlexGroup
justifyContent="spaceBetween"
>

27
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap generated
View file

@ -2,30 +2,31 @@
exports[`Snapshot component renders without errors 1`] = `
<Fragment>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Current status"
id="xpack.uptime.snapshot.endpointStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="s"
paddingSize="m"
>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Current status"
id="xpack.uptime.snapshot.endpointStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiFlexGroup
direction="column"
gutterSize="m"
>
<EuiFlexItem
grow={false}
>
<EuiSpacer
size="s"
size="xs"
/>
</EuiFlexItem>
<EuiFlexItem>

42
x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx Normal file
View file

@ -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<Props> = ({ loading = false, height = '100%', children }) => {
const opacity = loading === true ? 0.3 : 1;
return (
<Fragment>
<div
style={{
height,
opacity,
transition: 'opacity 0.2s',
}}
>
{children}
</div>
{loading === true && (
<EuiFlexGroup
justifyContent="spaceAround"
alignItems="center"
style={{ height, marginTop: `-${height}` }}
>
<EuiFlexItem grow={false}>
<EuiLoadingChart size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
)}
</Fragment>
);
};

6
x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts Normal file
View file

@ -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';

81
x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
View file

@ -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 (
<React.Fragment>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
defaultMessage="Monitor duration"
description="The 'ms' is an abbreviation for milliseconds."
/>
</h4>
</EuiTitle>
<EuiPanel style={{ height: '170px' }}>
<Chart>
<Settings
xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
showLegend={true}
legendPosition={Position.Bottom}
/>
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
defaultMessage: 'Timestamp',
})}
/>
<Axis
domain={{ min: 0 }}
id={getAxisId('left')}
position={Position.Left}
tickFormat={d => Number(d).toFixed(0)}
title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
defaultMessage: 'Duration ms',
})}
/>
{lineSeries}
</Chart>
<EuiPanel paddingSize="m">
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
defaultMessage="Monitor duration"
description="The 'ms' is an abbreviation for milliseconds."
/>
</h4>
</EuiTitle>
<ChartWrapper height="400px" loading={loading}>
<Chart>
<Settings
xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
showLegend={true}
legendPosition={Position.Bottom}
/>
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
defaultMessage: 'Timestamp',
})}
/>
<Axis
domain={{ min: 0 }}
id={getAxisId('left')}
position={Position.Left}
tickFormat={d => Number(d).toFixed(0)}
title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
defaultMessage: 'Duration ms',
})}
/>
{lineSeries}
</Chart>
</ChartWrapper>
</EuiPanel>
</React.Fragment>
);

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

@ -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 (
<Fragment>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.pingsOverTimeTitle"
defaultMessage="Pings over time"
/>
</h5>
</EuiTitle>
<EuiPanel paddingSize="s" style={{ height: 170 }}>
<Chart>
<Settings xDomain={{ min: absoluteStartDate, max: absoluteEndDate }} showLegend={false} />
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
defaultMessage: 'Snapshot X Axis',
})
)}
position={Position.Bottom}
showOverlappingTicks={false}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
/>
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
defaultMessage: 'Snapshot Y Axis',
})
)}
position={Position.Left}
showOverlappingTicks={true}
title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
defaultMessage: 'Pings',
description:
'The label on the y-axis of a chart that displays the number of times Heartbeat has pinged a set of services/websites.',
})}
/>
<BarSeries
customSeriesColors={getColorsMap(successColor, upSpecId)}
data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
id={upSpecId}
name={upMonitorsId}
stackAccessors={[0]}
timeZone="local"
xAccessor={0}
xScaleType={ScaleType.Time}
yAccessors={[1]}
yScaleType={ScaleType.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',
})}
stackAccessors={[0]}
timeZone="local"
xAccessor={0}
xScaleType={ScaleType.Time}
yAccessors={[1]}
yScaleType={ScaleType.Linear}
/>
</Chart>
<EuiPanel paddingSize="m">
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.pingsOverTimeTitle"
defaultMessage="Pings over time"
/>
</h5>
</EuiTitle>
<ChartWrapper height={height} loading={loading}>
<Chart>
<Settings
xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
showLegend={false}
/>
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
defaultMessage: 'Snapshot X Axis',
})
)}
position={Position.Bottom}
showOverlappingTicks={false}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
/>
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
defaultMessage: 'Snapshot Y Axis',
})
)}
position={Position.Left}
showOverlappingTicks={true}
title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
defaultMessage: 'Pings',
description:
'The label on the y-axis of a chart that displays the number of times Heartbeat has pinged a set of services/websites.',
})}
/>
<BarSeries
customSeriesColors={getColorsMap(successColor, upSpecId)}
data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
id={upSpecId}
name={upMonitorsId}
stackAccessors={[0]}
timeZone="local"
xAccessor={0}
xScaleType={ScaleType.Time}
yAccessors={[1]}
yScaleType={ScaleType.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',
})}
stackAccessors={[0]}
timeZone="local"
xAccessor={0}
xScaleType={ScaleType.Time}
yAccessors={[1]}
yScaleType={ScaleType.Linear}
/>
</Chart>
</ChartWrapper>
</EuiPanel>
</Fragment>
);

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

@ -32,8 +32,15 @@ interface MonitorChartsProps {
type Props = MonitorChartsProps & UptimeGraphQLQueryProps<MonitorChartsQueryResult>;
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 (
<Fragment>
<EuiFlexGroup>
<EuiFlexItem style={{ height: 400 }}>
<EuiFlexItem>
<DurationChart
locationDurationLines={locationDurationLines}
meanColor={mean}
rangeColor={range}
loading={loading}
/>
</EuiFlexItem>
<EuiFlexItem>
@ -61,6 +69,7 @@ export const MonitorChartsComponent = (props: Props) => {
successColor={colors.success}
dangerColor={colors.danger}
variables={{ dateRangeStart, dateRangeEnd, monitorId }}
height="400px"
/>
</EuiFlexItem>
</EuiFlexGroup>

54
x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap generated
View file

@ -2,22 +2,25 @@
exports[`MonitorList component renders a no items message when no data is provided 1`] = `
<Fragment>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Monitor status"
id="xpack.uptime.monitorList.monitoringStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="s"
paddingSize="m"
>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Monitor status"
id="xpack.uptime.monitorList.monitoringStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiSpacer
size="s"
/>
<EuiBasicTable
columns={
Array [
@ -76,22 +79,25 @@ exports[`MonitorList component renders a no items message when no data is provid
exports[`MonitorList component renders the monitor list 1`] = `
<Fragment>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Monitor status"
id="xpack.uptime.monitorList.monitoringStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="s"
paddingSize="m"
>
<EuiTitle
size="xs"
>
<h5>
<FormattedMessage
defaultMessage="Monitor status"
id="xpack.uptime.monitorList.monitoringStatusTitle"
values={Object {}}
/>
</h5>
</EuiTitle>
<EuiSpacer
size="s"
/>
<EuiBasicTable
columns={
Array [

20
x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiBasicTable, EuiPanel, EuiTitle, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
import { EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { get } from 'lodash';
@ -91,15 +92,16 @@ export const MonitorListComponent = (props: Props) => {
return (
<Fragment>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.monitorList.monitoringStatusTitle"
defaultMessage="Monitor status"
/>
</h5>
</EuiTitle>
<EuiPanel paddingSize="s">
<EuiPanel>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.monitorList.monitoringStatusTitle"
defaultMessage="Monitor status"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<EuiBasicTable
error={errors ? formatUptimeGraphQLErrorList(errors) : errors}
loading={loading}

30
x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx
View file

@ -182,10 +182,8 @@ export const PingListComponent = ({
onUpdateApp();
}, [selectedOption]);
let pings: Ping[] = [];
let total: number = 0;
if (data && data.allPings && data.allPings.pings) {
pings = data.allPings.pings;
total = data.allPings.total;
const hasStatus: boolean = pings.reduce(
(hasHttpStatus: boolean, currentPing: Ping) =>
hasHttpStatus || !!get(currentPing, 'http.response.status_code'),
@ -233,24 +231,16 @@ export const PingListComponent = ({
return (
<Fragment>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.pingList.checkHistoryTitle"
defaultMessage="History"
/>
</h4>
</EuiTitle>
</EuiFlexItem>
{!!total && (
<EuiFlexItem grow={false}>
<EuiBadge color="hollow">{total}</EuiBadge>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiPanel paddingSize="s">
<EuiPanel>
<EuiTitle size="xs">
<h4>
<FormattedMessage
id="xpack.uptime.pingList.checkHistoryTitle"
defaultMessage="History"
/>
</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup>

22
x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
View file

@ -26,18 +26,18 @@ interface SnapshotQueryResult {
export const SnapshotComponent = ({ data }: UptimeGraphQLQueryProps<SnapshotQueryResult>) =>
data && data.snapshot ? (
<React.Fragment>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.endpointStatusTitle"
defaultMessage="Current status"
/>
</h5>
</EuiTitle>
<EuiPanel paddingSize="s">
<EuiFlexGroup direction="column">
<EuiPanel>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.endpointStatusTitle"
defaultMessage="Current status"
/>
</h5>
</EuiTitle>
<EuiFlexGroup direction="column" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
<EuiSpacer size="xs" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceEvenly" gutterSize="s">

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

@ -129,6 +129,7 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
successColor={colors.success}
dangerColor={colors.danger}
variables={sharedProps}
height="120px"
/>
</EuiFlexItem>
</EuiFlexGroup>