[Uptime]Fix/issue 40584 section headline should be inside panel (elas…

…tic#43468)

* move title inside panel

* fix monitor list title

* update title in each panel and paddings

* update unit tests snapshots

* make section titles symmeteric

* update snapshots

* Add chart wrapper to improve UX experience and padding arounds charts

* removed ping list count

* removed unnecessary spacer

* update test snaps

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

@@ -0,0 +1,42 @@
+/*
+ * 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 React, { FC, Fragment } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart } from '@elastic/eui';
+
+interface Props {
+  height?: string;
+  loading?: boolean;
+}
+
+export const ChartWrapper: FC<Props> = ({ loading = false, height = '100%', children }) => {
+  const opacity = loading === true ? 0.3 : 1;
+
+  return (
+    <Fragment>
+      <div
+        style={{
+          height,
+          opacity,
+          transition: 'opacity 0.2s',
+        }}
+      >
+        {children}
+      </div>
+      {loading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={{ height, marginTop: `-${height}` }}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </Fragment>
+  );
+};

x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/index.ts

@@ -0,0 +1,6 @@
+/*
+ * 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.
+ */
+export { ChartWrapper } from './chart_wrapper';

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

@@ -27,6 +27,7 @@ import {
 import { LocationDurationLine } from '../../../../common/graphql/types';
 import { UptimeSettingsContext } from '../../../contexts';
 import { getColorsMap } from './get_colors_map';
+import { ChartWrapper } from './chart_wrapper';
 
 interface DurationChartProps {
   /**
@@ -42,6 +43,11 @@ interface DurationChartProps {
    * The color to be used for the range duration series.
    */
   rangeColor: string;
+
+  /**
+   * To represent the loading spinner on chart
+   */
+  loading: boolean;
 }
 
 /**
@@ -54,6 +60,7 @@ export const DurationChart = ({
   locationDurationLines,
   meanColor,
   rangeColor,
+  loading,
 }: DurationChartProps) => {
   const { absoluteStartDate, absoluteEndDate } = useContext(UptimeSettingsContext);
   // this id is used for the line chart representing the average duration length
@@ -80,42 +87,44 @@ export const DurationChart = ({
 
   return (
     <React.Fragment>
-      <EuiTitle size="xs">
-        <h4>
-          <FormattedMessage
-            id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
-            defaultMessage="Monitor duration"
-            description="The 'ms' is an abbreviation for milliseconds."
-          />
-        </h4>
-      </EuiTitle>
-      <EuiPanel style={{ height: '170px' }}>
-        <Chart>
-          <Settings
-            xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
-            showLegend={true}
-            legendPosition={Position.Bottom}
-          />
-          <Axis
-            id={getAxisId('bottom')}
-            position={Position.Bottom}
-            showOverlappingTicks={true}
-            tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
-            title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
-              defaultMessage: 'Timestamp',
-            })}
-          />
-          <Axis
-            domain={{ min: 0 }}
-            id={getAxisId('left')}
-            position={Position.Left}
-            tickFormat={d => Number(d).toFixed(0)}
-            title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
-              defaultMessage: 'Duration ms',
-            })}
-          />
-          {lineSeries}
-        </Chart>
+      <EuiPanel paddingSize="m">
+        <EuiTitle size="xs">
+          <h4>
+            <FormattedMessage
+              id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
+              defaultMessage="Monitor duration"
+              description="The 'ms' is an abbreviation for milliseconds."
+            />
+          </h4>
+        </EuiTitle>
+        <ChartWrapper height="400px" loading={loading}>
+          <Chart>
+            <Settings
+              xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
+              showLegend={true}
+              legendPosition={Position.Bottom}
+            />
+            <Axis
+              id={getAxisId('bottom')}
+              position={Position.Bottom}
+              showOverlappingTicks={true}
+              tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
+              title={i18n.translate('xpack.uptime.monitorCharts.durationChart.bottomAxis.title', {
+                defaultMessage: 'Timestamp',
+              })}
+            />
+            <Axis
+              domain={{ min: 0 }}
+              id={getAxisId('left')}
+              position={Position.Left}
+              tickFormat={d => Number(d).toFixed(0)}
+              title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
+                defaultMessage: 'Duration ms',
+              })}
+            />
+            {lineSeries}
+          </Chart>
+        </ChartWrapper>
       </EuiPanel>
     </React.Fragment>
   );