mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
chore(synthetics): Borealis support (#204488)
This commit is contained in:
Kevin Delemme
GitHub
parent
1fb16c5952
commit
cf3c7bd7b9
23 changed files with 202 additions and 175 deletions
|
|
@ -40,7 +40,8 @@
|
|||
"usageCollection",
|
||||
"uiActions",
|
||||
"unifiedSearch",
|
||||
"presentationUtil"
|
||||
"presentationUtil",
|
||||
"charts"
|
||||
],
|
||||
"optionalPlugins": [
|
||||
"cloud",
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export function getSkippedVizColor(euiTheme: EuiThemeComputed) {
|
|||
}
|
||||
|
||||
export function getErrorVizColor(euiTheme: EuiThemeComputed) {
|
||||
return euiTheme.colors.dangerText;
|
||||
return euiTheme.colors.textDanger;
|
||||
}
|
||||
|
||||
export function getXAxisLabelFormatter(interval: number) {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
import { AVAILABILITY_LABEL } from './availability_panel';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../plugin';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { AVAILABILITY_LABEL } from './availability_panel';
|
||||
|
||||
interface AvailabilitySparklinesProps {
|
||||
from: string;
|
||||
|
|
@ -26,8 +26,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
|
|||
},
|
||||
} = useKibana<ClientPluginsStart>();
|
||||
const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
if (!queryIdFilter) {
|
||||
return null;
|
||||
|
|
@ -50,7 +49,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
|
|||
selectedMetricField: 'monitor_availability',
|
||||
reportDefinitions: queryIdFilter,
|
||||
filters: locationFilter,
|
||||
color: theme.eui.euiColorVis1,
|
||||
color: euiTheme.colors.vis.euiColorVis1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { MEDIAN_DURATION_LABEL } from './duration_panel';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../plugin';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { MEDIAN_DURATION_LABEL } from './duration_panel';
|
||||
|
||||
interface DurationSparklinesProps {
|
||||
from: string;
|
||||
|
|
@ -26,7 +26,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
|
|||
},
|
||||
} = useKibana<ClientPluginsStart>();
|
||||
const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
if (!queryIdFilter) {
|
||||
return null;
|
||||
|
|
@ -49,7 +49,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
|
|||
selectedMetricField: 'monitor.duration.us',
|
||||
reportDefinitions: queryIdFilter,
|
||||
filters: locationFilter,
|
||||
color: theme.eui.euiColorVis1,
|
||||
color: euiTheme.colors.vis.euiColorVis1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,24 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiSkeletonText,
|
||||
EuiPanel,
|
||||
EuiSkeletonText,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
euiPaletteColorBlindBehindText,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useSelectedLocation } from '../hooks/use_selected_location';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { AlertActions } from './alert_actions';
|
||||
import React from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../plugin';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { useSelectedLocation } from '../hooks/use_selected_location';
|
||||
import { AlertActions } from './alert_actions';
|
||||
|
||||
const MONITOR_STATUS_RULE = {
|
||||
'kibana.alert.rule.category': ['Synthetics monitor status'],
|
||||
|
|
@ -40,7 +41,8 @@ export const MonitorAlerts = ({
|
|||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
|
||||
const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
|
||||
const selectedLocation = useSelectedLocation();
|
||||
|
|
@ -145,7 +147,9 @@ export const MonitorAlerts = ({
|
|||
{ field: 'kibana.alert.status', values: ['active'] },
|
||||
...(locationFilter ?? []),
|
||||
],
|
||||
color: theme.eui.euiColorVis7_behindText,
|
||||
color: isAmsterdam
|
||||
? euiPaletteColorBlindBehindText()[7]
|
||||
: euiTheme.colors.vis.euiColorVis7,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
@ -198,7 +202,9 @@ export const MonitorAlerts = ({
|
|||
{ field: 'kibana.alert.status', values: ['recovered'] },
|
||||
...(locationFilter ?? []),
|
||||
],
|
||||
color: theme.eui.euiColorVis0_behindText,
|
||||
color: isAmsterdam
|
||||
? euiPaletteColorBlindBehindText()[0]
|
||||
: euiTheme.colors.vis.euiColorVis0,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { euiPaletteColorBlindBehindText, useEuiTheme } from '@elastic/eui';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { ERRORS_LABEL } from './monitor_errors_count';
|
||||
import { ClientPluginsStart } from '../../../../../plugin';
|
||||
|
|
@ -23,6 +23,7 @@ export const MonitorErrorSparklines = ({ from, to, id }: Props) => {
|
|||
} = useKibana<ClientPluginsStart>().services;
|
||||
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
|
||||
|
||||
const time = useMemo(() => ({ from, to }), [from, to]);
|
||||
|
|
@ -47,8 +48,10 @@ export const MonitorErrorSparklines = ({ from, to, id }: Props) => {
|
|||
dataType: 'synthetics',
|
||||
selectedMetricField: 'monitor_errors',
|
||||
name: ERRORS_LABEL,
|
||||
color: euiTheme.colors.danger,
|
||||
operationType: 'unique_count',
|
||||
color: isAmsterdam
|
||||
? euiPaletteColorBlindBehindText()[1]
|
||||
: euiTheme.colors.vis.euiColorVis6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../plugin';
|
||||
import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
|
||||
|
||||
interface MonitorErrorsCountProps {
|
||||
from: string;
|
||||
|
|
@ -22,7 +23,8 @@ export const MonitorErrorsCount = ({ from, to, id }: MonitorErrorsCountProps) =>
|
|||
const {
|
||||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
|
||||
|
||||
const time = useMemo(() => ({ from, to }), [from, to]);
|
||||
|
|
@ -45,6 +47,7 @@ export const MonitorErrorsCount = ({ from, to, id }: MonitorErrorsCountProps) =>
|
|||
selectedMetricField: 'monitor_errors',
|
||||
name: ERRORS_LABEL,
|
||||
filters: locationFilter,
|
||||
color: isAmsterdam ? euiTheme.colors.vis.euiColorVis1 : euiTheme.colors.vis.euiColorVis6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { OverviewStatusState, ServiceLocations } from '../../../../../../../common/runtime_types';
|
||||
import { LocationStatusBadges } from '../../../common/components/location_status_badges';
|
||||
import { ServiceLocations, OverviewStatusState } from '../../../../../../../common/runtime_types';
|
||||
|
||||
interface Props {
|
||||
locations: ServiceLocations;
|
||||
|
|
@ -17,22 +17,21 @@ interface Props {
|
|||
}
|
||||
|
||||
export const MonitorLocations = ({ locations, monitorId, overviewStatus }: Props) => {
|
||||
const {
|
||||
eui: { euiColorVis9, euiColorVis0, euiColorDisabled },
|
||||
} = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
|
||||
const locationsToDisplay = locations.map((loc) => {
|
||||
const locById = `${monitorId}-${loc.id}`;
|
||||
|
||||
let status: string = 'unknown';
|
||||
let color = euiColorDisabled;
|
||||
let color = euiTheme.colors.disabled;
|
||||
|
||||
if (overviewStatus?.downConfigs[locById]) {
|
||||
status = 'down';
|
||||
color = euiColorVis9;
|
||||
color = isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.danger;
|
||||
} else if (overviewStatus?.upConfigs[locById]) {
|
||||
status = 'up';
|
||||
color = euiColorVis0;
|
||||
color = isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.success;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -5,23 +5,21 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { useRefreshedRange } from '../../../../hooks';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import * as labels from '../labels';
|
||||
import { useRefreshedRange } from '../../../../hooks';
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
|
||||
import * as labels from '../labels';
|
||||
|
||||
export const MonitorTestRunsCount = () => {
|
||||
const {
|
||||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const { from, to } = useRefreshedRange(30, 'days');
|
||||
const filters = useMonitorFilters({});
|
||||
|
|
@ -42,7 +40,7 @@ export const MonitorTestRunsCount = () => {
|
|||
dataType: 'synthetics',
|
||||
selectedMetricField: 'monitor_total_runs',
|
||||
name: labels.TEST_RUNS_LABEL,
|
||||
color: theme.eui.euiColorVis1,
|
||||
color: euiTheme.colors.vis.euiColorVis1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,20 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
|
||||
import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { useRefreshedRange } from '../../../../hooks';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import { useRefreshedRange } from '../../../../hooks';
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
|
||||
import * as labels from '../labels';
|
||||
|
||||
export const MonitorTestRunsSparkline = () => {
|
||||
const {
|
||||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const { from, to } = useRefreshedRange(30, 'days');
|
||||
const filters = useMonitorFilters({});
|
||||
|
|
@ -39,12 +36,12 @@ export const MonitorTestRunsSparkline = () => {
|
|||
selectedMetricField: 'total_test_runs',
|
||||
filters,
|
||||
name: labels.TEST_RUNS_LABEL,
|
||||
color: theme.eui.euiColorVis1,
|
||||
color: euiTheme.colors.vis.euiColorVis1,
|
||||
operationType: 'count',
|
||||
},
|
||||
];
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [from, theme.eui.euiColorVis1, to]);
|
||||
}, [from, euiTheme.colors.vis.euiColorVis1, to]);
|
||||
|
||||
return (
|
||||
<ExploratoryViewEmbeddable
|
||||
|
|
|
|||
|
|
@ -4,55 +4,58 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { Chart, Metric, MetricTrendShape, Settings } from '@elastic/charts';
|
||||
import {
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiThemeComputed,
|
||||
euiPaletteColorBlindBehindText,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { css } from '@emotion/react';
|
||||
import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
|
||||
import { EuiPanel, EuiSpacer } from '@elastic/eui';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import moment from 'moment';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
||||
import { FlyoutParamProps } from './types';
|
||||
import { MetricItemBody } from './metric_item/metric_item_body';
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { OverviewStatusMetaData } from '../../../../../../../common/runtime_types';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import { useLocationName, useStatusByLocationOverview } from '../../../../hooks';
|
||||
import {
|
||||
selectErrorPopoverState,
|
||||
selectOverviewTrends,
|
||||
toggleErrorPopoverOpen,
|
||||
} from '../../../../state';
|
||||
import { useLocationName, useStatusByLocationOverview } from '../../../../hooks';
|
||||
import { formatDuration } from '../../../../utils/formatting';
|
||||
import { OverviewStatusMetaData } from '../../../../../../../common/runtime_types';
|
||||
import { ActionsPopover } from './actions_popover';
|
||||
import {
|
||||
hideTestNowFlyoutAction,
|
||||
manualTestRunInProgressSelector,
|
||||
toggleTestNowFlyoutAction,
|
||||
} from '../../../../state/manual_test_runs';
|
||||
import { MetricItemIcon } from './metric_item_icon';
|
||||
import { formatDuration } from '../../../../utils/formatting';
|
||||
import { ActionsPopover } from './actions_popover';
|
||||
import { MetricItemBody } from './metric_item/metric_item_body';
|
||||
import { MetricItemExtra } from './metric_item/metric_item_extra';
|
||||
import { MetricItemIcon } from './metric_item_icon';
|
||||
import { FlyoutParamProps } from './types';
|
||||
|
||||
const METRIC_ITEM_HEIGHT = 160;
|
||||
|
||||
export const getColor = (
|
||||
theme: ReturnType<typeof useTheme>,
|
||||
isEnabled: boolean,
|
||||
status?: string
|
||||
) => {
|
||||
export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?: string) => {
|
||||
if (!isEnabled) {
|
||||
return theme.eui.euiColorLightestShade;
|
||||
return euiTheme.colors.lightestShade;
|
||||
}
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
|
||||
switch (status) {
|
||||
case 'down':
|
||||
return theme.eui.euiColorVis9_behindText;
|
||||
return isAmsterdam ? euiPaletteColorBlindBehindText()[9] : euiTheme.colors.danger;
|
||||
case 'up':
|
||||
return theme.eui.euiColorVis0_behindText;
|
||||
return isAmsterdam ? euiPaletteColorBlindBehindText()[0] : euiTheme.colors.success;
|
||||
case 'unknown':
|
||||
return theme.eui.euiColorGhost;
|
||||
return euiTheme.colors.ghost;
|
||||
default:
|
||||
return theme.eui.euiColorVis0_behindText;
|
||||
return isAmsterdam ? euiPaletteColorBlindBehindText()[0] : euiTheme.colors.success;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -65,6 +68,7 @@ export const MetricItem = ({
|
|||
style?: React.CSSProperties;
|
||||
onClick: (params: FlyoutParamProps) => void;
|
||||
}) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const trendData = useSelector(selectOverviewTrends)[monitor.configId + monitor.locationId];
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const isErrorPopoverOpen = useSelector(selectErrorPopoverState);
|
||||
|
|
@ -73,8 +77,8 @@ export const MetricItem = ({
|
|||
configId: monitor.configId,
|
||||
locationId: monitor.locationId,
|
||||
});
|
||||
const theme = useTheme();
|
||||
|
||||
const { charts } = useKibana<ClientPluginsStart>().services;
|
||||
const testInProgress = useSelector(manualTestRunInProgressSelector(monitor.configId));
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -132,7 +136,7 @@ export const MetricItem = ({
|
|||
});
|
||||
}
|
||||
}}
|
||||
baseTheme={useElasticChartsTheme()}
|
||||
baseTheme={charts.theme.useChartsBaseTheme()}
|
||||
locale={i18n.getLocale()}
|
||||
/>
|
||||
<Metric
|
||||
|
|
@ -164,7 +168,7 @@ export const MetricItem = ({
|
|||
</div>
|
||||
) : undefined,
|
||||
valueFormatter: (d: number) => formatDuration(d),
|
||||
color: getColor(theme, monitor.isEnabled, status),
|
||||
color: getColor(euiTheme, monitor.isEnabled, status),
|
||||
body: <MetricItemBody monitor={monitor} />,
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -23,21 +23,18 @@ import {
|
|||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
useEuiTheme,
|
||||
useIsWithinMaxBreakpoint,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { FlyoutParamProps } from './types';
|
||||
import { useKibanaSpace } from '../../../../../../hooks/use_kibana_space';
|
||||
import { useOverviewStatus } from '../../hooks/use_overview_status';
|
||||
import { MonitorDetailsPanel } from '../../../common/components/monitor_details_panel';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import { useMonitorDetail } from '../../../../hooks/use_monitor_detail';
|
||||
import { useMonitorDetailLocator } from '../../../../hooks/use_monitor_detail_locator';
|
||||
import { LocationsStatus, useStatusByLocation } from '../../../../hooks/use_status_by_location';
|
||||
import { MonitorEnabled } from '../../management/monitor_list_table/monitor_enabled';
|
||||
import { ActionsPopover } from './actions_popover';
|
||||
import {
|
||||
getMonitorAction,
|
||||
selectMonitorUpsertStatus,
|
||||
|
|
@ -47,11 +44,14 @@ import {
|
|||
selectSyntheticsMonitorLoading,
|
||||
setFlyoutConfig,
|
||||
} from '../../../../state';
|
||||
import { useMonitorDetail } from '../../../../hooks/use_monitor_detail';
|
||||
import { ConfigKey, EncryptedSyntheticsMonitor, OverviewStatusMetaData } from '../types';
|
||||
import { useMonitorDetailLocator } from '../../../../hooks/use_monitor_detail_locator';
|
||||
import { MonitorStatus } from '../../../common/components/monitor_status';
|
||||
import { MonitorDetailsPanel } from '../../../common/components/monitor_details_panel';
|
||||
import { MonitorLocationSelect } from '../../../common/components/monitor_location_select';
|
||||
import { MonitorStatus } from '../../../common/components/monitor_status';
|
||||
import { useOverviewStatus } from '../../hooks/use_overview_status';
|
||||
import { MonitorEnabled } from '../../management/monitor_list_table/monitor_enabled';
|
||||
import { ConfigKey, EncryptedSyntheticsMonitor, OverviewStatusMetaData } from '../types';
|
||||
import { ActionsPopover } from './actions_popover';
|
||||
import { FlyoutParamProps } from './types';
|
||||
|
||||
interface Props {
|
||||
configId: string;
|
||||
|
|
@ -89,7 +89,7 @@ function DetailFlyoutDurationChart({
|
|||
| 'previousDurationChartFrom'
|
||||
| 'previousDurationChartTo'
|
||||
>) {
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const {
|
||||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
|
|
@ -108,7 +108,7 @@ function DetailFlyoutDurationChart({
|
|||
attributes={[
|
||||
{
|
||||
seriesType: 'area',
|
||||
color: theme?.eui?.euiColorVis1,
|
||||
color: euiTheme.colors.vis.euiColorVis1,
|
||||
time: {
|
||||
from: currentDurationChartFrom ?? DEFAULT_DURATION_CHART_FROM,
|
||||
to: currentDurationChartTo ?? DEFAULT_CURRENT_DURATION_CHART_TO,
|
||||
|
|
@ -130,7 +130,7 @@ function DetailFlyoutDurationChart({
|
|||
},
|
||||
{
|
||||
seriesType: 'line',
|
||||
color: theme?.eui?.euiColorVis7,
|
||||
color: euiTheme.colors.vis.euiColorVis7,
|
||||
time: {
|
||||
from: previousDurationChartFrom ?? DEFAULT_PREVIOUS_DURATION_CHART_FROM,
|
||||
to: previousDurationChartTo ?? DEFAULT_PREVIOUS_DURATION_CHART_TO,
|
||||
|
|
|
|||
|
|
@ -5,23 +5,30 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
euiPaletteColorBlindBehindText,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
|
||||
import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
SYNTHETICS_STATUS_RULE,
|
||||
SYNTHETICS_TLS_RULE,
|
||||
} from '../../../../../../../common/constants/synthetics_alerts';
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import { useGetUrlParams, useRefreshedRange } from '../../../../hooks';
|
||||
import { selectOverviewStatus } from '../../../../state/overview_status';
|
||||
import { AlertsLink } from '../../../common/links/view_alerts';
|
||||
import { useRefreshedRange, useGetUrlParams } from '../../../../hooks';
|
||||
import { ClientPluginsStart } from '../../../../../../plugin';
|
||||
import { useMonitorFilters } from '../../hooks/use_monitor_filters';
|
||||
import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
|
||||
|
||||
export const useMonitorQueryIds = () => {
|
||||
const { status } = useSelector(selectOverviewStatus);
|
||||
|
|
@ -62,7 +69,8 @@ export const OverviewAlerts = () => {
|
|||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
const filters = useMonitorFilters({ forAlerts: true });
|
||||
|
||||
const { locations } = useGetUrlParams();
|
||||
|
|
@ -99,7 +107,9 @@ export const OverviewAlerts = () => {
|
|||
{ field: 'kibana.alert.status', values: ['active', 'recovered'] },
|
||||
...filters,
|
||||
],
|
||||
color: theme.eui.euiColorVis1,
|
||||
color: isAmsterdam
|
||||
? euiTheme.colors.vis.euiColorVis1
|
||||
: euiTheme.colors.vis.euiColorVis6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
@ -129,7 +139,9 @@ export const OverviewAlerts = () => {
|
|||
{ field: 'kibana.alert.status', values: ['active', 'recovered'] },
|
||||
...filters,
|
||||
],
|
||||
color: theme.eui.euiColorVis1_behindText,
|
||||
color: isAmsterdam
|
||||
? euiPaletteColorBlindBehindText()[1]
|
||||
: euiTheme.colors.vis.euiColorVis6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
|
||||
import { useMonitorFilters } from '../../../hooks/use_monitor_filters';
|
||||
import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
|
||||
import { ClientPluginsStart } from '../../../../../../../plugin';
|
||||
import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
|
||||
import { useMonitorFilters } from '../../../hooks/use_monitor_filters';
|
||||
import { useMonitorQueryFilters } from '../../../hooks/use_monitor_query_filters';
|
||||
|
||||
interface MonitorErrorsCountProps {
|
||||
|
|
@ -22,6 +23,8 @@ export const OverviewErrorsCount = ({ from, to }: MonitorErrorsCountProps) => {
|
|||
const {
|
||||
exploratoryView: { ExploratoryViewEmbeddable },
|
||||
} = useKibana<ClientPluginsStart>().services;
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
|
||||
const filters = useMonitorFilters({});
|
||||
|
||||
|
|
@ -44,6 +47,7 @@ export const OverviewErrorsCount = ({ from, to }: MonitorErrorsCountProps) => {
|
|||
selectedMetricField: 'monitor_errors',
|
||||
name: ERRORS_LABEL,
|
||||
filters,
|
||||
color: isAmsterdam ? euiTheme.colors.vis.euiColorVis1 : euiTheme.colors.vis.euiColorVis6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { euiPaletteColorBlindBehindText, useEuiTheme } from '@elastic/eui';
|
||||
import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
|
||||
import { ClientPluginsStart } from '../../../../../../../plugin';
|
||||
import { useMonitorFilters } from '../../../hooks/use_monitor_filters';
|
||||
|
|
@ -24,6 +24,7 @@ export const OverviewErrorsSparklines = ({ from, to }: Props) => {
|
|||
|
||||
const filters = useMonitorFilters({});
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
|
||||
|
||||
const time = useMemo(() => ({ from, to }), [from, to]);
|
||||
|
||||
|
|
@ -45,7 +46,9 @@ export const OverviewErrorsSparklines = ({ from, to }: Props) => {
|
|||
dataType: 'synthetics',
|
||||
selectedMetricField: 'monitor_errors',
|
||||
name: ERRORS_LABEL,
|
||||
color: euiTheme.colors.danger,
|
||||
color: isAmsterdam
|
||||
? euiPaletteColorBlindBehindText()[1]
|
||||
: euiTheme.colors.vis.euiColorVis6,
|
||||
operationType: 'unique_count',
|
||||
filters,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiText,
|
||||
EuiSkeletonRectangle,
|
||||
EuiIcon,
|
||||
EuiSkeletonRectangle,
|
||||
EuiText,
|
||||
EuiToolTip,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { colourPalette } from '../common/network_data/data_formatting';
|
||||
|
||||
export const ColorPalette = ({
|
||||
|
|
@ -116,7 +116,7 @@ export const ColorPaletteFlexItem = ({
|
|||
percent: number;
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const { eui } = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const [value, setVal] = useState(0);
|
||||
|
||||
|
|
@ -142,11 +142,11 @@ export const ColorPaletteFlexItem = ({
|
|||
<EuiFlexGroup
|
||||
gutterSize="none"
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
borderRadius: euiTheme.border.radius.medium,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<EuiFlexItem grow={true} style={{ backgroundColor: eui.euiColorLightShade }}>
|
||||
<EuiFlexItem grow={true} style={{ backgroundColor: euiTheme.colors.lightShade }}>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: (colourPalette as Record<string, string>)[mimeType],
|
||||
|
|
|
|||
|
|
@ -5,21 +5,18 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiSpacer, useEuiTheme } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiSpacer } from '@elastic/eui';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
|
||||
import { ThresholdIndicator } from '../../common/components/thershold_indicator';
|
||||
import { useNetworkTimingsPrevious24Hours } from '../hooks/use_network_timings_prev';
|
||||
import { formatMillisecond } from '../common/network_data/data_formatting';
|
||||
import { useNetworkTimings } from '../hooks/use_network_timings';
|
||||
import { useNetworkTimingsPrevious24Hours } from '../hooks/use_network_timings_prev';
|
||||
|
||||
export const BreakdownLegend = () => {
|
||||
const networkTimings = useNetworkTimings();
|
||||
|
||||
const { timingsWithLabels: prevTimingsWithLabels, loading } = useNetworkTimingsPrevious24Hours();
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -28,17 +25,13 @@ export const BreakdownLegend = () => {
|
|||
{networkTimings.timingsWithLabels.map(({ label, value }, index) => {
|
||||
const prevValueItem = prevTimingsWithLabels?.find((prev) => prev.label === label);
|
||||
const prevValue = prevValueItem?.value;
|
||||
// @ts-ignore
|
||||
const color = euiTheme.colors.vis[`euiColorVis${index + 1}`];
|
||||
|
||||
return (
|
||||
<EuiFlexGroup key={index} gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem grow={true}>
|
||||
<EuiHealth
|
||||
color={
|
||||
(theme.eui as unknown as Record<string, string>)[`euiColorVis${index + 1}`]
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</EuiHealth>
|
||||
<EuiHealth color={color}>{label}</EuiHealth>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ minWidth: 50 }}>
|
||||
<ThresholdIndicator
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import {
|
||||
Chart,
|
||||
Datum,
|
||||
|
|
@ -23,8 +21,10 @@ import {
|
|||
EuiLoadingSpinner,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { formatMillisecond } from '../common/network_data/data_formatting';
|
||||
|
||||
import { useNetworkTimings } from '../hooks/use_network_timings';
|
||||
|
|
@ -46,7 +46,7 @@ const themeOverrides: PartialTheme = {
|
|||
export const NetworkTimingsDonut = () => {
|
||||
const networkTimings = useNetworkTimings();
|
||||
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
if (!networkTimings) {
|
||||
return <EuiLoadingSpinner size="xl" />;
|
||||
|
|
@ -87,9 +87,9 @@ export const NetworkTimingsDonut = () => {
|
|||
nodeLabel: (d: Datum) => d,
|
||||
shape: {
|
||||
fillColor: (dataName, index) => {
|
||||
return (theme.eui as unknown as Record<string, string>)[
|
||||
`euiColorVis${index + 1}`
|
||||
];
|
||||
// @ts-ignore
|
||||
const color = euiTheme.colors.vis[`euiColorVis${index + 1}`];
|
||||
return color;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,15 +5,14 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { AnnotationDomainType, LineAnnotation } from '@elastic/charts';
|
||||
import { EuiThemeComputed, useEuiTheme } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { formatMillisecond } from '../../../common/network_data/data_formatting';
|
||||
import { MarkerItems, useWaterfallContext } from '../context/waterfall_context';
|
||||
import { WaterfallMarkerIcon } from './waterfall_marker_icon';
|
||||
import { formatMillisecond } from '../../../common/network_data/data_formatting';
|
||||
|
||||
export const FIELD_SYNTHETICS_LCP = 'browser.experience.lcp.us';
|
||||
export const FIELD_SYNTHETICS_FCP = 'browser.experience.fcp.us';
|
||||
|
|
@ -22,7 +21,7 @@ export const FIELD_SYNTHETICS_DCL = 'browser.experience.dcl.us';
|
|||
export const LAYOUT_SHIFT = 'layoutShift';
|
||||
|
||||
export function WaterfallChartMarkers() {
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const { markerItems, showCustomMarks } = useWaterfallContext();
|
||||
|
||||
const markerItemsByOffset = useMemo(
|
||||
|
|
@ -41,7 +40,7 @@ export function WaterfallChartMarkers() {
|
|||
// Remove unrecognized marks e.g. custom marks if `showCustomMarks` is false
|
||||
const vitalMarkers = showCustomMarks
|
||||
? items
|
||||
: items.filter(({ id }) => getMarkersInfo(id, theme) !== undefined);
|
||||
: items.filter(({ id }) => getMarkersInfo(id, euiTheme) !== undefined);
|
||||
|
||||
const hasMultipleMarksAtOffset = vitalMarkers.some(({ id }) => id !== LAYOUT_SHIFT);
|
||||
const isLastOffsetTooClose = lastOffset && Math.abs(offset - lastOffset) < 100; // 100ms
|
||||
|
|
@ -67,21 +66,21 @@ export function WaterfallChartMarkers() {
|
|||
.map(({ id }) => id)
|
||||
.filter((id, index, arr) => arr.indexOf(id) === index);
|
||||
|
||||
const label = uniqueIds.map((id) => getMarkersInfo(id, theme)?.label ?? id).join(' / ');
|
||||
const label = uniqueIds.map((id) => getMarkersInfo(id, euiTheme)?.label ?? id).join(' / ');
|
||||
const id = uniqueIds[0];
|
||||
const markersInfo = getMarkersInfo(id, theme);
|
||||
const markersInfo = getMarkersInfo(id, euiTheme);
|
||||
|
||||
return {
|
||||
id,
|
||||
offset,
|
||||
label,
|
||||
field: markersInfo?.field ?? '',
|
||||
color: markersInfo?.color ?? theme.eui.euiColorMediumShade,
|
||||
color: markersInfo?.color ?? euiTheme.colors.mediumShade,
|
||||
strokeWidth: markersInfo?.strokeWidth ?? 1,
|
||||
dash: markersInfo?.dash,
|
||||
};
|
||||
});
|
||||
}, [markerItemsByOffset, showCustomMarks, theme]);
|
||||
}, [markerItemsByOffset, showCustomMarks, euiTheme]);
|
||||
|
||||
if (!markerItems) {
|
||||
return null;
|
||||
|
|
@ -113,7 +112,7 @@ export function WaterfallChartMarkers() {
|
|||
dash,
|
||||
},
|
||||
}}
|
||||
zIndex={theme.eui.euiZLevel0}
|
||||
zIndex={Number(euiTheme.levels.content)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
@ -121,12 +120,12 @@ export function WaterfallChartMarkers() {
|
|||
);
|
||||
}
|
||||
|
||||
function getMarkersInfo(id: string, theme: ReturnType<typeof useTheme>) {
|
||||
function getMarkersInfo(id: string, euiTheme: EuiThemeComputed) {
|
||||
switch (id) {
|
||||
case 'domContentLoaded':
|
||||
return {
|
||||
label: DOCUMENT_CONTENT_LOADED_LABEL,
|
||||
color: theme.eui.euiColorMediumShade,
|
||||
color: euiTheme.colors.mediumShade,
|
||||
field: FIELD_SYNTHETICS_DCL,
|
||||
strokeWidth: 1,
|
||||
dash: undefined,
|
||||
|
|
@ -134,7 +133,7 @@ function getMarkersInfo(id: string, theme: ReturnType<typeof useTheme>) {
|
|||
case 'firstContentfulPaint':
|
||||
return {
|
||||
label: FCP_LABEL,
|
||||
color: theme.eui.euiColorMediumShade,
|
||||
color: euiTheme.colors.mediumShade,
|
||||
field: FIELD_SYNTHETICS_FCP,
|
||||
strokeWidth: 1,
|
||||
dash: undefined,
|
||||
|
|
@ -142,7 +141,7 @@ function getMarkersInfo(id: string, theme: ReturnType<typeof useTheme>) {
|
|||
case 'largestContentfulPaint':
|
||||
return {
|
||||
label: LCP_LABEL,
|
||||
color: theme.eui.euiColorMediumShade,
|
||||
color: euiTheme.colors.mediumShade,
|
||||
field: FIELD_SYNTHETICS_LCP,
|
||||
strokeWidth: 1,
|
||||
dash: undefined,
|
||||
|
|
@ -150,7 +149,7 @@ function getMarkersInfo(id: string, theme: ReturnType<typeof useTheme>) {
|
|||
case 'layoutShift':
|
||||
return {
|
||||
label: LAYOUT_SHIFT_LABEL,
|
||||
color: theme.eui.euiColorMediumShade,
|
||||
color: euiTheme.colors.mediumShade,
|
||||
field: '',
|
||||
strokeWidth: 1,
|
||||
dash: [5, 5],
|
||||
|
|
@ -158,7 +157,7 @@ function getMarkersInfo(id: string, theme: ReturnType<typeof useTheme>) {
|
|||
case 'loadEvent':
|
||||
return {
|
||||
label: LOAD_EVENT_LABEL,
|
||||
color: theme.eui.euiColorMediumShade,
|
||||
color: euiTheme.colors.mediumShade,
|
||||
field: FIELD_SYNTHETICS_DOCUMENT_ONLOAD,
|
||||
strokeWidth: 1,
|
||||
dash: undefined,
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export const SyntheticsSharedContext: React.FC<
|
|||
embeddable: startPlugins.embeddable,
|
||||
slo: startPlugins.slo,
|
||||
serverless: startPlugins.serverless,
|
||||
charts: startPlugins.charts,
|
||||
}}
|
||||
>
|
||||
<EuiThemeProvider darkMode={darkMode}>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,17 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useEsSearch, useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { useEsSearch } from '@kbn/observability-shared-plugin/public';
|
||||
import { useMemo } from 'react';
|
||||
import { useLocations } from './use_locations';
|
||||
import { EncryptedSyntheticsSavedMonitor, Ping } from '../../../../common/runtime_types';
|
||||
import { SYNTHETICS_INDEX_PATTERN, UNNAMED_LOCATION } from '../../../../common/constants';
|
||||
import {
|
||||
EXCLUDE_RUN_ONCE_FILTER,
|
||||
FINAL_SUMMARY_FILTER,
|
||||
} from '../../../../common/constants/client_defaults';
|
||||
import { SYNTHETICS_INDEX_PATTERN, UNNAMED_LOCATION } from '../../../../common/constants';
|
||||
import { EncryptedSyntheticsSavedMonitor, Ping } from '../../../../common/runtime_types';
|
||||
import { useSyntheticsRefreshContext } from '../contexts';
|
||||
import { useLocations } from './use_locations';
|
||||
|
||||
export type LocationsStatus = Array<{ status: string; id: string; label: string; color: string }>;
|
||||
|
||||
|
|
@ -25,7 +26,7 @@ export function useStatusByLocation({
|
|||
configId: string;
|
||||
monitorLocations?: EncryptedSyntheticsSavedMonitor['locations'];
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const { lastRefresh } = useSyntheticsRefreshContext();
|
||||
|
||||
|
|
@ -76,11 +77,11 @@ export function useStatusByLocation({
|
|||
const getColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'up':
|
||||
return theme.eui.euiColorVis0;
|
||||
return euiTheme.colors.success;
|
||||
case 'down':
|
||||
return theme.eui.euiColorVis9;
|
||||
return euiTheme.colors.vis.euiColorVis6;
|
||||
default:
|
||||
return 'subdued';
|
||||
return euiTheme.colors.backgroundBaseSubdued;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -112,7 +113,8 @@ export function useStatusByLocation({
|
|||
data?.aggregations?.locations.buckets,
|
||||
loading,
|
||||
monitorLocations,
|
||||
theme.eui.euiColorVis0,
|
||||
theme.eui.euiColorVis9,
|
||||
euiTheme.colors.success,
|
||||
euiTheme.colors.vis.euiColorVis6,
|
||||
euiTheme.colors.backgroundBaseSubdued,
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ import type { UiActionsSetup } from '@kbn/ui-actions-plugin/public';
|
|||
import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
|
||||
import { DashboardStart, DashboardSetup } from '@kbn/dashboard-plugin/public';
|
||||
import { SLOPublicStart } from '@kbn/slo-plugin/public';
|
||||
import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
|
||||
import { registerSyntheticsEmbeddables } from './apps/embeddables/register_embeddables';
|
||||
import { kibanaService } from './utils/kibana_service';
|
||||
import { PLUGIN } from '../common/constants/plugin';
|
||||
|
|
@ -114,6 +115,7 @@ export interface ClientPluginsStart {
|
|||
slo?: SLOPublicStart;
|
||||
presentationUtil: PresentationUtilPluginStart;
|
||||
dashboard: DashboardStart;
|
||||
charts: ChartsPluginStart;
|
||||
}
|
||||
|
||||
export interface SyntheticsPluginServices extends Partial<CoreStart> {
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@
|
|||
"@kbn/core-http-server-utils",
|
||||
"@kbn/apm-data-access-plugin",
|
||||
"@kbn/charts-theme",
|
||||
"@kbn/charts-plugin",
|
||||
"@kbn/response-ops-rule-params"
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue