[Synthetics] Show to date monitor summary for new monitors (#144456)

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]);
+};

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<ClientPluginsStart>();
-  const { monitorId } = useParams<{ monitorId: string }>();
+
+  const monitorId = useMonitorQueryId();
 
   return (
     <KpiWrapper>
@@ -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] },
           },
         ]}
       />

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<ClientPluginsStart>().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',

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',

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,28 +31,41 @@ 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 <EuiLoadingSpinner size="xl" />;
+  }
+
+  const dateLabel = from === 'now-30d/d' ? LAST_30_DAYS_LABEL : TO_DATE_LABEL;
+
   return (
     <>
       <EuiFlexGroup gutterSize="m">
         <EuiFlexItem grow={1}>
-          <EuiPanel hasShadow={false} hasBorder>
+          <EuiPanel hasShadow={false} hasBorder paddingSize="m">
             <EuiTitle size="xs">
               <h3>{MONITOR_DETAILS_LABEL}</h3>
             </EuiTitle>
             <MonitorDetailsPanel />
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem grow={2}>
-          <EuiPanel hasShadow={false} hasBorder paddingSize="s" css={{ height: 158 }}>
-            <EuiTitle size="xs">
-              <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{LAST_30DAYS_LABEL}</h3>
-            </EuiTitle>
+          <EuiPanel hasShadow={false} hasBorder paddingSize="m" css={{ height: 158 }}>
+            <EuiFlexGroup alignItems="center" gutterSize="m">
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="xs">
+                  <h3>{SUMMARY_LABEL}</h3>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText color="subdued" size="s">
+                  {dateLabel}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
                 <AvailabilityPanel from={from} to={to} />
@@ -69,23 +83,23 @@ export const MonitorSummary = () => {
                 <MonitorErrorsCount from={from} to={to} />
               </EuiFlexItem>
               <EuiFlexItem>
-                <MonitorErrorSparklines />
+                <MonitorErrorSparklines from={from} to={to} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
           <EuiSpacer size="m" />
           <EuiFlexGroup gutterSize="m">
             <EuiFlexItem>
-              <EuiPanel hasShadow={false} hasBorder>
-                <EuiFlexGroup alignItems="center">
+              <EuiPanel hasShadow={false} paddingSize="m" hasBorder>
+                <EuiFlexGroup alignItems="center" gutterSize="m">
                   <EuiFlexItem grow={false}>
                     <EuiTitle size="xs">
                       <h3>{DURATION_TREND_LABEL}</h3>
                     </EuiTitle>
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiText color="subdued" size="s">
-                      {LAST_30_DAYS_LABEL}
+                      {dateLabel}
                     </EuiText>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -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', {

x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx

@@ -112,7 +112,7 @@ const getRoutes = (
         </MonitorDetailsPage>
       ),
       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<typeof useHistory>,
   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}`,
       },
       {