From 869b4bc9b1ccaafe6a94244db06eb19567e9bf5d Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 28 Jan 2019 11:23:39 -0500 Subject: [PATCH 1/2] Add hardcoded eui primary/danger to charts/histograms. --- .../public/components/functional/snapshot_histogram.tsx | 4 ++-- .../components/queries/monitor_charts/monitor_charts.tsx | 4 ++-- .../public/components/queries/monitor_list/monitor_list.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx b/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx index 4d78d0f70c94d..e1baef06adc81 100644 --- a/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx +++ b/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx @@ -25,14 +25,14 @@ export const SnapshotHistogram = ({ histogram }: SnapshotHistogramProps) => { name={i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', { defaultMessage: 'Up', })} - color="green" + color="#006BB4" /> ); diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx index b209b92ad5b3a..02c88771c4b1b 100644 --- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx +++ b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx @@ -270,7 +270,7 @@ export class MonitorCharts extends React.Component { } )} data={upSeries} - color="green" + color="#006BB4" /> { } )} data={downSeries} - color="red" + color="#BD271E" /> diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx index 670085a0c43ed..51429eb82197e 100644 --- a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx @@ -110,14 +110,14 @@ const monitorListColumns = [ name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', { defaultMessage: 'Down', })} - color="red" + color="#BD271E" /> ); From 8ce3bfba19c0d2c7cc589ff1a60b7715cf20fb67 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 29 Jan 2019 11:04:44 -0500 Subject: [PATCH 2/2] Use EUI JSON vars for color values. --- .../functional/snapshot_histogram.tsx | 12 +- .../queries/monitor_charts/monitor_charts.tsx | 9 +- .../queries/monitor_list/monitor_list.tsx | 182 +++++++++--------- .../components/queries/snapshot/snapshot.tsx | 13 +- .../framework/kibana_framework_adapter.ts | 10 +- x-pack/plugins/uptime/public/uptime_app.tsx | 51 ++++- 6 files changed, 169 insertions(+), 108 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx b/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx index e1baef06adc81..04b967595da6f 100644 --- a/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx +++ b/x-pack/plugins/uptime/public/components/functional/snapshot_histogram.tsx @@ -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 ( @@ -25,14 +31,14 @@ export const SnapshotHistogram = ({ histogram }: SnapshotHistogramProps) => { name={i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', { defaultMessage: 'Up', })} - color="#006BB4" + color={primaryColor} /> ); diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx index 02c88771c4b1b..fa02b52b5bf4b 100644 --- a/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx +++ b/x-pack/plugins/uptime/public/components/queries/monitor_charts/monitor_charts.tsx @@ -21,6 +21,8 @@ import { // @ts-ignore missing typings EuiTitle, } from '@elastic/eui'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import React, { Fragment } from 'react'; @@ -46,6 +48,7 @@ export class MonitorCharts extends React.Component { public render() { const { + colors: { primary, secondary, danger }, dateRangeStart, dateRangeEnd, monitorId, @@ -228,6 +231,7 @@ export class MonitorCharts extends React.Component { )} data={areaRttSeries} curve="curveBasis" + color={secondary} /> { } )} data={avgDurationSeries} + color={primary} /> @@ -270,7 +275,7 @@ export class MonitorCharts extends React.Component { } )} data={upSeries} - color="#006BB4" + color={primary} /> { } )} data={downSeries} - color="#BD271E" + color={danger} /> diff --git a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx index 51429eb82197e..bd3d610abe01a 100644 --- a/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx @@ -38,93 +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) => ( - - {status === 'up' - ? i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', { - defaultMessage: 'Up', - }) - : i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', { - defaultMessage: 'Down', - })} - - ), - 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: any) => {id}, - }, - { - field: 'ping.url.full', - name: i18n.translate('xpack.uptime.monitorList.urlColumnLabel', { - defaultMessage: 'URL', - }), - render: (url: string, monitor: any) => ( - - {url} - - ), - }, - { - 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 ( - - - - - ); - }, - }, -]; - const monitorListPagination = { initialPageSize: MONITOR_LIST_DEFAULT_PAGINATION, pageSizeOptions: [5, 10, 20, 50], @@ -133,6 +46,7 @@ const monitorListPagination = { export const MonitorList = ({ autorefreshInterval, autorefreshIsPaused, + colors: { danger, primary }, dateRangeStart, dateRangeEnd, filters, @@ -163,7 +77,99 @@ export const MonitorList = ({ ( + + {status === 'up' + ? i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', { + defaultMessage: 'Up', + }) + : i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', { + defaultMessage: 'Down', + })} + + ), + 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: any) => ( + {id} + ), + }, + { + field: 'ping.url.full', + name: i18n.translate('xpack.uptime.monitorList.urlColumnLabel', { + defaultMessage: 'URL', + }), + render: (url: string, monitor: any) => ( + + {url} + + ), + }, + { + 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 ( + + + + + ); + }, + }, + ]} loading={loading} items={monitors} pagination={monitorListPagination} diff --git a/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot.tsx b/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot.tsx index cdcad14817bcc..17970f4b4d8f1 100644 --- a/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot.tsx +++ b/x-pack/plugins/uptime/public/components/queries/snapshot/snapshot.tsx @@ -37,10 +37,11 @@ interface SnapshotProps { type Props = SnapshotProps & UptimeCommonProps; export const Snapshot = ({ - dateRangeStart, - dateRangeEnd, autorefreshIsPaused, autorefreshInterval, + colors: { danger, primary }, + dateRangeStart, + dateRangeEnd, filters, }: Props) => ( {/* TODO: this is a UI hack that should be replaced */} - {histogram && } + {histogram && ( + + )} {!histogram && ( { + 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, @@ -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)); }; } diff --git a/x-pack/plugins/uptime/public/uptime_app.tsx b/x-pack/plugins/uptime/public/uptime_app.tsx index f0a4daa6fc5ea..3b420553174e3 100644 --- a/x-pack/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/plugins/uptime/public/uptime_app.tsx @@ -21,6 +21,8 @@ import { // @ts-ignore missing typings for EuiSuperDatePicker EuiSuperDatePicker, } from '@elastic/eui'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import React from 'react'; @@ -30,31 +32,47 @@ import { overviewBreadcrumb, UMBreadcrumb } from './breadcrumbs'; import { UMGraphQLClient, UMUpdateBreadcrumbs } from './lib/lib'; import { MonitorPage, OverviewPage } from './pages'; +interface UptimeAppColors { + danger: string; + primary: string; + secondary: string; +} + // TODO: these props are global to this app, we should put them in a context export interface UptimeCommonProps { autorefreshIsPaused: boolean; autorefreshInterval: number; dateRangeStart: string; dateRangeEnd: string; + colors: UptimeAppColors; +} + +export interface UptimePersistedState { + autorefreshIsPaused: boolean; + autorefreshInterval: number; + dateRangeStart: string; + dateRangeEnd: string; } export interface UptimeAppProps { - isUsingK7Design: boolean; - updateBreadcrumbs: UMUpdateBreadcrumbs; - kibanaBreadcrumbs: UMBreadcrumb[]; - routerBasename: string; + darkMode: boolean; graphQLClient: UMGraphQLClient; initialDateRangeStart: string; initialDateRangeEnd: string; initialAutorefreshInterval: number; initialAutorefreshIsPaused: boolean; - persistState(state: UptimeCommonProps): void; + isUsingK7Design: boolean; + kibanaBreadcrumbs: UMBreadcrumb[]; + routerBasename: string; + updateBreadcrumbs: UMUpdateBreadcrumbs; + persistState(state: UptimePersistedState): void; } interface UptimeAppState { autorefreshIsPaused: boolean; autorefreshInterval: number; breadcrumbs: UMBreadcrumb[]; + colors: UptimeAppColors; dateRangeStart: string; dateRangeEnd: string; } @@ -76,13 +94,14 @@ class Application extends React.Component { super(props); const { - isUsingK7Design, - kibanaBreadcrumbs, - updateBreadcrumbs, + darkMode, initialAutorefreshIsPaused: autorefreshIsPaused, initialAutorefreshInterval: autorefreshInterval, initialDateRangeStart: dateRangeStart, initialDateRangeEnd: dateRangeEnd, + isUsingK7Design, + kibanaBreadcrumbs, + updateBreadcrumbs, } = props; let initialBreadcrumbs: UMBreadcrumb[]; @@ -95,10 +114,26 @@ class Application extends React.Component { initialBreadcrumbs = [overviewBreadcrumb]; } + let colors: UptimeAppColors; + if (darkMode) { + colors = { + primary: euiDarkVars.euiColorVis1, + secondary: euiDarkVars.euiColorVis0, + danger: euiDarkVars.euiColorVis9, + }; + } else { + colors = { + primary: euiLightVars.euiColorVis1, + secondary: euiLightVars.euiColorVis0, + danger: euiLightVars.euiColorVis9, + }; + } + this.state = { autorefreshIsPaused, autorefreshInterval, breadcrumbs: initialBreadcrumbs, + colors, dateRangeStart, dateRangeEnd, };