[Uptime] Add default chart empty state

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/chart_empty_state.test.tsx

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ChartEmptyState } from '../chart_empty_state';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+describe('ChartEmptyState', () => {
+  it('renders string values', () => {
+    expect(
+      shallowWithIntl(<ChartEmptyState body="This is the body" title="This is the title" />)
+    ).toMatchSnapshot();
+  });
+
+  it('renders JSX values', () => {
+    expect(
+      shallowWithIntl(
+        <ChartEmptyState
+          body={
+            <FormattedMessage
+              id="test.body"
+              defaultMessage="This is the default with a {val} included"
+              values={{ val: <strong>down</strong> }}
+            />
+          }
+          title={<FormattedMessage id="test.title" defaultMessage="The title" />}
+        />
+      )
+    ).toMatchSnapshot();
+  });
+});

x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_empty_state.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiEmptyPrompt, EuiTitle } from '@elastic/eui';
+import React, { FC } from 'react';
+
+interface ChartEmptyStateProps {
+  title: string | JSX.Element;
+  body: string | JSX.Element;
+}
+
+export const ChartEmptyState: FC<ChartEmptyStateProps> = ({ title, body }) => (
+  <EuiEmptyPrompt
+    title={
+      <EuiTitle>
+        <h5>{title}</h5>
+      </EuiTitle>
+    }
+    body={<p>{body}</p>}
+  />
+);

x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx

@@ -13,10 +13,10 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { getChartDateLabel } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../common/graphql/types';
 import { DurationLineSeriesList } from './duration_line_series_list';
-import { DurationChartEmptyState } from './duration_chart_empty_state';
 import { ChartWrapper } from './chart_wrapper';
 import { useUrlParams } from '../../../hooks';
 import { getTickFormat } from './get_tick_format';
+import { ChartEmptyState } from './chart_empty_state';
 
 interface DurationChartProps {
   /**
@@ -102,7 +102,18 @@ export const DurationChart = ({
               <DurationLineSeriesList lines={locationDurationLines} meanColor={meanColor} />
             </Chart>
           ) : (
-            <DurationChartEmptyState />
+            <ChartEmptyState
+              body={
+                <FormattedMessage
+                  id="xpack.uptime.durationChart.emptyPrompt.description"
+                  defaultMessage="This monitor has never been {emphasizedText} during the selected time range."
+                  values={{ emphasizedText: <strong>up</strong> }}
+                />
+              }
+              title={i18n.translate('xpack.uptime.durationChart.emptyPrompt.title', {
+                defaultMessage: 'No duration data available',
+              })}
+            />
           )}
         </ChartWrapper>
       </EuiPanel>