[Uptime]Fix/issue 40584 section headline should be inside panel (#43468) (#44879)

* 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/__tests__/__snapshots__/monitor_charts.test.tsx.snap

@@ -3,14 +3,9 @@
 exports[`MonitorCharts component renders the component without errors 1`] = `
 <Fragment>
   <EuiFlexGroup>
-    <EuiFlexItem
-      style={
-        Object {
-          "height": 400,
-        }
-      }
-    >
+    <EuiFlexItem>
       <DurationChart
+        loading={false}
         locationDurationLines={
           Array [
             Object {
@@ -73,6 +68,7 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
         absoluteEndDate={1322903730000}
         absoluteStartDate={1322903730000}
         dangerColor="#bd271e"
+        height="400px"
         successColor="#017d73"
         variables={
           Object {

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap

@@ -2,13 +2,10 @@
 
 exports[`PingList component renders sorted list without errors 1`] = `
 <Fragment>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-    responsive={false}
-  >
-    <EuiFlexItem
-      grow={false}
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
   >
     <EuiTitle
       size="xs"
@@ -21,22 +18,9 @@ exports[`PingList component renders sorted list without errors 1`] = `
         />
       </h4>
     </EuiTitle>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiBadge
-        color="hollow"
-      >
-        9231
-      </EuiBadge>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiPanel
-    grow={true}
-    hasShadow={false}
-    paddingSize="s"
-  >
+    <EuiSpacer
+      size="s"
+    />
     <EuiFlexGroup
       justifyContent="spaceBetween"
     >

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/snapshot.test.tsx.snap

@@ -2,6 +2,11 @@
 
 exports[`Snapshot component renders without errors 1`] = `
 <Fragment>
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
+  >
     <EuiTitle
       size="xs"
     >
@@ -13,19 +18,15 @@ exports[`Snapshot component renders without errors 1`] = `
         />
       </h5>
     </EuiTitle>
-  <EuiPanel
-    grow={true}
-    hasShadow={false}
-    paddingSize="s"
-  >
     <EuiFlexGroup
       direction="column"
+      gutterSize="m"
     >
       <EuiFlexItem
         grow={false}
       >
         <EuiSpacer
-          size="s"
+          size="xs"
         />
       </EuiFlexItem>
       <EuiFlexItem>

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,6 +87,7 @@ export const DurationChart = ({
 
   return (
     <React.Fragment>
+      <EuiPanel paddingSize="m">
         <EuiTitle size="xs">
           <h4>
             <FormattedMessage
@@ -89,7 +97,7 @@ export const DurationChart = ({
             />
           </h4>
         </EuiTitle>
-      <EuiPanel style={{ height: '170px' }}>
+        <ChartWrapper height="400px" loading={loading}>
           <Chart>
             <Settings
               xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
@@ -116,6 +124,7 @@ export const DurationChart = ({
             />
             {lineSeries}
           </Chart>
+        </ChartWrapper>
       </EuiPanel>
     </React.Fragment>
   );

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

@@ -24,6 +24,7 @@ import { getColorsMap } from './get_colors_map';
 import { getChartDateLabel } from '../../../lib/helper';
 import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
 import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
+import { ChartWrapper } from './chart_wrapper';
 
 export interface SnapshotHistogramProps {
   /**
@@ -42,6 +43,11 @@ export interface SnapshotHistogramProps {
    * The color value that is used to represent down checks.
    */
   dangerColor: string;
+
+  /**
+   * Height is needed, since by defauly charts takes height of 100%
+   */
+  height?: string;
 }
 
 interface SnapshotHistogramQueryResult {
@@ -56,6 +62,8 @@ export const SnapshotHistogramComponent = ({
   dangerColor,
   successColor,
   data,
+  loading = false,
+  height,
 }: Props) => {
   if (!data || !data.histogram)
     /**
@@ -108,6 +116,7 @@ export const SnapshotHistogramComponent = ({
   const upSpecId = getSpecId(upMonitorsId);
   return (
     <Fragment>
+      <EuiPanel paddingSize="m">
         <EuiTitle size="xs">
           <h5>
             <FormattedMessage
@@ -116,9 +125,12 @@ export const SnapshotHistogramComponent = ({
             />
           </h5>
         </EuiTitle>
-      <EuiPanel paddingSize="s" style={{ height: 170 }}>
+        <ChartWrapper height={height} loading={loading}>
           <Chart>
-          <Settings xDomain={{ min: absoluteStartDate, max: absoluteEndDate }} showLegend={false} />
+            <Settings
+              xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
+              showLegend={false}
+            />
             <Axis
               id={getAxisId(
                 i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
@@ -170,6 +182,7 @@ export const SnapshotHistogramComponent = ({
               yScaleType={ScaleType.Linear}
             />
           </Chart>
+        </ChartWrapper>
       </EuiPanel>
     </Fragment>
   );

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

@@ -32,8 +32,15 @@ interface MonitorChartsProps {
 
 type Props = MonitorChartsProps & UptimeGraphQLQueryProps<MonitorChartsQueryResult>;
 
-export const MonitorChartsComponent = (props: Props) => {
-  const { data, mean, range, monitorId, dateRangeStart, dateRangeEnd } = props;
+export const MonitorChartsComponent = ({
+  data,
+  mean,
+  range,
+  monitorId,
+  dateRangeStart,
+  dateRangeEnd,
+  loading,
+}: Props) => {
   if (data && data.monitorChartsData) {
     const {
       monitorChartsData: { locationDurationLines },
@@ -47,11 +54,12 @@ export const MonitorChartsComponent = (props: Props) => {
     return (
       <Fragment>
         <EuiFlexGroup>
-          <EuiFlexItem style={{ height: 400 }}>
+          <EuiFlexItem>
             <DurationChart
               locationDurationLines={locationDurationLines}
               meanColor={mean}
               rangeColor={range}
+              loading={loading}
             />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -61,6 +69,7 @@ export const MonitorChartsComponent = (props: Props) => {
               successColor={colors.success}
               dangerColor={colors.danger}
               variables={{ dateRangeStart, dateRangeEnd, monitorId }}
+              height="400px"
             />
           </EuiFlexItem>
         </EuiFlexGroup>

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap

@@ -2,6 +2,11 @@
 
 exports[`MonitorList component renders a no items message when no data is provided 1`] = `
 <Fragment>
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
+  >
     <EuiTitle
       size="xs"
     >
@@ -13,11 +18,9 @@ exports[`MonitorList component renders a no items message when no data is provid
         />
       </h5>
     </EuiTitle>
-  <EuiPanel
-    grow={true}
-    hasShadow={false}
-    paddingSize="s"
-  >
+    <EuiSpacer
+      size="s"
+    />
     <EuiBasicTable
       columns={
         Array [
@@ -76,6 +79,11 @@ exports[`MonitorList component renders a no items message when no data is provid
 
 exports[`MonitorList component renders the monitor list 1`] = `
 <Fragment>
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
+  >
     <EuiTitle
       size="xs"
     >
@@ -87,11 +95,9 @@ exports[`MonitorList component renders the monitor list 1`] = `
         />
       </h5>
     </EuiTitle>
-  <EuiPanel
-    grow={true}
-    hasShadow={false}
-    paddingSize="s"
-  >
+    <EuiSpacer
+      size="s"
+    />
     <EuiBasicTable
       columns={
         Array [

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

@@ -5,6 +5,7 @@
  */
 
 import { EuiBasicTable, EuiPanel, EuiTitle, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { get } from 'lodash';
@@ -91,6 +92,7 @@ export const MonitorListComponent = (props: Props) => {
 
   return (
     <Fragment>
+      <EuiPanel>
         <EuiTitle size="xs">
           <h5>
             <FormattedMessage
@@ -99,7 +101,7 @@ export const MonitorListComponent = (props: Props) => {
             />
           </h5>
         </EuiTitle>
-      <EuiPanel paddingSize="s">
+        <EuiSpacer size="s" />
         <EuiBasicTable
           error={errors ? formatUptimeGraphQLErrorList(errors) : errors}
           loading={loading}

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

@@ -182,10 +182,8 @@ export const PingListComponent = ({
     onUpdateApp();
   }, [selectedOption]);
   let pings: Ping[] = [];
-  let total: number = 0;
   if (data && data.allPings && data.allPings.pings) {
     pings = data.allPings.pings;
-    total = data.allPings.total;
     const hasStatus: boolean = pings.reduce(
       (hasHttpStatus: boolean, currentPing: Ping) =>
         hasHttpStatus || !!get(currentPing, 'http.response.status_code'),
@@ -233,8 +231,7 @@ export const PingListComponent = ({
 
   return (
     <Fragment>
-      <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
+      <EuiPanel>
         <EuiTitle size="xs">
           <h4>
             <FormattedMessage
@@ -243,14 +240,7 @@ export const PingListComponent = ({
             />
           </h4>
         </EuiTitle>
-        </EuiFlexItem>
-        {!!total && (
-          <EuiFlexItem grow={false}>
-            <EuiBadge color="hollow">{total}</EuiBadge>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-      <EuiPanel paddingSize="s">
+        <EuiSpacer size="s" />
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiFlexGroup>

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

@@ -26,6 +26,7 @@ interface SnapshotQueryResult {
 export const SnapshotComponent = ({ data }: UptimeGraphQLQueryProps<SnapshotQueryResult>) =>
   data && data.snapshot ? (
     <React.Fragment>
+      <EuiPanel>
         <EuiTitle size="xs">
           <h5>
             <FormattedMessage
@@ -34,10 +35,9 @@ export const SnapshotComponent = ({ data }: UptimeGraphQLQueryProps<SnapshotQuer
             />
           </h5>
         </EuiTitle>
-      <EuiPanel paddingSize="s">
-        <EuiFlexGroup direction="column">
+        <EuiFlexGroup direction="column" gutterSize="m">
           <EuiFlexItem grow={false}>
-            <EuiSpacer size="s" />
+            <EuiSpacer size="xs" />
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiFlexGroup justifyContent="spaceEvenly" gutterSize="s">

x-pack/legacy/plugins/uptime/public/pages/overview.tsx

@@ -129,6 +129,7 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
               successColor={colors.success}
               dangerColor={colors.danger}
               variables={sharedProps}
+              height="120px"
             />
           </EuiFlexItem>
         </EuiFlexGroup>