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 UI] Parameterize the date range in the Monitor Summary page components. (#143528)

Browse source
This commit is contained in:
Alejandro Fernández Gómez 2022-10-19 13:17:13 +02:00 • committed by GitHub
parent e9ae5700af
commit 71646d56a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 53 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/monitor_errors.tsx
View file

@ -34,7 +34,7 @@ export const MonitorErrors = () => {
<EuiTitle size="xs">
<h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{OVERVIEW_LABEL}</h3>
</EuiTitle>
<MonitorErrorsCount time={{ to: dateRangeEnd, from: dateRangeStart }} />
<MonitorErrorsCount to={dateRangeEnd} from={dateRangeStart} />
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={3}>

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

@ -13,7 +13,12 @@ import { ClientPluginsStart } from '../../../../../plugin';
import { KpiWrapper } from './kpi_wrapper';
export const AvailabilityPanel = () => {
interface AvailabilityPanelprops {
from: string;
to: string;
}
export const AvailabilityPanel = (props: AvailabilityPanelprops) => {
const {
services: {
observability: { ExploratoryViewEmbeddable },
@ -28,7 +33,7 @@ export const AvailabilityPanel = () => {
reportType={ReportTypes.SINGLE_METRIC}
attributes={[
{
time: { from: 'now-30d', to: 'now' },
time: props,
name: 'Monitor availability',
dataType: 'synthetics',
selectedMetricField: 'monitor_availability',

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

@ -11,7 +11,12 @@ import { ReportTypes, useTheme } from '@kbn/observability-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
export const AvailabilitySparklines = () => {
interface AvailabilitySparklinesProps {
from: string;
to: string;
}
export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
const {
services: {
observability: { ExploratoryViewEmbeddable },
@ -31,7 +36,7 @@ export const AvailabilitySparklines = () => {
attributes={[
{
seriesType: 'area',
time: { from: 'now-30d/d', to: 'now' },
time: props,
name: 'Monitor availability',
dataType: 'synthetics',
selectedMetricField: 'monitor_availability',

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

@ -13,7 +13,12 @@ import { ClientPluginsStart } from '../../../../../plugin';
import { KpiWrapper } from './kpi_wrapper';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
export const DurationPanel = () => {
interface DurationPanelProps {
from: string;
to: string;
}
export const DurationPanel = (props: DurationPanelProps) => {
const {
services: {
observability: { ExploratoryViewEmbeddable },
@ -27,7 +32,7 @@ export const DurationPanel = () => {
reportType={ReportTypes.SINGLE_METRIC}
attributes={[
{
time: { from: 'now-30d', to: 'now' },
time: props,
name: 'Monitor duration',
dataType: 'synthetics',
selectedMetricField: 'monitor_duration',

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

@ -11,7 +11,12 @@ import { ReportTypes, useTheme } from '@kbn/observability-plugin/public';
import { useParams } from 'react-router-dom';
import { ClientPluginsStart } from '../../../../../plugin';
export const DurationSparklines = () => {
interface DurationSparklinesProps {
from: string;
to: string;
}
export const DurationSparklines = (props: DurationSparklinesProps) => {
const {
services: {
observability: { ExploratoryViewEmbeddable },
@ -31,7 +36,7 @@ export const DurationSparklines = () => {
attributes={[
{
seriesType: 'area',
time: { from: 'now-30d/d', to: 'now' },
time: props,
name: 'Monitor duration',
dataType: 'synthetics',
selectedMetricField: 'monitor.duration.us',

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

@ -10,7 +10,12 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ClientPluginsStart } from '../../../../../plugin';
import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
export const MonitorDurationTrend = () => {
interface MonitorDurationTrendProps {
from: string;
to: string;
}
export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
const { observability } = useKibana<ClientPluginsStart>().services;
const { ExploratoryViewEmbeddable } = observability;
@ -25,10 +30,7 @@ export const MonitorDurationTrend = () => {
reportType="kpi-over-time"
attributes={metricsToShow.map((metric) => ({
dataType: 'synthetics',
time: {
from: 'now-30d/d',
to: 'now',
},
time: props,
name: metric + ' Series',
selectedMetricField: 'monitor.duration.us',
reportDefinitions: { 'monitor.id': [monitorId] },

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

@ -12,7 +12,12 @@ import { useParams } from 'react-router-dom';
import { KpiWrapper } from './kpi_wrapper';
import { ClientPluginsStart } from '../../../../../plugin';
export const MonitorErrorsCount = ({ time }: { time?: { to: string; from: string } }) => {
interface MonitorErrorsCountProps {
from: string;
to: string;
}
export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
const { observability } = useKibana<ClientPluginsStart>().services;
const { ExploratoryViewEmbeddable } = observability;
@ -26,10 +31,7 @@ export const MonitorErrorsCount = ({ time }: { time?: { to: string; from: string
reportType={ReportTypes.SINGLE_METRIC}
attributes={[
{
time: {
from: 'now-30d/d',
to: 'now',
},
time: props,
reportDefinitions: { config_id: [monitorId] },
dataType: 'synthetics',
selectedMetricField: 'state.id',

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

@ -32,6 +32,10 @@ import { MonitorErrorsCount } from './monitor_errors_count';
export const MonitorSummary = () => {
const { euiTheme } = useEuiTheme();
// TODO this range needs to be adjusted dynamically https://github.com/elastic/kibana/issues/143472
const from = 'now-30d/d';
const to = 'now';
return (
<>
<EuiFlexGroup>
@ -50,19 +54,19 @@ export const MonitorSummary = () => {
</EuiTitle>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<AvailabilityPanel />
<AvailabilityPanel from={from} to={to} />
</EuiFlexItem>
<EuiFlexItem>
<AvailabilitySparklines />
<AvailabilitySparklines from={from} to={to} />
</EuiFlexItem>
<EuiFlexItem>
<DurationPanel />
<DurationPanel from={from} to={to} />
</EuiFlexItem>
<EuiFlexItem>
<DurationSparklines />
<DurationSparklines from={from} to={to} />
</EuiFlexItem>
<EuiFlexItem>
<MonitorErrorsCount />
<MonitorErrorsCount from={from} to={to} />
</EuiFlexItem>
<EuiFlexItem>
<MonitorErrorSparklines />
@ -85,7 +89,7 @@ export const MonitorSummary = () => {
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<MonitorDurationTrend />
<MonitorDurationTrend from={from} to={to} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>