From 47949709eea3d6d2a872f72fc2abd6348cbb30c6 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 3 Nov 2022 16:29:22 +0100 Subject: [PATCH] [Synthetics] Show to date monitor summary for new monitors (#144456) --- .../hooks/use_earliest_start_data.ts | 35 +++++++++++++ .../monitor_summary/availability_panel.tsx | 7 +-- .../monitor_error_sparklines.tsx | 11 ++-- .../monitor_summary/monitor_errors_count.tsx | 2 +- .../monitor_summary/monitor_summary.tsx | 50 +++++++++++++------ .../public/apps/synthetics/routes.tsx | 10 ++-- 6 files changed, 85 insertions(+), 30 deletions(-) create mode 100644 x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_earliest_start_data.ts diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_earliest_start_data.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_earliest_start_data.ts new file mode 100644 index 0000000000000..decb2a5294cc1 --- /dev/null +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_earliest_start_data.ts @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useFetcher } from '@kbn/observability-plugin/public'; +import { useParams } from 'react-router-dom'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { useMemo } from 'react'; +import moment from 'moment'; +import { useMonitorQueryId } from './use_monitor_query_id'; + +export const useEarliestStartDate = () => { + const monitorId = useMonitorQueryId(); + + const { monitorId: soId } = useParams<{ monitorId: string }>(); + + const { savedObjects } = useKibana().services; + + const { data: dataFromSO, loading } = useFetcher(async () => { + return savedObjects?.client?.get('synthetics-monitor', soId); + }, [monitorId]); + + return useMemo(() => { + if (dataFromSO?.createdAt) { + const diff = moment(dataFromSO?.createdAt).diff(moment().subtract(30, 'day'), 'days'); + if (diff > 0) { + return { from: dataFromSO?.createdAt, loading }; + } + } + return { from: 'now-30d/d', loading }; + }, [dataFromSO?.createdAt, loading]); +}; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx index 7838bc3dd616a..eaab0dfb92eff 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/availability_panel.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ReportTypes } from '@kbn/observability-plugin/public'; -import { useParams } from 'react-router-dom'; import { ClientPluginsStart } from '../../../../../plugin'; import { KpiWrapper } from './kpi_wrapper'; +import { useMonitorQueryId } from '../hooks/use_monitor_query_id'; interface AvailabilityPanelprops { from: string; @@ -24,7 +24,8 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => { observability: { ExploratoryViewEmbeddable }, }, } = useKibana(); - const { monitorId } = useParams<{ monitorId: string }>(); + + const monitorId = useMonitorQueryId(); return ( @@ -37,7 +38,7 @@ export const AvailabilityPanel = (props: AvailabilityPanelprops) => { name: 'Monitor availability', dataType: 'synthetics', selectedMetricField: 'monitor_availability', - reportDefinitions: { config_id: [monitorId] }, + reportDefinitions: { 'monitor.id': [monitorId] }, }, ]} /> diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx index 731b623c65e1b..515d338b4c33a 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_error_sparklines.tsx @@ -11,7 +11,11 @@ import { useParams } from 'react-router-dom'; import { useEuiTheme } from '@elastic/eui'; import { ClientPluginsStart } from '../../../../../plugin'; -export const MonitorErrorSparklines = () => { +interface Props { + from: string; + to: string; +} +export const MonitorErrorSparklines = (props: Props) => { const { observability } = useKibana().services; const { ExploratoryViewEmbeddable } = observability; @@ -29,10 +33,7 @@ export const MonitorErrorSparklines = () => { attributes={[ { seriesType: 'area', - time: { - from: 'now-30d/d', - to: 'now', - }, + time: props, reportDefinitions: { 'monitor.id': [monitorId] }, dataType: 'synthetics', selectedMetricField: 'state.id', diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx index 30a220f3f10b8..850aec1a9d4a1 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx @@ -32,7 +32,7 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => { attributes={[ { time: props, - reportDefinitions: { config_id: [monitorId] }, + reportDefinitions: { 'monitor.id': [monitorId] }, dataType: 'synthetics', selectedMetricField: 'monitor_errors', name: 'synthetics-series-1', diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx index 1b19d3ca5fdf7..11ff2313c706f 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx @@ -13,10 +13,11 @@ import { EuiFlexItem, EuiText, EuiSpacer, - useEuiTheme, + EuiLoadingSpinner, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { useEarliestStartDate } from '../hooks/use_earliest_start_data'; import { MonitorErrorSparklines } from './monitor_error_sparklines'; import { DurationSparklines } from './duration_sparklines'; import { MonitorDurationTrend } from './duration_trend'; @@ -30,17 +31,20 @@ import { TestRunsTable } from './test_runs_table'; 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 { from, loading } = useEarliestStartDate(); const to = 'now'; + if (loading) { + return ; + } + + const dateLabel = from === 'now-30d/d' ? LAST_30_DAYS_LABEL : TO_DATE_LABEL; + return ( <> - +

{MONITOR_DETAILS_LABEL}

 @@ -48,10 +52,20 @@ export const MonitorSummary = () => { - - -

{LAST_30DAYS_LABEL}

- + + + + +

{SUMMARY_LABEL}

+ + + + + {dateLabel} + + + + @@ -69,15 +83,15 @@ export const MonitorSummary = () => { - + - - + +

{DURATION_TREND_LABEL}

@@ -85,7 +99,7 @@ export const MonitorSummary = () => { - {LAST_30_DAYS_LABEL} + {dateLabel} @@ -116,8 +130,12 @@ const MONITOR_DETAILS_LABEL = i18n.translate('xpack.synthetics.detailsPanel.moni defaultMessage: 'Monitor details', }); -const LAST_30DAYS_LABEL = i18n.translate('xpack.synthetics.detailsPanel.last30Days', { - defaultMessage: 'Last 30 days', +const SUMMARY_LABEL = i18n.translate('xpack.synthetics.detailsPanel.summary', { + defaultMessage: 'Summary', +}); + +const TO_DATE_LABEL = i18n.translate('xpack.synthetics.detailsPanel.toDate', { + defaultMessage: 'To date', }); const DURATION_TREND_LABEL = i18n.translate('xpack.synthetics.detailsPanel.durationTrends', { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx index ebc7bd197e0f9..be85e9bdcc08d 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx @@ -112,7 +112,7 @@ const getRoutes = ( ), dataTestSubj: 'syntheticsMonitorDetailsPage', - pageHeader: getMonitorSummaryHeader(history, syntheticsPath, 'summary'), + pageHeader: getMonitorSummaryHeader(history, syntheticsPath, 'overview'), }, { title: i18n.translate('xpack.synthetics.monitorHistory.title', { @@ -329,7 +329,7 @@ const getRoutes = ( const getMonitorSummaryHeader = ( history: ReturnType, syntheticsPath: string, - selectedTab: 'summary' | 'history' | 'errors' + selectedTab: 'overview' | 'history' | 'errors' ): EuiPageHeaderProps => { // Not a component, but it doesn't matter. Hooks are just functions const match = useRouteMatch<{ monitorId: string }>(MONITOR_ROUTE); // eslint-disable-line react-hooks/rules-of-hooks @@ -367,10 +367,10 @@ const getMonitorSummaryHeader = ( ], tabs: [ { - label: i18n.translate('xpack.synthetics.monitorSummaryTab.title', { - defaultMessage: 'Summary', + label: i18n.translate('xpack.synthetics.monitorOverviewTab.title', { + defaultMessage: 'Overview', }), - isSelected: selectedTab === 'summary', + isSelected: selectedTab === 'overview', href: `${syntheticsPath}${MONITOR_ROUTE.replace(':monitorId?', monitorId)}${search}`, }, {