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

[Synthetics] filter by location for monitor details visualizations (#144873)

Browse source 
Resolves https://github.com/elastic/kibana/issues/144857
This commit is contained in:
Dominique Clarke 2022-11-10 05:13:54 -05:00 • committed by GitHub
parent b55fd23c88
commit 0cae7ed66e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 86 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx
View file

@ -10,6 +10,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ReportTypes } from '@kbn/observability-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface AvailabilityPanelprops {
from: string;
@ -22,9 +23,14 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
observability: { ExploratoryViewEmbeddable },
},
} = useKibana<ClientPluginsStart>();
const selectedLocation = useSelectedLocation();
const monitorId = useMonitorQueryId();
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
customHeight="70px"
@ -35,7 +41,10 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
name: 'Monitor availability',
dataType: 'synthetics',
selectedMetricField: 'monitor_availability',
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
},
]}
/>

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
View file

@ -10,6 +10,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ReportTypes, useTheme } from '@kbn/observability-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface AvailabilitySparklinesProps {
from: string;
@ -26,6 +27,12 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
const theme = useTheme();
const selectedLocation = useSelectedLocation();
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
customHeight="70px"
@ -40,7 +47,10 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
name: 'Monitor availability',
dataType: 'synthetics',
selectedMetricField: 'monitor_availability',
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
color: theme.eui.euiColorVis1,
},
]}

13
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_panel.tsx
View file

@ -9,8 +9,8 @@ import React from 'react';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ReportTypes } from '@kbn/observability-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface DurationPanelProps {
from: string;
@ -23,8 +23,14 @@ export const DurationPanel = (props: DurationPanelProps) => {
observability: { ExploratoryViewEmbeddable },
},
} = useKibana<ClientPluginsStart>();
const selectedLocation = useSelectedLocation();
const monitorId = useMonitorQueryId();
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
customHeight="70px"
@ -35,7 +41,10 @@ export const DurationPanel = (props: DurationPanelProps) => {
name: 'Monitor duration',
dataType: 'synthetics',
selectedMetricField: 'monitor_duration',
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
},
]}
/>

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
View file

@ -10,6 +10,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ReportTypes, useTheme } from '@kbn/observability-plugin/public';
import { useParams } from 'react-router-dom';
import { ClientPluginsStart } from '../../../../../plugin';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface DurationSparklinesProps {
from: string;
@ -26,6 +27,12 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
const theme = useTheme();
const selectedLocation = useSelectedLocation();
if (!selectedLocation) {
return null;
}
return (
<>
<ExploratoryViewEmbeddable
@ -40,7 +47,10 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
name: 'Monitor duration',
dataType: 'synthetics',
selectedMetricField: 'monitor.duration.us',
reportDefinitions: { config_id: [monitorId] },
reportDefinitions: {
config_id: [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
color: theme.eui.euiColorVis1,
},
]}

11
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/duration_trend.tsx
View file

@ -9,6 +9,7 @@ import React from 'react';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface MonitorDurationTrendProps {
from: string;
@ -21,9 +22,14 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
const { ExploratoryViewEmbeddable } = observability;
const monitorId = useMonitorQueryId();
const selectedLocation = useSelectedLocation();
const metricsToShow = ['min', 'max', 'median', '25th', '75th'];
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
customHeight="240px"
@ -33,7 +39,10 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
time: props,
name: metric + ' Series',
selectedMetricField: 'monitor.duration.us',
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
seriesType: 'line',
operationType: metric,
}))}

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx
View file

@ -10,6 +10,7 @@ import React from 'react';
import { useParams } from 'react-router-dom';
import { useEuiTheme } from '@elastic/eui';
import { ClientPluginsStart } from '../../../../../plugin';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface Props {
from: string;
@ -24,6 +25,12 @@ export const MonitorErrorSparklines = (props: Props) => {
const { euiTheme } = useEuiTheme();
const selectedLocation = useSelectedLocation();
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
reportType="kpi-over-time"
@ -34,7 +41,10 @@ export const MonitorErrorSparklines = (props: Props) => {
{
seriesType: 'area',
time: props,
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
dataType: 'synthetics',
selectedMetricField: 'state.id',
name: 'Monitor errors',

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx
View file

@ -10,6 +10,7 @@ import React from 'react';
import { ReportTypes } from '@kbn/observability-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedLocation } from '../hooks/use_selected_location';
interface MonitorErrorsCountProps {
from: string;
@ -23,6 +24,12 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
const monitorId = useMonitorQueryId();
const selectedLocation = useSelectedLocation();
if (!selectedLocation) {
return null;
}
return (
<ExploratoryViewEmbeddable
customHeight="70px"
@ -30,7 +37,10 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
attributes={[
{
time: props,
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
dataType: 'synthetics',
selectedMetricField: 'monitor_errors',
name: 'synthetics-series-1',

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx
View file

@ -15,6 +15,7 @@ import { Position } from '@elastic/charts/dist/utils/common';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
import { useSelectedMonitor } from '../hooks/use_selected_monitor';
import { ClientPluginsStart } from '../../../../../plugin';
import { useSelectedLocation } from '../hooks/use_selected_location';
export const StepDurationPanel = ({ legendPosition }: { legendPosition?: Position }) => {
const { observability } = useKibana<ClientPluginsStart>().services;
@ -25,8 +26,14 @@ export const StepDurationPanel = ({ legendPosition }: { legendPosition?: Positio
const monitorId = useMonitorQueryId();
const selectedLocation = useSelectedLocation();
const isBrowser = monitor?.type === 'browser';
if (!selectedLocation) {
return null;
}
return (
<EuiPanel hasShadow={false} hasBorder>
<EuiFlexGroup alignItems="center" gutterSize="s">
@ -50,7 +57,10 @@ export const StepDurationPanel = ({ legendPosition }: { legendPosition?: Positio
attributes={[
{
name: DURATION_BY_STEP_LABEL,
reportDefinitions: { 'monitor.id': [monitorId] },
reportDefinitions: {
'monitor.id': [monitorId],
'observer.geo.name': [selectedLocation?.label],
},
selectedMetricField: isBrowser ? 'synthetics.step.duration.us' : 'monitor.duration.us',
dataType: 'synthetics',
time: { from: 'now-24h/h', to: 'now' },