Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Uptime] Use EUI color palette for charts/histograms #29439

Merged
merged 5 commits into from
Jan 31, 2019
Merged

[Uptime] Use EUI color palette for charts/histograms #29439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
869b4bc
Add hardcoded eui primary/danger to charts/histograms.
justinkambic Jan 28, 2019
8ce3bfb
Use EUI JSON vars for color values.
justinkambic Jan 29, 2019
6565eb4
Merge branch 'master' into uptime_use-eui-colors
justinkambic Jan 29, 2019
9721607
Merge branch 'master' into uptime_use-eui-colors
justinkambic Jan 29, 2019
8b9c3de
Merge branch 'master' into uptime_use-eui-colors
justinkambic Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@ import { HistogramSeries } from '../../../common/graphql/types';
import { formatHistogramData } from '../../lib/adapters/monitors/format_histogram_data';

interface SnapshotHistogramProps {
primaryColor: string;
dangerColor: string;
histogram: HistogramSeries[];
}

export const SnapshotHistogram = ({ histogram }: SnapshotHistogramProps) => {
export const SnapshotHistogram = ({
dangerColor,
histogram,
primaryColor,
}: SnapshotHistogramProps) => {
const { upSeriesData, downSeriesData } = formatHistogramData(histogram);

return (
Expand All @@ -25,14 +31,14 @@ export const SnapshotHistogram = ({ histogram }: SnapshotHistogramProps) => {
name={i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {
defaultMessage: 'Up',
})}
color="green"
color={primaryColor}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be safe I always recommend pulling from the EuiVisColor series for anything chart related because they're targeted towards color blindess in charts. https://elastic.github.io/eui/#/guidelines/colors

The rest of this looks solid.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@snide the primaryColor value in this case is either euiDarkVars.euiColorVis1 or euiLightVars.euiColorVis1 - is that not an appropriate value to use?
https://github.com/elastic/kibana/pull/29439/files#diff-abd19a861ef67d295beeea16e5a44b0bR120
https://github.com/elastic/kibana/pull/29439/files#diff-abd19a861ef67d295beeea16e5a44b0bR126

/>
<EuiHistogramSeries
data={downSeriesData}
name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
defaultMessage: 'Down',
})}
color="red"
color={dangerColor}
/>
</EuiSeriesChart>
);
Expand Down
16 changes: 10 additions & 6 deletions x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {

public render() {
const {
colors: { primary, secondary, danger },
dateRangeStart,
dateRangeEnd,
monitorId,
Expand Down Expand Up @@ -75,13 +76,13 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {
// an object that contains these series already shaped in the way required by the visualizations.
const { monitorChartsData } = data;
const avgDurationSeries: any[] = [];
const areaRttSeries: any[] = [];
const areaDurationSeries: any[] = [];
const downSeries: any[] = [];
const upSeries: any[] = [];
const checksSeries: any[] = [];
monitorChartsData.forEach(({ avgDuration, maxDuration, minDuration, status }: any) => {
avgDurationSeries.push(avgDuration);
areaRttSeries.push({ x: minDuration.x, y0: minDuration.y, y: maxDuration.y });
areaDurationSeries.push({ x: minDuration.x, y0: minDuration.y, y: maxDuration.y });
downSeries.push({ x: status.x, y: status.down });
upSeries.push({ x: status.x, y: status.up });
checksSeries.push({ x: status.x, y: status.total });
Expand All @@ -91,7 +92,7 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {
// Without this code the chart could render data outside of the field.
const checksDomain = upSeries.concat(downSeries).map(({ y }) => y);
const checkDomainLimits = [0, Math.max(...checksDomain)];
const durationDomain = avgDurationSeries.concat(areaRttSeries);
const durationDomain = avgDurationSeries.concat(areaDurationSeries);
const durationDomainLimits = [0, Math.max(...durationDomain.map(({ y }) => y))];

return (
Expand Down Expand Up @@ -119,16 +120,18 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {
onCrosshairUpdate={this.updateCrosshairLocation}
>
<EuiAreaSeries
color={secondary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel',
{
defaultMessage: 'Duration range',
}
)}
data={areaRttSeries}
data={areaDurationSeries}
curve="curveBasis"
/>
<EuiLineSeries
color={primary}
name={i18n.translate(
'xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel',
{
Expand Down Expand Up @@ -168,7 +171,8 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {
}
)}
data={upSeries}
color="green"
curve="curveBasis"
color={primary}
/>
<EuiAreaSeries
name={i18n.translate(
Expand All @@ -178,7 +182,7 @@ export class MonitorCharts extends React.Component<Props, MonitorChartsState> {
}
)}
data={downSeries}
color="red"
color={danger}
/>
</EuiSeriesChart>
</EuiPanel>
Expand Down
190 changes: 98 additions & 92 deletions x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,97 +38,6 @@ type Props = MonitorListProps & UptimeCommonProps;

const MONITOR_LIST_DEFAULT_PAGINATION = 10;

const monitorListColumns = [
{
field: 'ping.monitor.status',
name: i18n.translate('xpack.uptime.monitorList.statusColumnLabel', {
defaultMessage: 'Status',
}),
render: (status: string) => (
<EuiHealth color={status === 'up' ? 'success' : 'danger'}>
{status === 'up'
? i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', {
defaultMessage: 'Up',
})
: i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', {
defaultMessage: 'Down',
})}
</EuiHealth>
),
sortable: true,
},
{
field: 'ping.timestamp',
name: i18n.translate('xpack.uptime.monitorList.lastUpdatedColumnLabel', {
defaultMessage: 'Last updated',
}),
render: (timestamp: string) => moment(timestamp).fromNow(),
sortable: true,
},
{
field: 'ping.monitor.id',
name: i18n.translate('xpack.uptime.monitorList.idColumnLabel', {
defaultMessage: 'ID',
}),
render: (id: string, item: LatestMonitor) => (
<Link to={`/monitor/${id}`}>
{item.ping && item.ping.monitor && item.ping.monitor.name ? item.ping.monitor.name : id}
</Link>
),
},
{
field: 'ping.url.full',
name: i18n.translate('xpack.uptime.monitorList.urlColumnLabel', {
defaultMessage: 'URL',
}),
render: (url: string, monitor: any) => (
<EuiLink href={url} target="_blank">
{url}
</EuiLink>
),
},
{
field: 'ping.monitor.ip',
name: i18n.translate('xpack.uptime.monitorList.ipColumnLabel', { defaultMessage: 'IP' }),
sortable: true,
},
{
field: 'upSeries',
name: i18n.translate('xpack.uptime.monitorList.monitorHistoryColumnLabel', {
defaultMessage: 'Monitor History',
}),
// @ts-ignore TODO fix typing
render: (upSeries, monitor) => {
const { downSeries } = monitor;
return (
<EuiSeriesChart
showDefaultAxis={false}
height={70}
stackBy="y"
// TODO: style hack
style={{ marginBottom: '-20px' }}
xType={EuiSeriesChartUtils.SCALE.TIME}
>
<EuiHistogramSeries
data={formatSparklineCounts(downSeries)}
name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
defaultMessage: 'Down',
})}
color="red"
/>
<EuiHistogramSeries
data={formatSparklineCounts(upSeries)}
name={i18n.translate('xpack.uptime.monitorList.upLineSeries.upLabel', {
defaultMessage: 'Up',
})}
color="green"
/>
</EuiSeriesChart>
);
},
},
];

const monitorListPagination = {
initialPageSize: MONITOR_LIST_DEFAULT_PAGINATION,
pageSizeOptions: [5, 10, 20, 50],
Expand All @@ -137,6 +46,7 @@ const monitorListPagination = {
export const MonitorList = ({
autorefreshInterval,
autorefreshIsPaused,
colors: { danger, primary },
dateRangeStart,
dateRangeEnd,
filters,
Expand Down Expand Up @@ -167,7 +77,103 @@ export const MonitorList = ({
</EuiTitle>
<EuiPanel paddingSize="l">
<EuiInMemoryTable
columns={monitorListColumns}
columns={[
{
field: 'ping.monitor.status',
name: i18n.translate('xpack.uptime.monitorList.statusColumnLabel', {
defaultMessage: 'Status',
}),
render: (status: string) => (
<EuiHealth color={status === 'up' ? 'success' : 'danger'}>
{status === 'up'
? i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', {
defaultMessage: 'Up',
})
: i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', {
defaultMessage: 'Down',
})}
</EuiHealth>
),
sortable: true,
},
{
field: 'ping.timestamp',
name: i18n.translate('xpack.uptime.monitorList.lastUpdatedColumnLabel', {
defaultMessage: 'Last updated',
}),
render: (timestamp: string) => moment(timestamp).fromNow(),
sortable: true,
},
{
field: 'ping.monitor.id',
name: i18n.translate('xpack.uptime.monitorList.idColumnLabel', {
defaultMessage: 'ID',
}),
render: (id: string, monitor: LatestMonitor) => (
<Link to={`/monitor/${id}`}>
{monitor.ping && monitor.ping.monitor && monitor.ping.monitor.name
? monitor.ping.monitor.name
: id}
</Link>
),
},
{
field: 'ping.url.full',
name: i18n.translate('xpack.uptime.monitorList.urlColumnLabel', {
defaultMessage: 'URL',
}),
render: (url: string) => (
<EuiLink href={url} target="_blank">
{url}
</EuiLink>
),
},
{
field: 'ping.monitor.ip',
name: i18n.translate('xpack.uptime.monitorList.ipColumnLabel', {
defaultMessage: 'IP',
}),
sortable: true,
},
{
field: 'upSeries',
name: i18n.translate('xpack.uptime.monitorList.monitorHistoryColumnLabel', {
defaultMessage: 'Monitor History',
}),
// @ts-ignore TODO fix typing
render: (upSeries, monitor) => {
const { downSeries } = monitor;
return (
<EuiSeriesChart
showDefaultAxis={false}
height={70}
stackBy="y"
// TODO: style hack
style={{ marginBottom: '-20px' }}
xType={EuiSeriesChartUtils.SCALE.TIME}
>
<EuiHistogramSeries
data={formatSparklineCounts(downSeries)}
name={i18n.translate(
'xpack.uptime.monitorList.downLineSeries.downLabel',
{
defaultMessage: 'Down',
}
)}
color={danger}
/>
<EuiHistogramSeries
data={formatSparklineCounts(upSeries)}
name={i18n.translate('xpack.uptime.monitorList.upLineSeries.upLabel', {
defaultMessage: 'Up',
})}
color={primary}
/>
</EuiSeriesChart>
);
},
},
]}
loading={loading}
items={monitors}
pagination={monitorListPagination}
Expand Down
13 changes: 10 additions & 3 deletions x-pack/plugins/uptime/public/components/queries/snapshot/snapshot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,11 @@ interface SnapshotProps {
type Props = SnapshotProps & UptimeCommonProps;

export const Snapshot = ({
dateRangeStart,
dateRangeEnd,
autorefreshIsPaused,
autorefreshInterval,
colors: { danger, primary },
dateRangeStart,
dateRangeEnd,
filters,
}: Props) => (
<Query
Expand Down Expand Up @@ -128,7 +129,13 @@ export const Snapshot = ({
</EuiTitle>
{/* TODO: this is a UI hack that should be replaced */}
<EuiPanel paddingSize="s">
{histogram && <SnapshotHistogram histogram={histogram} />}
{histogram && (
<SnapshotHistogram
dangerColor={danger}
primaryColor={primary}
histogram={histogram}
/>
)}
{!histogram && (
<EuiEmptyPrompt
title={
Expand Down
10 changes: 6 additions & 4 deletions x-pack/plugins/uptime/public/lib/adapters/framework/kibana_framework_adapter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { unmountComponentAtNode } from 'react-dom';
import chrome from 'ui/chrome';
import { PLUGIN } from '../../../../common/constants';
import { UMBreadcrumb } from '../../../breadcrumbs';
import { UptimeCommonProps } from '../../../uptime_app';
import { UptimePersistedState } from '../../../uptime_app';
import { BootstrapUptimeApp, UMFrameworkAdapter } from '../../lib';
import { CreateGraphQLClient } from './framework_adapter_types';

Expand Down Expand Up @@ -61,6 +61,7 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
? `${basePath}/${PLUGIN.ROUTER_BASE_NAME}`
: basePath + PLUGIN.ROUTER_BASE_NAME;
const persistedState = this.initializePersistedState();
const darkMode = config.get('theme:darkMode', false) || false;
const {
autorefreshIsPaused,
autorefreshInterval,
Expand All @@ -69,6 +70,7 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
} = persistedState;
ReactDOM.render(
renderComponent({
darkMode,
isUsingK7Design: $scope.k7design,
updateBreadcrumbs: chrome.breadcrumbs.set,
kibanaBreadcrumbs,
Expand Down Expand Up @@ -108,9 +110,9 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
});
};

private initializePersistedState = (): UptimeCommonProps => {
private initializePersistedState = (): UptimePersistedState => {
const uptimeConfigurationData = window.localStorage.getItem(PLUGIN.LOCAL_STORAGE_KEY);
const defaultState: UptimeCommonProps = {
const defaultState: UptimePersistedState = {
autorefreshIsPaused: this.defaultAutorefreshIsPaused,
autorefreshInterval: this.defaultAutorefreshInterval,
dateRangeStart: this.defaultDateRangeStart,
Expand Down Expand Up @@ -141,7 +143,7 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
return defaultState;
};

private updatePersistedState = (state: UptimeCommonProps) => {
private updatePersistedState = (state: UptimePersistedState) => {
window.localStorage.setItem(PLUGIN.LOCAL_STORAGE_KEY, JSON.stringify(state));
};
}
Loading